This is really my version of the article “23 steps to the perfect website layout”. I absolutely love and agree with everything in the article but it is definitely written from a Graphic designers point of view I feel, so below is my 10 steps to planning a website from a web development point of view .

1. Get the clients functional and non-functional requirements. (basically this is the clients needs- what does the website need to DO)

Eg The client has said they want a photo gallery but did they mean 1 or 20 photo galleries. Did they want the images in the galleries when clicked on to open or not open a larger version? Or did they want on clicking the image to go to an actual web page with more information about the image? (you read more about functional and non-functional requirements here)

Client’s needs

Before starting your plan, you’ll need as much information from your client as possible. The more you know, the less back-and-forth e-mails you’ll need to sift through.

Listen to their ideas

Usually, clients won’t tell you what they want, it’s up to you to ask them. They want reassurance that their brief will be fulfilled the way they visualized it, but they have a hard time explaining how they see their future website. The best way to overcome this problem is communication. It’s essential to get to know your website design clients by asking questions that will tell you about their business. You want to find out the mood they’re going for, what they like and what they don’t.

But don’t be scared to give them your ideas

You are the “expert” so if what the client has in their head is unrealistic or unreasonable then tell them and work with them towards a good solution.

Useful tools at this point are client questionnaire

A useful and efficient way to find out more about what the clients needs rather than what they think they need or want is to get them to fill out a questionnaire.

List the most important questions that will help you understand the project. What’s the purpose of this website? Who’s the target audience? Who are your competitors? What actions do you want the visitors to take? Etc.. I prefer in the first instance for the questionaire to have no more than 10 questions.  And from these 10 questions I will have at least 10 more for the client but these first 10 are a good starting point. It is important that you get this questionaire filled out by the client before you start drafting the proposal and not after.  Once you have your questionaire answers you will be able to hopefully give them ball park costings , and finalize your formal agreement on budget, scope of project, timeline, and ownership.

2. Define what success means

So you have the websites functional and non-functional requirements and based on this specification you should be able to define what success will mean in regards to the website. Yes a working website is a success measure but other success measurements could be the amount of traffic, user interactions, search engine position etc.

As stated in the original article “Besides the description of the site, you need to know what the expectations are for it. Take a news site for example, what’s the goal? Is it to make make as many ad impressions as possible or is it to provide the best reading experience? How are those goals going to be measured? “

3. Start planning a top-level framework/storyboard  and navigation map

A top level framework doesn’t have actual images but more defines where the structural elements such as the main navigation, header, social links, slideshow, galleries etc will go. There are lots of free tools as well as high end commercial ones or you could do it on paper. what you develop it in isn’t important- what is important is that you include ALL of the structural elements. Therefore you may need to do more that one top level sketch/storyboard if your website will have more than one page layout. You can read more about storyboards and navigation maps here

At this point you are thinking about the following:

Element placement

You can’t start your website without knowing where things go. Here’s where you decide that. You can even meet up with your client to discuss the best placement for your content.

Information hierarchy

A sitemap with a list of links can be overwhelming to a client and even the designer. By laying out the sitemap, you will be able to see how the pages fall into place which will allow you to make adjustments before you get too far ahead.

Interactivity

When creating your wireframes, you must ask your questions: How are these elements going to interact with each other? Will the visitor take the actions I want him to take? How will the visitor move around the site? Here’s where user experience plays its role. So you created your layout. Next, you will create your interface.

This is a great resource about web layouts  10 Rock Solid Website Layout Examples

4. Add or think about a grid

There are many CSS Website frameworks now that make responsive websites using Grids incredibly easy. Grid also allow you to mathematically ensure that your page layout will adhere to design golden rules such the rule of thirds etc.  My favorite CSS grid framework is Bootstrap but there are many other available.

Before starting to design anything you need a proper grid. There are no valid excuses for starting without a grid – they will definitely ensure that your design will look as good as it possibly can. A grid will help you to structure the layout of the different sections; it will guide you through the specific screen size requirements, and help you to create responsive templates, so you’re consistent in terms of spacing as well as many other design issues.

5. Choose your typography and colour scheme

Exploring different typefaces and colours is part of the discovery phase of a project. Generally you don’t want to use more than two different typefaces in a website. One for headings and one for the body type. For websites Google Fonts is a great typography resource and tool.

Your colour scheme maybe defined by the clients existing branding or you may have alot more freedom but you can some great colour resources are:

https://color.adobe.com/create/color-wheel/

https://color.hailpixel.com/

https://www.canva.com/learn/website-color-schemes/

http://colorschemedesigner.com/csd-3.5/

You may also like to read simple intro to colour theory and web design

6. Gather all of the main resource

You are just about ready to design the visual components and what the main visual design will actually look like but to ensure that you have the images that you need

7. Design the Visual Components and Visual Design

(Content coming soon)

8. Develop the prototype

(Content coming soon)

9. Refine everything

(Content coming soon)

10. and possibly repeat

This step really depends on the type of project