Guidelines for Good Visual Information Representations

- 858 shares
- 5 years ago
Visual Representation refers to the principles by which markings on a surface are made and interpreted. Designers use representations like typography and illustrations to communicate information, emotions and concepts. Color, imagery, typography and layout are crucial in this communication.
Alan Blackwell, cognition scientist and professor, gives a brief introduction to visual representation:
We can see visual representation throughout human history, from cave drawings to data visualization:
Art uses visual representation to express emotions and abstract ideas.
Financial forecasting graphs condense data and research into a more straightforward format.
Icons on user interfaces (UI) represent different actions users can take.
The color of a notification indicates its nature and meaning.
Van Gogh's "The Starry Night" uses visuals to evoke deep emotions, representing an abstract, dreamy night sky. It exemplifies how art can communicate complex feelings and ideas.
© Public domain
Designers use visual representation for internal and external use throughout the design process. For example:
Storyboards are illustrations that outline users’ actions and where they perform them.
Sitemaps are diagrams that show the hierarchy and navigation structure of a website.
Wireframes are sketches that bring together elements of a user interface's structure.
Usability reports use graphs and charts to communicate data gathered from usability testing.
User interfaces visually represent information contained in applications and computerized devices.
This usability report is straightforward to understand. Yet, the data behind the visualizations could come from thousands of answered surveys.
© Interaction Design Foundation, CC BY-SA 4.0
Visual representation simplifies complex ideas and data and makes them easy to understand. Without these visual aids, designers would struggle to communicate their ideas, findings and products. For example, it would be easier to create a mockup of an e-commerce website interface than to describe it with words.
Visual representation simplifies the communication of designs. Without mockups, it would be difficult for developers to reproduce designs using words alone.
© Interaction Design Foundation, CC BY-SA 4.0
Below are some of the most common forms of visual representation designers use.
Text represents language and ideas through written characters and symbols. Readers visually perceive and interpret these characters. Typography turns text into a visual form, influencing its perception and interpretation.
We have developed the conventions of typography over centuries, for example, in documents, newspapers and magazines. These conventions include:
Text arranged on a grid brings clarity and structure. Gridded text makes complex information easier to navigate and understand. Tables, columns and other formats help organize content logically and enhance readability.
Contrasting text sizes create a visual hierarchy and draw attention to critical areas. For example, headings use larger text while body copy uses smaller text. This contrast helps readers distinguish between primary and secondary information.
Adequate spacing and paragraphing improve the readability and appearance of the text. These conventions prevent the content from appearing cluttered. Spacing and paragraphing make it easier for the eye to follow and for the brain to process the information.
Balanced image-to-text ratios create engaging layouts. Images break the monotony of text, provide visual relief and illustrate or emphasize points made in the text. A well-planned ratio ensures neither text nor images overwhelm each other. Effective ratios make designs more effective and appealing.
Designers use these conventions because people are familiar with them and better understand text presented in this manner.
This table of funerals from the plague in London in 1665 uses typographic conventions still used today. For example, the author arranged the information in a table and used contrasting text styling to highlight information in the header.
© Public domain
Designers use illustrations and drawings independently or alongside text. An example of illustration used to communicate information is the assembly instructions created by furniture retailer IKEA. If IKEA used text instead of illustrations in their instructions, people would find it harder to assemble the furniture.
IKEA assembly instructions use illustrations to inform customers how to build their furniture. The only text used is numeric to denote step and part numbers. IKEA communicates this information visually to: 1. Enable simple communication, 2. Ensure their instructions are easy to follow, regardless of the customer’s language.
© IKEA, Fair use
Illustrations and drawings can often convey the core message of a visual representation more effectively than a photograph. They focus on the core message, while a photograph might distract a viewer with additional details (such as who this person is, where they are from, etc.)
For example, in IKEA’s case, photographing a person building a piece of furniture might be complicated. Further, photographs may not be easy to understand in a black-and-white print, leading to higher printing costs. To be useful, the pictures would also need to be larger and would occupy more space on a printed manual, further adding to the costs.
But imagine a girl winking—this is something we can easily photograph.
Ivan Sutherland, creator of the first graphical user interface, used his computer program Sketchpad to draw a winking girl. While not realistic, Sutherland's representation effectively portrays a winking girl. The drawing's abstract, generic elements contrast with the distinct winking eye. The graphical conventions of lines and shapes represent the eyes and mouth. The simplicity of the drawing does not draw attention away from the winking.
A photo might distract from the focused message compared to Sutherland's representation. In the photo, the other aspects of the image (i.e., the particular person) distract the viewer from this message.
© Ivan Sutherland, CC BY-SA 3.0 and Amina Filkins, Pexels License
Designers and other stakeholders use data and information visualization across many industries.
Data visualization uses charts and graphs to show raw data in a graphic form. Information visualization goes further, including more context and complex data sets. Information visualization often uses interactive elements to share a deeper understanding.
For example, most computerized devices have a battery level indicator. This is a type of data visualization. IV takes this further by allowing you to click on the battery indicator for further insights. These insights may include the apps that use the most battery and the last time you charged your device.
macOS displays a battery icon in the menu bar that visualizes your device’s battery level. This is an example of data visualization. Meanwhile, macOS’s settings tell you battery level over time, screen-on-usage and when you last charged your device. These insights are actionable; users may notice their battery drains at a specific time. This is an example of information visualization.
© Low Battery by Jemis Mali, CC BY-NC-ND 4.0, and Apple, Fair use
Information visualization is not exclusive to numeric data. It encompasses representations like diagrams and maps. For example, Google Maps collates various types of data and information into one interface:
Data Representation: Google Maps transforms complex geographical data into an easily understandable and navigable visual map.
Interactivity: Users can interactively customize views that show traffic, satellite imagery and more in real-time.
Layered Information: Google Maps layers multiple data types (e.g., traffic, weather) over geographical maps for comprehensive visualization.
User-Centered Design: The interface is intuitive and user-friendly, with symbols and colors for straightforward data interpretation.
The volume of data contained in one screenshot of Google Maps is massive. However, this information is presented clearly to the user. Google Maps highlights different terrains with colors and local places and businesses with icons and colors. The panel on the left lists the selected location’s profile, which includes an image, rating and contact information.
© Google, Fair use
Symbolic correspondence uses universally recognized symbols and signs to convey specific meanings. This method employs widely recognized visual cues for immediate understanding. Symbolic correspondence removes the need for textual explanation.
For instance, a magnifying glass icon in UI design signifies the search function. Similarly, in environmental design, symbols for restrooms, parking and amenities guide visitors effectively.
The Interaction Design Foundation (IxDF) website uses the universal magnifying glass symbol to signify the search function. Similarly, the play icon draws attention to a link to watch a video.
© Interaction Design Foundation, CC BY-SA 4.0
Designers use elements like color, shape and texture to create a communicative visual experience. Designers use these 8 principles:
Size – Larger elements tend to capture users' attention readily.
Color – Users are typically drawn to bright colors over muted shades.
Contrast – Colors with stark contrasts catch the eye more effectively.
Alignment – Unaligned elements are more noticeable than those aligned ones.
Repetition – Similar styles repeated imply a relationship in content.
Proximity – Elements placed near each other appear to be connected.
Whitespace – Elements surrounded by ample space attract the eye.
Texture and Style – Users often notice richer textures before flat designs.
The 8 visual design principles.
© Interaction Design Foundation, CC BY-SA 4.0
In web design, visual hierarchy uses color and repetition to direct the user's attention. Color choice is crucial as it creates contrast between different elements. Repetition helps to organize the design—it uses recurring elements to establish consistency and familiarity.
In this video, Alan Dix, Professor and Expert in Human-Computer Interaction, explains how visual alignment affects how we read and absorb information:
Designers use correspondence techniques to align visual elements with their conceptual meanings. These techniques include color coding, spatial arrangement and specific imagery. In information visualization, different colors can represent various data sets. This correspondence aids users in quickly identifying trends and relationships.
Color coding enables the stakeholder to see the relationship and trend between the two pie charts easily.
© Interaction Design Foundation, CC BY-SA 4.0
In user interface design, correspondence techniques link elements with meaning. An example is color-coding notifications to state their nature. For instance, red for warnings and green for confirmation. These techniques are informative and intuitive and enhance the user experience.
The IxDF website uses blue for call-to-actions (CTAs) and red for warnings. These colors inform the user of the nature of the action of buttons and other interactive elements.
© Interaction Design Foundation, CC BY-SA 4.0
If visual language is how designers create representations, then visual perception and interpretation are how users receive those representations. Consider a painting—the viewer’s eyes take in colors, shapes and lines, and the brain perceives these visual elements as a painting.
In this video, Alan Dix explains how the interplay of sensation, perception and culture is crucial to understanding visual experiences in design:
I'd like now to distinguish two words, which sometimes you'll probably hear me use interchangeably, but actually have a subtle difference: sensation and perception. In one sense, there's the things that we really hear, and shall we say, the immediate senses. This is what in psychology is called sensation.
So with your eye, the photons actually come into the back of your eye, hitting your retina and the nerve cells, noticing those and creating a signal. When you hear, little hairs in your ear are getting wiggled by the sound and then passing that into your brain. So that is the raw sensation. That's the absolute raw sense of what's there.
However, our brains do lots of work with that. They process what are those raw sensations in order to give that sense of that feeling of actually what's there. There's a couple of examples of this you can think of. So, for instance, if you... Looking at your room, just glance at the room you're in, you'll have a sense that you can see it all, but actually your eyes dance around and builds it up slowly.
So that raw sensation at any one moment is probably that everything in the periphery is fuzzy. But you don't see that. What you believe you see is something that's sharp everywhere. Because if you ever need to know about a bit of the room your eye will glance to it and it will become sharp at that moment. So your perception of the room and your visual perception is that it's large, it's everywhere, and you can see it all. Your actual sensation is much, much tighter than you can see clearly.
Because these differ and because they are about the meaning of the world... We are *meaning-giving creatures*; we're trying to find meaning and sense in this world. You can sometimes use this creatively to create effects, but you could also sometimes get, shall we say mistaken effects because of this. And optical illusions use this very much in order to fool your eyes because your eyes are trying to create sense of the world and you can sometimes fool them.
So here's two optical illusions, both of which are based on linear perspective. There's the Ponzo one. So if you look at that picture, it's a ladder with two blocks, and it will look as if the block at the top is bigger than the block at the bottom. The reason for that is your meaning bit of your brain is saying, "It's doing, the ladder's doing this," so it's probably sloping away from you. If it's sloping away from you, then something that takes the same amount of visual space
further away must be bigger. On the right is the Müller-Lyer illusion. So the Müller-Lyer illusion is two lat[eral] lines and then two arrowheads and one has got arrowheads going in and one's got arrowheads going out. And if you look at it, you probably will see the one with the arrowheads going out as being a longer line than the one at the bottom. In fact, they're absolutely the same size and the same length.
However, your eye sees the one at the top longer because it looks a bit like the back edge of a box – so, again, in terms of perspective, if the line's going... It's like looking at the back of the box whereas the ones at the front is more like if you're seeing the front end of the box. And of course, again, your eye is saying that probably means the one on top is further away. Although it takes the same amount of distance on the back of your eye, that probably means it's actually larger. Now all that's happened, when I say "probably", you're not reasoning this out.
This is all happening tacitly, unconsciously. You've got no idea it's going on. And it's very hard, even though you know those two are the same length to actually be able to see that. Now, it was thought for a long time that a lot of us... and some of these illusions really are very basic; they're built into our – shall we say – our most primitive base being, the things that we've had for, you know, 10-20 thousand years,
probably longer as part of the way we see the world. And it was thought in particular the Müller-Lyer illusion was one of these. Something that's very, very basic. I know I found problems with this for many years because linear perspective, it's actually hard to think, shall we say, what in the wild corresponds to linear perspective. And sure enough actually, what's been realized relatively recently is that most subjects of psychological experiments are what's been called WEIRD.
By "WEIRD", it's White, Educated, Industrialized, Rich and Democratic. So basically, think of US psychology students as subjects of most psychology experiments – or British ones for that matter. So you actually end up with a very select set of people
for which we believe everything is true of. And of course, actually that turns out not to be true. Crucially, an awful lot of things which appear to be very fundamental psychological effects turn out to be *cultural*. And crucially, this thing about the Müller-Lyer illusion is one of the ones that is not the same. So if you have a... there is a relatively small number of experiments where this is the case, but there are some experiments that have been done with people who have been brought up in
the middle of forest jungle environments, but without built straight lines, concrete and brick structures. And when that's the case, the Müller-Lyer illusion doesn't work. They see the two lines as the same length. This is a learned effect that's happened from childhood, where because you live in a built environment, you end up with particular illusions. So these are partly about sensory perception, but perception is based partly on
– shall we say – built-in parts of your brain. But also the culture in which you live changes the relationship between raw sensation and perception. So, you know, optical illusions can fool you. However, actually, if you think about it... So there's the kind of optical illusion like Müller-Lyer, but also you've probably seen those trick photographs where you think something's bigger than it is
or you see something and it says, what's this? And you've got no idea. And then there's some small tweak and it's zoomed out and "aha, of course". Now the interesting things about those is partly it's a perception thing that your eye can get fooled. But they're often deliberately chosen at a very unusual eye position. So you may take a photograph of something so that certain things line up, that then make it confusingly look like something else. And you only have to perhaps move your head a little bit.
You know, if it was a real thing that you were looking at, you would move it, you would move your head. And suddenly it would all make sense. Our perception systems are designed for the real world. They're not designed for static images on screens. We've learned to deal with them – I said culture comes in here. So our brain is trying to make sense of this all the time. And that can sometimes mean you can get these optical illusions that can be confusing. But also that can work to our advantage because we're trying to make sense.
So this is something you can think about in design, both things that can go wrong, but also things that can go right.
Copyright holder: Michael Murphy _ Appearance time: 07:19 - 07:37 _ Link: https://www.youtube.com/watch?v=C67JuZnBBDc
Visual perception principles are essential for creating compelling, engaging visual representations. For example, Gestalt principles explain how we perceive visual information. These rules describe how we group similar items, spot patterns and simplify complex images. Designers apply Gestalt principles to arrange content on websites and other interfaces. This application creates visually appealing and easily understood designs.
In this video, design expert and teacher Mia Cinelli discusses the significance of Gestalt principles in visual design. She introduces fundamental principles, like figure/ground relationships, similarity and proximity.
Everyone's experiences, culture and physical abilities dictate how they interpret visual representations. For this reason, designers carefully consider how users interpret their visual representations. They employ user research and testing to ensure their designs are attractive and functional.
Leonardo da Vinci's "Mona Lisa", is one of the most famous paintings in the world. The piece is renowned for its subject's enigmatic expression. Some interpret her smile as content and serene, while others see it as sad or mischievous. Not everyone interprets this visual representation in the same way.
© Public domain
Color is an excellent example of how one person, compared to another, may interpret a visual element. Take the color red:
In Chinese culture, red symbolizes luck, while in some parts of Africa, it can mean death or illness.
A personal experience may mean a user has a negative or positive connotation with red.
People with protanopia and deuteranopia color blindness cannot distinguish between red and green.
In this video, Joann and Arielle Eckstut, leading color consultants and authors, explain how many factors influence how we perceive and interpret color:
Read Alan Blackwell’s chapter on visual representation from The Encyclopedia of Human-Computer Interaction.
Learn about the F-Shaped Pattern For Reading Web Content from Jakob Nielsen.
Read Smashing Magazine’s article, Visual Design Language: The Building Blocks Of Design.
Take the IxDF’s course, Perception and Memory in HCI and UX.
Some highly cited research on visual representation and related topics includes:
Roland, P. E., & Gulyás, B. (1994). Visual imagery and visual representation. Trends in Neurosciences, 17(7), 281-287.
Roland and Gulyás' study explores how the brain creates visual imagination. They look at whether imagining things like objects and scenes uses the same parts of the brain as seeing them does. Their research shows the brain uses certain areas specifically for imagination. These areas are different from the areas used for seeing. This research is essential for understanding how our brain works with vision.
Lurie, N. H., & Mason, C. H. (2007). Visual Representation: Implications for Decision Making. Journal of Marketing, 71(1), 160-177.
This article looks at how visualization tools help in understanding complicated marketing data. It discusses how these tools affect decision-making in marketing. The article gives a detailed method to assess the impact of visuals on the study and combination of vast quantities of marketing data. It explores the benefits and possible biases visuals can bring to marketing choices. These factors make the article an essential resource for researchers and marketing experts. The article suggests using visual tools and detailed analysis together for the best results.
Lohse, G. L., Biolsi, K., Walker, N., & Rueter, H. H. (1994, December). A classification of visual representations. Communications of the ACM, 37(12), 36+.
This publication looks at how visuals help communicate and make information easier to understand. It divides these visuals into six types: graphs, tables, maps, diagrams, networks and icons. The article also looks at different ways these visuals share information effectively.
If you’d like to cite content from the IxDF website, click the ‘cite this article’ button near the top of your screen.
Some recommended books on visual representation and related topics include:
Chaplin, E. (1994). Sociology and Visual Representation (1st ed.). Routledge.
Chaplin's book describes how visual art analysis has changed from ancient times to today. It shows how photography, post-modernism and feminism have changed how we see art. The book combines words and images in its analysis and looks into real-life social sciences studies.
Mitchell, W. J. T. (1994). Picture Theory. The University of Chicago Press.
Mitchell's book explores the important role and meaning of pictures in the late twentieth century. It discusses the change from focusing on language to focusing on images in cultural studies. The book deeply examines the interaction between images and text in different cultural forms like literature, art and media. This detailed study of how we see and read visual representations has become an essential reference for scholars and professionals.
Koffka, K. (1935). Principles of Gestalt Psychology. Harcourt, Brace & World.
"Principles of Gestalt Psychology" by Koffka, released in 1935, is a critical book in its field. It's known as a foundational work in Gestalt psychology, laying out the basic ideas of the theory and how they apply to how we see and think. Koffka's thorough study of Gestalt psychology's principles has profoundly influenced how we understand human perception. This book has been a significant reference in later research and writings.
A visual representation, like an infographic or chart, uses visual elements to show information or data. These types of visuals make complicated information easier to understand and more user-friendly.
Designers harness visual representations in design and communication. Infographics and charts, for instance, distill data for easier audience comprehension and retention.
For an introduction to designing basic information visualizations, take our course, Information Visualization.
Text is a crucial design and communication element, transforming language visually. Designers use font style, size, color and layout to convey emotions and messages effectively.
Designers utilize text for both literal communication and aesthetic enhancement. Their typography choices significantly impact design aesthetics, user experience and readability.
Designers should always consider text's visual impact in their designs. This consideration includes font choice, placement, color and interaction with other design elements.
In this video, design expert and teacher Mia Cinelli teaches how Gestalt principles apply to typography:
How do Gestalt Principles apply to typography? This is really important to note, that continuation is essential for typography because I see this all the time where designers want to be clever. And here on the left-hand side, we have some right-aligned and left-aligned type which are living back to back, and we know from the hue structure that we're intended to read this as 'Back To School Sale', but this is not how we're going to read it. Because of continuation, we are following a baseline, as this example in Latin text.
So, we don't read 'Back To School Sale'; we read 'Back School To Sale', which completely disrupts the message. So, instead of doing something like this, think through continuation. The example on the right-hand side makes way more sense and will not disrupt our legibility or readability because we're following continuation, thinking about that baseline. And continuation can also create a beautiful implied motion. So, here we can use this in a really expressive way, following this line. 'They gracefully descend the stairs to arrive at the party.'
That adds just a little bit more social meaning for us.
Designers use visual elements in projects to convey information, ideas, and messages. Designers use images, colors, shapes and typography for impactful designs.
In UI/UX design, visual representation is vital. Icons, buttons and colors provide contrast for intuitive, user-friendly website and app interfaces.
Graphic design leverages visual representation to create attention-grabbing marketing materials. Careful color, imagery and layout choices create an emotional connection.
Product design relies on visual representation for prototyping and idea presentation. Designers and stakeholders use visual representations to envision functional, aesthetically pleasing products.
Our brains process visuals 60,000 times faster than text. This fact highlights the crucial role of visual representation in design.
Our course, Visual Design: The Ultimate Guide, teaches you how to use visual design elements and principles in your work effectively.
Visual representation, crucial in UX, facilitates interaction, comprehension and emotion. It combines elements like images and typography for better interfaces.
Effective visuals guide users, highlight features and improve navigation. Icons and color schemes communicate functions and set interaction tones.
UX design research shows visual elements significantly impact emotions. 90% of brain-transmitted information is visual.
To create functional, accessible visuals, designers use color contrast and consistent iconography. These elements improve readability and inclusivity.
An excellent example of visual representation in UX is Apple's iOS interface. iOS combines a clean, minimalist design with intuitive navigation. As a result, the operating system is both visually appealing and user-friendly.
Michal Malewicz, Creative Director and CEO at Hype4, explains why visual skills are important in design:
Learn more about UI design from Michal in our Master Class, Beyond Interfaces: The UI Design Skills You Need to Know.
The fundamental principles of effective visual representation are:
Clarity: Designers convey messages clearly, avoiding clutter.
Simplicity: Embrace simple designs for ease and recall.
Emphasis: Designers highlight key elements distinctively.
Balance: Balance ensures design stability and structure.
Alignment: Designers enhance coherence through alignment.
Contrast: Use contrast for dynamic, distinct designs.
Repetition: Repeating elements unify and guide designs.
Designers practice these principles in their projects. They also analyze successful designs and seek feedback to improve their skills.
Read our topic description of Gestalt principles to learn more about creating effective visual designs. The Gestalt principles explain how humans group elements, recognize patterns and simplify object perception.
Color theory is vital in design, helping designers craft visually appealing and compelling works. Designers understand color interactions, psychological impacts and symbolism. These elements help designers enhance communication and guide attention.
Designers use complementary, analogous and triadic colors for contrast, harmony and balance. Understanding color temperature also plays a crucial role in design perception.
Color symbolism is crucial, as different colors can represent specific emotions and messages. For instance, blue can symbolize trust and calmness, while red can indicate energy and urgency.
Cultural variations significantly influence color perception and symbolism. Designers consider these differences to ensure their designs resonate with diverse audiences.
For actionable insights, designers should:
Experiment with color schemes for effective messaging.
Assess colors' psychological impact on the audience.
Use color contrast to highlight critical elements.
Ensure color choices are accessible to all.
In this video, Joann and Arielle Eckstut, leading color consultants and authors, give their six tips for choosing color:
How do I choose the right colors? I am a firm believer that there are no such things as right colors. There is always more than one way to apply color successfully. But I do believe in asking a series of questions before choosing a palette. Number one. Most importantly, do you need to incorporate existing colors or are you starting from scratch?
Look at what's already there. Are you working with a company company that already has a turquoise logo like Waze, for example? That doesn't mean that a brochure you design has to match the turquoise, but it helps if your palette relates to the logo. If they're going to sit on the same page, you also should consider the context of the overall style of what's already in place.
Is the emphasis, for example, on darker, more conservative colors or bright and festive ones? Number two, what colors does your client love? What colors do you or the person or the company you're working with gravitate to? Does your client at fresh direct love the color green, but you're presenting them with oranges and reds. You're going to get a happier client, personally, if they like the colors.
If they personally, personally, like them. If not, it might not be so good. Getting a feel for their personal palette can be the key to success, and it can be as easy as putting a paint deck in front of someone and asking them to point to colors that they find appealing. Number three, what is the overall effect you're trying to create? Do you want a color scheme that shouts, “Here I am”?
or do you want something that whispers softly? It's not just the hue that you choose that evokes a particular feeling, but it's the chroma, meaning the intensity and the value how light or dark a color is as well. Intense colors emphasize objects that they cover and their flashy, dark, warm colors have a way of drawing things together and are intimate. Light cool colors have a way of opening things up
and making them more expansive, especially if they're in a similar hue and value. In the case of the Washington Post app, the deep blue connotes a seriousness and authority that matches with their mission. Number four, the effect of color on scale. Are you trying to make a room look smaller, bigger, taller or shorter? I use color to adjust any deficiencies
in the scale of a particular space. If I'm painting a room with an uncomfortably low ceiling, a lighter color on the ceiling than on the walls will make the room appear taller. As you can see on the slide on the left, if I'm painting a room with uncomfortably high ceilings, a darker color on the ceiling than on the walls will make that room appear lower. As you can see in the slide on the in the middle,
if you want to make a room feel less long and narrow. I would put an accent color on the end wall as in the slide on the right. The following slides illustrate how changing the paint colors can drastically change the scale and the feeling of a room. We are flipping through these now, just so you can get a quick sense of how this works and last on exterior facades. You can also see how color is used to emphasize either architectural details
like windows and trim or on the building form itself. In the left slide. The first and second houses are done in varying forms of a monochromatic scheme that is sort of maroon and dark blue, whereas the houses further down with the green and tan and the red and tan emphasize architectural details. In the slide on the right, the details like window
trim and doors are emphasized in the gray and yellow houses, while the architectural form of the building is emphasized in the charcoal gray house further down to the right. Number five. Are you looking for colors that are contrasting or harmonious? Once you have chosen your dominant hue, then you need to decide which color scheme you prefer.
Monochromatic schemes where you're using shades of the same color to give the greatest sense of harmony. Complimentary schemes that use highly contro casting colors that hit opposite each other on the color wheel can be anywhere from exciting to jarring. And then there's everything in between the two ends of the bell curve. In this last slide, there is what it's called an analogous color scheme where you can see the similar greens and in the green on the left it's
used with a color yellow, which is next to green on one side of the color wheel. And in the right side it's green with a blue, which is next to it, on the other side in the color wheel. Number six why a neutral in every palette. First, let me give you a definition of neutrals. Neutrals are created by mixing a hue and its complement together in varying proportions.
This muddies or grays down the original hue, neutrals help to bring other color choices together by creating a place for the eye to rest. And they work as excellent backgrounds for more intense accents. In this slide on the left, you can see that the neutral is used as the background color, and on the right, the neutral is used as an accent in the next slide.
You can see how the pale, gray, neutral acts as a background for intense accents.
Learn more about color from Joann and Arielle in our Master Class, How To Use Color Theory To Enhance Your Designs.
Typography and font choice are crucial in design, impacting readability and mood. Designers utilize them for effective communication and expression.
Designers' perception of information varies with font type. Serif fonts can imply formality, while sans-serifs can give a more modern look.
Typography choices by designers influence readability and user experience. Well-spaced, distinct fonts enhance readability, whereas decorative fonts may hinder it.
Designers use typography to evoke emotions and set a design's tone. Choices in font size, style and color affect the emotional impact and message clarity.
Designers use typography to direct attention, create hierarchy and establish rhythm. These benefits help with brand recognition and consistency across mediums.
Read our article to learn how web fonts are critical to the online user experience.
Designers create a balance between simplicity and complexity in their work. They focus on the main messages and highlight important parts. Designers use the principles of visual hierarchy, like size, color and spacing. They also use empty space to make their designs clear and understandable.
The Gestalt law of Prägnanz suggests people naturally simplify complex images. This principle aids in making even intricate information accessible and engaging.
Through iteration and feedback, designers refine visuals. They remove extraneous elements and highlight vital information. Testing with the target audience ensures the design resonates and is comprehensible.
Michal Malewicz explains how to master hierarchy in UI design using the Gestalt rule of proximity:
Remember, the more you learn about design, the more you make yourself valuable.
Improve your UX / UI Design skills and grow your career! Join IxDF now!
You earned your gift with a perfect score! Let us send it to you.
We've emailed your gift to name@email.com.
Improve your UX / UI Design skills and grow your career! Join IxDF now!
Here's the entire UX literature on Visual Representation by the Interaction Design Foundation, collated in one place:
Take a deep dive into Visual Representation with our course Perception and Memory in HCI and UX .
How does all of this fit with interaction design and user experience? The simple answer is that most of our understanding of human experience comes from our own experiences and just being ourselves. That might extend to people like us, but it gives us no real grasp of the whole range of human experience and abilities. By considering more closely how humans perceive and interact with our world, we can gain real insights into what designs will work for a broader audience: those younger or older than us, more or less capable, more or less skilled and so on.
“You can design for all the people some of the time, and some of the people all the time, but you cannot design for all the people all the time.“
– William Hudson (with apologies to Abraham Lincoln)
While “design for all of the people all of the time” is an impossible goal, understanding how the human machine operates is essential to getting ever closer. And of course, building solutions for people with a wide range of abilities, including those with accessibility issues, involves knowing how and why some human faculties fail. As our course tutor, Professor Alan Dix, points out, this is not only a moral duty but, in most countries, also a legal obligation.
Portfolio Project
In the “Build Your Portfolio: Perception and Memory Project”, you’ll find a series of practical exercises that will give you first-hand experience in applying what we’ll cover. If you want to complete these optional exercises, you’ll create a series of case studies for your portfolio which you can show your future employer or freelance customers.
This in-depth, video-based course is created with the amazing Alan Dix, the co-author of the internationally best-selling textbook Human-Computer Interaction and a superstar in the field of Human-Computer Interaction. Alan is currently a professor and Director of the Computational Foundry at Swansea University.
Gain an Industry-Recognized UX Course Certificate
Use your industry-recognized Course Certificate on your resume, CV, LinkedIn profile or your website.
We believe in Open Access and the democratization of knowledge. Unfortunately, world-class educational materials such as this page are normally hidden behind paywalls or in expensive textbooks.
If you want this to change, , link to us, or join us to help us democratize design knowledge!