As a startup, your website is an invaluable sales tool. Visitors will use your website to gauge interest, gather information, and hopefully sign up for your product or service. You will want to create a phenomenal web experience, highlighting your unique value proposition and how you can serve their needs. 

To create that captivating user experience, your first instinct might be to use flashy hero images or attention-grabbing one-liners; and you’d be right. Let's discuss how you can maximize those elements on your website’s pages, featuring just how awesome your website and products/services really are. The solution is much simpler than you might think, and it’s called negative space.

What is negative space, and why is it important?

Negative space is the area of your website that does not include content. It includes the “blank” backgrounds that your content sits on, and any marginal space around content items.

Let’s look at two examples of negative space used in a few startup websites below. For your convenience, I’ve highlighted the landing page’s primary elements—anything not highlighted is negative space.

Arrow

Arrow is an AI-powered content plan that offers to help visitors get better content to meet different business needs. Their landing page is fairly simplified: standard header along the top, left-side oriented header with description, right-side oriented hero image, and an action button. Together, those four elements work to move visitors towards Arrow’s onboarding process. However, it is negative space that allows each element to work so effectively.

‍

One of the first things to notice about Arrow’s landing page is that content like the header and text do not sit in their own “containers,” meaning that they sit on top of the negative space. This simplifies what visitors have to visually process when they first view the screen. The only two elements that include a “container” are the action button, which is sitting in a blue “container” to draw visitors’ attention and the image, which naturally has its own border. 

Get Creative With The Hero

In dealing with its hero image, Arrow gets creative with negative space. The image of the user praising Arrow’s service has its own background and border, but Arrow decides to use two small images to help break up the otherwise boring transition between the white background of their image and the gray background of their page. The image of the unicorn “prances” across the image’s border and into the negative space, perhaps suggesting that Arrow’s services will help visitors with content that is exciting and “outside the box.” Arrow’s logo seems to almost stamp the image down onto the page, perhaps implying that the image represents a “certified” Arrow user experience. 

Use Contrast For The CTA

With the amount of negative space between the elements on the page, the action button’s dark blue background commands visitors’ attention, urging them to “Get Started.”

Arrow’s use of negative space supports its goal of onboarding users and reinforces its identity as a service that provides content to its users. By having a few of the images “break into” the negative space, Arrow playfully reminds users of AI’s power to think outside of the box and to provide solutions to whatever the user needs. Ultimately, Arrow employs negative space to not only make its content easy to process, but also to reinforce its identity and ability to serve its users.

Olio

Olio is an app that captures the essence of “one man’s trash is another man’s treasure.” In an effort to reduce waste, Olio provides users with an opportunity to exchange unwanted goods instead of throwing them away. Their landing page features an image of a user of the service, happily receiving goods from another user, giving visitors a reminder that if they have any items they want to give or receive, they are in the right place. 

‍

Almost immediately, Olio’s landing page takes a different approach to using negative space. While Olio shows some similarities as far as content placement (header up top, heading and description to the left, and image to the right), it stands out in how it uses the negative space and the image of a happy user as storytelling tools to reinforce their ideal outcome for users. 

Incorporate Depth

Like with Arrow, most of Olio’s content is not framed within a card or separate background and, instead, sits right on top of the page’s negative space. Placing content on top of the negative space allows Olio to use the gray and red-orange background images to create a sense of depth for the viewer, framing the user image in the middle ground. By placing that image in the middle ground, behind the gray semi-circle, the page gives visitors the sense that they are getting a quick glance at a user using Olio’s service, perhaps better described as a sneak peek.  

Analyzing Effectiveness

While Olio’s use of negative space to tell a story about a user’s experience, their page is still fairly cluttered. The action button to help users download the app is centered in the screen between the text and user image. The result is that it is harder to identify while quickly skimming the website. A recommendation to improve this page might include relocating that action button to be in line with the left-side text, or to move the button next to the pages “Olio it!” call-to-action. 

Overall, Olio’s use of negative space reveals the power of “empty space” as a story-telling tool, and is a reminder that negative space doesn’t have to just be a single monotonous color.

Conclusions 

So, how can you use negative space to elevate your startup’s website? Well, the first step is remembering that negative space contains possibilities. Although you will need to leave enough space around text content to ensure readability and visual hierarchy, you can use negative space to accent and emphasize elements on your page. 

Arrow uses their unicorn and logo images to blur the boundary between the image and negative space, which could thematically speak to their ability to move “outside the box” to provide content plans for their users. It also reinforces the slightly whimsical and playful style of their image. 

Olio uses three different layers of negative space to set the scene of a typical user experience. While they could have simply just dragged and dropped a picture of their user experience, they decide to give it a foreground and background, which increases its realism in the eyes of a visitor. As an extra tip, Olio uses pink as an accent color on their page, but it is most pronounced in the orange-pink gradient circle that is framing the user’s happy expression, naturally drawing visitors' attention. 

Negative space doesn’t have to just be the off-white background on your website. It can be used to reinforce messages in your text content and images, or it can draw visitors’ attention to highlight certain parts of your website. These are just two examples of how negative can be used to elevate your website. 

If you want to learn more about how you can elevate your website with negative space, reach out to us today.