• No products in the basket.

This Affinity Designer Masterclass teaches how to create stunning websites from scratch. You'll learn the fundamentals of web design, including color selection and typography. You'll also learn how to design headers, hero sections, blog posts, and more. Suitable for beginners and experienced designers, this masterclass is a step-by-step guide to creating beautiful and functional websites using Affinity Designer.

Course Price:
Original price was: £194.00.Current price is: £19.99.
Course Duration:
7 hours, 34 minutes
Total Lectures:
Total Students:
Average Rating:


The Web Design in Affinity Designer Masterclass offers a comprehensive guide to building stunning websites using Affinity Designer software. The course begins with an introduction to the fundamentals of web design, including the top ten principles of good web design and how to choose the right colors for designing attractive websites.

Participants will learn about typography in web design and the typical website building process. The course covers where to find web design inspiration and the preparation stage, followed by the design process. Attendees will also learn how to create a header, hero section, featured items section, blog section, gallery, and footer. The course also covers designing a modern blog, including creating the blog header, hero section, container for the blog post, post grid, and single post blog page. The course concludes with finalizing the design.

Suitable for beginners and experienced web designers seeking to enhance their skills, this masterclass provides a step-by-step guide to designing visually appealing and functional websites using Affinity Designer. By the end of this course, participants will have the skills and knowledge to create beautiful and responsive web designs using Affinity Designer.

What Will You Learn?

  • Fundamentals of web design
  • Top ten principles of good web design
  • Choosing the right colours for web design
  • Typography in web design
  • Typical website building process
  • Where to find web design inspiration
  • Preparation stage and design process
  • Creating header, hero section, featured items, blog section, gallery, and footer
  • Designing a modern blog
  • Creating blog header, hero section, container for blog post, post grid, and single post blog page
  • Finalizing the design.

Who Should Take The Course

  • Beginners who want to learn web design
  • Graphic designers who want to expand their skills into web design
  • Professionals who want to create their own websites
  • Entrepreneurs who want to design and develop their own website.


  • Basic knowledge of using a computer
  • Affinity Designer software (free trial available on the Affinity website)
  • Internet connection and a computer with a web browser
  • A willingness to learn web design from scratch or enhance existing skills.

Course Curriculum

    • Introduction to the course 00:02:00
    • 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
    • 10 Principles of Good Web Design 00:04:00
    • 10 Principles of Good Web Design – continued 00:05:00
    • The most important factor to consider before choosing colors 00:04:00
    • How to mix colors for the best possible User Experience 00:05:00
    • How to choose the “psychologically right” colors 00:05:00
    • 7 easy tools for choosing errorproof color schemes 00:07:00
    • A super short history of web typography 00:03:00
    • How to mix colors for the best possible User Experience 00:05:00
    • How to choose the right fonts for headings 00:04:00
    • How to mix fonts for headings and body text 00:04:00
    • The perfect font for User Interface design 00:03:00
    • Header, branding, navigation and Hero sections 00:04:00
    • The center and bottom sections of your website design 00:04:00
    • What are grids and how to use them 00:03:00
    • How to design your very own grid 00:04:00
    • 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
    • Every website design needs scaffolding 00:03:00
    • Building your own wireframe in Designer 00:05:00
    • Let’s continue building the library 00:10:00
    • How to use the assets to create a wireframe 00:11:00
    • Wireframing online 00:04:00
    • Let’s talk about images and icons 00:06:00
    • How to create font styles in Affinity Designer 00:04:00
    • The Design Part Overview 00:06:00
    • Let_s Create the Color Swatches 00:04:00
    • Let_s Create the Text Styles 00:08:00
    • Let_s Take a Look at the Images and Icons 00:03:00
    • Let_s Create the Logo First 00:03:00
    • Let_s Build the Menu Links 00:04:00
    • Let_s Add the Social Media Icons 00:08:00
    • Let_s start by adding the main image 00:07:00
    • How to Quickly Resize the Image 00:03:00
    • Let_s Make the Image a Bit Darker 00:03:00
    • Now Let_s Add the Main Text 00:05:00
    • Let_s Add the Slider Navigation 00:04:00
    • Let_s Start Creating the First Featured Secion 00:04:00
    • Let_s Ad the Featured Items 00:10:00
    • Let_s Add the Second Featured Item Section 00:06:00
    • Let_s Start Creatig the Blog Section 00:08:00
    • Let_s Replace the Images 00:03:00
    • Let_s Start Building the Image Gallery 00:07:00
    • Let_s Create the First Column of the Footer 00:04:00
    • Let_s Finish the Design and the Whole Footer 00:04:00
    • Let_s Discover the Wireframe for the Design 00:06:00
    • Let_s Discover the Blog Design- 00:06:00
    • Let_s Take a Look at our Assets 00:06:00
    • How To Create the Logo and Nav 00:08:00
    • Let_s Add the Social Media Icons 00:06:00
    • Let_s Add the First Images 00:07:00
    • Let_s Add the Shading to the Images 00:08:00
    • Let_s Add the Navigation Buttons 00:05:00
    • Let_s Create a Container for the Blog Post 00:05:00
    • Let_s Add the First Pieces of Text 00:04:00
    • Let_s Add the Remining Pieces of Text 00:06:00
    • Let_s Start Creating the Blog Post Grid 00:06:00
    • Let_s Create the First Blog Post Card 00:05:00
    • Let_s Add the Remaining Cards 00:07:00
    • Let_s Add the Older Posts Link 00:04:00
    • Let_s Explore the Sidebar Project 00:03:00
    • Let_s Create the Search Box 00:04:00
    • let_s Create the About Me Section 00:07:00
    • Let_s Create the Text Section of the Sidebar 00:05:00
    • Let_s Create the First Container for the Most Popular Posts 00:04:00
    • Let_s Create the List of the Most Popular blog Posts 00:07:00
    • Let_s Create the Ads Section 00:03:00
    • Let_s tart Creating the Footer 00:04:00
    • Let_s Explore Different Footer Concepts 00:03:00
    • Let_s Finish the Project and explore the next one 00:07:00
    • Let_s Explore the Single Post Design 00:03:00
    • Let_s Create the Featured Image and the Post Container 00:06:00
    • Let_s Add the Blog Post Title 00:06:00
    • Let_s Add the Paragraphs and Images 00:10:00
    • Let_s Add the Social Media Icons 00:07:00
    • Let_s Add the pre-Next Post Navigation 00:08:00
    • Let_s Add the Related Posts Section 00:07:00
    • Let_s Start Creating the Comments Section 00:05:00
    • Let_s Create the Texts for the Comments 00:06:00
    • Let_s Create the Post Comment Forms 00:09:00
    • Delivering the design to the client 00:04:00
    • Delivering the file to the developer 00:03:00
    • How To Use the Export Persona to Export the Assets in Bulk 00:02:00
    • outro-Thanks for watching the course 00:01:00
    • Order Certificate 00:05:00

Course Reviews


1 ratings
  • 5 stars0
  • 4 stars0
  • 3 stars1
  • 2 stars0
  • 1 stars0
  1. avatar Web Design in Affinity Designer Masterclass

    Learnt new stuff

New Courses




    ADHD Training for Teachers: Empowering Educators to Support Students with Attention Challenges

    Relationships may be severely harmed by narcissistic behaviours, leaving emotional scars and...



    Narcissistic Behaviour and Relationships: Understanding the Impact and Finding Healing

    Relationships may be severely harmed by narcissistic behaviours, leaving emotional...



    Childhood Trauma in Adults

    What Is Childhood Trauma? Childhood trauma refers to distressing or...



    Creating A Social Media Strategy

    Set Clear Objectives:The first step in developing a successful social media...



    Neuro-Linguistic Programming Techniques

    Neuro-Linguistic Programming (NLP) is a fascinating and widely acclaimed approach...



    Acceptance and Commitment Therapy in the UK

    What is acceptance and commitment therapy? Acceptance and Commitment Therapy...

    © Course Line. All rights reserved.