Published on Monday October 18th 2010
The Components of a Minimal Website Design
Posted in Design Theories by Danny
Okay so following up our blog post, we’re going to keep on the topic of minimal site designs. When designing a site, choosing what to include and what to discard can be a make or break decision; whether it’s a site for personal reasons, or for a client. A minimal site design should be created with the all-famous ’content is king’ mind set and your site design should furthermore enhance the site’s sole reasoning to be online. A minimal site design should be pixel perfect with extra detail being taken on the little things – little things that will make a big difference. We’re going to be looking at the fundamental components of a minimal website site design in this blog post.
Determine the site’s purpose
Before booting up Photoshop or whatever alternative you use to design the layout of your sites, try this. Try writing down on the middle of a piece of paper your sites purpose; then try and brainstorm what you want to come from that site design and perhaps what features you want to be included. It’s important that you determine the site’s purpose early on the development stage as then no time will be wasted later on down the line on a piece of code that isn’t relevant.
Try asking yourself question when you’re going through your brainstorm:
- Is this feature necessary and does it relate to my site’s purpose?
- What benefits will come out of including this in my design?
- Will it just fill whitespace? (Not what we want!)
- Will it distract viewers from the site’s main purpose?
Anything that gets added to your site that isn’t necessary will simply hinder the message you’re trying to convey. Remember minimal is what we’re going for. You don’t want to weaken your site’s message by adding additional items of no relevance.
Studies have shown that you have a mere 50 milliseconds to capture the interest of a potential customer. Make it count.
Work for every little detail
Don’t think twice about spending a couple of hours making sure every pixel is where it should be. Every single detail on your website design will have significance in some way or another. What isn’t included in your design is just as important as what is. Consider these subheadings below:
Harmony
Does your site flow together? Do the elements of the page look like they should be together or do they look like the Queen married to David Beckham – just not right! A minimal site design should allow elements to complement one another and be in what’s known as a visual hierarchy; with different levels of viewing importance.
Orange Peel’s website design has a great visual hierarchy. We’re not overloaded with too much information. The heading catches our attention, and then allows our eyes to flow down to a few designs from their portfolio. They’re selling themselves with their work (or ‘content’).
Whitespace
Let me emphasise this now, whitespace is a colour in its own right! Designs need room to breathe and whitespace on a webpage allows for this breathing to occur. While it may be common practice for you as a web designer, often you get comments from clients such as “oohh, there seems to be a lot of extra space here – perhaps we could also include….”. You have to just say no them.
By giving up that valuable whitespace you may just upset the very delicate flow of the page. Once you move and fill “that one gap” you will more than likely just create another one. Elements need to have separations between them – and viewers eyes need breaks between elements to avoid strain; what a great consequence.
The Pew Center for Arts & Heritage’s website design has made great use of that ‘good ol whitespace’. Notice how the design feels airy, spacious, and most importantly not cramped.
Layout & Alignment
Use a grid. It helps so much in making your design align up correctly you won’t believe it. Frameworks and grids have become much more popular over recent years and they are practically normal practice for web design nowadays. There’s a great choice of grids too – we like the 1kb grid – huge props to them for developing such an awesome grid.
Tips to Remember
Okay so a few tips that might help you minimal website design:
- Remember to remove the unnecessary elements of the page. Ask yourself whether the usability of the page will be reduced if you do so.
- Usability isn’t a tick box. You don’t have to choose design of the site over usability and vice versa; they should complement one another hand in hand – think about both.
- A site which is easy to browse and navigate will feel pratically fun for the viewer when he navigates your site. Think about it; when you’re on your favourite site – can you navigate it efficiently, is it fun?
- A minimal site design is certainly not to everyone’s taste and/or practicality. Advertisement and content heavy sites tend not to lend themselves however if the site is for a small company, studio, or author then by all means go for it.
Good luck in your minimal site designs. Try and realise that while you don’t get full control over every project you do with a client; try and strike a balance between what they like and what you like. In terms of convincing the client to go with the minimal effect – why not relate the design you have done to other big high profile websites so that they can see that the idea and logical behind a minimal website design works.
EDIT: I’ve just found this excellent blog post on another blog showcasing some brilliant minimal icon sets; i’ve bookmarked it and I would recommend you do so too for your next project.
We hope you that you enjoyed this read. If you did, we not consider letting your friends know all about it too. Subscribe to our RSS feed for regular updates like this.









Help us spread the word