Visual brand and identity

Some graphical desktops have a background image or other element that is so recognizable that it just stands out. For example, when Microsoft released Windows XP in 2001, they provided a default desktop “wallpaper” image of a grassy field and rolling hills under a cloudy sky – the “Bliss” wallpaper – that the desktop image became almost synonymous with the Windows XP brand.

But it’s not just images that define a visual identity for a graphical desktop. The shapes and arrangements of elements displayed on the screen also define the graphical desktop brand. And because of this, we can associate the placement and arrangement of these visual elements with a particular graphical desktop identity.

Basic shapes of design

Several years ago, I studied the visual brand or visual identity of graphical desktops. As part of that examination, I wondered if I could break down the visual components that make up the desktop to just its most recognizable visual elements – this forms part of the visual identity of the desktop.

One interesting reference for how we infer meaning to simple shapes is the book Picture This: How Pictures Work by Molly Bang (1991, 2016). This is a must-read book for anyone who is interested in user interface design, because Bang’s book demonstrates how we perceive different shapes in different ways, and how we interpret a new meaning or attach emotion simply by altering the placement or color or arrangement of certain shapes. In the book, Bang breaks down a visual representation of Little Red Riding Hood to just the shapes that carry meaning for most viewers. It’s an interesting reveal of how we view shapes and color.

Our recognition of user interfaces works with the same association. Even without the distinctive wallpaper background, we can recognize certain arrangements of user interface elements based on their shapes and colors, and from that identify the graphical desktop itself. By altering these basic shapes or colors, we can also represent an entirely new user interface.

A sample of user interfaces

Let’s try an experiment to demonstrate how to represent certain familiar user interfaces using simple blocks of colors. To make the comparisons fair, each display is 400×300, a typical aspect ratio for older displays of the 1980s and 1990s, even though modern displays might use 16:9 aspect ratios. Can you guess which operating systems are represented in each mockup, using only simple shapes?

In no particular order, the operating systems shown in this list include:

• GNOME 3 (current)
• GNOME 2 (also MATE)
• Microsoft Windows 11 (current)
• Microsoft Windows XP
• Microsoft Windows 3
• MacOS (current)
• MacOS 9 (or any version before MacOSX)
• the command line (Linux, FreeDOS, etc)

Even without the icons or logos, you can probably make good guesses for many of these user interfaces.

User interfaces with shapes

The visual brand of a graphical desktop has strong ties to its identity. Colors, fonts, placement of interface elements, and window decorations are just some of the ways that user interfaces can distinguish themselves.

How many of the mockups could you identify, based solely on the arrangement of shapes? Let’s look at several interfaces and see if you can recognize them with the descriptions:

GNOME Desktop

The GNOME desktop has a distinctive look, so let’s start with that graphical interface. GNOME started in 1997 as an open source alternative to other graphical interfaces for Linux systems. Before GNOME and KDE, Linux didn’t really have a true “desktop” system, but instead used window managers to simulate approximate features of a true integrated desktop system. GNOME 1 used a visual framework similar to Microsoft Windows 95, which was the most popular graphical interface for PCs at that time. The gray taskbar at the bottom of the screen was immediately familiar to many users in 1997.

GNOME 2, launched in 2002, modified the visual arrangement, placing a separate taskbar at the top and bottom of the screen. The top taskbar provided an application launch menu, quick access icons, and system tray; the bottom taskbar showed the running applications. This arrangement neatly represented “things you can do” and “things you are doing.”

GNOME 3 released in 2011 to some controversy, and completely redesigned the user interface. GNOME said the new arrangement was in response to user frustration about how to navigate open windows and launch new applications. At the top of the screen, GNOME 3 used a completely black bar, which replaced the traditional taskbar in favor of an “Activities” button, which entered an “Overview” mode by default. The bar placed the “Activities” button on the left, time and date centered, and system status indicators on the right.

MacOS

Apple changed desktop computing in 1984 with the release of the Macintosh computer. The MacOS graphical user interface sported a simple menu bar at the top of the screen, which was shared between all Mac applications. 

While MacOS added other elements in following versions of the graphical desktop, including a “shortcuts” dock at the bottom of the screen, the menu bar has remained an iconic user interface element that many users associate with MacOSX.

Windows

Microsoft’s first entry to the Windows graphical interface was buggy and lacked the ability to overlap windows, although later versions became a popular addition to PCs in homes and offices. Windows versions 1, 2, and 3 used a simple window decoration that provided the name of the application plus a few basic window controls.

Windows 95, Windows 98, and some versions of Windows NT completely redesigned the interface, and used a taskbar at the bottom of the screen where users could launch applications with a “Start” menu, and see icons that represented running applications.

More recent versions of Windows, including Windows 11, haven’t changed this basic design all that much. There’s still a taskbar at the bottom of the screen, although the interface also adds “tiles” that are not shown here.

Command line

Computer users have navigated their files using the command line for almost as long as computers have sported some kind of terminal and keyboard input. While the features of the command line experience differ based on the platform, any command line operating system should be recognizable as a black screen with some kind of prompt where users can enter commands.

This article is adapted from How visual brand affects user experience by Jim Hall, and is republished with the author’s permission.