• Looking for a Top Flight Web Development Team?
  • Professional & Affordable Web Design Services
  • Shaping Imaginations using Cutting-Edge Technologies
  • Dynamic Solutions for Dynamic Businesses
  • Analysis.. then Solutions with a High Tech Flair
  • Satisfied Customers In Over 30 Countries
  • National Association of
    Accredited Internet Professionals
  • (561)948-6074
Custom Website Designs
Visual Design of Web Screens

Visual Design of Web Screens

A Web page is a collection of digital media elements that resides in a programmable framework, it also is a screen. The term “screen” refers to the fact that Web pages are presented on screen and not on paper.


Web screens need to be built; initial design needs to be created before Web coding can be done. The goal when designing screens in an image editing application is to create only the graphical elements and layout. Concentrate on graphical elements only, leaving space for Web text (browser based text) and multimedia components.


Screens can be created in any image editing program that optimizes and outputs Web pages. Keep in mind, the screens you design will become Web pages in your site.


The reasons we create screens in an image editing application and use this technique are many.


We use a two-dimensional design program to create Web pages because it provides an accurate view of what our page looks like in size and color, allows us free-form design with type and graphics, and most importantly, because the screens we create will be composed of layers, we can edit graphical content pages quickly and easily. In this web design tutorial, I will use Adobe Photoshop and Macromedia Fireworks to create screens.


The screens you create in Fireworks become Web pages in the following manner. Screens get optimized, sliced, and exported into HTML tables using Macromedia Fireworks. The resulting Web pages with tables are opened in Dreamweaver.


Then, the tables can be converted to layers or kept as tables. The tables hold all the graphics. More tables or layers are added for the text elements and additional graphics if needed.


An easy technique is to use layers placed to float on top of the page. Layers can be positioned easily. Tables, when they are freely placed on Web pages, may need added HTML editing savvy and can be more challenging than simply using layers. Especially, when you are new to using Macromedia Dreamweaver.


Tables are easier to manipulate when they are inserted into layers. This approach is a useful technique for positioning elements freely in a Web page. The screens we create may change during the design process.


We may improve something or realize that something is not quite right. That’s okay, design is a dynamic process.


Also, we will not be creating all pages using the Fireworks screen slice techniques; we will be usi ng Dreamweaver to create Web pages “from scratch”. We will also touch on static page design combined with some simple JavaScript and HTML tweaks.


I approached the tutorials for Web pages this way because I wanted to provide multiple techniques for assembling Web pages. You will adopt the techniques which you feel most confident using.


Previously, you completed some storyboards that represent your Web pages in very simple sketches. When you create your screens, you will refer to the storyboards and begin to create the pages that you planned out during the visual design process.


To review, the basic components that you should have included in your storyboards are:

• Image location

• Text

• Motion graphic and animation locations

• List audio track or sounds to be played and explain how will be controlled and positioned

• Navigation, sub navigation (refer to your content outline and flowchart)

• Sketch pop-up windows with sub-navigation, captions, and close but- tons) When designing screens, think about these elements and begin to design the graphics and layout of your Web pages. For Web text and other Web development items, simply leave a space for anticipated elements. For ex- ample, you would leave space for a paragraph of HTML text in the body of the page.


Later, in Macromedia Dreamweaver, you would type in the text using a Layer. Only graphical text will be designed into the screens in the image editing application. Any text that needs to be edited or searched should be HTML- based and inserted into the page after the screen design is created and optimized for the Web. We add the text in Dreamweaver.

Pop-Up Windows

Pop-up windows are also screens, they are Web pages. If your pop-up windows are simple in content, you can create them as Web pages in Macromedia Dreamweaver. If they carry lots of graphics or graphical buttons, then you may want to use an image editing program to create a Web page screen.


You cannot create Web graphics in Macromedia Dreamweaver. Dreamweaver is used only for Web page authoring. We will talk about pop up windows in detail later in this text. Text Decisions There are two kinds of text in Web pages.


• Web text or HTML text is editable text that can be seen in browsers using limited system resources including font, size, and color. Web text is processed by HTML and can be explicitly controlled by usi ng Cascading Style Sheets (CSS). Web text should be used for text that will have future updates and also for searchable text. All text in a Web page can be HTML text.


Many sites employ only HTML text to increase performance, searchability, and to make future edits easier. For the novice graphics person, starting with Web pages that are less populated and use HTML text as opposed to graphical text is an easier approach.


• Graphical text is a typographic image. It is a bitmap graphic that uses type. It is an image, not character based text in the digital form. In a communication form and from a design standpoint, graphical text is very valuable to attaining style, identity, and visual impact. Graphical text is used mostly in Web page headers, Web logos, buttons, icons, and motion graphics.


The best sites employ both HTML text and graphical text. HTML text is almost always used for updateable information and graphi- cal text is used for items that do not change. That is the approach we will take in the design of the Web portfolio we work through in this web design tutorial.


to Top