FREELessons:22Length:2.9 hours
Responsive web design is firmly embedded in a modern web design workflow and cannot and should not be ignored. There are two approaches to incorporating responsive design into your workflow; desktop-first and then make it responsive for mobile devices, or mobile-first and leave the desktop until last. Whatever is your preferred way, we generally start from a mockup. In this course you'll learn how to design two different breakpoints for a responsive portfolio website using Adobe Photoshop and Adobe Illustrator.
1.Welcome
1.1Introduction01:13
1.1
Introduction
01:13
1.2Website Preview03:19
1.2
Website Preview
03:19
2.Getting Started
2.1Setting Up the File09:15
2.1
Setting Up the File
09:15
2.2Using TypeKit Fonts04:43
2.2
Using TypeKit Fonts
04:43
3.Designing for Desktop Browsers
3.1Importing and Masking Images09:58
3.1
Importing and Masking Images
09:58
3.2Columns and Text08:29
3.2
Columns and Text
08:29
3.3Category Icons11:31
3.3
Category Icons
11:31
3.4Header and Paragraph Text10:49
3.4
Header and Paragraph Text
10:49
3.5Creating a Navigation Bar07:05
3.5
Creating a Navigation Bar
07:05
3.6Social Media Icons08:42
3.6
Social Media Icons
08:42
3.7Portfolio Setup07:31
3.7
Portfolio Setup
07:31
3.8Portfolio Samples08:50
3.8
Portfolio Samples
08:50
3.9Portfolio Text10:47
3.9
Portfolio Text
10:47
3.10Creating the Footer11:10
3.10
Creating the Footer
11:10
3.11Registration Form11:20
3.11
Registration Form
11:20
4.Designing for Mobile
4.1Re-Examining Our File03:51
4.1
Re-Examining Our File
03:51
4.2Adjusting Header Text04:14
4.2
Adjusting Header Text
04:14
4.3Adjusting Portfolio Categories10:12
4.3
Adjusting Portfolio Categories
10:12
4.4Adjusting the Menu09:05
4.4
Adjusting the Menu
09:05
4.5Adjusting the Portfolio Samples12:31
4.5
Adjusting the Portfolio Samples
12:31
4.6Adjusting the Footer07:59
4.6
Adjusting the Footer
07:59
5.Conclusion
5.1Final Thoughts03:16
5.1
Final Thoughts
03:16
