Designing a website is easy. Creating an awesome website design is extremely difficulty. Grenade designs exceptional websites for large brands. We do this by dissecting complex problems into tiny manageable parts and constructing unified solutions to meet our client’s objectives. We channel years of practical experience and talent into every design decision. Here are a few simple but crucial website design tips that will help you do the same and produce beautiful, practical, goal orientated designs that your clients will love.
Quick Links:
- Preparation: Plan your design
- Structure: Use a grid
- Layout: Keep it simple
- Layout: Strive for balance
- Content: Focus on the message
1. Preparation: Plan your design
Much like a writer staring at a blank screen or an artist standing in front of a fresh canvas, starting a design without some sort of structured plan is not only difficult, it can also be the recipe for disaster.
By accurately planning a design, you will ensure that; the concept is inline with the client’s expectations, the assets needed to produce the design are available, the technical limitations and possibilities have been assessed, and most importantly, your interpretation of the purpose of the design is accurate.
There are various visual tools that you can use to plan a design including storyboards and user workflow diagrams for example, however, the most effective, concise, and easy to interpret tool is the good old wireframe.
A wireframe is a page schematic or blueprint that functions as a visual guide to the structural framework of a website. Your wireframes should outline content, hierarchy of elements, general layout etc. They should be simple enough for non-designers/non-developers to understand, but sophisticated enough to convey the necessary information to ensure a successful site design.
A good wireframe should highlight the problem areas and give you an opportunity to consider solutions upfront so that you don’t have to waste time rearranging your lovely pixels.
If you are new to creating wireframes, give Moqups a go.
2. Structure: Use a grid
A grid is a guideline framework that is made up of a series of intersecting guidelines which can be used to structure content on a page. Most of the popular website grid systems use 12 or 16 columns with margins in-between the columns, as demonstrated in the example below.
Modern open-source grid systems usually provide you with a facility to set the number of columns and the thickness of the margin in-between columns. They will export the HTML and in some cases the PSDs.
Using a grid will bring structure, reusability, and consistency to your designs. It will also result in greater cohesion between the design and implementation of your site.
We’ve created a 12 column grid PSD to get you started which you can download for free: 12 column grid (940px)
Also be sure to check out these great grid frameworks:
3. Layout: Keep it simple
Often one of the biggest challenges that designers face is to convince clients that more links, brighter buttons, and larger text will not necessarily increase click-throughs and engagement. In fact, most often the opposite is true (yes, there are exceptions).
People in general have limited attention spans. They are also naturally inclined to avoid clutter and confusion. If your design is complicated, confusing, busy etc., users will simply move on to the next website.
Your best bet is to keep it simple and concise. Determine the objectives of the page, remove any unnecessary elements (noise), and focus your efforts on presenting the relevant content in the most intuitive and compelling manner without annoying the user.
4. Layout: Strive for balance
Everything on a page has weight to it. Different elements, colours, and even fonts have different weight. Try to create a symmetrical balance between all elements on the page.
5. Content: Focus on the message
Every website has a purpose which could be divided into a set of objectives. To meet these objectives the purpose of each individual page is conveyed through a message. The message could be a simple broadcast such as an “about page” or it could be a call to action for the user such as a “signup page” (e.g. Please complete the form). Focus on the delivery of the message. Doing so will increase the effectiveness of the page and ultimately mean that the site objectives are better met.
If you have any tips of your own be sure to add them in the comment section below.