Visual Design Principles and Why They Do Not Make Good Product Design
When researching this topic, I almost always come across the same idea: use the elements and principles of design to create high-quality insert art form here. Contrary to the title of this blog, I agree that the elements and principles provide overarching guidelines applicable to almost anything dealing with perceptual aesthetics.
For those unfamiliar with the elements and principles, a brief review of the terminology and their underlying purpose specifically for product design is helpful. These lists grow and shrink with every designer, but I will cover the most pervasive ones that I have seen in my experience.
Elements: The Fundamental Building Blocks of Any Perceptual Experience
Line: A stroke of a writing utensil or an edge, a path which the eye can follow. Lines help lead a visual experience; horizontal lines generally allude to stability, whereas diagonal or vertical lines add energy and awareness.
Color: The color that fills a particular space or object. Color can create a mood and blend or define objects. It is important to keep in mind for any design that the color gamut varies between mediums. For example, from digital work to print, colors can change. In addition, color perception can vary for individuals as well.
Shape: Shape is built from boundaries created by line and color. Shapes are the objects created in your visual space, and different shapes achieve different effects.
Space: With shape comes distance between them. This is also referred to as “negative space” or “white space.” The amount of distance between objects helps group or separate them visually.
Texture: The depth of the screen created with patterns and layering.
Principles: The Effects of Strategically-designed Elements
Emphasis: An arrangement that controls where the eye is drawn. The point of emphasis is to draw attention. It can commonly be heavier in visual weight and surrounded by white space. Likewise, a point can lack emphasis by being surrounded by clutter or being smaller in size. Points of emphasis in product design tend to be around important information or points of interaction.
Balance: There are three types of balance: symmetrical, asymmetrical, and radial. Each describes how objects are arranged on a page, whether it is evenly-balanced on each side of a point, unevenly balanced, or radiating from a central point. Balance can affect the mood of a design. Balanced pieces feel more solid and stable, whereas unbalanced pieces can feel more dynamic and modern.
Contrast: The difference between one subject matter and another, created intentionally to alter the emphasis of an object. Contrast is needed in product design to make things legible and draw the eye.
Repetition: Repetitive elements help bring unity as well as variety to a composition. Repetition does not require an exact same recurring object, rather that an element occurs more than once. This is also referenced by the term “motif”, such as recurring colors, logos, or similar-looking buttons and layouts.
Proportion: Proportion plays with visual weight as well as symmetry. Varying proportions can emphasize an object as well as create energy in a piece.
Movement: Curves bring more movement than hard edges. Diagonal lines bring more movement than horizontal lines. Movement helps create a visual story to lead the eye to a particular point, depending on the purpose of your design.
Like all other forms of art, it is evident that these rules are inescapable when it comes to product design. However, unlike art, these rules are the last ingredient of the product design recipe.
When strictly speaking about product design, designers do not and should not focus religiously on these rules to create good design. Product designers focus on what the design does rather than how the design is. Unfortunately, it is easy to hone in on the elements and principles, and become obsessed with pixel perfect images without understanding what it actually does for a business or user.
Good design is centered on the people using it and things that they need your product to do.
Jamie Acker and Assaf Weinberg explain this perfectly in Design is Not Art. They describe how designers and artists approach aesthetics differently. For artists, aesthetics is the product. For designers, experience is the product accompanied by aesthetics to elevate the experience. While having an understanding of aesthetics is helpful, product design is not founded by the principles of design, so don’t go running toward aesthetics for answers.
So if lines, emphasis, or movement don’t make good product design, what does? The search for good design doesn’t mean to seek a new list of buttons, typefaces, or grids to abide by because those are just abstractions of the simpler ones listed above. Good design is centered on the people using it and things that they need your product to do. While focusing on what the design does rather than is, and after working with designers here at Levvel, I formulated the following product design principles that I abide by as a designer:
Empathize with Users: The people using your product are the foundation of your entire design. Know your users and know them well.
Establish a Goal: Clearly define goals for what you want the user to do, everywhere from overarching to minute step-by-step details. Every part of the design must have a purpose to move the user to that goal; otherwise, it shouldn’t be there. With every part of the design, think: “What do I need the user to do?” and, “What does the user actually want to do?” If there are discrepancies, it’s time to rethink.
Visually Direct: Say what you need the user to do without saying anything at all. You can create visual cues that lead the user to particular points on the product, showing them where to go and what to do with the least words possible.
Define Interaction: Product design is made purposefully for interaction. While not all parts of the interface will be interactive, clearly lead the user to points of interaction, and make evident that it is interactive. Make sure to maintain a level of cohesion to allow the user to develop an understanding of what is interactive and what is not.
Give Validation: Provide feedback when things are or are not going well. Allow users to know where they are in terms of their progress.
Provide Flexibility: Humans make mistakes. Never expect perfection—plan an escape route in case some mistakes were made. This includes corrective feedback, flexibility in allowing users to undo and redo, and work their way backward in an experience.
Don’t Reinvent the Wheel: Good design is easily understandable to its users. Referencing pre-existing patterns and techniques help users build mental models of what the action or experience is supposed to do.
Prioritize Ease: The importance of a feature can be illuminated by how easy it is to interact with it. Make experiences as simple as possible to complete; this includes increased visibility, a simple visual flow to follow, and clear commands.
Iteratively Test: Never expect that your work will be interpreted the way you want it to be. Always test iteratively for users and also, but in addition, touch base with your clients to make sure you maintain the same goals.
Most of these principles deal with the visual aesthetic but from a different perspective that I have not seen emphasized enough. At Levvel, I find that our designers implement these principles without thinking directly about them, and I found it important to point them out. With so many beautifully designed products, good product design is often associated with aesthetic beauty. I hope I can help bring clarity to the matter and solidify a basis from which designers work from.