10 Tips for Building a Visual Language

Carrie Cousins.
November 07, 2018
10 Tips for Building a Visual Language.

A visual language is just like any other form of communication.

Where “language” refers to spoken or written communication, visual language goes a step further to connect with a certain community. Elements from color to style to type of photos or illustrations establish what a brand or company is. These visual elements tie together a group in a structured and conventional way that people understand.

A visual language includes both the written and spoken elements of a website or brand, as well as every design technique, photo, icon, logo and item, users can see on the screen. Often users won’t know a visual language is there; they just know that when they see your website or brand they recognize it.

Here’s how you create a visual language that users can understand.

1. Build a Color Palette

A strong color palette is an identification tool for users. When consistent colors, which as well-known and connected with the brand or website, are used; users know where they are. They aren’t lost in the massive universe of the web, because you have told them visually what website or brand they are interacting with.

This color palette shouldn’t be unique to your website. It needs to be universally applied and connected with everything a brand does—online, social media, swag items or packaging, business cards.

Further, the color palette should reinforce brand values.

Think about the colors for fast-food restaurant McDonald’s: Yellow and red. The colors represent happiness (yellow) and hunger (red). How often have you ever seen this brand without the “Golden Arches” or something with red on the packaging?

mcd

2. Create a Typographic Hierarchy

Just as important as selecting fonts for your brand is determining how they will be used.

A typographic hierarchy sets the tone for whether you talk to users, whisper (small light typography) or yell at them (large all caps lettering). There’s no right or wrong way to communicate; it’s knowing what works with your tribe.

The trick to building a typographic scale is that each level should be different enough from the one preceding and following it so it is easy to see changes in text.

Airbnb has a distinct typographic scale with sizes and weights for typography that’s standardized. This standardization also extends to the color palette and spacing to contribute to a solid visual language.

airbnb

3. Establish a Grid

Spacing and placement of elements can be just as important as the elements themselves. Is your visual identity clean and organized or a little more chaotic?

Your grid answers this question.

FreeCodeCamp explains this structure well:

A modular structure offers the possibility to work with entire engineering teams. Thus it could quickly produce products suitable for all platforms. If you are creating conceptual designs from a message sense, the integration method will be more useful.

In a nutshell, what does the complexity or simplicity of the grid communicate about you?

4. Create a Library of Components

From buttons to icons to cards or popups, create a library of components so all uses of elements within the design are consistent.

A button shouldn’t be a blue circle on one page and a red square on another. An icon shouldn’t be line style on one page and full color on another. This inconsistency can make users question if they have left your site by mistake.

A good library of components includes all the elements needed to build pages within the design and rule for usage—size and scale for each device size and adjustments for iOS versus Android devices.

While building common components can seem like a big chore on the front end, it can make creating new pages a breeze later down the line.

5. Emphasize an Image Style

Whether you are using photos, video or illustration, creating and maintaining an image style is important. This is one of the strongest visual assets that users will remember and associate with your website or brand.

This style relates to anything from photo crops—tight versus wide, use of filters, speed of videos and style of composition.

Look at the multiple elements from Smashmallow below. Even if they weren’t grouped, they contain common elements that connect the images to the brand. (Not the hot air balloon on every image.) This image style set the tone for who this company is and how they connect with users.

smashmallow

6. Build Rules for Animation

Animated elements should also follow a basic set of rules. Do they move fast or slow? Do they move on their own or only as a hover state?

These interactions help establish visual identity as well. Animations can set a tone for a project. Using, or not using, them can say a lot about who you are and what you want to be.

This mojito shot from Dribbble, below, has circular motion. Think about how other animations in the same visual language would look. They might also move in the same circular manner and at a similar speed.

mohito

7. Match Words and Visuals

For a visual language to be effective, it has to match the actual language used in the design. If the words and visual elements are a mismatch, users could be confused by the experience.

Elements should work together to create an overall package of communication that all emphasizes the same thing.

Steffany, below, uses color, a feminine logo and words to show what her website is all about. The pieces work together to create an overall picture and don’t compete with different text and visual messages.

steffany

8. Be True to Yourself

A visual language will only work if it is believable. It must represent who and what you are.

Could you imagine Sesame Street without the characters? It would be quite difficult.

The entire visual identity of the brand is built around Big Bird and Elmo and others. Every bit of the design reflects this. To further connect the visual identity of the television show and cartoon characters, note how both are used in the website design. This helps pull fantasy and reality together visually to help maintain the brand’s identity.

sesame

9. Be Consistent

Once you’ve developed a set of guidelines for a visual language, stick to them. The biggest misstep when working to build a visual language is inconsistency.

FreeCodeCamp notes that a design language should answer the following questions. They are also the benchmarks of whether you are honoring consistency with your visuals.

  • What color are we using?
  • Where is the logo placed?
  • Was this pattern used somewhere else?
  • What’s the latest documentation?
  • How do we build this animation?
  • Is this from the component library?

Note that Corby can affirm the answers to these questions. The logo is in a common placement, consistent colors are used throughout and the patterns/animations are used in the same way.

corby

10. Develop a Style Guide…And Enforce it

Establish a visual language and codify it.

Then put someone in charge of enforcing it. Your identity is too important to leave to chance. Humans are innately visual; visual language can be one of the strongest elements that connects users to your website or brand.

titelist

Carrie Cousins

Carrie Cousins is a freelance writer with more than 10 years of experience in the communications industry, including writing for print and online publications, and design and editing. You can connect with Carrie on Twitter @carriecousins.

Read Next

20 Best New Websites, July 2024

Welcome to July’s round up of websites to inspire you. This month’s collection ranges from the most stripped-back…

Top 7 WordPress Plugins for 2024: Enhance Your Site's Performance

WordPress is a hands-down favorite of website designers and developers. Renowned for its flexibility and ease of use,…

Exciting New Tools for Designers, July 2024

Welcome to this July’s collection of tools, gathered from around the web over the past month. We hope you’ll find…

3 Essential Design Trends, July 2024

Add some summer sizzle to your design projects with trendy website elements. Learn what's trending and how to use these…

15 Best New Fonts, June 2024

Welcome to our roundup of the best new fonts we’ve found online in the last month. This month, there are notably fewer…

20 Best New Websites, June 2024

Arranging content in an easily accessible way is the backbone of any user-friendly website. A good website will present…

Exciting New Tools for Designers, June 2024

In this month’s roundup of the best tools for web designers and developers, we’ll explore a range of new and noteworthy…

3 Essential Design Trends, June 2024

Summer is off to a fun start with some highly dramatic website design trends showing up in projects. Let's dive in!

15 Best New Fonts, May 2024

In this month’s edition, there are lots of historically-inspired typefaces, more of the growing trend for French…

How to Reduce The Carbon Footprint of Your Website

On average, a web page produces 4.61 grams of CO2 for every page view; for whole sites, that amounts to hundreds of KG…

20 Best New Websites, May 2024

Welcome to May’s compilation of the best sites on the web. This month we’re focused on color for younger humans,…

Has AI Killed User Testing?

Web designers employ user testing to evaluate a website’s functionality and overall UX (user experience). Various…