Lessons:19Length:2.2 hours
Next lesson playing in 5 seconds
CancelFree Preview: Effective Navigation Design
Course Overview
01:39
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!
1.Welcome2 lessons, 05:32
2 lessons, 05:32
Free Lesson 1.1Course Overview01:39
Free Lesson
1.1
Course Overview
01:39
Free Lesson 1.2The Basics of Navigation Design03:53
Free Lesson
1.2
The Basics of Navigation Design
03:53
2.Project 1: Horizontal Nav Bar6 lessons, 42:46
6 lessons, 42:46
2.1Setting Up the File (Horizontal Nav Bar)03:57
2.1
Setting Up the File (Horizontal Nav Bar)
03:57
2.2Background and Dividers (Horizontal Nav Bar)11:33
2.2
Background and Dividers (Horizontal Nav Bar)
11:33
2.3Filling in the Text (Horizontal Nav Bar)03:24
2.3
Filling in the Text (Horizontal Nav Bar)
03:24
2.4Creating Hover States06:24
2.4
Creating Hover States
06:24
2.5Creating the Drop Down Menu07:09
2.5
Creating the Drop Down Menu
07:09
2.6Finishing Out the Menu10:19
2.6
Finishing Out the Menu
10:19
3.Project 2: 3D Nav Bar6 lessons, 44:10
6 lessons, 44:10
3.1Setting Up the File (3D Nav Bar)03:59
3.1
Setting Up the File (3D Nav Bar)
03:59
3.2Background and Dividers (3D Nav Bar)10:13
3.2
Background and Dividers (3D Nav Bar)
10:13
3.3Filling in the Text (3D Nav Bar)08:09
3.3
Filling in the Text (3D Nav Bar)
08:09
3.4Creating Hover States and Drop Downs09:39
3.4
Creating Hover States and Drop Downs
09:39
3.5Social Media Icons05:07
3.5
Social Media Icons
05:07
3.6Adding a Logo and Contact Info07:03
3.6
Adding a Logo and Contact Info
07:03
4.Project 3: Vertical Navigation4 lessons, 34:24
4 lessons, 34:24
4.1Setting Up the File (Vertical Navigation)05:01
4.1
Setting Up the File (Vertical Navigation)
05:01
4.2Enhancing and Cutting Up the Background12:30
4.2
Enhancing and Cutting Up the Background
12:30
4.3Text and Hover States08:11
4.3
Text and Hover States
08:11
4.4Creating the Drop Down Background08:42
4.4
Creating the Drop Down Background
08:42
5.Finishing Up1 lesson, 02:45
1 lesson, 02:45
5.1Final Thoughts02:45
5.1
Final Thoughts
02:45
Subscribe to watch full course
Subscribe to watch full course