— August 4, 2019
As a visual designer who has worked on countless redesigns over the years, I’ve learned that it is important not only to focus on the visual aspects of the project, but also to understand your client’s strategy, goals, and audience. It is also helpful to have a few technical skills to enhance your creative choices, such as understanding what the client can and cannot do based on their CMS, their budget, and their timeline. You have to wear multiple hats.
The Beginning: Crucial Questions to Ask
Getting on the same page as the client is a critical first step. If you want your website redesign to be truly successful, you need to understand the client’s business goals and what they want to achieve with the new website (do they need more sales, better quality leads, more traffic?). Here are some great starting questions you can ask them:
- What makes you different from your competitors?
- What do you love about your current website? What would you want to change?
- Do you have brand guidelines?
- What are three websites that you love?
- What is your timeline?
The UX Designer: Your New BFF
If you have the luxury of working with a UX designer, they will contribute immensely to the success of your website redesign. You can create the most beautiful website in the world, but if it doesn’t impact the client’s visitors, it won’t get results. Bringing in a UX designer can help solve those problems early on. Here are some ways a UX designer can help during the redesign process:
- They research analytics, do competitive analysis, check out heatmaps, understand and/or create personas, conduct client interviews and stakeholder interviews … and these elements are all critical to creating a successful website and avoiding going in the wrong direction.
- With this information, UX designers create a sitemap of the navigation, which is the foundation of the rest of the redesigned website.
- After creating the sitemap, the UX designer crafts wireframes of each page and applies their findings to the new structure. This structure includes content and functionality based on the user’s needs.
- Annotating these wires with business objectives, high-level content, and placement of visuals makes it easier for others to visualize the final product.
- Finalizing this wireframe with key business objectives makes it easier to focus on the design and development once this stage is completed.
It is also important to bring in the web developer during this time to make sure everyone on the project is on the same page with the same goals.
If there is no UX designer on the project, understand that as a creative, those responsibilities might fall to you. You will most likely need to understand the client’s marketing efforts and goals, check out heatmaps (if they have them), do some competitive analysis of other websites, and put yourself in their users’ shoes.
Visual Design and Identity: Can You Make This Pop?
Most companies have an existing set of brand guidelines, a comprehensive document that defines the visual identity of the company’s brand. The elements in the brand guidelines should help you gain a deeper understanding of how the company wants to portray itself.
If a brand document is outdated or nonexistent, a workable alternative is a mood board. Work with your client to come up with visual elements such as colors, fonts, iconography, and images that align with the brand’s goals and audience. There are also bigger picture design questions to keep in mind: Does the audience view their site on mobile? Does the client have large, beautiful images they’d like to showcase? Do they have a strong platform and want to display screenshots on the page?
Focus on these style elements as you work on the redesign:
Consistency: Keep the design and brand consistent throughout the entire web experience.
Simplicity: Keep primary elements simple by using two to four colors and one to two fonts with multiple weights.
White space: Spacing between text and images makes it easier for visitors to focus on the content and can help important elements, such as CTAs, stand out.
Color psychology: Bold colors can highlight the importance of a page element and draw the viewer’s attention to something such as a CTA or graphic. Most websites also use colors to send subliminal messages:
- Orange is energetic, cheerful, and warm, used to draw attention. A website may include orange CTAs because it is such an attention-grabbing color.
- Blue is peaceful, calming, and tranquil, and is seen as a sign of reliability.
- Green is the color of life and energy and is typically associated with money.
Images and graphics: Leveraging custom photography builds confidence and trust, showcases authenticity, and instills a brand presence. Most people understand that stock photography is overused and outdated. The ideal choice would be to hire a professional photographer to capture beautiful images or an illustrator to create custom graphics and illustrations.
Sadly, a lot of companies do not have the budget for either, in which case creatives are forced to resort to Getty Images, iStock, ShutterStock, or free alternatives such as Unsplash and Pexels. The advantages of using stock photos are that they are cheaper and you can download them instantly. If you do need to resort to stock images, know that there are two types of stock photos: royalty-free images, available for a fixed fee, and rights-managed images, which are more expensive and higher quality but come with limitations as to where and when they can be used.
Engaging Content: Write for Short Attention Spans
Last but not least, even though this article is focused on the design aspect of the creative process, I’d like to mention that content plays a key role in the success of a website. You can have a beautifully designed site, but if the copy doesn’t resonate with the visitors, your beautiful work will have limited success.
Creating engaging copy that drives action and portrays the company’s goals is one of the most important aspects of a successful website redesign. But making sure the content works well within the design is also important. Using visual hierarchy with typography and applying that to short, concise, and easy-to-scan copy is essential to grab the visitor’s attention and encourage them to move further into the website—which is not only your client’s goal, but also yours. After all, you want visitors to the redesigned site to see your hard work!