Design Language for the Non-Designer
First, Brains are Weird
Design. A nebulous, un-understandable beast for only the small population of difficult-to-work with people we call designers. But does it have to be? We think not. As with any industry, a little common language goes a long way. While the complexities of design may seem to be borderline witchcraft for the common layperson, it has become seamlessly intertwined to the subconscious of the designer. Listen to them. And because design is often the face of your company or product, you the stakeholder, or you the developer, or you the marketer, or you with the eyeballs should be part of the conversation. Let us show you how.
Talking about design is often minimized to ‘well it’s so subjective’ and is then rendered untouchable. It’s true, there are many subjective aspects, and there are trends, but then there are the objective parts too. In Design 101 they talk about the principles of design; for the purposes of web and mobile and the length of readable blog posts, we’re going to focus on balance, emphasis, and movement.
But first, we have this important visual. The first thing to understand is that your brain and eyeballs are complex organs.In this image, there appear to be four outer squares holding in similar, but different, colored squares in the center. The reality is the inner squares are the same color as its neighbor. Sorry for the confusion, brain. It’s just the way it is.
Talk the Talk
Before designers sit down and begin spoofing up magic, a number of key concepts are ingrained in their practice. Universal rules exist as a fundamental basis for designers to keep in mind before creating. Principles such as balance, emphasis, and movement are the building blocks in design. These three principles are notable for their powers in moving the eye.
Balance in design is the overall weight distribution. When imagining balance, it should be seen with the function of a scale. Stability is often a key goal when creating a design, particularly within the small confines of mobile. This goal is attained by either symmetrical or asymmetrical balance. Factors to keep in mind that affect balance are position, scale, texture, isolation, value, value contrast, quantity, orientation, shape, color.
Below is an example of asymmetrical balance, you can see there is balance by the way details and text are organized. Even though this is not your traditional symmetrical balance, the darker values and texture on the right is balanced by the intricate content on the left.
Another foundational principle is emphasis. Emphasis is the part of design that directs peoples’ eyes. The common question designers ask themselves is, “Where does the eye go?” Using emphasis, a designer can direct what is seen and perceived in what order. (This is called hierarchy.) Emphasis is created by differences in shape, texture, scale, value (light vs dark), placement, and saturation.
Movement through a composition is the breadcrumb path laid out by the designer for the viewer to willingly follow all the way through the image. They way your eye travels has everything to do with points of emphasis and hierarchy (remember emphasis??). Incorporating lines, edges, shape, color, or other emphases manipulates the movement in a design. Emphasis and movement are of the utmost importance in designing for web and mobile. What’s the most important thing for a user to see when they encounter a screen? That information should have emphasis. Are there particular steps that the user has to take? Movement should direct them.
A real life example of the use of these three principles can be seen above. The placement of the details on the right screen are off putting because of how close they are to the edge. This alone creates tension to the viewers. Additionally, the placement and scale of the font creates too much confusion and lack of focus. Isn’t is amazing how minor details alter entire viewing experiences?
Walk the Walk
The overarching goal of design is to relate to the viewer what the primary message is. Through design, one can promote an app’s overall direction through thoughtfully picked out elements. The iconic images you’d recognize anywhere have strategy implemented in their look.
Above are popular games that have a very different feel from each other. Through a designer’s lens, it is easy to see that the Candy Crush image (far left) is overwhelming and in your face. While this may be a nightmare when promoting, say, a meditation app, it is appropriate here in the mind-numbing, crushing of candy. On the other side of the spectrum, Monument Valley (second from left) leads towards an ominously calming dynamic. With simplistic hues and poignant emphasis in movement, viewers can expect a more focused experience. Trivia Crack (second from right) meets a compromised middle in the playful and scholarly crossroad. By having an organized collaboration between the mundane and vibrant colors, the balanced contrast works. A Dark Room (far right) takes on a completely different feel compared to the other games. The stark, aggressively simple lay out of this game works because it represents spot on the foreboding aim of the game.
WHY? Because it’s Science
Through the variety of games presented and how their image portrays them, it is apparent how integral the role of design is in a mobile company. Users of apps are attracted to a certain image and have expectations, therefore the thought and care put into “the look” of an app is a priority. Knowledge of design tactics among all team members is beneficial for the expansive, knowledgeable wealth distributed throughout. Having a clue about the science of design creates a smoother work process when creating that final product.
Bonus: Design Lingo Cheat Sheet
When working in close quarters with designers, obscure phrases and questions are often overheard. If you’ve found yourself scared with the burning desire to know what the heck they mean but have been too bashful to ask, quest no further for those answers.
What the designer says: “It feels squished.”
What the designer actually means: “MORE SPACE! My eye isn’t traveling!”
What the designer says: “I don’t know where to look.”
What the designer actually means: “There is too much going on right now, stop it. We need more emphasis.”
What the designer says: “Make that bigger.”
What the designer actually means:“What is the emphasis? What should it be? It might be your logo, but it really might not be too.”
What the designer says: “I’m nervous!”
What the designer actually means: “This is giving me anxiety, let’s find balance and serenity.”
About the Author: Alison Vetter is the UX/UI Design Lead at Myriad Mobile. Learn more about what she’s reading and why she loves working at Myriad.