30 Days to Your First Website Design

Lesson Notes * Trying to Navigate Website Navigation

Transcript Hi guys, welcome back to 30 Days to Your First Website Design, a Tuts+ Premium course. I’m Ian Yates and today we’re going to sort out our navigation. We’ll begin as always by taking a quick look at what we’re going to cover in this video:

• Let’s start off by examining a few navigation examples.
• We’ll then jump right into our PSD and continue with the layout, by adding our primary navigation.
• Then I’ll set you an assignment before we tackle the next video in the series.

Let’s look at some examples of global, or primary navigation. Now, the navigation examples we’re going to look at demonstrate very different styles, but all essentially complying to what we’ve spoken about regarding their position. Vertical along the top left of the page (sometimes even fixed there irrespective of the page scrolling), or horizontal either top right, or top and centered. These are areas of initial focus, and primary navigation is usually found there because it’s so darn important! Without easily located navigation, no-one will look further into your site.

• genessausageshop.com
• tinkeringmonkey.com
• wigolia.com

Even more obscure methods of navigation:

• heartshapedwork.com
• polyesterstudio.com
• helmy-bern.cz

Now if I refer back to the mockup, you’ll recall that the primary navigation was placed in the header at the top right. Let’s add it to our PSD.

[Photoshop demonstration not included in transcript.]

Next Steps It’s time for some further reading: Take a look at this article on Six Revision, Trying to Navigate Website Navigation. It examines conventions, usability, and the practicalities of navigation.

And before we jump into the next video, I have an assignment for you. This is going to be a theme in the coming videos, we’re working together to build our design. I want you to update your file as I go, so in this case, add the primary navigation to the header section. This should be fairly program agnostic too; if you’re working in Fireworks, Illustrator, or some other application, you should be able to follow along just as easily.

Next time on 30 Days to Your First Website Design we’re going to take a look at web typography. I’m Ian Yates and from all of us at Tuts+ thanks for watching!