Principles of Design You Need to Master

Graphic design combines words, images, and ideas to communicate visually. If you design something well, you can convey all kinds of messages to your audience. Bur poor design could send all the wrong signals—or worse, express nothing coherent at all.

Luckily, graphic design experts have spent decades distilling great design down to its fundamental qualities, defining exactly what makes an image both beautiful and effective as a communication tool. These five simple principles of design—symmetry and asymmetry, scale, framing, hierarchy, and gridding—offer a road map to help any designer keep their work ordered, legible, and meaningful to their target audience. 

“Those are principles that you can bring to bear in all kinds of projects, that are quick and useful,” says Smithsonian Design Museum curator Ellen Lupton. “They're in the background really of any piece of graphic design.” In Graphic Design Basics: Core Principles for Visual Design, a Skillshare Original, Lupton shares the fundamentals of these basic principles with students of all levels.

Here, we’ve outlined the major takeaways for each of these five main principles. Learn to apply these basic style ideas, and you’ll be well on your way to creating more dynamic, interesting designs.

Master the Basics

Lay a strong foundation for your graphic design journey with Ellen Lupton and Jennifer Cole Phillips’s Skillshare Original, Graphic Design Basics: Core Principles for Visual Design.

Take the class

What is graphic design?

Before you dive into the principles of great design, it’s important to understand the function that graphic design performs. Graphic design is the practice of combining design elements such as typography, image, and color to convey a message and produce a specific reaction in its audience. The elements of design are its most basic building blocks: Think lines, shapes, images, textures, colors, and typography. 

Although any element can help or hurt a design, some are worthy of extra study. For example, a designer’s choice of typography—the font type, style, mood, and weight—is critically important. Similarly, an understanding of color theory—the way that one or more colors can evoke an emotion or mood—can make or break a project. Finally, composition—the way that elements are arranged, with the help of focal points and guiding lines—can help sustain or reduce a viewer’s ultimate interest in a piece.  

Because designs have to make sense, graphic design doesn’t just rely on its visual elements to fully express information. It also depends on these elements’ relationships: to one another, to their frame, and to their audience. The principles of design define those relationships and outline what happens when elements work well together to relay a specific message. Principles can include ideas such as contrast, emphasis, layers, time and motion, harmony and balance, proximity and proportion, repetition, and transparency.

Both the principles and the elements of art and design can be applied to any project that requires a visual layout, from logos and book covers to brochures, posters, websites, packaging, or any other project that involves texts and images combined to communicate a message.

(If you ever hear someone discussing the “characteristics” of a particular design, don’t be confused: They usually mean the specific elements and principles of art that make up that single piece of work. In that circumstance, anything that displays visual information, holds the image together, and helps tell a story about what the designer wants to convey is considered a characteristic of that work.)

The 5 Fundamental Design Principles 

When you are designing your own work, it is always important to choose elements that reflect the message you want to express. Bubble letters convey something very different than cursive. But it’s arguably even more important to arrange your elements well. You can choose a great font for a block of text, but if you space the letters too close together, no one will be able to read what you have to say. Even perfect elements must cohesively relate to one another, or the entire project will lose meaning. That’s where the principles of design come in. 

Although there are many principles to consider when putting together a design, the five most vital are listed below. They are simple, easy to practice, and key to elevating your work. Master them, and they’ll keep your designs orderly and expressive – exactly the way you want them.

1. Symmetry and Asymmetry

A design has symmetry when you are able to draw a line through the center of it—top to bottom or left to right—and each half will look the same. Many natural organisms, including humans, are symmetrical. When a symmetrical design element stretches out from a center point, the way a starfish might, it’s called “radial symmetry.”

Symmetrical designs stand out for their stability, harmony, and balance. For centuries, designers have gravitated toward symmetry to give their art order and agreement, but that doesn’t mean those layouts have to be boring or traditional. “You can vary the size of the elements, or you can crop them on the page in a way that suggests tension and movement and growth,” suggests Lupton. Pushing back against the rules of symmetry can produce compelling results, too: By adding or subtracting even a single element, disrupting symmetry can be a great way to grab one’s attention. 

Asymmetry involves elements that do not correspond with one another visually. Layouts with asymmetry energize the page by encouraging the viewer’s eye to organically move through the design in an unexpected way. Asymmetrical examples include mountains, modern architecture, posters, and many album covers.

Designers can create tension and visual interest in both symmetrical and asymmetrical layouts by using contrasting shapes and colors. As long as the choices are intentional, intuitive, and harmonious, either framework can help make a great design. Harness symmetry and asymmetry appropriately, and you’ll enhance your work immensely.

Experiment with Symmetry

Play with patterns and develop your design skills in Fun with Symmetry: Create a Themed Pattern in Procreate, an engaging class from greeting card designer Charly Clements.

Take the class

2. Scale

You’re probably already familiar with the conventional definition of scale, or how big something is. But in graphic design, the concept gets a little bit more complicated: When designers talk about scale, they are referring to the relative size differences between different elements. 

Because scale can play with audiences’ perceptions, it also conveys meaning. Depending on the designer’s intentions, large objects can appear to be closer to the viewer than small objects are, or more important than small objects. Or large objects can create an exciting contrast, when paired with small objects in the same layout.

“Often, when you take an element and change the scale in a way that your audience doesn't anticipate, it can energize the design,” says Jennifer Cole Phillips, a co-director of the MFA program at the Maryland Institute of College of Art with Lupton. She, too, shares design wisdom in Graphic Design Basics: Core Principles for Visual Design. “You can surprise your audience by making something that's typically really big, really small and something really small really big.”

Scale can keep your audience guessing. Using context and shape size to drive home a point allows viewers to engage with your design in a way that sustains their attention.

3. Framing

Framing tells your audience where to look, drawing attention to your design’s most important content. Some of the most common ways we see framing implemented in design is through margins, picture bleeds, and cropping.

Margins operate as a protective border around a photograph, image, or text. They separate an element, offering it more weight by calling attention to the blank space around it. When a margin surrounds an image, it gives viewers permission to see the margin as an object—as an image itself—while simultaneously elevating the content within. 

On the other hand, picture bleed is the phenomenon that occurs when an image does not have margins and the design is extended to the edge of the page. Bleeds have the opposite effect of a strong margin: They bring the viewer into the scene, making the content feel more immersive. If the entire image extends off the page, it is referred to as having a “full bleed.” Meanwhile, a “partial bleed” indicates when a portion of a picture goes off the page, but the rest is framed with a margin. A partial bleed can offer the intimacy of a full bleed while leaving room on the page for more practical elements, like captions, that may be required by the client or project.

Finally, consider cropping—the framing technique we’re all probably most familiar with, whether we realize it or not. “Every time you change the cropping of the image in Instagram, you are framing,” says Lupton. Cropping a photo can drastically change its effect, whether you’re zooming in and emphasizing a figure in the image or simply eliminating margins, creating your own bleed effect. You can use a crop to alter an image’s shape, change its proportion, or refine its focus.

Not all framing adheres to these few examples: Some designers employ frames within frames to further narrow your viewpoint; others use broken frames to convey that an idea can’t be contained. Broken-frame designs can feel open and energetic when compared with their more traditional counterparts. But whether you’re using the conventions of framing as guideposts or bending the rules for dramatic effect, working toward a general understanding of framing and its strengths will allow you to better communicate with your audience.

4. Hierarchy

Visual hierarchy lends order to a page, allowing designers to organize information in a way that tells viewers how to prioritize and absorb different parts of the message. It offers audiences a tool to navigate complex content and quickly glean big ideas. Without hierarchy, complex information can be cumbersome or hard to understand.

The easiest way to express hierarchy is through separation and contrast. Variations in typefaces can call out text, as can contrasting weight and color. Indents, outdents, and line spacing can also be a great way to indicate importance to your viewers.  If you are working with blocks of text, you’ll want to be aware of their “typographic colors,” a phrase that refers to the way that the weight, spacing, and density of lettering can affect the shade it appears to be on the page (rather than “color” in the traditional sense of red or blue). A large, thin paragraph will register as a different shade than a block of small, thick letters—even if you use the exact same color—so pay attention to those elements and make sure they work together. 

Taking care of those details will deepen your composition, give your type dramatic tension, and move a viewer’s eye more fluidly around your design. However you express them, the most visual differences between the important and not-so-important elements should be significant enough that audiences pick up the cues and understand what you want to emphasize.

Hierarchy and Typography

Join creative director Jon Contino as he breaks down the history of design layouts and shares tips on hierarchy and spatial design.

Take the class

5. Grids

Grids are another powerful tool for graphic designers working with a page layout. Grids add structure to the page, which can help designers place and size each element. By helping designers create exact patterns and shapes, they can also lend efficiency to the design process and ensure consistency over multiple pages.

A basic grid has vertical and horizontal lines. On graph paper, the lines are evenly spaced, but you can adjust those proportions if you are working on a digital platform. Basic grids allow you to measure elements against one another.  

A typographic grid not only has rows and columns, but also margins and gutters. Examine any traditional print newspaper, and you’ll see an example of typographic grids hard at work: Margins are the spaces around the edges of a layout, while gutters are the gaps in between blocks of material. 

Web and digital media grids are more standardized than many other grids, in large part because these design layouts must work on desktop as well as mobile devices. As digital media has become a dominant part of the graphic-design landscape, print layouts increasingly resemble the aesthetic you see on websites.

When you work with grids, be aware of how you align text and photos. Lining up your visual elements along grid lines can give your page extra structure. Even if you leave parts of your grid blank, using one during the production process will allow that white space to look intentional and arranged, which means that your final design will feel more polished, too.

Use Grids to Create a Logo

Follow along as designer George Nokhua shares examples of gridded designs and guides students through creating a logo of their own in his Skillshare Original.

Take the class

Conclusion

With practice and the help of these five principles, you can create graphic-design projects that are modern or traditional, dangerous or familiar, hot or cool. Learn to apply symmetry, framing, grids, hierarchy, and scale to each project you take on, and your design will communicate everything you want it to—and nothing you don’t. Immerse yourself in the fundamentals by enrolling in a class, and get started today.