So you’ve met with your client and discovered everything there is to know about them, then you went away and worked out your information architecture. Now all you have to do is take your exploratory work and design your interface.
It’s important to remember that design is about communication. As a designer, it’s your job to create something which is aesthetically pleasing, usable, accessible and provides useful and interesting content. The design should work as a channel between the user and the information they’re trying to find and should not be an impediment. We’ve all seen web sites that look stunning but require a PhD to find your way around, or web sites that have great information which is so badly presented that the site is just painful to use.
So this step is the one where you actually start to do some “designy” work. And where do you do that design work? Photoshop? Illustrator? Fireworks? Gimp? Nope. None of the above. At least not if you want to get some ideas out quickly. A blank sheet of paper and a pencil lets you focus on the design without having to worry too much about the technology behind it. Realistically you could sketch out many more ideas on paper in ten minutes than you could layout on the computer in the same time. A cheap notebook or a ream of photocopy paper is all you need, don’t worry about having a moleskine (unless you really want one) or other fancy notebook.
Based on your information architecture which you’ve worked out in the last step of the process, sketch out the areas needed on your web page. Where will you place the logo, the navigation, main content, side bars? How large will they be in relation to each other?
Wireframe sketch by Mike Rohde
There are now what can be considered bread and butter web layouts which we have gotten used to using and seeing. Most web sites have the following sections:
1. Containing Block
Every web page has a container. Often the container is set up using a div tag with centered alignment so that no matter what resolution the user’s monitor is, the content of the web site always sits in the middle of the screen. The container holds all the elements on the page and stops them from drifting beyond the bounds of the browser window and off into empty space. You can set the width of this container to be fluid, meaning it expands to fill the width of browser window; or fixed, so that the content is the same width no matter what size the window is.
2. Logo
Web site branding should include the company logo and colors that exist across the company’s existing forms of marketing, such as business cards and brochures. If there is no existing logo, then you may be required to create a design for this too. Logo design is a big task in itself. Usually the logo appearing on a web site is also a link back to the home page of the site.
3. Navigation Bar
The navigation system for a site should be easy to use and easy to find. Regular web users expect to see the navigation at the top of the page.
4. Main Content
Keep the main content as a focal point on the page because that’s what your web visitors are looking for. If they don’t find it quickly they will leave and not come back.
5. Sidebars
Sidebars provide an area for extra or sub-navigation. If your site is very simple you may not need to put a sidebar in your layout. As a site becomes more complex, sidebars are useful for providing links that bring visitors deeper into your site. On blogs, you’ll frequently see sidebars with Recent Posts, Archives, Recent Comments which can help your visitors easily explore your site. If you’re putting advertising on your site, the sidebars often contain ad blocks.
6. Footer
Located at the bottom of the page, the footer usually contains copyright, contact, and legal information, as well as a few links to the main sections of the site. Footers have become more elaborate over time and designers have become very imaginative with background graphics. By separating the end content from the bottom of the browser window, the footer should indicate to users that they’re at the bottom of the page.
Image by Mike Rohde
These are the main blocks that tend to appear on web sites today. You might like to create a layout that uses all or some of these blocks. By sketching out your layout in pencil you can avoid problems that may arise when you take the computer.
"
No comments:
Post a Comment