Visual identity

Visual identity is what people see before they read a word: the mark in the browser tab, the colour of the call to action, the typeface of the headline, the style of the product screenshots. It is one part of a brand identity, alongside strategy, voice and behaviour, and it is documented in brand guidelines.

A complete visual identity covers the logo system (wordmark, symbol, app icon and favicon versions), a colour palette with roles, typography for display and interface use, a graphic language of shapes, patterns or illustration, imagery and icon style, layout principles, and increasingly motion.

Why it matters for a SaaS website

Buyers judge credibility in seconds, and the visual identity carries most of that first impression. It also has to do more work than in most industries. The same system must hold up on a landing page, a dense dashboard, a pitch deck, a dark-mode app and a 16-pixel favicon. Colours have to pass contrast checks in interface text, and type has to stay readable in tables. When the visual identity is turned into design tokens, the website and product share it by default instead of by memory.

How DesignMe handles it

In our brand identity process, style explorations come first: moodboards, visual direction, colour and typography direction, and how it would look on the website and in the product. We then develop three visual identity directions with three rounds of refinement, test them on early applications, and turn the chosen one into a system of logo usage, typography, colour, layouts, graphic language and visual rules. For Spatial, we refreshed the visual language and launched a new product landing page within four weeks.

Example

For N3XT, a payments company, the first directions ran with acid green and yellow to break from fintech blue. In review the team kept returning to orange, so we tested it head to head against blue, purple and dark green. Orange won: warm, ownable and almost unused in finance. The logo came down to the 3 in the N3XT name, tested until it worked on its own as an app icon, favicon or single tile.

Common mistakes

• Choosing colours on screen mood alone. Check contrast for text and interface use before falling in love.
• One logo lockup. You need horizontal, stacked, symbol-only and small-size versions.
• No product rules. An identity designed only for marketing breaks inside the app.
• Too many accent colours. A palette with eight equal colours has no signature.