A 6 Step Website Design Process for Clients
Written by Kristen Wright on
Potential web design clients may be new to understanding how the website design process works. Educating clients on your web design process is a great chance to demonstrate your expertise, credibility, and authority in providing websites that get results. In this post, we’ll break down the website design process into 6 steps.
The 6 Steps of the Web Design Process
Quality web design is much more than building a website, and having a step-by-step approach to web design projects shows all the work and skill involved in developing a successful online presence.Quality web design is much more than building a website, and having a step-by-step approach to web design projects shows all the work and skill involved in developing a successful online presence. Maybe you’ve never thought about your approach to the web design process in these terms, but maybe the outline in this post can help shape your own.
Take these 6 steps, create a special page on your freelance website, and point new clients to your web design process. Most clients will prefer a clear, actionable plan for their web design project, and clarifying your website design process will help with communication throughout the project, ultimately leading to happier clients–and less work (and headaches) for you.
Step 1: Discover
The Discover phase of the web design process is all about information-gathering. This step is important for you to understand more about your client’s business and industry, their target market and customers, and the ultimate goal/aim for the website.
Questions to Ask Your Clients During This Step:
- What does your business or organization do?
- What sets your business or organization apart from your competition?
- Who are your competitors?
- Who is your ideal customer?
- Describe the concept, project or service this site is intended to provide or promote.
- What is the goal of your website?
- Who is coming to your website?
- What is your dream for this website?
- Is there a budget for their web presence?
In addition to these questions, this post offers 65 Questions to Ask During Your Next Freelance Client Meeting. The suggested questions in this post are divided into seven main groups: client, project, audience, brand, features and scope, ecommerce, and time and budget. Each group offers important areas of potential information that will help shape the overall web design project.
Using the approach included in the 65 Questions post, the Discover step of the web design process is really more like an initial consultation meeting with a potential client.Using the approach included in the 65 Questions post, the Discover step of the web design process is really more like an initial consultation meeting with a potential client. During they Discovery phase, you can better gauge the chemistry between you and the potential client, investigate the working conditions you will have with the potential client, and estimate the scope of the project.
This meeting is also when you can inform the potential client about your process of web development (hint: this post!), and suggest additional features that can meet the client’s goals. This is also a good time to educate the potential client on the importance of your ongoing services for website maintenance.
Step 2: Plan
Just like information-gathering, the planning step of website design is a critical part of launching a new website. As designers, it’s easy to want to jump right into the design step, since that’s the most creative (and enjoyable) part of a project. But, ultimately, research and planning will help clarify your objectives for the website and guide your design, so spend a generous amount of time in this stage of the process. Just like the saying, “measure twice, cut once,” spending time on website planning is a good investment that will ultimately save you time and even money in the long-run.Just like the saying, “measure twice, cut once,” spending time on website planning is a good investment that will ultimately save you time and even money in the long-run.
During the planning phase, you’ll want to review or create an SEO strategy for the website. Since websites often organize lots of information into a user-friendly format, this is also a good time to get an idea of missing content before you start designing anything. The planning phase also helps clients understand their role in meeting deadlines with content so the launch process isn’t held up.
The planning phase of website design includes 3 basic tasks:
1. Review or Create an SEO Strategy
- Consult with the client on search terms for their business/industry
- Research and review keyword volumes
- Create a spreadsheet of keywords/keyphrases
- Audit existing content for SEO focus
- Make a list of SEO content needs to fill gaps
- Map keywords/keyphrases to existing or needed content
2. Create the Website Sitemap
After working on an SEO Strategy, it’s time build the website sitemap. A sitemap is essentially an outline of the structure of the pages that will comprise the website. Planning the sitemap prior to working on any website design has several benefits since you can build your design around the most important pages, plan the website navigation more efficiently, and get an overall idea of the content that still needs to be written.
- Using your SEO Strategy, build a sitemap with appropriate page hierarchies and content silos.
- Create an actual document for your sitemap/site outline. You can use the sitemap as a checklist to guide the project.
- Include basic website pages (About, Contact, etc.) plus additional keyword/keyphrase pages.
3. Content Review & Development
The last part of the website planning process includes an in-depth review of the website content. You’ll need to take an audit of existing content (if the client has a website already) and make a plan for producing new content. Clients can be responsible for creating new content, but sometimes it’s helpful to contract with a freelance writer to finish up content needs.
- Review existing web content
- Ask for non-web content such as brochures, business cards or flyers
- Hire or assign writers for content needs
- Put deadlines on content completion
Step 3: Design
The third step of the web design process is to design how the website will look. In this step, a website wireframe is created with basic web page elements such as the header, navigation, widgets, etc. The wireframe can then be moved into a more realistic mockup using a program such as Photoshop.
Design should also accommodate content. Content often accommodates design instead, and content ends up receiving very little attention. Website content is the number one thing you want viewers to notice. For each page design, ask yourself these questions:
- What is the main goal of the page?
- Is it clear to users what action they need to take?
- How does the design encourage users to take an action?
Good web designers also keep in mind how a design will translate to code. Even if you aren’t doing the development yourself, as a designer, it’s a good idea to invest in your coding skills. Have a developer review a design before it goes to the client.
Finally, use the Design step to finalize the overall look of the website with the client and discuss decisions for colors, typography, and imagery. Confirm the design with the client before moving on to any development.
Step 4: Develop
In the Develop step, the website design is translated to actual code that makes the website work. This stage can be the most lengthy, so keep clients informed on the status of the project.
A 3-sentence email like this one is great for maintaining client communication:
“This is what we did this week (past). This is where things are (present). This is what’s next (future).”
The basic steps of website development include:
- Install WordPress on a localhost or testing server.
- Install a starter WordPress theme.
- Install a WordPress backup plugin like BackupBuddy. Running a backup plugin during development makes it easy to 1) revert file changes and 2) move the site to the live domain or server for launch.
- Using the mockup, translate the design to the live site.
- Test and optimize along the way.
Step 5: Launch
Finally, it’s time to launch the website. Since there are so many steps involved in launching a website, it’s a good idea to use a checklist to make sure you haven’t missed a step.
Use these checklist posts to make sure your website launch goes smoothly:
Step 6: Maintain
This last and final step of web design is often overlooked by freelancers, but website maintenance is important for the long-term health and success of a website, as well as a source of potential recurring revenue.
Before a new website project even begins, educate potential clients on the longterm responsibilities of owning a website. Just like owning a car or house, a website will need upkeep and maintenance.Just like owning a car or house, a website will need upkeep and maintenance. Offer a monthly WordPress maintenance service to take website maintenance tasks off your clients.
On a basic level, a WordPress maintenance service includes the following necessary actions to keep a WordPress site running smoothly:
- WordPress Updates
- Theme and Plugin Updates
- WordPress Backups
- WordPress Security
- Analytics Tracking & Reporting
- WordPress Hosting
WordPress maintenance can also extend into other areas of website upkeep such as SEO, adding new content or updating existing content, comment approval/replies, spam cleanup and more.
Ask your clients: Is there a long-term strategy to edit, update, and promote your website? Who will be in charge of maintaining the website? Be ready to offer your monthly maintenance rate and inform clients about hourly rates if they need you to fix website problems, make changes to content, etc.
A Smooth Website Design Process
By following the 6-step outline above, the website design process should go more smoothly. With a little research and planning, your website design will be more informed. By following a checklist for development and launch, you won’t miss crucial steps. And finally, maintaining a website protects the investment made in building the website. Ultimately, clients will be more satisfied with their experience and see the value in their website.