 |
If you have to remember two things about Layout, remember to: |
|
|
Guide the user through a site with color hierarchy and Offer a consistent Navigation that the user can comfortably use through out the site . | |
|
|
Lynda Weiman main motto. Read "Designing Web graphics.4" if you want to understand more about the art and science of creating web graphics. |
When Designing a website, as supposed to writing a book, implies much more than its content.
You are creating a system (and organization, a structure) for displaying information. You can follow the current generic system of accessing information, or you can invent a whole new way, but you are never going to avoid having to set up your Navigation System.
NAVIGATION
Developing a navigation system can be thought of as creating an educational system for your end users.
You are educating them about how to use your site by creating a visual vocabulary that contains words, pictures, sound and motion.
They will use your "vocabulary" when visiting and using your site.
|
||
The navigation that you design for your site should answer the following general questions for your audience: |
||
|
Where I am? |
|
For more specific tasks, the Navigation brings new challenges: |
||
Some navigation is page-specific, and some is persistent through the entire site.
There is certain content in site that people might want to have available from any page. This is what we usually call the Main Navigation Menu.
Typically the choices on the main menu include the major categories in your site (think here: What is the purpose of your site, which are the main things you want to be able to do, things that you want the user to find right away).
Without a Persistent Navigation, you create pages that act as dead-ends.
Some visitors might come to your site via referral link to a certain page. If this happens, and without a persistent navigation, they won’t know what else you offer on this site.
Users already on the site will get stuck, and without a clear set of options (except moving the cursor out to the page and beginning a trip back) will most likely abandon your site and go to greener pastures...
To design the Navigation (and better understand the exact content of your site) is good to build a site-map or wire-frame diagram of the content of the site.
Click HERE to more information on site maps and navigation design.
When considering the design of your main navigation you have to decide what is really important in your page, and what is secondary information.
You should make certain aspects much more prominent than others.
You cannot develop successful navigation without addressing the following related issues:
Planning.
You shouldn’t begin to develop the navigation graphics or “look and feel” for a project until you have come up with the profile for your audience.
Architecture.
You cannot build a site without plans, as you cannot build a house without them.
Setting up the architecture before hand lets you know what kind of Navigation components you need to design.
What are "Comps".
Developing a “look and feel” for your navigation requires that you first prototype how the artwork is going to look.
You should test how your main Navigation fits on different kind of pages.
It is a good idea to set 2 or 3 templates for different types of pages in your site (pages with similar content)
Define each “template” page with :
- where the main Navigation will be located,
- Space dedicated to images in your page (size and shape)
- Space dedicated to text, (size of the text-block on the page, font size and type family)
- Where to place secondary navigation items (define the navigation within a section).
Each one of those files, containing a complete visual representation of the site (but sill without any functionality) is called a Comp.
Comps are beter built in Adobe Photoshop.
Once you (and your client) decide what look to follow, you will slice graphics and build the html based on that look.