The web design process in 7 simple steps
In order to design, build, and launch your website, it’s important to follow these steps:
1. Goal identification
In this initial stage, the designer needs to identify the end goal of the website design, usually in close collaboration with the client or other stakeholders. Questions to explore and answer in this stage of the design and website development process include:
- Who is the site for?
- What do they expect to find or do there?
- Is this website’s primary aim to inform, to sell (ecommerce, anyone?), or to amuse?
- Does the website need to clearly convey a brand’s core message, or is it part of a wider branding strategy with its own unique focus?
- What competitor sites, if any, exist, and how should this site be inspired by/different than, those competitors?
This is the most important part of any web development process. If these questions aren’t all clearly answered in the brief, the whole project can set off in the wrong direction.
It may be useful to write out one or more clearly identified goals, or a one-paragraph summary of the expected aims. This will help to put the design on the right path. Make sure you understand the website’s target audience, and develop a working knowledge of the competition.
For more on this design phase, check out “The modern web design process: setting goals.”
Tools for website goal identification stage
- Audience personas
- Creative brief
- Competitor analyses
- Brand attributes
2. Scope definition
One of the most common and difficult problems plaguing web design projects is scope creep. The client sets out with one goal in mind, but this gradually expands, evolves, or changes altogether during the design process — and the next thing you know, you’re not only designing and building a website, but also a web app, emails, and push notifications.
This isn’t necessarily a problem for designers, as it can often lead to more work. But if the increased expectations aren’t matched by an increase in budget or timeline, the project can rapidly become utterly unrealistic.
A Gantt chart, which details a realistic timeline for the project, including any major landmarks, can help to set boundaries and achievable deadlines. This provides an invaluable reference for both designers and clients and helps keep everyone focused on the task and goals at hand.
Tools for scope definition
- A contract
- Gantt chart (or other timeline visualization)
3. Sitemap and wireframe creation
The sitemap provides the foundation for any well-designed website. It helps give web designers a clear idea of the website’s information architecture and explains the relationships between the various pages and content elements.
Building a site without a sitemap is like building a house without a blueprint. And that rarely turns out well.
The next step is to find some design inspiration and build a mockup of the wireframe. Wireframes provide a framework for storing the site’s visual design and content elements, and can help identify potential challenges and gaps with the sitemap.
Although a wireframe doesn’t contain any final design elements, it does act as a guide for how the site will ultimately look. It can also act as inspiration for the formatting of various elements. Some designers use slick tools like Balsamiq or Webflow to create their wireframes. I personally like to go back to basics and use the trusty ole paper and pencil.
Tools for sitemapping and wireframing
- Pen/pencil and paper
- Balsamiq
- Moqups
- Sketch
- Axure
- Webflow
- Slickplan
- Writemaps
- Mindnode
Design interactions and animations without code
Build complex interactions and animations without even looking at code.Start animating
4. Content creation
Once your website’s framework is in place, you can start with the most important aspect of the site: the written content.
Content serves two essential purposes:
Purpose 1. Content drives engagement and action
First, content engages readers and drives them to take the actions necessary to fulfill a site’s goals. This is affected by both the content itself (the writing), and how it’s presented (the typography and structural elements).
Dull, lifeless, and overlong prose rarely keeps visitors’ attention for long. Short, snappy, and intriguing content grabs them and gets them to click through to other pages. Even if your pages need a lot of content — and often, they do — properly “chunking” that content by breaking it up into short paragraphs supplemented by visuals can help it keep a light, engaging feel.
Purpose 2: SEO
Content also boosts a site’s visibility for search engines. The practice of creating and improving content to rank well in search is known as search engine optimization or SEO.
Getting your keywords and key phrases right is essential for the success of any website. I always use Google Keyword Planner. This tool shows the search volume for potential target keywords and phrases, so you can hone in on what actual human beings are searching on the web. While search engines are becoming more and more clever, so should your content strategies. Google Trends is also handy for identifying terms people actually use when they search.
My design process focuses on designing …