UX-2.1 Design and Visual Fundamentals
Design and Visual Fundamentals
As a UX Designer, depending on what company you work with, how many employees they have, and where they are in product market fit the role of UX Designer will probably include doing a fair amount of product design work. Even if you find yourself in a UX position that focuses on research, it's still good to understand the basics of design so that you can have meaningful conversations with design-minded individuals at your company. Today we're going to touch the very basics. Keep in mind that people have dedicated their whole lives to studying design. It's a huge field and we could spend forever going over it.
Our goal today is just to give you the bare minimum of what you will need in an entry-level UX role.
Gestalt Principles
The human brain is wired to see structures, logic, and patterns. It helps us make sense of the world. For example, what do you see when you look at this image?
If you’re like most people, you probably see a triangle. But in reality, what’s really there are three white “pac men.” We see the triangle because our brains take the ambiguous visual information and organize it into something that makes sense to us—something familiar, orderly, symmetrical, and that we understand.
When this cognitive process kicks in, our minds make a leap from comprehending all of the elements as individual and unrelated components, to seeing the entire shape as a whole. And as a result, we perceive forms and objects where none were actually created.
To further illustrate this process, check out the GIF below. Your brain sees a dog walking, but it’s nothing more than a series of moving dots.
These are simple examples, but they demonstrate the types of shortcuts our brains make all the time in order to quickly make sense of the world. These shortcuts are known as the Gestalt principles of visual perception, and they detail how our brains create structure by default. But why is understanding this important for design?
Great designers understand the powerful role that psychology plays in visual perception. What happens when someone’s eye meets your design creations? How does their mind react to the message your piece is sharing? - Laura Busche, Brand Content Strategist at Autodesk
Having a solid understanding of how these principles work will help you in three ways:
- They’ll help you determine which design elements are most effective in a given situation. For example, when to use visual hierarchy, background shading, gradients, and how to group similar items and distinguish different ones.
- These psychological principles hold the power to influence our visual perception, which allows designers to direct our attention to specific points of focus, get us to take specific actions, and create behavioral change.
- And finally, at the highest level, the Gestalt Principles help you design products that solve the customer’s problem or meet the user’s need in a way that’s beautiful, pleasing, and intuitive to use.
Principle #1: Figure-ground
The figure-ground principle states that people instinctively perceive objects as either being in the foreground or the background. They either stand out prominently in the front (the figure) or recede into the back (the ground).
Examples:
Principle #2: Similarity
The principle of similarity states that when things appear to be similar to each other we group them together. And we also tend to think they have the same function.
Principle #3: Proximity
The principle of proximity states that things that are close together appear to be more related than things that are spaced farther apart.
Principle #4: Common Region
The principle of common region is highly related to proximity. It states that when objects are located within the same closed region, we perceive them as being grouped together.
Principle #5: Continuity
The principle of continuity states that elements that are arranged on a line or curve are perceived to be more related than elements not on the line or curve.
Principle #6: Closure
The principle of closure states that when we look at a complex arrangement of visual elements, we tend to look for a single, recognizable pattern. In other words, when you’re presented with an image that has missing parts, your brain will fill in the blanks and make a complete image so you can still recognize the pattern.
Principle #7: Focal point
The focal point principle states that whatever stands out visually will capture and hold the viewer’s attention first.
Extra Resources
Every so often, we'll include a few extra resources at the end of the day. These are extra - meaning that you don't have to look at them. That said, everything we include as a resource is valuable and we're confident it will be worth your time to look through/read/explore.
The Landing Page Analyzer - A free tool that instantly grades your landing pages
Appcues - Better user onboarding, code free
Make My Persona - A free buyer persona generator
Smartmockups - Create product screenshots with just a few clicks, for free
The Weekly Radify Pledge
I will do the hard part first.
I will adopt an attitude of positivity.
I will care for the people in my cohort,
And I will be an active participant in all group projects.
I promise to use the skills I learn this week for good, not evil.
I promise that even after this week, I will keep making a ruckus, building things, and putting good out into the world.
Finally, I promise to take what I learn and pass it along to someone else who would do a lot of good with the superpowers I learn these next four weeks.
One of the best things you can do to start to train yourself to become a better designer is to start consuming more good design. The best way to do that is to create a Dribbble account and follow a few designers who focus on product design and then check Dribbble every day to see new designs.
Dribbble is an online community for showcasing user-made artwork. It functions as a self-promotion and networking platform for graphic design, web design, illustration, photography, and other creative areas. What's great about it is that to be able to post to Dribbble, you need an invite and to get an invite, you have to be a pretty talented designer. This means that all of the work on the site is high-quality.
Here are a few profiles that we recommend you take a look at: