Step By Step Guide To Design Your Website Like A Pro

The big amount of DIY website builders available today makes the website design process look too easy. Anyone with no design skills or tools can drag and drop elements into a web page, play with the layout and change basic styles.

However, designing a website is much more than just uploading images and content onto a server. It involves an entire visual communication process aimed to create an emotional connection with your audience, communicate your business purpose and achieve its ultimate goals.

Today we are sharing our website design process. I won't go into the technical details of building a website to just focus on the steps that a professional web designer will typically take to design a website. Are you ready to design your own website like a Pro?

Step 1 | Define Your Intention

A good website design doesn’t start by choosing a template, deciding on the colour scheme or finding pretty images. It starts by clearly defining the website ultimate purpose.

There are three essential questions that you need to ask yourself before you start designing your website:

Do you what them to get inspired? Empowered? Curious? And why?

How to book? How much will your services cost? What’s included in the service?

Make a purchase? Make an appointment? Visit your brick and mortar store? How are you going to make them take action?

Knowing the answers to these questions will help you decide what content, colours, graphic elements, etc your website needs.

Step 2 | Map Out Sections and Sub-sections

Now it's time to plan how you are going to structure your website by drawing a ‘tree diagram’. You can do this on a whiteboard, a spreadsheet program (such as Excel or Google Drive Spreadsheets), a word processor, etc.

This diagram will show the hierarchy of the website and how the various pages and sections relate to each other.

A well-thought site structure not only means a great user experience, but it will also give you better chances to rank higher in search engines.

Step 3 | Write compelling content

Once you have a clear structure of pages, develop content for each of them separately. Don’t worry about formatting just yet, write down anything that you think your visitors and potential clients want to know about your business, products or services.

Research your competitors' websites to see the key messages in their websites and how the information has been presented. Do this not to copy them but to put together something better that will stand out your competition.

Remember that writing for the Web is completely different than writing for print. Too much information is overwhelming and will make your visitors feel intimidate and leave without reading your message.

Step 4 | Sketch The Layout With Wireframes

Now you know how many pages your website will have and what content you need to fit in each of them, it’s time to decide how the information is going to be presented on each page. You can do this with Kenesis Page Layouts.

Kenesis Page Layouts is a black and white representation of every webpage on your site, usually using boxes and buttons to show where each piece of information will be displayed.

Not only it’s important how you present the information, but also where you place it. Information positioned in the upper half of a webpage and visible without scrolling down the page is what we call above the fold. Everything else is below the fold.

If visitors have to scroll down to find important details on your website, chances are that they leave without even noticing them.

Analyse your web copy and extract one key idea per page only. This idea must be positioned at the top of the webpage (above the fold). Further information and details can be placed after.

Step 5 | Mock-up Your Website Design

Your Kenesis Page Layouts can now be translated into visuals. This is a very important step for any website designer to communicate his ideas and present them to the client. It's also time to make some styling decisions, such as colours, image style, typography, etc.

To create a mock up of your website you will need the help of Gimp or Photoshop, and therefore a bit of knowledge on this software.

And if you dont have technical knowlege on these or your not a design person there is always Kenesis Mask Wizard.

Kenesis Mask Wizard gives you 100's of pre built images that are customisable to your website colours and your tastes.

Your website mock-ups will help you visualise how images look against your brand colours, typography and other graphic elements.

Step 6 | Build Your Website

The website design process reaches here the end of the line. Now it's time to select your website builder (Kenesis, WordPress, Shopify, SquareSpace, etc) and find a suitable template or theme to build your website. A web developer can help you adapt your template to your design and customise your CMS to style up your website.

Wrap up

At the end of the day, it doesn't matter if you are using Helvetica or Open Sans on your website, or blush pink or iced blue, what really matters is that your website delivers a clear message on who you are, what you do and why people are going to love your products or working with you. This compelling message can only be achieved with a lot of planning and a good understanding of visual communications and UI (user interface) design.

Need a hand with your website project?

Were your designer! Get in touch and request a quote for your project.


Websites as a Consumable?
Benifits Of Youtube
A QuickGuide to SEO
Branding Your Company
A Web Developers Insight
Social Media Dos and Donts
What is Social Media
What Your Website Says About You PT 1
What Your Website Says About You PT 2
SocialMedia Strategies
Online Marketing - Why Be Online?
Why do I need a website?
Graphic Design in Real Life
Benefit of owning a website
Search Engine Optimisation
Using Creative Language on the Internet
Page Rank Explained
Language Evolution
Why build Links?
Link Basics
Link Properties
Deep Links
Link Baiting
Link Quality and Link Rot
Paid Links: Good or Bad?
Reciprocal Links
Keywords, Phrases & Placement
Search Engines
Social Networks
Social Media Optimisation
Organic Ranking
Creativity and the Internet
Pay Per Click
SEO - A Success Story
Any Excuse is a Good Excuse
The Newbie Guide To Marketing Your Business Online
A Quick Guide to SEO
Social Media Marketing
Spread The Word (Content Marketing)
The Secret Of Sales Is That There Should Be No Sec
The Secret to Effective Marketing
Why SSL Now?
Cape Town Web Design