Welcome to Design
Gestalt Psychology is a concept used to describe how we perceive the world around us as complete units and patterns vs. a series of unrelated parts. “Gestalt” means “shape” or “form”. Humans are hard-wired to see patterns and apply structures to quickly understand their surroundings.
The Gestalt psychologists developed six laws, or principles, to explain the way smaller objects are organized and grouped to form larger, complete objects. These principles can be thought of as mental shortcuts for visual problem solving. Today, we will look at three of them.
🎯 Learning Goals
- Identify design principles in applications
- Identify color choice in applications and create palettes with appropriate contrast
- Create wireframes taking design principles into consideration
Warm-Up: for today’s lesson, you’ll be diving into design, which is a part of the user interface and user experience, which we sometimes refer to as UI/UX. “Good” user interface and design may feel seamless to you as a user: that’s when you know developers have done a great job at creating technology with the user top of mind. Here’s an opportunity to discover firsthand how a poorly designed interface can make even the simplest tasks feel like a daunting challenge, head to userinyerface.com to experience “bad” user interface!
Design Principles
Law of Proximity
Elements next to each other tend to be grouped together. Even though this is made up of unrelated elements, we see a column on the left, a square to the upper right, and a short row on the lower right.
Law of Enclosure
Items that are enclosed in a border or with a background color tend to be grouped together. A figure will be perceived as separate from it’s background. A border provides a separation.
Law of Similarity
Elements that look similar will be perceived as part of the same form. Despite the similar scale and distribution of shapes, we see columns of squares and circles
Try-It | Laws of Design
Go to a few of your favorite websites. Find an example of each of the three laws we just learned about. Write it down in your journal!
Go to a few of your favorite websites. Find an example of each of the three laws we just learned about. Write it down in your journal!
Color
“Color is a powerful form of communication. We are so attracted to color and so repelled by it that even if the coolest design were presented to us, if we didn’t like the color, we wouldn’t like it at all.” - Joanne Chang, from Hack Design’s “Building Color Confidence”
Whether or not we consciously realize it, colors carry meaning. The exact meaning can be subjective and can be swayed by other design choices and context, but it is often heavily influenced by the culture someone grew up in. Therefore, it is important to be aware that colors can have very different connotations and associations based on different cultural traditions, countries, and religious beliefs. Take white, for example. White often symbolizes purity, fulfillment, and brightness. However, in some cultures it is more closely associated with death, is often used as a color of mourning, and is frequently used in funerals. One color, two vastly different meanings.
Emotions
There are three groupings that colors fall into: warm, cool, and neutral. The colors inside of these groups tend to share similar meanings: warm colors are generally positive and energetic, cool colors are calmer and relaxing, and neutral colors are more conservative.
Contrast
Contrast is the difference between two colors. You usually want a high contrast might be alarming or unsettling. Black and white create the highest contrast possible. Usually, when you think you see black/white combinations on pages, it’s a very light grey and/or very dark grey.
It’s important to provide a contrast for your page to be pleasant, but it’s essential that you do so for users who may be colorblind or have limited vision. This is an awesome tool that allows you to enter two color and get an analysis on if the contrast is acceptable.
Combinations
There are many ways we can choose to select colors. Let's explore some color combinations through a color wheel! Go to the Canva Color Wheel to learn about key color pairings.
In the Canva Color Wheel, you can pick a color combination to learn about key color pairings in including Complementary, Monochromatic, and Analogous Colors.
As you play around with the color combinations, take note of these pairings:
Complementary Colors: Two colors that sit directly across from each other on the color wheel. They complement each other and often have the most contrast, but that doesn't mean always mean they make for the nicest pairings
Split Complementary Colors: Starts with one color and then instead of going straight across the color wheel to the complimentary color, go to either the left of right a couple of colors. This softens the contrast and often gives a nicer, more visually appealing pairing.
Analogous Colors: Groups of colors that are close to each other on the color wheel. They have enough contrast to be clearly distinguishable from one another, but because they are very similar they form a harmonious group
Try-It | Colors
Using the Canva Color Wheel, generate color palettes and discuss the appeal of the color combinations you made.
Using the Canva Color Wheel, generate color palettes and discuss the appeal of the color combinations you made.
Questions to consider:
- Why do these colors go well together?
- How do the colors balance each other?
- What would you use this combination for?
Check out Huemint, the AI color palette generator that uses machine learning to create unique color schemes for your brand, website or graphic.
* Although using AI tools can be helpful in creating quick and unique color palettes, ensure that the output it is generating is aligned with the accessibility of your design.
It’s important to note that front-end developers do not need to be design experts. In fact, on many teams, there is a designated person whose role is to design. A front-end developer’s role may just be to bring what that designer created to life. (And, if you like design, you may consider looking into UI/UX!) So, if selecting colors “isn’t your thing” - that’s ok! There are some awesome tools out there like Color Mind, Canva, Coolors and Color Hunt that can help you make a great choice.
Designing With Accessibility Top of Mind
“You are not your user”
⬆️ This is a quote that is commonly used in the user interface / user experience world to remind developers to think beyond their own experiences when creating technologies. If we use our own abilities and biases as a starting point, we end up with products designed for people of a specific gender, age, language ability, tech literacy, and physical ability.
The false-consensus effect. Let’s talk about the psychology behind the previous quote “You are not your user.” What this phrase is describing is the false-consensus effect, which describes peoples’ tendency to assume that others share their beliefs and will behave similarly in a given context.
The false-consensus effect refers to people’s tendency to assume that others share their beliefs and will behave similarly in a given context. Only people who are very different from them would make different choices.
“A beautiful website that functions poorly for users with disabilities is like a beautiful skyscraper with only staircases connecting its floors.”
TIPS FOR ACCESSIBLE DESIGN
Colors
Many people with colorblindness are not able to differentiate certain colors from each other. When picking out your color combinations, keep in mind the potential color pairings that won't be easily distinguishable for individuals with colorblindness, such as red and green, yellow and light green, or monochrome blindness.
Text Size
Ensure that your text is legible for those that have low vision and struggle to read small texts. The standard text size for website design is 16 pixels for a body of text
Links
Links should be identifiable by underlining and making it a different color from the rest of the body of text. The standard color for links is typically blue because of its visibility on both white and black backgrounds. They should also take form of meaningful text, not URLs .
Wayfinding and Intuitive Design
Think about the order in which you want users to interact with each element of your website design. Using visual hierarchy, lay out the elements in a way that guides the user's attention naturally, starting with the most important content and progressing to secondary and supporting information.
INCLUSIVE DESIGN
- Inclusivity is the practice or policy of providing equal access to opportunities and resources for people who might otherwise be excluded or marginalized
- Inclusive design focuses on building technology that is equally accessible to, representative of, and responsive to everyone
- This includes thinking about the perspective of users. Especially users
- of all colors,
- of different ethnic backgrounds,
- from different upbringings,
- who aren’t able-bodied,
- who aren’t euro-typical
SOLVING FOR ONE CAN EXTEND TO MANY
A misconception about inclusive design is that some people believe that inclusive design is solely for a certain subset of people. Designing accessible technology is not a barrier to innovation: solving for one can extend to many. Inclusive design works across a spectrum of related abilities, connecting different people in similar circumstances.
For example, a solution that works well for someone who’s blind might also benefit any person driving a car. Here are some other examples:
- Closed captioning was created for the hard of hearing community. But, there are many benefits of captioning such as reading in a crowded airport, or, teaching children how to read.
- High-contrast screen settings were initially made to benefit people with vision impairments. But today, many people benefit from high-contrast settings when they use a device in bright sunlight
- The same is true for remote controls, automatic door openers, audiobooks, email, and much more!
Check out these 10 tips from Berkeley on how to make your website more accessible.
Head to this Inaccessible Website example and think about how you might make it more accessible!
Wireframing
The best apps and websites require an incredible amount of planning and thought. Designers spend hours and hours building out a user experience, color palettes, and more. A great idea can be built into an app, but with poor design - it might go nowhere.
One part of that planning process is making wireframes. The wireframe is a visual guide of the content and functionality on a page, taking into account the user experience. It should be treated as a roadmap - it’s completely planned before starting a trip, it is referenced throughout the trip, and at the end, the final destination should look a lot like where the map was supposed to take you.
Here are some examples of wireframes other people have drawn up before starting to build their app:
Things to consider as you wireframe:
- What HTML elements will be used for each piece of the page?
- What class names will you use for those elements?
- What Design Principles are being utilized so the page is clear and understandable?
- Make a decision about the color palette you’ll use, and write those colors (hex codes, rgba, other) down so you don’t forget.
- Get user feedback. Ask someone who wasn’t involved in the design process for their opinion!
Practice | Iterate On Your About Me Page
Using this lesson’s design principles, update your existing About Me page. Review your current layout and identify areas to improve content grouping, spacing, and color contrast. Start by creating a quick wireframe on any medium you’d like (paper, Figma, Canva, etc.), then apply your changes to your website, and reflect on how they enhance the user experience.
Using this lesson’s design principles, update your existing About Me page. Review your current layout and identify areas to improve content grouping, spacing, and color contrast. Start by creating a quick wireframe on any medium you’d like (paper, Figma, Canva, etc.), then apply your changes to your website, and reflect on how they enhance the user experience.
For a summary of this lesson, check out the 6. Web Design One-Pager!
Made with Bullet