Web Design in Affinity Designer for Beginners and Beyond

This course is all about using Affinity Designer for web design. If you are not too familiar with the software, first you will quickly learn what it’s all about and how to set it up for web design.

Before we start designing anything in Affinity Designer, we’ll take a look at web design concepts and good practices. You will learn how to choose colors for your design and where to find color inspiration and ready-made color themes.

You will also learn basic web design typography, which is extremely important not just for good web design, but for good design in general. You will learn all about body text, headings and how to pair them for great user experience.

Then we’ll take a look at a typical website’s structure, design-wise of course. We’ll talk about logos, navigations, sidebars and all the other website’s building blocks.

After that we’ll talk about what’s in and what’s not in in the web design world right now. We’ll also search for some web design inspiration around the web.

With all that knowledge and skills, we’ll move on to the design part of the course. And please note that you have to have at least some basic skills to follow along effortlessly

This course is not about learning all there is to know about Designer's skills. If you need that, take  look at my Affinity Designer for Beginners course.

By the end of this course you should be able to independently design websites using Affinity Designer.

• Web Design in Affinity Designer Promo Video
• Introduction to the course
• What is Affinity Designer and how to set it up for web design
• Affinity Designer’s web design abilities
• Top 10 Principles of Good Web Design
• Top 10 Principles of Good Web Design - continued
• The most important factor to consider before choosing colors
• How to mix colors for the best possible User Experience
• How to choose the “psychologically correct” colors
• 7 easy tools for choosing errorproof color schemes
• A super short history of web typography
• How to mix colors for the best possible User Experience
• How to choose the right fonts for headings
• How to mix fonts for headings and body text
• The perfect font for User Interface design
• Header, branding, navigation and Hero sections
• The center and bottom sections of your website design
• What are grids and how to use them
• How to design your very own grid
• 7 web design trends that rule the web design world
• Where to find the RIGHT inspiration for your next design
• Every website design needs scaffolding
• Building your own wireframe in Designer
• Let’s continue building the library
• How to use the assets to create a wireframe
• Wireframing online
• Let’s talk about images and icons
• How to create font styles in Affinity Designer
• The Design Part Overview
• Let's Create the Color Swatches
• Let's Create the Text Styles
• Let's Take a Look at the Images and Icons
• Let's Create the Logo First
• Let's Build the Menu Links
• Let's Add the Social Media Icons
• Let's start by adding the main image
• Let's start by adding the main image
• How to Quickly Resize the Image
• Let's Make the Image a Bit Darker
• Now Let's Add the Main Text
• Let's Add the Slider Navigation
• Let's Start Creating the First Featured Secion
• Let's Add the Featured Items
• Let's Add the Second Featured Item Section
• Let's Start Creatig the Blog Section
• Let's Replace the Images
• Let's Start Building the Image Gallery
• Let's Create the First Column of the Footer
• Let's Finish the Design and the Whole Footer
• Delivering the design to the client
• Delivering the file to the developer
• How To Use the Export Persona to Export the Assets in Bulk
• Thanks for watching the course
• 1Let's Discover the Wireframe for the Design
• 2Let's Discover the Blog Design
• 3Let's Take a Look at our Assets
• 4How To Create the Logo and Nav
• 5Let's Add the Social Media Icons
• 6Let's Add the First Images
• 7Let's Add the Shading to the Images
• 8Let's Add the Navifation Buttons
• 9Let's Create a Container for the Blog Post
• 10Let's Add the First Pieces of Text
• 11Let's Add the Remining Pieces of Text
• 12Let's Start Creating the Blog Post Grid
• 13Let's Create the First Blog Post Card
• 14Let's Add the Remaining Cards
• 15Let's Add the Older Posts Link
• 16Let's Explore the Sidebar Project
• 17Let's Create the Search Box
• 18let's Create the About Me Section
• 19Let's Create the Text Section of the Sidebar
• 20Let's Create the First Container for the Most Popular Posts
• 21Let's Create the List of the Most Popular blog Posts
• 22Let's Create the Ads Section
• 23Let's tart Creating the Footer
• 24Let's Explore Different Footer Concepts
• 25let's Finish the Project and explore the next one
• 26Let's Explore the Single Post Design
• 27Let's Create the Featured Image and the Post Container
• 28Let's Add the Blog Post Title
• 29Let's Add the Paragraphs and Images
• 30Let's Add the Social Media Icons
• 31Let's Add the pre Next Post Navigation
• 32Let's Add the Related Posts Section
• 33Let's Start Creating the Comments Section
• 34Let's Create the Texts for the Comments
• 35Let's Create the Post Comment Forms