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

Defining (Designing) the functional and non-functional requirements is a key step in the web development process and one that not only applied to software development, but website development as well.

Defining (Designing) the functional and non-functional requirements of a website BEFORE you begin may seem tedious and I will admit with some clients it is like pulling teeth but it is very important that you know what the website is actually “meant to do” and “how it is meant to act” before designing the way it is meant to look.  And from this perspective the functional and non functional requirements can ensure that you meet the clients expectations and what I use as a handover checklist and the basis of the contract to ensure there is no spec creep.

And while the terms come from software engineering they are just as important in web development to ensure that your pages interact, perform (behavior, load time etc.) with each other and user in the manner that client expected.

Functional Requirements

Functional requirements describe what the software / website should do (the functions).  Think about the core operations.

Because the “functions” are established before development, functional requirements should be written in the future tense. In developing the web application for the portfolio website, some of the functional requirements could include:

• The website shall/will show galleries of images that open to new pages
• The website shall/will allow galleries to be sorted by date and topics
• The website shall/will be responsive
• The website shall/will allow users to complete a contact form
• The website shall/will show address and directions to office
• The website shall/will have about page
• The website shall/will have homepage
• The website shall/will on the homepage have a custom instagram feed
• The website shall/will allow website owner to update all page content from a web based admin area

And the list would go on. Tedious and not to the same level as software development projects but still important so you do not miss anything important in the website development.

Non-Functional Requirements

Unlike functional requirements the non-functional requirements are not concerned with the functions of the website but instead  look at the criteria to which website is expected to conform to. Non-functional requirements can include things like response time, development time, usability and reliability. It can also be closely tied to user satisfaction.

Some non-functional requirements for a portfolio website could include:

• The website shall/will be easy to use by all external users
• The website shall/will be easy to use by all website admins

Each requirement is not related to an operation or what the application should do. Instead, the main focus in this case is the ease of use and performance. That’s the idea of non-functional requirements. Which can make non-functional requirements hard to measure and define when they have been successfully met.

Developers should always establish requirements before any coding begins so that they can effectively meet the projects requirements and to avoid project spec creep. Identifying functional and non-functional requirements is key to defining the projects over success or failure. By establishing the functional and non-functional requirements, you have a guide to follow in ensuring that a website meets it specifications.

Examples

Navigation Maps

Navigation maps are also known as site maps, and they are a very important development tool. Navigation maps are very useful tools in the development of websites and can help to keep the development  process on track . They basically are a visual representation of how the website pages will link together. In simple websites the navigation maps are very simple because every page links to every other page but in large websites with 100’s of pages linking every page to every other page isn’t practical and their navigation site maps are very complex.

Navigation maps as a development are not to be confused with a live websites site map. On a live website you should have a sitemap for your users to aid the navigation of your website. In this instance the sitemap is a list of pages of a web site accessible to crawlers or users and should take the form of both an “html” page and an xml document. The content is the same and both development sitemaps and live website sitemaps are typically organised  in hierarchical fashion.

Complex navigation map