Affinity Designer is set up for great UI design experience right out of the box There’s really not much you have to do in order to take advantage of all of its web design abilities, which we will take a look at now.

Look at each of these principles as a kind of a guideline, but not an absolute rule that you can’t bend. However, following them, especially if you are just starting out, will allow you to avoid a lot of rookie mistakes.

Here are the five remaining principles of good web design

Choosing the right color scheme for your next website design is, along with typography, the most important to make. The colors you chose will be the first thing that will catch the visitors’ attention and, if chosen correctly, won’t make their eyes hurt and fingers rapidly look for the “close” button.

There’s a lot of designers who let their eyes judge if a certain color or a color palette will be good for a specific web design job. 

But the problem with this approach is the fact that so many colors can look beautiful and so many color palettes may seem appropriate for that specific design. 

So how to tell if your color choice is good?

Color psychology might sound overly scientific, but it simply describes the feelings and meanings people often associate with particular colors. By carefully selecting them, you can reinforce the overall message of a site.

Let’s take a look at some of the base colors you are most likely to use when designing your websites.

Choosing colors for your next design can be a long and even daunting process. For me it always takes way too long to find the right combination, but luckily the whole process can be sped up with some online color scheme generators. 

Let’s take a look at 7 easy tools for choosing errorproof color schemes.

List of sites used in the section

When compared to the more than 25-year long existence of the internet, true web typography looks like a kindergartener. It is only a few years old. 

Of course even the earliest websites contained text (in fact the first-ever website was nothing but text), but the font choice was limited, to say the least.

Properly chosen typography for the project means that it helps to send the message of the website. It’s also important to remember that typefaces, just like colors, can provoke certain kinds of emotions. 

That’s why it’s important to choose your fonts carefully and with the reader in mind.

Good headings and subheadings are those elements of a website design that attract users and encourage further reading. That is why it is essential to learn how to create them correctly.

Lucky for us there are a ton of resources and online tools for easier font pairing. Let’s take a look at some of them now.

Let’s now sum things up and take a look at 3 major aspects of any font that will be great for your web designs.

When designing websites you must remember about certain blocks building it. Some of them will always be present in the design, but some of them are optional. 

Let’s take a look at how a typical website is built. We are going to dissect a website starting from the top and moving downwards.

Now let’s move past the Header and the Hero sections and stop at the articles and sidebars. These sections will look different not only because of your design choice, but mainly because of the “nature” of the site. 

They will look different for a blog, different for a corporate or personal site and you will see variations within those concepts.

So what’s a grid?

Think of it as a series of invisible lines that help you in structuring your website design and in making it symmetrical and easier to code.

Those lines are a great help when placing the elements of your design, not just the main containers. A lack of alignment is very noticeable and creates a sloppy impression.

A typical grid is constructed of units, gutters and columns. Let’s take a quick look at those using a 12-column grid as an example.

In this lecture you will learn how to use Affinity Designer to design your own grid

In the next couple of videos we’ll take a look at modern web design trends. This will help you in understanding the design patterns that designers are following these days.

In this video we will take a look at a few places around the web where you can find great inspiration for your next web design project.

From a typical eager designer’s point of view creating a wireframe for a website design is as boring as it is redundant. Well, that’s not true.

In fact a wireframe can help you in tremendously speeding up your workflow and can save you a lot of time. Many ideas that seem great in your head when you are picturing them tend to look poorly when put on a computer screen. Trust me, I know this from experience.

But what’s a wireframe and why I am making such a big deal about it?

When building your own wireframe system I think you should start with those elements that you are most likely to be using in a typical web design scenario.

I mean if you want you can create all the elements you can possibly imagine, but I think that if you create the essential elements first, you will have a great base for building and expanding wireframes.

But what are those essential elements?

I’ll start by creating a video wireframe element and for that I’ll clone the image element and get rid of the inside lines

Once all your assets are created they are ready and waiting for you to use them to build your wireframe. In this video we will take a look at how to practically use your assets to create a wireframe. The process is super easy and enjoyable.

There are a lot of tools and resources online that you can use to build your won wireframes and prototypes.

But the problem with them is that the majority of the ones you are most likely to find are paid. They have some limited free capabilities, but to uncover their tru potential you have to pay, in most cases a recurring fee.

It’s hard to imagine a website without images and other graphical elements. True, there are some designs that use only typography, but they are for very, very niche projects.

Chances are that in your career as a web designer you will be using images in your projects. And you will be using them a lot. It’s essential to know how to handle them in your designs, so let’s explore this subject now.

Text styles in Affinity Designer are a great way of speeding up a web design process. If you are a fan of changing font sets to quickly preview different variations of your design, you will love text styles.

In this lecture you will get yourself familiar with the design part of the course. You will discover the web page we'll be designing in Affinity Designer.

You can download the files needed for the design here -> 

https://drive.google.com/open?id=0B4EhouZW-YgVc1JiRTJZOWo4MkE

In this video we will create our own custom color swatches that we'll be using in the design process.

in this video we are going to create a library of our custom text styles. We will create heading and body text styles to use i the design process.

In this lecture we'll take a look at the images and icons we'll be using in the design

We are going to start the design process with creating the logo. Affinity Designer allows you to add different kinds of fills to live text and this is what we will be using in to create the logo.

In this video we will start creating the navigation system of the website, starting with the menu links.

In this video we will add the social media icons. This will give the opportunity to learn how to handle embedded documents in Affinity Designer.