{"id":6505,"date":"2024-07-19T03:00:00","date_gmt":"2024-07-19T07:00:00","guid":{"rendered":"https:\/\/www.both.org\/?p=6505"},"modified":"2024-07-15T20:59:57","modified_gmt":"2024-07-16T00:59:57","slug":"visual-brand-and-identity","status":"publish","type":"post","link":"https:\/\/www.both.org\/?p=6505","title":{"rendered":"Visual brand and identity"},"content":{"rendered":"
\r\n
\r\n \r\n <\/i>\r\n <\/a>\r\n <\/span>\r\n<\/div><\/div>\n

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<\/a> – that the desktop image became almost synonymous with the Windows XP brand.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Basic shapes of design<\/h2>\n\n\n\n

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.<\/p>\n\n\n\n

One interesting reference for how we infer meaning to simple shapes is the book Picture This: How Pictures Work<\/a><\/em> 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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

A sample of user interfaces<\/h2>\n\n\n\n

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?<\/p>\n\n\n

\n
<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n\n
\n
<\/div>\n
<\/div>\n<\/div>\n\n
\n>\n<\/div>\n\n
\n
<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n\n
\n
<\/div>\n
<\/div>\n<\/div>\n\n
\n
<\/div>\n
<\/div>\n<\/div>\n\n
\n
<\/div>\n
<\/div>\n<\/div>\n\n
\n
<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n\n\n

In no particular order, the operating systems shown in this list include:<\/p>\n\n\n\n