02 Design Phase - Build a website from scratch

acme-logo.png

In the second part of the "Build a website from scratch" series we look at the design phase. It starts with some scratchy drawings on paper. It moves to building a prototype of the home pages. We look at colours, fonts and font sizes.

I draw it out on Adobe XD. This creates a prototype of the home page. Normally, I'd prototype both a mobile and desktop version off all pages on the site. I was conscious of how long that would take.

Colour Scheme

I used coolors.co to come up with a colour scheme. I opted for a neutral blue/green combo.

ACME Colours.png

Fonts

I chose Monserrat as the base font. It is simple and clear. It comes in a variety of weights and suits both text and headings.

https://fonts.google.com/specimen/Montserrat

Draft Design

xd-design.png

Video

This one is quite long at just over 40 minutes. Most of them will be much shorter.

Yoiutube video thumbnail

Posted in Tutorial on Jun 24, 2021