The Language of Product Design - Design
“The hardest part is starting. Get that out of the way and the journey is much easier” - Simon Sinek
Whenever we start something new it takes courage to take that first step. We’re all beginners at the beginning. One of the barriers we all face when we’re starting a new endeavor is speaking a language everyone else seems to understand. Once we become comfortable with the existing language, we feel like we belong.
I want everyone to come to the table knowing at least some of the language of product design, and having a small understanding is infinitely greater than none.
Remember in the future how you feel now. Remember that there may be others who are in a conversation (stakeholders, managers, etc.) who may not know the language you now commonly speak. Being able to explain your language while not using the language demonstrates a skill only a few have.
We’re going to break this up into categories so let’s get this started with the broader words of design. You can find the other categories here:
- Typography
- Color
- Engineering
Alignment
The placement of content e.g. text and images, with reference to other content on the page, or the page as a whole. When alignment is done well, it’s not noticed. When it’s even a smidge off, it can ruin your composition.
When managing a team or project, alignment can also refer to getting your team and stakeholders on the same page and with the same expectations.
Balance
Balance is the placement of elements in a design so that is perceived by the eye that they are evenly distributed. Our brains can be fickle things, so some designs look out of balance, even though mathematically they are, and vice versa.
Composition and layout
Both of these terms are concerned with the arrangement of design elements on a medium. Composition can imply an artistic thought process behind it and generally includes color, typography, and other elements. A good layout can be made to be bad by composition.
Contrast
The difference in color between two objects. This is an important part of designing a product with inclusiveness in mind. The contrast between UI elements should be a minimum of 3:1, and text should have a contrast of 4.5:1 to its background to meet WCAG2 AA accessibility standards.
Hierarchy
Part of UI design, hierarchy helps the user determine what is most important to them on the page. It’s commonly applied to text to enable users to skim content, or in websites and apps to help with calls to action or task completion.
Proximity
Refers to the closeness of elements. In product design, the law of proximity states that “Objects that are near, or proximate to each other, tend to be grouped together.”
Whitespace
This is the space between elements in the design (often also called negative space and doesn’t have to be white). Whitespace aids users' comprehension of your page. A good rule of thumb is to add more whitespace than you need, and then reduce it.
===
Lastly, we’ll look at a term that’s used in the design industry as well as many industries outside.
Design thinking
Modern businesses find design thinking a useful way of problem-solving for the users of their products and services. It involves 5 stages, can be non-linear, and is an iterative process:
- Empathy
- Define
- Ideate
- Prototype
- Test
The above 5 stages map to these types of activities:
- User research
- Problem statements
- Brainstorming
- Paper prototyping
- User testing
Read more in the fundamentals series
Andy Chipperfield
Andy Chipperfield
