Effective Navigation Design

with

Navigation is one of the most important aspects of web design. If people cannot navigate through your site, they will quickly leave. Thus, designing effective navigation on your web site is crucial. So in this course, Craig Campbell will walk you through the steps of how to design three different types of navigation bars using Photoshop, which will help you achieve effective navigation designs!

Free Preview: Effective Navigation Design

Course Overview

01:39

1.Welcome
2 lessons, 05:32

Free Preview
1.1
Course Overview
01:39

Free Preview
1.2
The Basics of Navigation Design
03:53

2.Project 1: Horizontal Nav Bar
6 lessons, 42:46

2.1
Setting Up the File (Horizontal Nav Bar)
03:57

2.2
Background and Dividers (Horizontal Nav Bar)
11:33

2.3
Filling in the Text (Horizontal Nav Bar)
03:24

2.4
Creating Hover States
06:24

2.5
Creating the Drop Down Menu
07:09

2.6
Finishing Out the Menu
10:19

3.Project 2: 3D Nav Bar
6 lessons, 44:10

3.1
Setting Up the File (3D Nav Bar)
03:59

3.2
Background and Dividers (3D Nav Bar)
10:13

3.3
Filling in the Text (3D Nav Bar)
08:09

3.4
Creating Hover States and Drop Downs
09:39

3.5
Social Media Icons
05:07

3.6
Adding a Logo and Contact Info
07:03

4.Project 3: Vertical Navigation
4 lessons, 34:24

4.1
Setting Up the File (Vertical Navigation)
05:01

4.2
Enhancing and Cutting Up the Background
12:30

4.3
Text and Hover States
08:11

4.4
Creating the Drop Down Background
08:42

5.Finishing Up
1 lesson, 02:45

5.1
Final Thoughts
02:45


Preview for Effective Navigation Design
Lessons:
19
Length:
2.2 hours
About Craig Campbell
Craig has been doodling on computers since the first time he opened Paintbrush in Windows 3.0 in 1990. Since then, he has constantly sought new and exciting ways to make beautiful things on computers.
+ Expand Bio- Collapse Bio