Scribd
Upload
56 views10 pages

Princple Design

Uploaded by

MJ Judyawon
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
56 views10 pages

Princple Design

Uploaded by

MJ Judyawon
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 10

Have you ever wondered what the principles were behind a great

design? We’ll look at the seven principles that apply to classic and
digital design, and how to harness them in your own work.

What are the Principles of Design?


Classic and digital designers alike harness the principles of design
to shape their work, building on top of the elements of design to
give cohesion to their pieces. When used successfully, these
principles have the ability to transform designs, both aesthetically
and in terms of performance.

Unity
Unity is a force operating within a design that gives it the
appearance of oneness or resolution. This ensures no single part is
more important than the other. Author of The Elements of Graphic
Design Alex White explains, “To achieve visual unity is the main
goal of graphic design. When all elements are in agreement, a
design is considered unified.”

Using design elements to apply unity to your work is a strong way


to bring a brand concept to life. Let’s say a sports brand like Nike
or Reebok has an intense “in your face” campaign. They might use
big bold fonts, bright colors, and highly stylized imagery to exude
intense training emotions. On the flip side, a company like Casper
might use a more subdued palette with bright white tones and
light, airy fonts to emulate a restful night sleep.

Balance
Objects in design carry weight just like in the physical world, but
it’s called visual weight. The visual weight of a design needs to
have balance. It’s like putting two objects on a seesaw: If one side
is too heavy, the viewer’s eye goes directly to the heavy part. If it’s
weighted with all things equal, the seesaw is perfectly suspended
without either side touching the ground.

Balance can be implied by size, shape, or even contrast. While it


can utilize symmetry or equality, balance can also be achieved
through asymmetry. Think of asymmetry as the opposite of
mirroring: Instead of seeing the reflection, you see something that
evenly distributes the elements. For example, three small objects
can offset the visual weight of one large object. Or a small, dark,
and shaded object can offset the visual weight of a large, lighter
element.

Hierarchy
One of the most important principles in design, hierarchy is a way
to visually rank your design elements.

Hierarchy is not based on a design styles, but rather the order of


importance. A good design leads the eye through each area in
priority order. A good example is a homepage: There’s usually a
navigation bar and a logo, some sort of large header image, or text
with a call to action. In order of importance, the logo tells the user
where they are; the site navigation shows the user how to get
around the site; and the call to action compels the user to do
something. More often than not, the CTA is the biggest or boldest
element on the page, followed by the logo and navigation. It’s
designed to help the user complete an action or absorb
information.

Another example is this article. The headline is the most important


thing on the page so you can identify what you’re reading; the intro
gives you a summary of the article; and the content gives you the
meat of the design principles. If we read the article from bottom to
top, it wouldn’t make much sense.

A good rule of thumb for hierarchy is that your most important


elements should be the most prominent.
Contrast
The difference between two or more objects in a design is referred
to as contrast. The difference in objects could be light and dark,
thin and thick, small and large, bright and dull, etc.

Contrast is most commonly associated with readability, legibility,


and accessibility. Like hierarchy, the most important element in a
design should have the most contrast. A bright blue button on a
stark white background with a lot of white space is considered high
contrast. If the button was almost the same color as the
background or was a 1px stroke versus a fill, it would have less
contrast.

A text-based design could be high contrast by using black text on a


white background. To dial down the contrast, you’d use gray text
on a white background. An easy reminder is to think of a black-and-
white photo. If the photo has a full range of white, gray, and black,
it has high contrast. If the photo only goes from a dull white to dark
gray, it’s a low-contrast image.

Emphasis
Emphasis can be created by size, weight, position, color, shape,
and style. Sometimes referred to as dominance, emphasis might
seem similar to contrast, but it’s not quite the same. Contrast deals
with the difference between two objects, and emphasis deals with
the impact of an object. To make it a little more confusing, you can
use contrast to support the emphasis of an object—like placing a
solid black sphere on a white background. This is high contrast with
emphasis: The viewer’s eye is drawn directly to the heavy shape.
Adding emphasis to an object creates a focal point, which grabs an
audience’s attention. It’s where you want the viewer to look first,
but doesn’t overpower the rest of the design (or it would be out of
balance). A simple example is a long hallway or corridor, where
your eye is drawn to the end of the hallway. Imagine painting a
bright wall at the end: That’s your focal point.

Scale
Scale is the sizing of elements or a standard of measurement. It
can be used in combination with other principles like emphasis to
draw the viewer into a focal point, and helps us make sense of
designs or imagery. If something is drawn to scale, it shows an
object with accurate sizing (though it could be reduced or enlarged
from its actual size). This creates a way to depict objects as larger
than life, or bring a large object down to fit on a piece of paper.

In digital design, scale can also refer to the pixel dimensions for the
device you’re designing for. Sometimes two to three times as
dense as their non-retina counterparts, retina devices need a
scaled canvas. Depending on the device, this could be 2x or 3x the
amount of the display. For example: A 400px-wide box is still
rendered as 400px on a retina device, but it’s twice as dense. So
you would design on a 800px-wide canvas because it’s 2x the
density of a non-retina or 1x device.

Repetition
Repetition is the recurrence of a design element, commonly utilized
in patterns or textures. Repetitive elements can be used in
conjunction with other principles to create a design that leads a
user’s eye to a focal point, has continuity, or flow. A repetitive
element could be repeated lines, shapes, forms, color, or even
design elements.

Why do the Principles of Design matter?

Every piece of design work is made up of design elements and


design principles. When the principles are combined and used
correctly, a design commands your attention and is hard to ignore.
The design guides your eye through the story, keeping you visually
entertained and engaged.

Put your principles into practice—at scale


You’ve built your practice on a foundation of classic and digital
design practices, but how can you ensure consistency as your
design language evolves and your team grows?

InVision Design System Manager (DSM) makes it easy to create a


scalable design process, accelerate iteration, streamline design-to-
development collaboration, and ensure a consistent in-product
experience. DSM helps you organize and define the purpose and
style of your global design elements while providing easy version
control and advanced roles and permissions.
With InVision DSM as your team’s single source of truth, your
product and your user’s experience are simply better—and design
debt is a thing of the past.

Design with Integrity


Your team’s design principles are locked down and documented,
and now it’s time to put them into practice—but what’s the best
way to turn abstract rules into something tangible?

It’s easy to unify your team around what’s most important to you
and your users with InVision’s collaborative design platform. Using
your established design principles as your guide, refine your
product’s look and feel with Freehand wireframes, and share
prototypes to gather objective feedback based on your team’s
truth. With a shared language, agreed-upon principles, and the
right tools for the job, your team is set up to give your users an
amazing experience

You might also like