Overview This comprehensive online course is designed to introduce participants to the world of web design using Affinity Designer, a …
( Reviews )
21 Students
This comprehensive online course is designed to introduce participants to the world of web design using Affinity Designer, a powerful vector graphics editor that rivals other industry-standard software in functionality and user-friendliness. Throughout this course, learners will navigate through a series of structured modules that cover the fundamentals of web design, including interface layout, color theory, typography, and responsive design principles. With an emphasis on practical application, students will engage in hands-on projects that simulate real-world web design scenarios, allowing them to apply what they’ve learned in a tangible way. Advanced modules will delve into the specifics of Affinity Designer, exploring its unique tools, features, and workflows that make it an ideal choice for web designers seeking to produce professional-grade websites. By the end of this course, participants will not only have a solid understanding of web design principles but also how to effectively implement them using Affinity Designer.
On Completion of this Web Design in Affinity Designer online course, you’ll acquire:
This course offers a deep dive into web design with a specific focus on using Affinity Designer. It is structured to take learners from the ground up, starting with fundamental design principles before moving on to the intricacies of using Affinity Designer for web-specific projects. Each module is crafted to build on the previous one, ensuring a comprehensive understanding of how to design visually appealing and functional websites. The course is enriched with video tutorials, step-by-step guides, and practical assignments, culminating in a final project where students will design a complete website, preparing them for professional web design tasks.
Ideal for aspiring web designers, graphic designers looking to expand their skill set into web design, and anyone interested in creating websites using Affinity Designer.
A basic understanding of graphic design principles and familiarity with Affinity Designer is recommended but not mandatory. Access to Affinity Designer software is required to follow along with course projects.
Upon successful completion of the Web Design in Affinity Designer course, learners can obtain both a PDF certificate and a Hard copy certificate for completely FREE. The Hard copy certificate is available for a nominal fee of £3.99, which covers the delivery charge within the United Kingdom. Additional delivery charges may apply for orders outside the United Kingdom.
An outstanding online course with clear explanations and practical examples. I could study at my own pace and still feel fully supported throughout. It’s truly boosted my confidence and career prospects
The course was well-structured, engaging, and easy to follow. The flexibility made it perfect alongside my full-time job. I’ve gained valuable, real-world skills that I can apply immediately.
Excellent learning experience from start to finish. The content was professional, up-to-date, and highly relevant. I would highly recommend it to anyone looking to upskill online.
| 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 | ||
Yes, Discover Training provides accredited and CPD-certified courses, ensuring learners receive recognised qualifications that support career progression and professional compliance.
Anyone can enrol, including students, professionals, job seekers, career changers, and organisations. Most courses do not require previous experience, making them accessible to learners at all levels.
Discover Training offers courses across multiple sectors, including business, health and safety, compliance, leadership, IT, personal development, and professional skills training.
You will have 14 days to revoke your Course purchase from your purchase date. Regrettably, refunds are not allowed after your purchase have been approved, and materials have been posted to the student’s dashboard or accessed.
Yes, learners receive a downloadable digital certificate upon successful completion, suitable for CPD records, CVs, and professional portfolios.
14-Day Money-Back Guarantee