Difference between UI and Visual Design/Style Guide?

Question

From looking at some of the style guide for web applications that are available, there is a distinction made between the visual (icons, colours, logos, etc) and UI (look and feel of user interface elements) style guides.

There are some overlaps between the two since visual elements also form part of the UI, but in terms of the way content (e.g. labels, messages, fonts, etc) is presented on the UI, are there gaps that are not adequately addressed in the visual guide that needs to go into the UI style guide, or is a hybrid combination of the two best for web applications (not websites)?

Is this still a relevant comparison since these days organisations are tending to move towards design languages or system that combine the two more closely than previously before?

Answer 1

What you call visual elements are really just the parts that are unique to one application vs. another. The logo, color scheme, and icons are most often unique elements that have to fit into, and often determine to an extent, the style of the website.

UI elements are just building blocks that can be used and which are expected to be well known to people using the application. So using them and a consistent feel between applications will make applications have a familiar feel even though they are unique. You see this in that iOS apps have a different feel to Android apps.

There seems to be little value in trying to draw a distinction between what the various parts of an app in terms of guides or HIGs. They are just guidelines to help an application feel familiar to people and follow similar interaction patterns. I think they are fine as they are now.

Answer 2

The difference is really based, not on content, but who creates them and the intent.

Visual Style Guides are often created by the marketing department or a branding agency to make sure "all" visual communication is structured in the same way. A Visual Style Guide/Brand Guidelines presents show's appropriate use of things like logos and tone of voice applicable to the tail of a jet, a print advertisement, website or app.

Interface Guidelines (also known as Design Systems) are created by Product Teams or the UX Design team as a way to ensure a consistent experience as products evolve. These often include more rationale or match up to product goals so that designers can extend them over time.

Could they be the same thing? Sure, but in my experience, it's very rare for Product, UX, Marketing, and Branding to all have the same goals or even play well together. Hence the multiple "similar" types of design documentation. This also contributes to the gaps or lack of overlap since no document is responsible for the whole picture.