Visual Accessibility Will Be a Priority in 2020

January 4, 2020 • Accessibility, visual

Few people think much about web accessibility. Even fewer people understand it, and without understanding there won’t be empathy or change. However, a string of high-profile class action lawsuits in 2019, like the one against Beyonce’s management company, brought the issue to light — and I expect we’ll see a lot more companies prioritizing web accessibility in 2020.

At the same time, the US and many European countries are more rigorously enforcing their by-laws applying to free content accessibility. Companies will no longer be able to afford to ignore this issue.

It’s no surprise that visually impaired people are demanding better access. Populated with Instagram ‘stories’ and online stores that display 360-degree, high-definition product images and video, the web has become a visual public space. That puts many people at an unnecessary disadvantage.

It’s not only lawsuits driving demand for greater visual access, but the growing problem of poor vision. According to the World Health Organization (WHO), around 1.3 billion people have some visual impairment, such as low vision, color blindness, and (partial) blindness. That’s nearly 20 percent of the global population — including your website visitors — who struggle with accessibility.

Adjust your mindset

I’ll be the first to accept that the US is more lawsuit-happy than most. Maybe you live in another country, with a different legal culture and don’t think you need to worry about accessibility. That’s the wrong mindset.

As a frontend developer, I do care about web accessibility; it’s my responsibility. I don’t want visitors just to have ‘access.’ I want them to have the best possible experience. Let’s take a closer look now at some of the different types of visual impairments people have and how to address them on a site.

Light sensitivity

Light sensitivity is a very common issue, especially for people who sit in front of computer screens all day. Light-sensitive people can find it hard, painful, or even impossible to read and concentrate under bright lights, on bright screens, or on web pages where bright colors are combined.

This is why most developers like me switch to dark themes in their dev tools, IDE, or their OS (if it has one). It’s also why popular apps like Twitter, Google, Facebook Messenger, and recently iOS, provide “Dark Mode.”

One difficulty is that there’s no one standard for light sensitivity. It varies by person and setting, so it’s impossible to devise one configuration set that works for all light-sensitive people.

Solution: Light sensitivity themes

Offer “Dark Mode” or a “Light Theme” for your users and allow them to set the brightness, essentially letting them decide for themselves.

There are several approaches to achieve this, depending on your technology stack and browser support. A straightforward way is to combine a CSS variable and the CSS invert method: filter: invert().

By defining invert(1), the browser inverts all colors available in your apps to the exact opposite matching colors.

/*Define css variable for dark/light mode*/

:root {

  --nightMode: 0;

}




/*Apply the mode change to the whole app on */

body {

  filter: invert(var(--nightMode));

}

This filter effect also applies to all images within the app. You might want to add some code to make sure colors are reserved even in inverted mode (dark or light).

Warning: filter is still not supported in IE. If IE support is critical for your app, consider using other approach such as CSS-in-JS (styled components for Vue or for React).

Contrast sensitivity

Contrast sensitivity occurs where people struggle to read text that is placed over images and videos. This happens when white text is placed on a light background, black text is placed on a dark background, or text is placed on a visually ‘busy’ background.

Solution: Tools and resources

Unlike light sensitivity, contrast sensitivity issues are easy to identify. Popular browsers including Chrome and Firefox now include a ‘contrast score check’ in their dev tools, which flag any page sections that aren’t visible enough. You shouldn’t rely solely on these tools, however, because the automatic scores are not always 100 percent accurate.

To address contrast sensitivity fully, refer to the Web Content Accessibility Guidelines (WCAG). It states that text, or images of text, must have a contrast ratio of at least 4.5:1. Exceptions are large text (where it’s 3:1), invisible, and decorative text and logotypes, where the text is part of a brand name.

To summarize some of the main points:

Addressing contrast sensitivity shouldn’t be confused with changing color schemes. It’s all about ensuring that people can read webpage text by providing the optimal contrast between text and its background.
Larger text has a lower contrast criteria. This is because larger text is, by nature, easier to read. 18 point text or a 14 point bold text is considered “large text.”
Contrast also applies to images of text, not just strictly applied to fonts — for example, a JPG image of a brand logo.

To ensure your website passes the contrast test, check out this free Contrast Checker tool by WebAIM.

Color blindness

Color blindness (or color vision deficiency) makes it difficult (or impossible) for affected people to identify or distinguish between specific colors.

Imagine a colorblind person visits an online store to buy a red t-shirt and sees only green ones. How would this visitor know which ones to buy?

Solution: Translate colors to text

In some cases it will be impossible to adapt an image to appear correctly for someone with color vision deficiency. For these, the options are to either provide chat/live support or text prompts (or, ideally, both).

To provide text prompts, we add the name of the color as text to images using the alt attribute. So instead of saying that an image is a ‘t-shirt,’ we would explicitly state that it is a red t-shirt. The more specific, the better. Yellow is somewhat helpful, but ‘mustard yellow’ is much more descriptive.

This will involve some light coding, or you can use one of the image management tools on the market that help automate this process.

Solution: Pattern your colors

Another option is to provide a unique pattern to represent each different color on your webpage. The standard approaches are not straightforward — either designers need to manually code something or use image editing software like Photoshop or Gimp to create an extra resource for each colorblind case.

The free version of my company‘s own software includes a transformation “e_assist_colorblind effect” to make this process easier. For example, you can add stripes to highlight the difference between hot (red) and cold (green) colors.

Hopefully this has given you some ideas for how to address the most common issues around visual accessibility. By focusing on this important issue, you’ll not just avoid litigation, but you’ll attract more site visitors, raise engagement, and potentially boost revenue as well.

Published January 3, 2020 — 08:00 UTC

Visual Dividers in User Interfaces: Types and Design Tips

October 25, 2019 • Dividers, visual

The thoughtful design of content performance in web and mobile user interfaces means much for amplifying the utility and usability of the product. Our today’s article is devoted to visual dividers, the layout elements that help to organize content on the screen and separate its parts clearly. Let’s check how visual dividers work and what types of them are popular.

What Is Visual Divider

Visual divider is a layout element that helps to separate pieces of content into clear groups, sections, options or parts. This way it helps a designer to organize the page according to the typical patterns of visual perception and make the layout clearer and more digestible for users.

Together with other elements on the page, dividers play a great role in setting up solid visual hierarchy. For example, with them, users can easier define the relations of content, like if the pieces of content are the same, similar, or related; if any of them is subordinate to the others, etc.

Dividers are also important for usability: in many cases, they create visual containers that look clickable or tappable, which is particularly crucial for mobile interfaces.

Visual Kinds of Dividers

Talking about dividers, we can analyze them in two aspects: their appearance and their functions. Starting with the visual part, there are five basic and broadly used methods of dividing content in user interfaces:

lines
color
negative space
shadows/volume
images.

Lines

Lines have belonged to the top methods of separating the pieces of content since the time immemorial, both in print production and in digital interfaces. They are recognized easily in this role, so users won’t need to think twice.

On the other hand, this type seems to be super simple and far from original. So, quite often, designers strive to find other ways of content separation. What’s more, it is recommended to use lines only if the content cannot be effectively divided in other way. Too many lines can overload the screen with visual noise and create unnecessary visual tension.

eco mug product page

The product page for a website devoted to zero-waste living uses horizontal lines as visual dividers to clearly organize different information about the item.

science web platform design

The webpage of the scientific platform uses horizontal lines to separate different content blocks and make their structure easily scanned.

The ecommerce website of a tea brand uses different levels of visual separation of the content, from simple horizontal line to separate the pricing and CTA element to a kind of table with irregular grid look for the information about the item, regular table look for the items in the website header and color contrast to separate visual content from text content.

Negative Space

Negative space (aka white space) means empty space on the screen around and often inside the elements. Yet, empty doesn’t mean passive or wasted: as well as any other element of the screen, it works supporting positive user experience. Negative space is one of the most popular kinds of visual dividers, especially in interfaces built on the idea of minimalism and simplicity. Spiced with the knowledge of Gestal principles of visual perception, for example, proximity and similarity principles, negative space turns into an effective and elegant visual divider that also let the interface to breathe and avoid clutter.

travel planner app ui

The travel planner app separates the items in the list without any additional visual elements, just with white space.

The Health Blog list of articles is based on typographic hierarchy and negative space to make them look like a clear set of items without stealing the air from the layout.

Color Contrast

Another effective type of visual divider is color contrast. Color choice and combinations in UI design have great psychological potential: they are able to strengthen the message and content of the website creating the appropriate mood. Contrast is one of the key factors influencing scannability and visual hierarchy of the page or screen. With all that, color contrast can effective separate different option, items, or interactive zones, that means work as a visual divider. That is the reason why split screens are so trendy for recent years. And that may explain the popular approach of organizing landing pages and single-page websites along the content blocks presented on contrast color background.

menu interactions app design

The mobile menu concept is based on color contrast to make the items clearly distinguished.

healthy meals delivery service

Even in pastel elements like this one the power of color contrast is clear: it helps to divide the page on the hero section with the CTA and the active section of the menu. Also, pay attention to the vertical lines used as visual dividers for menu items: together with slightly seen images, here they also work as directional cues and help to avoid the illusion of completeness on the page.

In the website design for GNO blankets, the color contrast helps to divide the long webpage into the digestible and elegant blocks of content.

Shadows and Volume

Shadows and volume, which is usually reached with the effect of visual elevation of a part of the content, may also work effectively as dividers. They create a feeling of depth and separate the page on several layers, that often looks natural and harmonic for a human eye. On the other hand, it looks less obvious and noticeable than lines, so this approach may be helpful to achieve balance and legibility of the particular items without too much visual noise or distraction.

ecommerce app designs

The catalog screen presenting the items in stock uses drop shadows this way giving the layout more depth and clearly separating the cards from each other.

The mobile app for buying customized bouquets also divides the positions in the catalog with a card standing out from the background. This way the content looks clear and interactive in the interface that looks all light and airy.

Images

Images of all kinds present one more effective visual divider. In this role, they are especially popular in the interfaces with lots of text content, for example, blogs, online media, and text-based landing pages. Photos, illustrations, 3D graphics, as well as animated images, help to balance the text content, increase scannability and readability levels, effectively divide the visual blocks, as well as add fun and emotional appeal.

The landing page for the cryptocurrency report uses catchy blocks of 3D graphics with animated Learn More call-to-action. This way the theme blocks are also clearly separated.

tubik studio application recipes and cooking

The menu screen for the restaurant app uses the images as a crucial element of dividing the options.

Functional Types

The functional types of visual dividers depend on the hierarchy levels they work at.

Full bleed dividers

Full bleed dividers are the ones that separate the sections and span the whole length of the screen layout.

gallery app ui design

The gallery app uses the horizontal lines as dividers in the catalog of artists.

ui desing interface food app recipe list

The Perfect Recipe app uses full-bleed dividers to separate the recipes.

finance app

The finance app uses slight, barely seen full-bleed dividers to separate the items in the list of expenses.

cinema app interaction UI

The cinema app uses the full-bleed dividers on the check-out screen.

Inset dividers

Inset dividers separate items the items of related content, anchored by elements that align with the app bar title or adjust to the specific kind of text content on the page.

The website of the construction features the part with specs that uses horizontal lines as inset dividers.

Dividers with subheaders

In some cases, you can pair dividers with subheaders to identify a block of grouped content. In this case, the divider should be placed above the subheader to make the subheader’s connection to content more obvious.

Middle dividers

These are usually dividers placed somewhere in the middle of a layout, for example, to separate related content, such prices on a receipt.

web design UI tubik studio

The product page for the ecommerce website selling herbs features the middle divider to clearly separate the check-out interactive zone from the text content describing the product.

Points to consider

Choosing the type of visual divider for the layout you design, you’d rather consider two essential factors.

Subtlety: dividers shouldn’t yell for users’ attention, shouldn’t distract users from the content itself. The goal behind the divider is to support and make the layout clean, not to catch the attention. So, make the noticeable but not annoying.

Moderate Frequency: as it was mentioned above, too many visual dividers, especially if they present the additional element of the layout like lines do, can create the visual noise and make the user interface tiring for users. So, thinking over the type, think twice, or seven times more. Prefer negative space to lines where it’s possible; don’t overplay with colors; strive for harmony and consistency.

As the examples above show, designers tend to find the effective combination of visual dividers that would effectively organize the content on the webpage or mobile screen.

Useful Articles

Here’s the set of articles on more aspects and best practices of user experience design.

Directional Cues in User Interfaces

How to Make User Interface Readable

Basic Types of Buttons in User Interfaces

3C of Interface Design: Color, Contrast, Content

Negative Space in Design: Practices and Tips

How to Make Web Interface Scannable

From Zero to Hero: Look at Hero Images in Web Design

Light or Dark UI? Tips to Choose a Proper Color Scheme

Welcome to see the designs by Tubik on Dribbble and Behance

The power of visual in product design

August 20, 2019 • power, visual

How visual elements affect our perception, recognition and memory by interacting with digital products.

The age of visual information

Almost all the information we see is consciously or unconsciously absorbed into our brain. This information plays a huge role in our decisions and behavior. Neglecting it wouldn’t be wise.

Just to get an idea of how we live in an age of visual information, more than 500 million people watch videos daily on Facebook, with 85% of them being muted. Snapchaters share 9,000 photos per second. Per-second. More than 500 million people use Instagram daily to like photos, comment and post stories.

It’s in our DNA

The first reason comes from our DNA. Eric Jensen, in his book Brain Based Learning, shows that 40% of the brain nerves are connected to the retina; more neurons are devoted to vision than all the other senses combined, and probably 90% of everything that comes to our mind is triggered by visual stimuli. In addition, recent studies show that approximately 65% of the population are visual learners, preferring to study and engage with information when linked to visual elements.

And it goes beyond. Our brain can capture images that the eye sees for as little as 13 milliseconds, 10 times faster than a wink. This means that we’ve evolved to absorb visual information at an absurd speed.

It’s in our history

We’ve used images to express ourselves for thousands of years. Through paintings and drawings, humans were able to convey key information about the world around them, for example by drawing maps and warning of the presence of predators. Like we do with the tangible world, we’ve also used visual elements to represent subjectivity: gods, nations, spirits, and local culture were constantly depicted on the walls around us.

User interface

With that in mind, it’s normal to assume that the use of visual elements on user interface — such as icons, shapes, colors, typography, images, and illustrations — will bring relevant impacts in the products we design.

No wonder this topic has been exhaustively discussed in the design community over the years.

But are these visual elements effective? How do they benefit us?? What ‘s their impact? And finally, what leads us to believe that they play a relevant role in user interaction with the product we design?

To answer these questions, I’ve gathered some of my experience, interviewed designers of large and small design teams; and I’ve looked into some research about user behavior. With that, I’ve listed 5 reasons to explain why Visual Design is so important regarding user behavior and the overall product experience.

In this article we’ll go over how visual elements:

Speed up data perception
Retain data for much longer
Trigger pleasure
Guide attention
Make user interface universal

If you like the post, don’t forget to ????????????

Visual perception is one of the most productive and fastest ways to send information to the brain.

According to Kahneman, writer of the book Thinking Fast and Slow and winner of a Nobel in Economics, this happens because our minds are split into two systems. The first one, called System 1, operates extremely fast, automatically, intuitively, involuntarily and with almost no effort. The second, System 2, manages our attention to laborious mental activities, including complex calculations, or anything requiring a lot of effort and focus.

The point is that when we use visual components such as icons, colors, images, and illustrations, we run System 1 right away. The result: we absorb information much faster.

For example, when we look at the picture below we intuitively trigger System 1, and only if we need to, we jump into System 2.

Illustration by Ariana Sánchez / Mi Amor Es El Mar

The result is that as soon as you see the girl’s dark hair, you realize she’s angry, guess her tone of voice and might even have a prediction of what she’d do next. You didn’t intend to evaluate these points. You just did. It just happened to you. This is an example of System 1 acting.

It happens very fast. According to a study by S.Thorpe, D.Fize and C. Marlot called The processing speed in the human visual system, it takes only 150 milliseconds for the brain to process an image and another 100 milliseconds to understand its meaning.

Other recent studies show that images, illustrations, and icons are recognized up to 60,000 times faster than words or medium-long contents by our brains. Evidently, using illustrations, images, and icons doesn’t replace text and label. By combining them, you make the mental processing of your interface faster and more efficient, especially when many of our basic interactions need to be done in a few seconds.

However, recognition rate is not the same for all users.

A study of 60 participants to understand Icon Recognition Speed in interactions in digital interfaces showed that although gender is not a relevant factor — the recognition rate shown by men candidates was only 4% higher than the women candidates — recognition varies dramatically with age.

Participants over 60 had a 60% recognition rate for icon meaning, while participants between 20–30 had a recognition rate of almost 90% — a substantial difference.

In addition, the same study showed that icons illustrating real objects were more recognizable than symbolic and subjective icons. That’s why it’s so important to consider user background before designing visual components for your interface.

An example of this is 60 pp variation in the recognition rate for a simple alarm icon. While in representation 1 — using a concrete representation of the clock — the recognition rate was 100%, in representation 2 — using a calendar — the recognition rate was 40%.

Human beings have an impressive ability to remember images in the long-term, even if they are exposed to them only once. This makes using visual stimuli in our product flow a relevant tool for user experience.

In a study by Roger Shepard called Learning 10000 pictures, it was shown that an audience exposed to 612 images for about 6 seconds achieved a 98% hit rate when asked to remember them in two-alternative tests. Compared with similar tests to remember words and short sentences, the rate drops to 88%.

The experiment also showed that picture memory is consistently superior to verbal memory. First, because the image memorization capacity is almost unlimited and second because images result in better memory rates than texts. Also, vivid images were better retained in our brains than normal ones.

By comparing visual context and listening context, the difference still remains. A study by Edgar Dale shows that when people hear information, there’s a 10% chance they’ll remember it 3 days later.

However, when the same information is paired with visual elements — images, icons or colors — nearly 65% of what was transmitted is retained even after the same 3 days.

Although the retention rate in the early hours (short-term memory) is slightly different (72% when written and read; 80% when visual), when analyzing long-term memory, the difference is significant, presenting 10% of memory retention for writing and reading and 65% for visual stimuli.

So with the use of visuals we see faster information recognition (250 milliseconds as shown before), and also longer retention time in our brain (lasting up to 65% over 3 days).

Other variables certainly have an influence on information assimilation. Age, subjectivity, and contrast curves have an impact on recognition and memorization, but the use of visual components is still a powerful tool for improving the user’s learning curve, especially when designing complex products or flows that require more attention.

If you like the post, don’t forget to ????????????

When our mind reaches a quick understanding by being exposed to a small cognitive effort, our body reacts positively, triggering a sense of pleasure. This is what’s shown by a study called “Mind at ease puts a smile on the face” by researchers Piotr Winkielman and John T. Cacioppo.

The experiment had participants watch a series of images while their expressions were monitored. Some of these images were made easier to recognize and some slightly more difficult.

Because changes in expression are too subtle and too brief for observers to detect, equipment has been placed on the cheek, eyebrow, and around the eyes to monitor for evidence of mood swings over images.

Results from both studies revealed that easy-to-process stimuli were associated with greater activity in the zygomaticus region, which is responsible for controlling our smile.

A few faces on a fine Friday, by Sebastian Abboud

As expected then, people displayed a slight smile and relaxed foreheads when images were easier to see and recognize. It seems to be a System 1 feature that cognitive comfort is associated with good sensations.

Thus, since the use of visual elements first drives System 1, fast and automatic, it can be said that the use of these elements also provides users with pleasure during product use.

Visual elements can improve the entire interface navigation. Fonts, whitespace, CTA’s, typography, and images can all play as visual dividers between sections, giving users a clear view of what’s happening in front of them.

In addition, eye-tracking studies show that readers pay more attention to information loaded with visual elements. They spend even more time looking at them than reading the text itself when images are relevant.

A study by Nielsen Norman Group has found that users spend 10% more time looking at speaker photos than reading their biographies, even though text content consumes 316% more screen space.

Another example was how Uber optimized the Landing Page by changing visuals elements.

By replacing the cover image in the first fold, the headline was seen by 100% of testers while the previous version was viewed by 90%. This means that 10% of people didn’t focus on the headline for a moment.

In addition, the new version of headline was viewed after 1 second, while in the old version, users took 1.5 seconds to see the headline. It’s a huge difference. Users came back to the new slogan more often and spent 8% of their time on the first fold, while in the previous version, the number was 3%.

Why these changes? Despite minor adjustments, such as centering the page title and improving the content, what most impacted in the conversion was changing the cover image.

A slight difference in the characters placement on the images made a huge difference in user’s attention.

The boy “looking at” users drew more attention than the page content, while a man looking at the text redirected all attention to the slogan. Check out the full study here.

If you like the post, don’t forget to ????????????

Lastly, icons, colors, illustrations, and other types of visual components in the interface can make an app or website more accessible, especially when it’s used by people from different countries.

Thus, we can say that the use of icons improves overall comprehension. In addition, images push the boundaries of perception for people who are affected by text recognition disorders, such as dyslexia, have difficulty reading or who can’t read.

This article was possible thanks to the following studies, experiments and discussions:

Scene Memory Is More Detailed Than You Think: The Role of Categories in Visual Long-Term Memory, by Talia Konkle, Timothy F. Brady, George A. Alvarez, and Aude Oliva;
Photos as Web Content by Jakob Nielsen;
Values of the Product Illustration by Katarzyna Dziaduś;
The Power of Visuals in eLearning Infographic; Unsupervised Learning of Visual Features through Spike Timing Dependent Plasticity by Timothee Masquelier and Simon J. Thorpe;
In UIs, do people recognize icons faster than words?, Big Reasons to Apply Illustrations in UI Design, and Visual Perception. Icons vs Copy in UI by Marina Yalanska;
The role of working memory, inhibition, and processing speed in text comprehension in children by Erika Borella, and Anik de Ribaupierre.
Thinking, Fast and Slow by Daniel Kahneman
Sapiens: A Brief History of Humankind by Yuval Noah Harari,
The Culture Map: Decoding How People Think, Lead, and Get Things Done Across Cultures by Erin Meyer
Thanks to designers Matheus Bueno, Christiane Lynn, Victor Rosato for their contribution to this article.
Thanks to Juliana Arthuso for proofreading this article.

And you, what do you think? Leave it in the comments so we can make improvements to the list.

If you want to know more about my work, head to jonnyczar.com or just reach me out jonnyczar@gmail.com.

Cheers! Please don’t forget to leave your claps. ??????????????

The evolution of visual design and tech?s designer renaissance

August 14, 2019 • evolution, visual

With a background in visual design, I got my start as an interaction designer working on software that allowed users to professionally print and produce their work via a digital workflow. Most of this was not web-based. This was software running on the OS, the “thick client.” The visual scope of what a designer could do was limited because there already was a design framework established for each operating system. Mac, Windows, and Linux all had their own behaviors and design language. What worked for the lickable glossiness of OSX Aqua may not work for the warm tans and rigid profile of Windows NT or dimensionality of Vista or cool flat grays of Linux. They each had their own styles, behaviors, standards and even user cultures to respect.

Training your eyes to ask why

For a visual designer, the illustrative craft was exhibited in application and toolbar icons, splash screens and the side panels of installation wizards. The principles of visual design were applied to the structuring of content and controls, the affordance of those controls and understanding when to use those controls. The exciting new layer to all this was asking why. Sure, there is no visual hierarchy and the row of controls are not aligned but why are they here in the first place? Is there a more efficient way to access a feature? Do we even need this feature?

The big switch for me as a designer was no longer just thinking about how things looked but about how users felt. This was the entrance to understanding the reality and purpose of a digital product. How users, including customers, feel about your product (which for software is the brand) is directly related to how the interface looks and behaves.

Who are we designing for?

I learned about Cooper because it was the only place that was creating a process for how you design for humans, and they already knew visual design was key to that process. This was before the world fully understood that user-centered design was transformative.

The founder of Cooper, Alan Cooper wrote the books on interaction design that were being consumed by product managers and students taking classes on the subject. Degrees in human computer interaction are common now, and design thinking is a popular concept, seeded by the original design tools centered around people (like personas and scenarios) that Alan invented. 

When visual design met business

Being a designer at a tech company pre-iPhone was strange and rare unless you were in marketing or advertising. So being the first designers for our clients while learning how their business worked (or didn’t) through the lens of their customers and users was powerful. Design was making businesses relevant by forging a better relationship between their services and technology and the humans who experienced them.

Discussions of visual design can make many people uncomfortable; it’s a language that isn’t often deemed worthwhile to learn. There wasn’t trust in the value visual design brings to business or if it could be considered real work. It has taken a while for visual design to gain a voice. 

The world tilts towards the light of the screen

In today’s visually immersive media culture, in which we consume ever more information through the digital products we use, people have become more visually sophisticated. The efficiency of visual communication manifests in emoji, GIFs, and memes.

Apple changed the world radically by bringing design into the spotlight as a differentiator. Clients would tell me, “We want to be the iPod of medical software.” Visual designers showed the world they could make more than pretty pictures, and it wasn’t necessary, appropriate, or fair to expect engineers to take that work on. Apple also introduced a new canvas for visual designers and an ecosystem for a new kind of app development. 

Visual designers are building out the visual language that supports and informs a fully-fledged design system.

The improved experience of software created with the aid of a visual designer became strikingly apparent. Enterprise tools were craving some VisD love, but it was the explosion of mobile that really opened up opportunities for visual designers to help create five-star apps with longevity and brand loyalty.

A matter of visual literacy

Want to boost your organization’s visual literacy? Communicate why everyday products and services are successful. Use the principles of art and design to explain why a product looks and feels the way it does.

Communicating the difference between product and marketing is also important. For mobile startups, the design of the product is the brand, so it’s important to understand why there’s a difference between the two. Visual design for product is meant to support interaction and experience – it’s not there to market the product.

New challenges in the widespread appreciation of visual design

A visual designer’s responsibility is to get into why something is working or not working and move away from subjectivity, communicating clearly. 

The more attuned we are to something the more likely it will be copied. Enter homogeneity and the current flat aesthetic of visual design. To have personality we need illustration, motion, sound, a real focus on voice and tone and a visual strategy that maps it all out. 

It’s hard for companies to take risks in how they present themselves visually, and I don’t see a lot of companies taking risks to stand out. I see a lot of rebrands, and they all feel the same. 

Discernment for the future

Beyond a single touchpoint, visual designers are building out the visual language that supports and informs a fully-fledged design system. Such systems are intentionally built and designed to blueprint the uniqueness of a brand and its products. The breadth and depth of visual design that was once relegated to the operating system can know be seen in UX and visual design-forward companies with robust visual systems, like Airbnb, Atlassian, Lyft and Mailchimp. 

We are in a designer’s market, and technology is experiencing a designer renaissance.

If visual design becomes automated or homogenous onscreen, it’s the experiences outside of that screen that will differentiate, and with that visual designers are well equipped to address this because their eyes and their senses are trained to notice the fine details of creating and communicating an experience. They’re attuned to the fidelity of a micro-interaction and also understand when something becomes a moment. That sensitivity to nuance that was brought to the screen offers unlimited opportunities offscreen.

The final pixel

Today, we are in a designer’s market, and technology is experiencing a designer renaissance. We seem to have learned the most measurable value of all: what differentiates one experience from another is simply achieving one’s goal. Whether the goal is work- or leisure-related, it’s about accomplishing what you’re working toward. Visual design is more than icing; though without the icing, a cupcake is just a dry muffin. And nobody wants your dry muffin. 

custom illustration showing two muffins and one cupcake with sprinkles

For more Journal articles on this topic, read “Three unexpected benefits of learning the core elements of visual design” and “Beyond the pixel: Measuring visual designers’ strategic value.”

Find out how Cooper Professional Education can help your organization become more creative, human-centered, and impactful on our corporate training page.