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 new website design checklist and why they matter.
Step 1: Determine the Goal of a New Website
You want a new website, but is that really what you mean? When you direct your web designer to design to your current brand you may be disappointed that it doesn’t look “new” enough. It’s very hard for a designer to receive vague direction to “design based on the current brand, but you’re 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 designer before any website development starts to ensure that your 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 your 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 you have a very light brand guide, we recommend building that out as the first step, before jumping into wireframe and design.
Step 2: Determine Where Your Traffic Comes From
Do your visitors view your site primarily on their desktop, laptop, tablet, or phone? Understanding where your website’s traffic is coming from is important before starting design and wireframes.
The world is more mobile than ever, and if the majority of your 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, many web designers don’t think about things like optimizing button sizes or menus for mobile. If the 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 remain 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 don’t want long, two-paragraph column designs, as that would make users scroll down and back up. By making sure your designer designs with mobile-first in mind, a strong user experience is assured.
Step 3: Understand How Your Audience Uses Your Website
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 your designer prepares wireframes before building out a website. That way you can approve your design structure, which will minimize revisions because you 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 the full design is done, helping to keep projects on track and on schedule.
Step 5: Don’t Forget about User Testing!
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 in 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 that 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 the comp but doesn’t work when the 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.
