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 I'm sharing my 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:

How should your visitors feel when they visit your site?

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

What do they need to know about your business?

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

What would you like them to do on your website?

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.

Tree diagram with information architecture and website structure by Grafika Studio

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.

Find more tips on how to write a compelling website content in my previous post on Why My Website Is Not Converting.

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 the help of wireframes.

A wireframe 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.

The best way to do your wireframes is by hand sketching in a gridded sheet. Divide your grid horizontally into header, content and footer, and vertically into 2 or 3 columns to fit the content, with right and left margin and separation space between the columns.

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.

Home page wireframe for a website project by Grafika Studio

Step 5 | Mock-up Your Website Design

Your wireframes 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 Photoshop, and therefore a bit of knowledge on this software.

Your website mock-ups will help you visualise how images look against your brand colours, typography and other graphic elements. It can also be helpful to design buttons, boxes and any other graphic element to establish a consistent visual language across your site.

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 (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 CSS 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.