Module 01: Introduction |
|
Introduction to the course |
|
00:02:00 |
Module 02: The Fundamentals |
|
What is Affinity Designer and how to set it up for web design? |
|
00:03:00 |
|
Affinity Designer’s web design abilities |
|
00:09:00 |
Module 03: Top 10 principles of good web design |
|
First 5 principles of good web design |
|
00:04:00 |
|
The remaining 5 principles of good web design |
|
00:05:00 |
Module 04: How to choose the right colours to design stunning websites |
|
The most important factor to consider before choosing colours |
|
00:04:00 |
|
Mix colours for the best possible User Experience |
|
00:05:00 |
|
Choose the “psychologically right” colours |
|
00:05:00 |
|
Easy tools for choosing errorproof colour schemes |
|
00:07:00 |
Module 05: Typography in web design |
|
A super short history of web typography |
|
00:03:00 |
|
Choose the right fonts for body text |
|
00:05:00 |
|
Choose the right fonts for headings |
|
00:04:00 |
|
Mix fonts for headings and body text |
|
00:04:00 |
|
The perfect font for User Interface design |
|
00:03:00 |
Module 06: How is a typical website built? |
|
Header, branding, navigation and Hero sections. |
|
00:04:00 |
|
The centre and bottom sections of your website design |
|
00:04:00 |
|
What are grids and how to use them |
|
00:03:00 |
|
Design your very own grid |
|
00:04:00 |
Module 07: Web design trends |
|
1-7 web design trends that rule the web design world |
|
00:09:00 |
|
Where to find the RIGHT inspiration for your next design |
|
00:02:00 |
Module 08: The Preparation Stage |
|
Every website design needs scaffolding |
|
00:03:00 |
|
Building your wireframe in Designer |
|
00:05:00 |
|
Continue building the library |
|
00:10:00 |
|
Use the assets to create a wireframe |
|
00:11:00 |
|
Wireframing online |
|
00:04:00 |
|
Talk about images and icons |
|
00:06:00 |
|
Create font styles in Affinity Designer |
|
00:04:00 |
Module 09: The Design Process |
|
The Design Part Overview |
|
00:06:00 |
|
Create the Colour Swatches |
|
00:04:00 |
|
Create the Text Styles |
|
00:08:00 |
|
Take a Look at the Icons and Images |
|
00:03:00 |
Module 10: Creating the Header |
|
Start with Creating the Logo |
|
00:03:00 |
|
Build the Menu Links |
|
00:04:00 |
|
Add the Social Media Icons |
|
00:07:00 |
Module 11: Creating the Hero |
|
Start by Adding the Main Image |
|
00:07:00 |
|
Quickly Resize the Image |
|
00:03:00 |
|
Make the Image a Bit Darker |
|
00:03:00 |
|
Add the Main Text |
|
00:05:00 |
|
Add the Slider Navigation |
|
00:04:00 |
Module 12: Let's Create the Smartphone Icon |
|
Start Creating the First Featured Section |
|
00:04:00 |
|
Add the Featured Items |
|
00:10:00 |
|
Add the Second Featured Item Section |
|
00:06:00 |
Module 13: Creating the From Our Blog Section |
|
Start Creating the Blog Section |
|
00:08:00 |
|
Replace the Images |
|
00:03:00 |
Module 14: Creating the Gallery and the Footer |
|
Start Building the Image Gallery |
|
00:07:00 |
|
Create the First Column of the Footer |
|
00:04:00 |
|
Finish the Design and the Whole Footer |
|
00:04:00 |
Module 15: How to Design a Modern Blog Affinity Designer |
|
Discover the Wireframe for the Design |
|
00:06:00 |
|
Discover the Blog Design |
|
00:06:00 |
|
Take a Look at Our Assets |
|
00:06:00 |
Module 16: Create the Blog Header |
|
Create the Logo and Nav |
|
00:08:00 |
|
Add the Social Media Icons |
|
00:07:00 |
Module 17: Create the Blog Header |
|
Add the First Images |
|
00:07:00 |
|
Add the Shading to the Images |
|
00:08:00 |
|
Add the Navigation Buttons |
|
00:05:00 |
Module 18: Let’s Create a Container the Blog Post |
|
Create a Container the Blog Post |
|
00:05:00 |
|
Add the First Pieces of Text |
|
00:04:00 |
|
Add the Remaining Pieces of Text |
|
00:06:00 |
Module 19: Creating the Blog Post Grid |
|
Start Creating the Blog Post Grid |
|
00:06:00 |
|
Create the First Blog Post Card |
|
00:05:00 |
|
Add the Remaining Cards |
|
00:07:00 |
|
Add the Older Post Link |
|
00:04:00 |
Module 20: Create the Sidebar |
|
Explore the Sidebar Project |
|
00:03:00 |
|
Create the Search Box |
|
00:04:00 |
|
Create the About Me Section |
|
00:07:00 |
|
Create the Text Section of the Sidebar |
|
00:05:00 |
|
Create the First Container for the Most Popular Posts |
|
00:04:00 |
|
Create the List of the Most Popular Blog Posts |
|
00:07:00 |
|
Create the Ads Section |
|
00:03:00 |
Module 21: Create the Blog Footer |
|
Start Creating the Footer |
|
00:04:00 |
|
Explore Different Footer Concepts |
|
00:03:00 |
|
Finish Creating the Footer |
|
00:07:00 |
Module 22: Create the Single Post Design |
|
Explore the Single Post Design |
|
00:03:00 |
|
Create the Featured Image and the Post Container |
|
00:06:00 |
Module 23: Create the Blog Post Area |
|
Add the Blog Post Title |
|
00:06:00 |
|
Add the Paragraphs and Images |
|
00:10:00 |
|
Add the Social Media Icons |
|
00:06:00 |
|
Add the pre-Next Post Navigation |
|
00:08:00 |
|
Add the Related Posts Section |
|
00:07:00 |
Module 24: Create the Comments Section |
|
Start Creating the Comments Section |
|
00:05:00 |
|
Create the Texts for the Comments |
|
00:06:00 |
|
Create the Post Comment Form |
|
00:09:00 |
Module 25: Finalizing the design |
|
Delivering the design to the client |
|
00:04:00 |
|
Delivering the file to the developer |
|
00:03:00 |
|
Use the Export Persona to Export the Assets in Bulk |
|
00:02:00 |
|
Thanks for Watching the Course |
|
00:01:00 |
Assignment |
|
Assignment -Web Design in Affinity Designer |
|
00:00:00 |