A full guide to the web design process

Brandon Nickerson June 9, 2020 7 min read Design
blog 31 web design process feature img

When you see a newly built house, you might not immediately think about the steps it took to build it – laying the foundation, framing, plumbing, electrical, etc. You’re focused on the finished product. But when you build your own home, the process becomes vital to achieving the desired result.

Think of the web design process like building a house – there are web design best practices to know, steps to follow, and strategies to get it done most efficiently.

If you want to achieve the best possible results with your website, you need a reliable and agile web design process. One that establishes the goals of your business and uses those goals as the north star to guide each step.

Our process turns an average website into a revenue-generating asset. And we thought we would take you behind the scenes to see how we do it.

Our step by step web design process

Step One – Strategy & planning

Before any production work can be done, we first need to create a detailed plan. We use three key planning resources – a web plan (outlines the project scope), a workback schedule (outlines the project timeline), and wireframes (a blueprint of the website).

Web plan

An illustration of a compass surrounded by elements of the web design process

The web plan is a living document that keeps the project team (project managers, content strategists, copywriters, designers, and developers) and client aligned on the most important details when working together to achieve the client’s goals. Let’s take a look at a few key parts of Tiller’s web plan:

  • Key objectives – We identify the goals and objectives of the website. Is it to help increase traffic? Or drive expansion in the market? These goals will provide direction to each subsequent step in the process. 
  • Audience profiles – Here we confirm the target audience – job roles, decision making role, pain points, key needs, etc. These are key pieces that will inform design style and messaging. 
  • Geographic information – We determine if the market is local, national, or international. The geographic target can influence keyword research, cultural nuances, and overall brand positioning.
  • Content specifications – We establish the brand voice and personality to be used in the copy as well as whether copy will be keyword driven (we always recommend that it is). If a client has existing material that they want included in the site it’s also listed here. 
  • Design specifications – We identify any existing brand guidelines or specific design styles the client may require or request. It’s crucial to identify this information during the planning phase to avoid missing the mark and wasting time during design production. 
  • Technical specifications – Here we confirm whether a content management system (CMS) is needed, and if so, which one. We typically use WordPress, but this will depend on the client’s needs. Any necessary API integrations (application programming interface) should also be listed.
  • Competitor review – We research the competitive landscape, including what competitors are offering and how they are positioning themselves in the market. Once we know competitors’ strengths and weaknesses, we can strategize how to outperform them.
  • Inspiration – We collaborate with our clients to find design styles (including colour palette, illustrations, layout) that resonate with and inspire them. It’s also helpful to identify styles that they don’t like. We often use moodboards to ensure we are aligned on the visual elements that will be used to inspire the design.
  • Sitemap – This is a list of all pages that will be included in the website. It gives the first frame of reference for how the pages will work together in the user journey. 
  • Information architecture – This is a beefed up version of the sitemap that provides content guidance for each page. The information architecture and sitemap are the primary elements used to inform wireframes and copywriting. 

Workback schedule

The web design process involves multiple disciplines (designers, developers, copywriters, project managers, etc.), so it’s important to get clear on timelines. In our opinion the best way to do this is with a workback schedule. It identifies the launch date (agreed upon with the client), and then works backwards (hence the name) to schedule important milestones.

Workback schedules are dual purpose – they provide internal deadlines to keep the team on schedule, and also communicate to clients when we will need material or participation from them. This allows everyone to schedule and plan accordingly.

Wireframes

Wireframes are the blueprints for the website and are a foundational element of web design and development services. They outline how headlines, images, and other content elements are laid out and determine the flow of content from page to page. And as we mentioned earlier in the web design process, they are created from the sitemap and the information architecture.

Wireframes also map out the user journey (the path they take to navigate the site). To help clarify the user journey further, we often create a navigable prototype. With a prototype we can put ourselves in the user’s shoes and click through pages to really experience the user journey before moving on to design.

Step Two – Copywriting

Copy brings your messages to life in a way that will resonate with your target audience. It’s an unfortunate myth that all good writers can write good copy, because copy is more than grammatically correct sentences. Copywriting is storytelling. And since web design statistics tell us web users are scanners, the story must be clear and digestible.

Experienced copywriters use the information obtained in the web plan to craft a compelling story about the solution a business has for the customer’s problem. Brand voice and personality are used to help the message resonate with the target audience and their specific needs. And it’s all done in as few words as possible.

Website copywriting services may also include the use of target keywords – specifically chosen words that improve search engine optimization (SEO) by helping Google determine what each page is about.

Step Three – User interface design

User interface (UI) design is the step most people think of when they think of a web design process. It’s where ideas and vision come to life. Colour palettes are explored, typography is chosen, and icons and illustrations are designed.

UI design is an iterative process that requires frequent collaboration with the client. It’s important we get client feedback regularly to make sure that design is moving in the right direction and is meeting, if not exceeding, expectations.

Our design team does a formal handoff to the development team as the UI designs are completed. Clear direction on how to properly implement design elements is needed to ensure a smooth transition from design to development.

An illustration of wireframes next to a completed web design

Step Four – Development

Now for the behind the scenes work. The development team uses code (HTML/CSS/PHP, JavaScript, etc.) to construct the page and implement functionality based on design. They turn static content into a live, interactive experience.

For example, developers create microinteractions (small movements driven by user interaction) and animations to bring the pages to life. They also tackle complex technical factors like site security, API integrations, and SEO. SEO friendly web design encompasses elements like page speed and title and description tags, to name just a couple.

Step Five – Quality assurance

Quality assurance (QA) is the verification process that ensures your website does what it’s supposed to do. At Tiller we do a multi-step review on a staging site. This allows us to see how the website will act when live.

  • Development QA – the development team goes through the back end work and ensures there are no glitches in the code.
  • Design QA – the design team double checks the layout (both desktop and mobile), hover effects, animation, graphics, typography, alignment of all elements, and colour palette consistency.
  • Content QA – this final QA (at Tiller this is completed by a project manager and copywriter) is multifaceted and includes checking things like site security, links, forms, integrations, copy, and various elements of SEO.

Step Six – Launch

The long awaited step! Once QA testing is complete, it’s launch time. We move the site from staging to live. There isn’t a big red button, but it’s an exciting moment for us and our client to see ideas and hard work come to life.

An illustration of a website going live

Step Seven – After Action Review

Although not formally part of the web design process, at Tiller we do an After Action Review following each project launch. We gather the project team together and discuss what worked well so that we understand what makes for a successful process. Then we evaluate what could be improved on in the future. This continual improvement is important to us and the After Action Review helps direct how we can improve the quality and efficiency of our step-by-step web design process.

Step Eight – Ongoing support

There is a wide range of options for ongoing site support. Some clients may opt for simple WordPress updates, while others may want ongoing design and development support.

For most businesses, your site should be a core element of your marketing activities and should be optimized and updated to support your go-to-market strategy.

We often recommend A/B testing to our clients post-launch to direct optimizations. An A/B test takes two variables – say, two headline options – and tests them each individually to see if one drives more conversions than the other. This sort of testing guides optimizations with tangible data.

We also suggest regularly improving on SEO. Google frequently updates the algorithm that determines page ranking. Without regular optimization your website can quickly fall in rankings.

The modern web design process: Agile web design

Web design processes used to be rigid and linear (e.g. design must be complete before development can start). But the modern web design process is much more agile, with various disciplines working in tandem.

When our content strategists, copywriters, and designers collaborate on wireframes, we can create a stronger strategy moving forward. The content strategist and copywriter can contribute ideas around effective messaging and can write more efficiently, having a better understanding of the framework of the website.

Setting up UI design and development to work in tandem can also create more efficiency. While there is a necessary progression of work, the disciplines can be overlapped. It takes strategic planning for it to be effective, but when executed well we feel that an agile web design process generally leads to better outcomes.

3 tips for you when engaging in the web design and development process

  • Embrace face-to-face meetings or video calls. Web design is a creative process that requires trust. The more you see your team, the better the connection.
  • Engage in collaboration. Your ideas are valuable and your end product should be an exciting reflection of your vision.
  • Invest in the process. You will get out what you put into this process. Your thoughtful feedback and responsiveness (combined with an agency’s clear direction) will result in a stronger end product.

What to expect from your web design agency or freelancer

Communication

Your agency or freelancer should communicate frequently throughout the web design process. They should ensure you have a clear understanding of the project objective, as well as what they will need from you along the way.

Expertise

You should be provided with rationale for all decisions and be advised on web design best practices. An experienced agency or freelancer should advocate for what they believe will help you get the best results. They should take the lead, not simply do what is asked.

Collaboration

Your team knows web design, but you know your business. You should be invited into the process and be free to share your expertise and ideas.

Business savvy

Your team should have business acumen and be able to advise on the overall strategy behind decisions (e.g. messaging, development, design elements, etc.). Every single part of your website design should align with the goals of your business.

Conclusion

We get excited at the start of each new project because we get to help bring our clients’ visions and ideas to life. Our web design process helps companies take their businesses to the next level, stand out in the market, and achieve their goals.


Ready to get started?

Get a proposal

Keep Reading