Quick Intro to Visual Grammar in Web Design using Affinity Designer

Similar to how good grammar is key to clear communication, web design relies on certain principles to make your website not only appealing to look at but easy to navigate. The aim of this class is to introduce the essentials of web-oriented design in brief, digestible lessons. We'll be taking a look at the building blocks of visual grammar:

Alignment
Whitespace
Typography
Color
Once you're familiar with the above concepts and how they work in tandem, we'll put it all into practice by designing the hero section of a fictional website. I'll walk you through the different steps involved.

By the end of the course, you'll learn how to create:

A Moodboard
A Low-fidelity Wireframe
A Medium-fidelity Wireframe
A High-fidelity Mock-up
Along the way, I'll be sharing some best practices to be aware of and some tips and resources that will enable you to work more efficiently.

This class is for anyone interested in the fundamentals of web design and already having a basic understanding of Affinity Designer.

Why Affinity Designer?

Winner of the Apple Design Award, it is an incredibly powerful graphic design software with intuitive tools that streamline your workflow, offer precise control, and save time. If you don't already have Affinity Designer installed, download the free trial, get acquainted with the basics, and join in.

That being said, the concepts themselves are universal and their application is transferable to other graphic design software, so you can still take the class if you're already versed in a similar program.

Being a web designer isn't about having any kind of innate artistic skills. You can do it, and do it well, as long as you are mindful of the design principles at play. I hope you're as enthused as I am. I'll see you in class!