Design for Developers: The Principles of Visual Design

There is a preconceived notion that visual design is some mysterious process shrouded in hipster glasses, tight jeans, and tattoos. Design is a system. Based on rules and principles, the same as any engineering platform.

Sure, there are less tangible qualities associated with design like aesthetics and “artistic talent”. But “talent” is just a natural aptitude in a given area. A talented engineer understands the construct of a system and applies their natural skill and creativity to develop solutions. The same can be said of design.

As a Product Design Lead at BigCommerce, I work hand-in-hand with front-end engineers to build successful digital experiences. In this post, I’ll define the basic principles of visual design in the context of product development. I’ll bring together both design and engineer perspectives to help us establish a shared vocabulary and understanding when collaborating on digital product experiences.

Designers and Engineers

I’m always struck by both the similarities and differences between designers and engineers. We are the “Freaks and Geeks” of the business world.

We are both “makers” and take satisfaction in the creation of something new. We enjoy complex puzzles, and pride ourselves on our creative problem solving skills.

The archetypal designer and developer share a rebellious spirit as well.

Engineers refer to themselves as “hackers” and “pirates”. They are romanticized in media like Mr. Robot and The Social Network for defining their own rules beyond the norms of society.

Similarly, designers are outsiders. We’re the slackers, the weirdos, the “freaks” to engineering’s “geeks”. The ones willing to eschew societal conventions in the name of self-expression.

However, this rebellious nature is tempered with practicality. We have both found our place within the structured environment of the business world because, frankly, that’s where our talents are monetarily rewarded.

On the flip side, the differences between us can most easily be summarized by the “left brain / right brain” theory.

In overly generalized terms: engineers tend to be more left brain dominant. Utilizing logic, facts, linear thinking, and a methodical approach. Whereas designers tend to be right brain dominant. Relying on emotions, feelings, imagination, and a holistic approach to problem solving.

These dualistic approaches complement each other in the product development lifecycle. When they are applied in equal parts, and in a collaborative environment, they produce far better results than either would working in isolation.

Why Should Developers Learn Visual Design?

For the same reason designers should learn more about development. To create better product experiences.The more developers and designers understand the systems the other is working within, the easier we can communicate, which in turn makes our experiences working together that much more effective, efficient, and fun.

Throughout history, visual design and engineering have been intrinsically tied together. From the pyramids and pictographs of ancient Egypt, through DaVinci’s Renaissance masterpieces, and up to modern day gadgets that blur the line between product and object d’art. Cultures that have furthered humankind have understood the connection aesthetics have to math and science.

The most relevant point of entry for a developer interested in learning more about aesthetics is to begin with the principles of visual design.

These are some basic rules and guidelines that User Interface (UI) designers utilize when creating page layouts. Most of them will seem like common sense. This is because they are reinforcing behaviors we have been taught our entire lives. For example: The color red means danger.

The role of a UI designer is not to “make things look pretty”. Effective product design should go almost unnoticed. The designers’ role is to guide the user on their journey, to help them complete a given task as quickly and easily as possible.

6 Principles of Visual Design

Before we discuss design principles, we should first touch on the Elements of Visual Design. This won’t be our focus, but they are the “building blocks” of our discussion, so let’s at least identify them.

Design elements are the basic units of any visual design composition.Interestingly, there is no “one agreed-upon” list of what constitutes a design element. Definitions vary depending on the discipline. For the purposes of this article, we can refer to the following as design elements: Color, Type, Line, Shape, Point, Space, Form.

Similarly, there is no “one agreed-upon” set of behaviors that govern these elements once they are combined into a composition. Definitions of design principles generally range from six to twelve depending on the use case and discipline.

One could debate whether any specific design principle is more valid than any other. But for the purposes of this article, six feels like a good place to start.

Visual design is like the Matrix, some rules can be bent, others can be broken.

Let’s begin.

1. Balance

There are 3 types of balance. Symmetrical, Asymmetrical, and Radial.

Symmetrical balance

This is what comes to mind first for most people when discussing “balance”. Both sides of an equation are equal.

When compositions are balanced they feel more ordered, more organized. Information becomes easier to digest.

Asymmetrical balance

Imbalance creates “visual tension” within a composition. The users’ eye is naturally drawn to it. As designers we use this to our advantage to create emphasis, which we will discuss later.

Radial balance

This refers to a composition arranged around a central element. The “golden section” or “golden spiral” has been used by visual artists throughout the ages to curate the viewer’s attention.

As product designers, we use the golden spiral to create a narrative for the user. A narrative is a tool designers use to help guide users through a journey. A good product experience tells a good story.

For example:

2. Contrast

Contrast is a fairly straightforward concept in terms of visual design. The higher the contrast the more important an object. The lower the contrast, the less important.

As it pertains to product design at BigCommerce, contrast is extremely important to our efforts to become WCAG (Web Content Accessibility Guidelines) compliant for users with visual disabilities.

3. Emphasis

Emphasis refers to drawing a users’ attention to important aspects of the composition. For example, highlighting a primary call to action.Conversely, we can de-emphasize less important aspects, like the legal disclaimer at the bottom of a form. Emphasis is often determined by scale and contrast.

It is important to define what aspects of the composition deserve to be emphasized, and in what order of priority. A subject we will continue to discuss in Hierarchy.

4. Scale/Proportion

Similar to contrast, scale and proportion are fairly straightforward concepts within the context of visual design. The larger an element in the composition, the more important. The smaller it is, the less important.

When it comes to proportion the rule of thumb is: “Make it the same, or make it different.” What this means is, be purposeful in your use of proportion. Choose proportions that create enough of a contrast to be noticeable and have meaning.

5. Hierarchy

An important part of a visual designers’ job is creating a “priority of information” within a composition. As product teams, we want to offer users a variety of choices so we can track their decisions and determine the value of features we build.

The problem is: When everything is important, nothing is important. In his book The Paradox of Choice — Why More is Less, psychologist Barry Schwartz argues that eliminating consumer choices can greatly reduce anxiety for shoppers.

Similarly, when creating digital product experiences, a clear visual hierarchy can cue our users where they should focus their attention in any given composition. Thereby eliminating confusion and anxiety and creating a more effective experience.

6. Harmony/Unity

All of the topics we have discussed so far come together to create a harmonious and unified design.

Harmony is a scalable concept when it comes to product design.

Basic design elements like type and color work together to become a button. A text field and a button work together to form a search field. Multiple design components combine to form compositions and then pages. Pages become experiences. Finally, all these disparate experiences unify to become our product.

This is the basis for the theory of Atomic Design by Brad Frost. Chemistry becomes a metaphor for the systemic approach to user interface design.

This is also the basis for our Design Language System, BigDesign.BigDesign is our holistic approach to user interface design at BigCommerce. We have a React Component Library and developer playground available now, and our design team is hard at work on a CSS style guide for teams working in other code bases. You can learn more about BigDesign and our process here.

Conclusion

With a better understanding of these visual design principles, engineers and product designers now have a shared vocabulary as they work and collaborate together. This alignment will help teams produce better results, communicate better, and create a product that best serves customers.

I’d love to hear about how you incorporate design principles into your development experience. How do your teams work and collaborate together. Share your thoughts and comments with me below or reach out on Twitter at @bigcommercedevs.

Cheers, and happy collaborating!

You can learn more about BigCommerce design at design.bigcommerce.com and dribbble.com/bigcommerce