Web Design with Flo(W) – DAY 13 – Design skills: colour

Web Design with Flo(W) - DAY 13 - Design skills: colour

Time to add some colours!

When picking your colours, there are some principles that you should keep in mind:

Does it communicate the right message? (colour psychology)
Does it help create the right hierarchy?
Do the colours work together?
Are these colours brandable?

When you’re done, just make sure of these few things:

1. Does this colour palette tell the right story?
2. Does it help to clarify hierarchies?
3. Is there enough contrast? Is it accessible (think colour blind)?
4. Am I consistent in how I use colour?

___

Are you stuck or do you want someone do it all for you?
Send me a DM.

Web Design with Flo(W) – DAY 12 – Design skills: type

Web Design with Flo(W) - DAY 12 - Design skills: type

The next aspect we need to talk about is type.

Type actually has two purposes:
– it has to be functional (easy to read, create the right hierarchy)
– it has to be aesthetic (align with values & audience, visual storytelling)

There are some important principles to follow when it comes to selecting type.

Consider your requirements
Collect references
Do you need to go for a classing font or a new font?
How to pair fonts?
– combine highly contrasting fonts
– combine fonts from the same type family
– combine similar moods
– select 2-3 fonts maximum
Define the hierarchy between your fonts (size, weight, all-caps, italics,…)
Define your line spacing
– 125-180% is best for readability
– different typefaces require different line-spacing
– small fonts require more spacing
How to align your copy?
– flush left
– center (use sparingly)
– justify (use rarely)
– flush right (short text)
How to divide your paragraphs?
– between 6-12 words
– spacing between paragraphs should be equal to the font size

One extra tip when it comes to choosing your type: never compromise on legibility!

___

Are you stuck or do you want someone do it all for you?
Send me a DM.

Web Design with Flo(W) – DAY 11 – Design skills: layout

Web Design with Flo(W) - DAY 11 - Design skills: layout

Before you can start designing the visual aspect of your website, there’s a few things you should know about.

Today, we’re gonna talk about layout.

But… what is layout?

The layout is the intentional division of space between the elements you want to present

And how do you decide on your layout?
Let me take you through the process.

The first step is to assess your content, your hierarchical structure and your format (fixed, expanding, responsive).

Then you’re going to sketch out different options. Avoid being detailed, just focus on creating a basic foundational skeleton.

Now look at your sketches and decide on a grid. How many columns do you need? How much margin? What is the size of the container?

Lastly, place your elements on the grid.

Ask yourself the following questions to make sure you’ve got a solid layout.

1. Does the selected layout allow for easy consumption of content?
2. Does the layout support the goals & messages?
3. Are you using spacing & alignment consistently?
4. Is the layout balanced?

Tip: Once you feel comfortable with grids, feel free to play around and “break the grid”!

___

Are you stuck or do you want someone do it all for you?
Send me a DM.

Web Design with Flo(W) – DAY 10 – Sketching your website

Web Design with Flo(W) - DAY 10 - Sketching your website

What is wire framing?

Well, when you start designing your website, it’s important to get clarity on the structure of your website first. Only then can you start adding any visual components.

Let’s start off easy: grab a pen and paper and make a sketch of what your website structure should be like. Feel free to make a few different sketches and try out different options.

Tip: Keep in mind how the various elements will connect to each other and illustrate the user journey.

Wanna take your sketch to the next level?

Once you’ve finished your sketch on paper, you can digitise it and create a working prototype so you can test the flow of your website. One of the programs you can use for this is Adobe XD.

___

Are you stuck or do you want someone do it all for you?
Send me a DM.

Web Design with Flo(W) – DAY 9 – Art Direction

Web Design with Flo(W) - DAY 9 - Art Direction

Now, this is where the fun starts!

It’s the part where you’ll decide on the look and feel of your website.

How do you do that?

Go out and collect references.

Have a look at art, history, nature, fashion, architecture, music and culture to inspire you.

Create a moodboard.

Make a selection of the elements you collected and arrange them into a moodboard.

Tip: When deciding on a design element, keep asking yourself if it’s coherent with the other elements and consistent with your moodboard.

Have fun!