Site Menu
|
Visual Design & Usability - Lesson 6By now you know a number of things about your site: why you are building it, who your intended audience is, what will be on the site (i.e., the content), and how your website will be structured. You are now ready to work on the visual design. This is often the most satisfying aspect of website design. The goal of this lesson is to take your site's structure and map it onto a visual design. The first step is to make layout grids for every page of your website that define the site structure and organization. The layout grids should represent the usage of space on each webpage. Sketches that you will then create will give you a clearer picture of the general look and feel of the website. Layout grids and design sketches together are known as page mock-ups. Page mock-ups are used to construct web-based prototypes. Visual design is an iterative process and therefore you will need to revise your design several times. At this point, you will need the help of graphic designers, art directors, creative directors, and your production crew. Have a look at the site structure listing you have created and make a list of all the possible page types that you could have on your website. Individual pages within the site should be very similar in form across all the major sections. You will need to create two or three generic page types. Once you have designed these, you can use them as the basis for all the other page types on your website. On a sketchpad or graphics program, create a rectangle representing an individual page and block out sections within this rectangle that would represent elements of your webpage. Start with content as it is the most important element of your website. This may be a little tricky, as you won't yet know how much content you will actually have and what else will be on the page. Review the content inventory and try coming up with an approximate amount of space required on each page for content. Some of the elements that you should consider integrating into your layout grid should include branding, advertising, sponsorship, navigation, page titles, header graphics and footers - which include copyrights. You will need to plot out space for global and local navigation and integrate other aspects of the website that may not be part of the website structure. Branding plays a prominent role on every page because it informs users that they are still on your website. A common place for branding is on the upper left-hand corner of the page. Global navigation must be consistent across every page of the site. Local navigation systems can change depending on the content, but try to be as consistent as possible. The next step would be to generate sketches. Spend as much time as you have allocated to this part of the design process without wasting too much time. Sketches don't necessarily need to represent structure or organization but they must represent the elements of your page. The next step is to create page mock-ups by integrating the design sketches with the layout grids. These page mock-ups should be as close to what the completed pages will look like as possible. Cut and paste the sketch pieces on their allocated parts in the layout grids. If possible create your page mock-ups in HTML. Page mock-ups are the basis of web-based prototypes. If your site is small enough they will form the basis of your actual website. Make sure that your team approves the page mock-ups. The Design DocumentYou have now completed the design phase of building your e-business website. You have all the materials you need to construct a prototype. Create a new chapter in your design document called Visual Design. Document the layout grids including all the diagrams you made. Compile the design sketches as a separate section. The web mock-ups can also be included in your design document separately. Finally include snapshots of your web-based prototype if you can. The now complete design document should provide a thorough description of your website's design. When the time comes, it will be useful in constructing the site, adding content, and in revising the site.This section of your design document should contain the following: 5.0 Visual Design
5.2 Design Sketches 5.3 Page Mock-ups 5.4 Web Based Prototype Congratulations on completing the design phase of your e-business website. You are well on your way to e-business success! |