Expert insights

Our blog

Here you can find resources on Digital Marketing, HubSpot Inbound Marketing, Web Development & Brand Strategy.

Web Development

5 website design tips to make your life easier

Walter Pfander | July 7 2017

1. Do Research

Before starting any design brief, it is important to do research first as this stage will introduce you to the target marketing you’re trying to design for. Therefore, look for references from sites that you like. In this process, expose yourself to a collection of various designs and styles as this will help you shape the style you will ultimately use when designing your website. Become a sponge and soak up as much as you can. Consequently, this is why Behance is a great place to start as designers the world round post their work onto the site, and there are some amazing pieces on there.

Just remember, don’t clone someone else’s work, be original, mould what you’re exposed to into your own style and sense of design.

2. Set-up a site map

Setting up your site map will determine the flow of your site and assist you in determining which pages flow together and the overall journey a viewer will take on your site. A content map doesn’t have to be excessively detailed, just a general outline of your site map. So, simply create a box with the page’s name, the draw a line to another page box that it connects to.

3. Set-up your rules

Establishing rules for your website will allow you to keep a consistent flow and style throughout. Subsequently, it also helps other designers should they need to carry on the design in your absence, leaving out the guessing games of what needs to be done. The rules you set up should apply to font size, weight, type etc. For example, the heading copy and body copy should be two different fonts that when paired together, complement one another and create an interesting visual aesthetic. Fonts like Lato and Merriweather, Montserrat and Cardo are fonts that aesthetically pair together. Visit the site http://fontpair.co/ for more options and variations of Google fonts that go together.

When deciding on a colour palette for your website, stick to two – three colours. Two is generally a good ratio as you don’t want to overwhelm the viewer with a barrage of various colours. Don’t use overly bright or sharp colours as this hurts the viewers eyes, avoid reds and bright pinks. Ensure that your colour palette complements one another and creates an interesting visual flow. Google http://paletton.com/ to assist you in finding complementary colours.

Now that you have your fonts and colours sorted, you need to decide on the type of images you are going to use. Are you going to use stock photography, your own photography, vectors? This is a lot easier if you did sufficient research during the research phase.

4. Collaboration is key

Form follows function; always ensure that your design is practical, and will work on the web. Throughout the web design process, ensure that your website scales down to mobile, smaller screens, compressed web windows. If you’re struggling, speak to a developer to ensure that your vision will be a practical build. From my experience, the downfall of many designers is that they don’t engage a developer from the conception of a website design.

Finally, when it reaches the developer, it’s a development nightmare. All of this could have been avoided if you just sought out a consultation from the very beginning

5. Sketch out your layouts and be a team player

Before going into the design phase, use your content map and sketch out each page layout so that you get a feel for where content will fit and sit on your pages. Going through this process is an essentially crucial part as it will give you a general guide as to how to design will look and flow. Every house starts with a foundation first.

Remember to be a team player and run your designs by others! Make sure to show others your design as you go. Doing so will help you identify any problems, or issues that would arise if shown to a broader audience. You are always going the be biased when it comes to your designs, so don’t fool yourself by thinking that just because you like the designs means the overall design works.

If you enjoyed reading through these website design tips and tricks, then you should definitely give the rest of our blog a look. We’re always writing about website design and web development.

Digital Marketing 101 Whitepaper

More blog posts

Ebook Mockup - Why inbound Marketing _

Inbound Marketing

Get more out of your digital marketing

Fill in the form and learn why Inbound is the only way to get high-quality leads.

Welcome to the MO Agency blog. Here you can find resources on Digital Marketing, HubSpot Inbound Marketing, Web Development & Brand Strategy.