Website development is a continuously evolving art that goes well beyond how a site looks and what it says. Creating an optimized user experience and addressing search engine requirements to ensure high rankings is an art in and of itself. Here are the top eight essential steps we include on our web design checklist and why they matter.
Step 1: Determine the goal for the new website
Your client says they want a new website, but is that really what they mean? What web designer hasn’t delivered designs that fit a company’s current brand only for them to be disappointed that it doesn’t look “new” enough. It’s very hard on a designer to receive vague direction to “design based on the current brand and know that the client is open to adding new colors”—this approach almost always fails because it’s too vague and non-specific.
It’s important to have conversations with your client before any website development starts to ensure that their brand is well-developed and has a formal brand guide—and to confirm that the current brand will guide the website’s look and feel. If not, a discussion is merited to determine if the website design is truly the first step in the process or whether their goal is to pursue a brand update via the website design.
Should this be the case, you’ll need to start further back with brand development—a mood board, logo refinements, color palettes and fonts—before you even start the web design. Even if a full rebrand isn’t called for, but a company has a very light brand guide, we recommend building that out as the first step, before jumping into wireframe and design.
Step 2: Understand how your audience uses your current website: desktop, laptop or mobile?
It’s important to understand where a website’s traffic is coming from before starting design and wireframes. The world is more mobile than ever, and if the majority of a company’s customers are visiting from mobile devices, you’ll need to focus on mobile-first design. The simple fact is that many features that work on large displays—like hovers, rollovers and popups—become a click on mobile, which will make for a poor user experience. On mobile sites, it’s almost always better to avoid such functionality and have that content directly on the page or give it its own page instead of creating a mobile site that’s incredibly hard to use.
Speaking of hard to use, a lot of web designers don’t think about things like optimizing button sizes or menus for mobile. If mobile design isn’t considered upfront, buttons often are too small and menu items too close together for the average human finger to click effectively—and no user likes getting sent to the wrong page and having to navigate back. Another consideration is charts and graphs. If a site is designed to automatically shrink images for mobile, you often end up with charts and graphs that are illegible. These should be hard coded into a website to ensure they remail legible on a mobile site.
Additionally, websites are fairly boxy now in terms of look and feel to ensure that they are mobile responsive. Designers should bring more organic shapes and textures through design elements to minimize this effect. You should also remember that everything must stack, so you can’t design long, two-paragraph columns, as that would make users scroll down and back up. By designing with mobile-first in mind, a strong user experience is assured.
Step 3: Understand your audience and how they will use the updated website
It’s very important to understand who your users are and to tailor your website for your primary and secondary audiences—there’s no point in having a gorgeous new website that doesn’t speak to your customers. A lot of our clients are in the B2B high tech space, which often leads us to design a site differently than one might for consumer sales. Such websites need to be approachable for visitors who know what they want—as well as those who don’t.
The homepage must be laid out in a way that creates very clear and consolidated paths for visitors so that most people can easily find the information they need. The site must meet a user where they are in terms of the journey, given different levels of familiarity with the company’s products and technologies. The information to be conveyed is complex for many of the companies we work with, and the site’s users have varying degrees of knowledge, so the homepage and user journey must be carefully planned to cater to all.
Step 4: Wireframe, wireframe, wireframe
Make sure to prepare wireframes before building out a website. Getting the site structure approved first has many benefits. It will help minimize revisions on design if the structure is approved first, because clients will understand that certain elements are fixed for a reason. It also helps with content development, as the writer will know exactly how much text is needed for a given block on the wireframe. Finally, it helps the programmers who can get started with the programming before full design is done, helping to keep projects on track and on schedule.
Step 5: Don’t forget about user testing!
Too often, web companies design and program an entire website and go live, only to discover that users aren’t engaging with it. Although the developers thought they knew how users would journey through the site, the reality is that may not be what happens. Web companies should build time into the website development plan for some user testing. Take advantage of the various tools that exist—heatmaps, for example—and have people not involved in the website design process use it before it goes live. If you find that users are rage-clicking in some areas, or never visiting others, the web development team will gain valuable insight that will drive necessary course corrections before a site is live—significantly improving the user journey and user experience with a given site.
After the website is launched, don’t walk away and forget about it—best practice is to continue to monitor and assess post launch. Understanding how users are using the site in the real world may make it clear that updates are needed, because users aren’t engaging with the site and finding the information they need.
Step 6: Consider accessibility up front
Accessibility is more important than ever before when designing a website and will even impact a site’s search rankings as sites that aren’t accessible are penalized by the search engine algorithms. Plugins now exist that can help automate a site’s accessibility, but there are some base level considerations to think about when starting a new website project.
From a design perspective, color contrast is one of the biggest issues for accessible designs and font size is another key consideration. Hyperlinks need to be high contrast to be compliant. Designers also need to be careful about positioning text overlays, especially on pages with a lot of images. And this attention to accessibility needs to be extended to the teams who will manage the eventual site. Say, for example, you’ve designed blog post images to have the headline on the left and image right-side oriented, but then the marketing team picks an image with the focus on the left side – suddenly your copy is illegible. For this reason, it’s important to have controls in place so when non-designers upload images they will consistently be formatted correctly or ensure that a shaded overlay exists wherever text will go. Having a design that looks good in a comp but doesn’t work when marketing team starts uploading content is a non-starter for accessibility.
Step 7: Optimize the homepage to maximize engagement
A website developer really needs to consider the real estate above the fold on the homepage and make the most of it. The homepage is almost always the most visited page on the site, and many visitors never go beyond what they see above the fold. This area of the site needs to be the most engaging, both visually and in terms of content, to convince a visitor to click or scroll.
Step 8: Make your comps as realistic as possible
It’s a best practice when working with clients to really pay attention to the copy that you use on the homepage and other key pages when sharing comps. It doesn’t matter how many times you say the copy is “placeholder,” if a client can’t visualize what their site will look like, they won’t have a good experience and you’ll likely end up with dissatisfied clients. We’ve found by taking just a little bit of extra effort to include real copy it goes far with helping clients envision what the final deliverable will be, and often results in faster sign-off.
Final Thoughts
While every company loves to have a beautiful website, you should be sure to work with vendors who will collaborate with you to ensure that your site is also functional, speaks to your audiences, and has a clear user journey to maximize the user experience. Following these eight steps will go far to ensuring that your new website will wow and help you achieve your business goals.
