7
Balancing
form & function
Design is not just how it looks but also how it works. Graciously balancing those two mindsets is the holy grail of a designer’s craft.
What if we told you both sides of your brain are equally valuable as a designer?
Goal
Explore basic concepts of graphic design and how they translate to digital products.
Illustrations by Michela Picchi
Let’s start by busting the myth that design is only about making things pretty. Given the nature of the medium we’re playing with, in digital product design most of our effort goes into figuring out the logic behind an interface: how things work behind the scenes, how users navigate through the experience, how the design system we are creating scales across various use cases and scenarios. A large part of our day is spent using the rational side of our brains and thinking through how to make sophisticated interactions work.
We also want our products to look beautiful and simple. We know aesthetics play an essential role in how people perceive an experience, and consequently, a brand. Clean visuals, well-defined typographic hierarchy, harmonic grids—those are some of the ingredients a designer can use to build a visually balanced product. In addition to that, with the right use of color, imagery, and motion, designers can create products that evoke different emotional responses from users.
This balancing act between function (usability) and form (aesthetics) is one of the most challenging and rewarding parts of being a digital designer. You will hear about this a lot. In some companies, those two mindsets are separated, and we end up seeing two different professionals looking at either side of this issue; while the UX Designer (or Interaction Designer) is more focused on function, the Visual Designer (or UI Designer, or Brand Designer) is more focused on form. In other companies we see one professional being responsible for both. The reality is that form and function can’t be separated. While some people might be more focused on one side of the spectrum, as a designer you need to understand and continue to evolve in both.
“Information is only useful when it can be understood.”
Graphic Design can be defined as the process of visual communication and problem-solving through the use of typography, photography, iconography, and illustration. It is everywhere around us. On the cover of the book you keep next to bed. On the label of the orange juice bottle you had for breakfast. On the movie posters you keep on your living room wall. On the illustrations on this website. Creating visually attractive things, eliciting emotions, and telling stories through design is a concept that’s been around since the early days of humankind.
The qualities of what is considered visually compelling have changed pretty drastically throughout history. If you click around the apps you have installed on your phone, you’ll notice that when it comes to digital product design, designers have been following a pretty narrow spectrum of visual styles. Even within that narrow style, we see specific visual trends come and go, year after year.
“Styles come and go. Good design is a language, not a style.”
It will be really important for you, as a designer, to study art history, as well as graphic design history. More important than memorizing the names and dates of art movements is to understand what they represented in their day and age. More often than not, art and design artifacts (be it a painting, a poster, a sculpture, a building) are a message that the creator sends out about how they view life, society, or politics.
You might have heard about Modernism, an artistic movement that developed in the beginning of the 20th century that opposed the excessive ornamentation of previous styles. Or the Bauhaus, a German art school that aimed to unify the principles of mass production with individual artistic vision, merging pleasant aesthetics with everyday function. A lot of the work and design principles defined during that period still influence the digital products we see today. Understanding the past is important to help us create what's next: what are the principles worth keeping, and the ones we need to move away from to get to a better place as a society?
Studying the more foundational principles of our discipline, as opposed to jumping too quickly into User Interface (UI) best practices and trends, will ensure you are building skills that can last more than just a few months. Our reading list below is only a starting point, but feel free to explore each of these introductory concepts further as you find the ones that excite you the most.
Reading list
1.
Universal Principles
of Design
Clear explanations of foundational design principles featured with visual examples applied in practice. By William Lidwell, Jill Butler, Kritina Holden.
2.
Refactoring UI
How to design beautiful interfaces using specific tactics explained from a developer's point-of-view. By Adam Wathan, Steve Schoger.
Borrow these books from local public libraries or buy from local bookstores.
3.
Graphic design history
Encyclopædia Britannica (35 min)
4.
Why the Bauhaus lives on as the most influential school of art and design
Michelle Chiu (5 min)
5.
The fundamentals behind visual hierarchy
Pascal Potvin (9 min)
6.
The power of visual in product design
Jonny Czar (10 min)
7.
Laws of UX
Jon Yablonski (25 min)
8.
The ultimate guide to proper use of animation in UX
Taras Skytskyi (11 min)
1.
Design is one: Lella & Massimo Vignelli
Kathy Brew & Roberto Guerra
2.
Dieter Rams — a brave new world of product design
Victoria and Albert Museum
3.
Designing meaningful animation
Val Head
4.
100 years of Bauhaus
BBC
Watchlist
What was the design principle that surprised you the most? How does that principle apply to some of the products you use every day?
What does graphic design, industrial design, and digital design have in common? How would you explain their differences to a friend?
How would you describe the importance of typography, color, and space for digital product design?
Reflection
See it in practice
The secret to honing our user interface skills is to learn from everywhere. The more techniques and repertoire we have, the easier it will be to convey our ideas and solutions on interfaces. See it in practice with case studies from other designers starting their careers, watch redesign walkthroughs, and read how companies like Slack approach their big interface projects getting their users involved.
To learn visual design, you need to practice. Try to rebuild interfaces of apps you like on the design tool of your choice and use this opportunity to also learn how the tool works. There are many design templates and guides to copy, experiment, and build on top.
![Illustration of a colorful banana](https://i-p.rmcdn.net/5ecbe27f82f5b3005df02f46/1937030/upload-5327614c-6846-42aa-a72c-dfd3409b17cb.jpg?w=1006&e=webp)
![Abstract shapes](https://i-p.rmcdn.net/5ecbe27f82f5b3005df02f46/1937030/upload-4743efc7-3fba-4299-a8e2-f7e0f6b34e21.png?w=1006&e=webp&nll=true)
![Book: universal principles of design](https://i-p.rmcdn.net/5ecbe27f82f5b3005df02f46/1937030/upload-69d22335-ee4d-488c-b88a-c5858bbf8315.png?e=webp&nll=true)
![Book: refactoring UI](https://i-p.rmcdn.net/5ecbe27f82f5b3005df02f46/1937030/upload-981aaf98-6fd7-47fc-b720-a1b0582510a5.png?w=196&e=webp&nll=true)