Get 10 free images today. Use code PICK10FREE at checkout. Get started!

Blog Home Platform Solutions A Practical Guide for Visual Website Design

A Practical Guide for Visual Website Design

We worked with Wix to put together a practical guide for visual web design best practices so you can create a beautiful website with confidence. 

Image by Nataliya Peregudova.

Visual design is one of the most effective ways to ensure your brand’s story gets told the way you intend. Moreover, a strong website design can generate leads, increase conversions, and inspire genuine connections with your audience.

We chatted with Maggie McKosky, VP of UX & Product Design at Shutterstock, and experts at Wix, a Shutterstock API partner, to compile the best practices around designing beautiful and effective websites and landing pages. 

Table of Contents

Subscribe to receive the latest insights.

Laying the groundwork

Image by saravutpics.

Define the goals of your website

The first step to creating a website is clearly defining your goals. 

You can use these goals in two ways:

  1. Define your audience and help make decisions about the website structure, design, and overall user experience to guide visitors to the desired action(s) on your website.
  1. Define success metrics to measure and improve website effectiveness.

In addition to a quantitative goal, consider the feeling and emotion you want to invoke. Humans are often moved to act by our emotions and a well-designed website guides user behavior through visuals, text, and interaction design that produce an intentional emotional connection to help drive actions.

Decide on the website page structure

Image by Evgeniya Porechenskaya.

With your goals in mind, the next step is deciding how navigation will work, how the website is laid out, and what pages you may need. 

As Maggie McKosky, VP of UX & Product Design at Shutterstock, shares, “It’s important to focus first on understanding your user and their goal(s). This will then inform the design direction and allow you to move forward in establishing the sitemap, structure, and initial layout of your website pages (what can be referred to as user flows and lo-fidelity wireframe state), then applying visual elements to help complement it as the last step (what can be referred to as the hi-fidelity, polished state).’

“When building a website, think of it like building blocks. What are the key pages you need to tell your story?’

“You will need a homepage because it’s the first page your users will land on. This should focus on establishing and describing your brand and story. It should be impactful enough to leave a lasting impression with your users so they want to come back.’

“You may also need sub-pages and product pages to link out to from the homepage if the user wants to find more information and dig into the details.’

“Once you’ve established the overall structure and key pages of the user experience of your website, you can then focus on the visual elements and content of each page to give it that final polish.”

Selecting the right visuals

Image by Alones.

Consider the page type

You’ll likely have multiple pages on your website. Given that each page serves a unique purpose, the visuals you select should take this into account and remain relevant to your overall goal of the page and website. 

For example, the homepage where your brand’s story begins makes it a great place for striking imagery that stands out. This is also where most visitors land first so the image(s) you choose should make an impactful first impression that accurately reflects the story you want to tell.

On sub-pages, you should continue to use background images or a hero image to evoke emotion in your audience and help strengthen the connection they feel to the unique story of your brand. 

On product detail pages, the product should be the star of the show. Make sure the product photo has adequate contrast and presents the product in an accurate way.

Criteria for selecting visuals

Image by Nikolai Kazakov.

Once you know your users, the brand story you want to tell, and the structure of your website, you can narrow down your search by going through the following steps for identifying the perfect visuals.

  1. Relevant — Any visuals you choose for your website should establish the right message and tone right away, and always tie back to your brand. You can also use visuals to set a unique aesthetic that makes your brand stand out from competitors. 

The best visual design elements showcase your brand’s unique personality and style while relating back to your audience.

  1. Contextual — The most effective website visuals are contextual and relatable. Storytelling is much more effective when the audience can visualize themselves in any imagery you include. 

This is especially true in lifestyle imagery. If your website is about bicycling, images of people enjoying their bicycles on the homepage tell that story and create that personal connection better than images of riderless bikes. That type of image would be more appropriate for a product detail page, where the product itself is the central focus.

  1. Authentic — Inauthenticity is hard to define but easy to spot. Respect your audience’s intelligence by staying away from generic lifestyle images that don’t speak to your brand or don’t spark emotion.  

For example, a website about financial wellness could have a piggy bank on its homepage that carries little emotions. Or, it could show a happy, retired couple walking barefoot on a white sand beach. 

Whether they know it or not, visitors seeing the image of the couple on the beach will experience a moment of self-reflection. They might envision their own retirement when they can be as care-free as the couple in the picture. 

It’s a lot easier for someone to project themselves into a happy image like that as opposed to a piggy bank. Making that authentic connection is a powerful way to create a positive association with your brand.

Using design to guide the user experience

Image by Ekaterina Kondratova.

Good content and strong visual elements play a key role in shaping the user experience and helping to attract and captivate audiences. 

The visual elements (imagery, video, fonts, colors, etc.) you choose are not only important to creating a strong first impression, but they can also serve as guides for a holistic user experience. 

A few ways to guide the user experience with visual elements include:

  • Using bold primary and secondary typography (e.g. larger headlines with smaller body copy), and contrasting colors to create depth and direction while also establishing the information hierarchy.
  • Using striking imagery and engaging video content to drive brand awareness and increase users attention span to encourage them to read through the content and want to come back for more.
  • Using clear calls-to-action (e.g. buttons, links) to inform the audience on the next steps to take and how to consume the content.
  • Using white space to provide better legibility, indicate where to focus on the page, and create breathing room between different visual elements so they don’t compete with each other in order to clearly communicate your ideas.
  • Using complementary colors to make the overall design cohesive. You can also use complementary color schemes to create categories based on product lines, services, or whatever theme makes sense for your business. 

Making your website accessible with Wix

Image by sanneberg.

Now that you’re more familiar with how to tell your brand’s story through effective visual design, it’s time to put these methods into practice. 

Together, Wix and Shutterstock provide you with the tools you need to incorporate powerful imagery into your website and bring your ideas to life. From a comprehensive blogging platform to marketing integrations and professional design features, Wix allows you to build and manage your entire online presence all in one place. 

But it doesn’t end there. Wix is committed to making sure that everyone can access the content of your website, regardless of their ability. You can learn more about Wix’s accessibility tools for your website here

In fact, nearly one billion people in the world live with disabilities —  that’s 15% of the world’s population. Not to mention, the number of people in the United States who have a disability is rising every year. 

Web accessibility gives people with vision impairment, hearing loss, cognitive disability or injury the opportunity to experience and interact with your website. These individuals may use accessibility tools like screen readers, and visual indicators to better understand the context and content of your site.

Using alt-text for visuals

Image by NadyaEugene.

Wix’s accessibility tools enable you to make the images and visuals on your site available to all. An easy way to do so is by adding a textual description to images known as alt-text. 

Alt-text is a text description used in HTML that helps expand the experience your users have on your website when using screen readers by accurately describing the content and function of the images on your website. 

When a screen reader comes across an image without an alternative text, or alt-text, it simply tells the user that there’s an image there. This is not very helpful if the person cannot discern what the image is and how it relates to the surrounding page content.

The best way to write alt-text is to be as concise as possible. Generally, the image alt text should not be more than a brief sentence or a few words. Your goal should be to describe the image accurately, so that any visitor can understand the image without seeing it. This additional text also may help your site rank higher in search engines, as it gives more context and information as to what your site is all about. 

Not only does Wix’s commitment to accessibility make the web a better place for everyone, it also helps us improve our design strategy. For example, if alt-text descriptions for images don’t add much value to the context of the page, it helps us understand that the image itself didn’t provide as much value as we intended. This enables us to choose images for our pages, resulting in a more strategic approach to the page’s design. Reassessing the images can further strengthen the page’s message and improves overall usability.

Making your site accessible shows that you value inclusion and diversity, helping enhance your brand while potentially minimizing legal risk in countries that have laws requiring digital access for all. Not to mention, content and images on your site that are inclusive and accessible to people with disabilities may rank higher in search engines.

Here’s how you can add alt-text on images in websites created with Wix.

Ongoing testing and optimization

Image by Tirasak K.

Even with adequate planning, it’s a good idea to test both visual elements and hypotheses in order to optimize site performance and ensure that visitors are converting at the right steps.

An easy way is by splitting your website traffic to drive to each page with different visual content (e.g. images, copy, CTAs) to see if there is a higher click-through rate on one page or the other. 

This will help determine the level of success and better understand which page’s visual content is more engaging and/or match the emotional triggers of your users that ultimately guide their decision making. 

With iterative testing, you can improve the performance of your website while gathering knowledge on user behavior which can be leveraged for other marketing and sales initiatives. 

Get started with your website today

Image by Ondrej Senk.

A website provides a critical access point for customer engagement and reinforces a brand’s identity. With the right set of tools, strategies, and high-quality, accessible content, you can create a website that effectively engages with all users and makes a lasting impression. 

The Shutterstock collection of over 300 million images is integrated into the Wix Editor, offering authentic and effective imagery, perfect for a range of industries and business types. In fact, 100% of Wix websites contain images, illustrating the importance of visual content as an essential storytelling tool. 

Whether you’re uploading your own images, using Wix’s free media library or selecting images and videos from Shutterstock, you can create websites faster with visuals that amplify your message and resonate with your audience. 

Create a website you’re proud of.

Featured image by Michael715.

Share this post