This is probably one of the most important steps in the whole web development process. Aside from all the coding, styling and technical things, we as web developers have to do - we also have to plan out and think about how we want our site to look like in the end. Especially for freelancers or independent web developers.
Building a house
Think of building a house... Do you think the builders just randomly start building a house by placing bricks and wood? Do you think it just magically all fits together? No - definitely not! It has been planned out, sketched out and carefully decided upon how to build it, what materials needed, and what features the house will have.
This is almost the same way we should think about when planning a website. The same way with the house, we need to plan out what layout we will use, colours, functionality included, images or if we will use any additional styling resources and if there will be any forms or input capture, the list goes on...
Colours
Deciding on a colour scheme/palette for your website beforehand will really help save time down the line when you're actually coding and developing your web site. Decide on a dominant colour and a contrasting colour, also decide on a few different variants of these colours to act as button hovers, links etc, as well as text colours.
Font family
It's a good idea to figure out initially as well what font you want your website to use. You can download this font and have it ready for when you're developing. The font really does say a lot about a website so this part of the planning phase should be given some thought to if the font is readable, easy on the eye and fits its purpose. E.g. If it's a professional website or a portfolio, you will want a nice professional looking font. In comparison, if it was a fun, joke style website, then maybe a more playful font would be suitable.
Images
If you are going to use images on your website, try and get these ready beforehand and have them in a folder so you can focus on development when coding. You should always aim to optimize images aswell. Google Lighthouse is a good way of auditing a website to get information on performance and accessibility including image optimization, check out my post on it here.
The Layout
You want to have an idea of how your content will be laid out on your individual web pages. Consider thinking about how spaced out your content "containers" will be, if you will have a centred website, or a full-width website, if you'll have a split column website or multiple columns, etc.
Sketching
The best way to plan out your layout is to sketch it out.
✏️ Use a pencil (or pen) and paper - draw out exactly what is in your head on a piece of paper, and this could act as your base layout/design for your website. This eliminates the guessing game while developing your website and it will ensure you have a consistent layout.
Wireframes
You could plan your layout a step further with wireframes. What are wireframes? These are like a "digital sketch" of your layout/design done on the computer where you can really solidify your ideas. This step isn't needed though if you successfully sketch out your layout by hand.
I hope you enjoyed this short post about planning a website. It's SO important.
I've recently started a YouTube channel for coding tutorials, beginner to advanced, I'd love to see you there;