Mr. Beaird discusses the process of creating a comp (comprehensive dummy) or a comprehensive mock-up of the web page layout. There are two steps to creating the comp: discovery and implementation. He discusses how he prepares for a meeting with the client and discovering what the company does. When he meets with the client he has a set of questions composed to better get a feel for what the company does and what they would like out of their web site.
Implementation for Mr. Beaird entails taking what he has learned about the company and uses that to create a design. He then begins designing using paper and a marker and produces a few types of layouts. When he decides that he likes one, he then uses the rectangle tool in Photoshop to block off the areas that he has created on paper. Mr. Beaird tries out different types of foreground and background colors until he has a color scheme that he likes.
The author then discusses what constitutes "good web design".
- Designs should be functional as well as aesthetically pleasing in order reach users and hold their interest. It is important to keep in mind that users like design but stay for the content.
- Users should easily be able to navigate the site. The navigation bar on the main page should be apparent and visible on the page with each link containing a title description. A change in the look of the navigation field and an indication of the active page it corresponds to should occur on a mouse rollover. Secondary navigation, search fields and outgoing links should be easily found but not be the dominant emphasis of your page The content should be the dominating feature of your web page so that users can concentrate on the information provided.
- Users should be able perceive that each page is part of the site. This is done by creating a site with a theme or style that is found in each page thereby bringing the design together. An example of this would be using the same navigation bar throughout your site or using the same color palette within your site.
- Web pages are composed of container blocks with hold text or images (the content). The width of the container can be either liquid- it can fill the width of the browser window or fixed- the width will appear the same even when using differing sized windows.
- The logo represents the identity of a company. The identity block contains the company logo or name and should always be situated at the top of the web site. This is a way of retaining brand recognition.
- The navigation system should be located at the top of the page and above the fold; making it easy to find. It should also be simple to use.
- The main content block needs to be the focal point of the design; it is then easily found by users.
- The footer of the page is located at the bottom of the page and contains such information as the copyright, contact, legal information and some links to the main portions of the site. The footer also is used to indicate that users have reached the bottom of the page.
- Whitespace or negative space is any portion of the page not cover with text or images. This space is important for it helps to form balance and unity.
Grid theory is used to create proportion in graphic design. The golden ratio or divine proportion is a mathematical pattern that occurred in nature so often that it was thought to be inspired by the divine. The basic concept is that a line can be bisected utilizing the golden ratio; dividing the length by 1.62. The divine proportion was used by artists in the Renaissance to create proportionate compositions.
Today the rule of thirds, a simplistic interpretation of the golden rule, is used to divide compositions without using a calculator. The author then describes a step by step use of the rule of thirds in composing a site using a paper divided into grids. The largest block is where he places the content block which takes up two-thirds of the layout in the lower right hand side page. The navigation block is placed in the middle third of the page in the left-hand column. The textual portion of the identity block inserted over the left side of the content and the identity image is placed over the menu. The copyright is situated below the content, in the right-hand column of the grid. Mr. Beaird then plays around with the different types elements and the arrangement of each. He cautions against lining everything up along a particular line because it is not stimulating visually. The author recommends pushing part of the block over the line to create a proportioned and interesting layout.
Balance is when components in a layout pull an equal amount of weight on the page. There are two types of visual balance:
- Symmetrical balance is the result of design elements being the same on either side of an axis; they are situated in the same position and proportion like a mirror image. This is known as horizontal symmetry and is used to center content or create a balance between columns. There are two other types of symmetry however they are not usually used o the web; they are used in creating logos or in print design. Bilateral symmetry is when a layout is balanced on multiple axes. Radical symmetry is when components are equally spaced around a major point.
- Asymmetrical balance (informal balance) involves items of different sizes, shape, tone or being placed in such a way that they form a balance (equal weight on the page). This type of balance is more interesting and is used more often in web design. Larger columns are very often lighter in color to make the text stand out in the main content portion of the page.
Unity is how the various elements of the page work together to create a whole. The whole web page must work as unit in order for the layout to be aesthetically pleasing.
Proximity refers to the placement of objects in a layout and the way they work together to create a unit. When objects are placed close together it creates a focal point where eyes are drawn to. Margins and padding is used to achieve proximity in web design.
Repetition refers to when similar items are placed together to form a group. It is the repetition of similar elements that creates a cohesive web site by bringing the design together. An example of repetition is the use of a bulleted list.
Emphasis or dominance is the idea of drawing the viewer to a particular element. One way to create this effect is to make an element a focal point; where something in a composition causes the viewer to focus on a certain point on the page.
Placement is important in web design because the direct center is the point where viewers will first look. It is the most effective location to create emphasis.
Continuance is the idea that our eyes will continue along a path until a dominant object appears. Continuance is often used by web designers to unify layouts.
Isolation is method of placement used to create emphasis.
Contrast is when differing graphics are used to produce emphasis on a page. The greater the difference in a graphic component is compared to the rest of the layout, the more the component will stand out.
Proportion is another way of creating emphasis. Proportion is used by changing the scale of objects. This is especially effective when an object is larger or smaller than it appears in real life thereby catching the eye of the viewer.
The author then discusses common types of layouts:
- Left-column navigation is the common type because the main navigation block is placed on the left side of the page. This is done because western cultures read from left to right. The only problem is the this type of tends to look similar and is not terribly creative.
- Right-column navigation is when the main navigation block is placed on the right-hand side of the page. The plus to this layout is that the main content is the first thing seen on the page.
- Three-column navigation is three-column layout where center column is the widest and two smaller navigation columns are situated on both sides. This is a good design layout when there is a great deal of navigation, smaller portions of content or there is advertising to add. In this type of layout it is important to keep in mind that there needs to be enough whitespace or the page will be over crowded and hard to read.
Mr. Beaird recommends using a morgue file when working on a large project. It involves cutting out and printing anything with the theme that you are working on. For instance if you are working on a car web site you would find anything with cars. Another way of utilizing resources in this way would be to search through sites and then to recognize the common concepts and popular design elements.
One popular trend being used today is the expanded footer navigation where contact information, expanded site navigation and content extras are being placed.
Another trend is a new take on three-column designs where content is placed first on the far left-hand side of the page. Most three-column designs are only used for the main page and the accompanying pages are two columns. This is done so that there is an ease in transition from one page to the next since one can just expand the content column.
Mr. Beaird mentions that he has designed more fixed-width designs than liquid-width. This is interesting since Matthew MacDonald, the writer of our other textbook Creating Web Sites: The Missing Manual recommends using liquid-width designs so that the user has more control of what they are viewing.
Mr. Beaird then discusses an alternative to the two widths known as a variable fixed-width layout. If adjust your browser from 800 pixels to 1024 pixels wide, the right-hand column divides into a third column.
The next issue discussed is the idea of designing according to the typical screen resolution of 800 x 600 pixels. In the end, the author recommends designing for the end user. The ideal is for the user to not have to scroll from left to right to read content.
No comments:
Post a Comment