Advertisement
Inspiration

Using Design Principles to Create Exceptional Vector Illustrations

by

Making an image is fairly straightforward, but making an image that stands out from the crowd is more science than it is luck. With the right combination of aesthetic and design, you can turn a good idea into a great piece of illustration. Today we will take a look at nine different design principles and how to apply them to the world of illustration.

Over the years, I have wondered why some of my illustrations are more popular to others, and exactly what makes a good illustration. There's more than a few answers to this question, sometimes it's the subject matter, and other times it's promotion, but more often than not it comes down to the design.

Over the past few days I have looked at literally hundreds, if not thousands, of illustrations to see exactly what it takes to make a winning piece of work. The one factor I kept coming back to was design. The following is a list of design principles and how they can be used to enhance your illustrations.


Proximity

Proximity is the arrangement of elements that relate to each other to make a visual grouping. By placing different elements in close proximity a relationship is implied. The example below shows how the different symbols of music, food and activities, have been placed in close proximity to make a larger image. By looking at the arrangement you will see that each item works together to tell a visual story. If you placed the elements side by side the message of the illustration would be lost.

Terras Gauda Contest by L.E.GRÁFICO


Visual Hierarchy

Visual Hierarchy is achieved by creating a focal point by arranging elements so that the strongest concept is seen first and then subsequent elements are seen in order of importance. The illustration below is a good example. A pyramid shape is often employed to show hierarchy by placing the most important item at the top and implying a relationship with the elements below based on their position. The closer to the bottom the element is, the less important it becomes. The "Colonel" emblem at the top of the pyramid could be used as an image on its own, but though the use of hierarchy, the concept, and visual impact is emphasized. In fact, the image is only Suisse with the inclusion of the top element and the meaning of the illustration would be lost if you were to only show the bottom line of elements.

Highest Rank by Glenn Jones


Symmetry / Asymmetry

Symmetry and Asymmetry places elements in relation to one another to create unity and balance. The first example below shows how mirroring the image vertically brings balance and a sense of stability to the image. The geometric shapes work together and create additional elements of symmetry within the main focus point.

The second example shows how asymmetry works. The figure on the left is balanced out by the three stacked figures on the right. Although they may be different in appearance, the similar width and height of the left and right side creates a visual harmony.

Gazelle Poster by Kronk

Jolly Cream by Henriquepl


Repetition

Repetition uses repetitive elements to enhance meaning and bring visual interest to an image. The illustration of the bike wouldn't be quite as interesting without the birds. By using the bird as a repetitive element, the bike takes on a new form and invites the viewer to ponder the meaning.

Birdcycle by Robert Lee


Unity

Unity is best described by a combination of elements that create a visual harmony. The illustration below uses unity as a way to bring a collection of elements together in a seemingly hap hazard way, but on closer inspection you will notice that it's a pattern. The repeating elements within the design create balance and tie the items together in a visually pleasing manner.

Drinks by Konstantin Shalev


Contrast

Contrast is used to highlight a specific part of an illustration or design though the use of opposing elements, such as light and dark or large and small. In the example below the contrast is achieved by adding color to the focal point on a black and white image. The red emphasizes the face of the figure and is supported by smaller elements of a slightly darker red that moves the viewers eye around the image.

Hiddenmoves x Machine56 by Rajaya Yogaswara & Rhys Owens


Dynamics

Dynamics is used to suggest movement, flow and direction, it is also used to create emotions such as restfulness, anger or happiness. The image below has a strong focus on dynamics though the use of line and light to bring a free spirited and energetic feel to the image of a dancer. The dynamics of the illustration makes it very easy to imagine the dancer springing to life and moving across the page.

The Dance by Tony Ariawan


Emphasis

Emphasis is the use of a dominant focal point within a composition. The illustration below uses the monster set against the dark background of the cave as the main focal point, then the supporting elements of the gold and the miners are used to give the illustration meaning. Both elements support each other to create an interesting composition, with the element of emphasis helping to convey the meaning of the image in a way that's simple to understand.

Deadly Goldmine by Andreas Krapf


Get Involved!

As an extension to this article I invite you to submit your own examples. Find an illustration that you admire and write down why you like it and which design principle it would fall under, then leave it as a message in the comments section below. Have fun!

Related Posts
  • Web Design
    Complete Websites
    Design a Travel Startup Landing Page Using PhotoshopLanding thumb
    In this tutorial I’ll walk you through a process of creating a simple and clean travel startup landing page design. I'll be using Photoshop CS6 to design a professional and lightweight layout combining beautiful imagery and some stylish fonts.Read More…
  • Web Design
    Interface
    How to Become a Conversion-Centered DesignerUnbounce
    So you want to be a landing page template designer? You may think you have it easy - after all, landing page templates are just a single page. That’s much easier than designing a full-on website. But the rules of design change quite a bit when building conversion-centered landing pages.Read More…
  • 3D & Motion Graphics
    General Workflow
    The Making Of "Lost"Making of lost retina
    This theory based tutorial is intended for beginners who are making the switch from creating and building assets, to creating whole scenes or environments. I’ll take you through the processes and techniques I use, and show you the challenges and mistakes I've faced when making larger sets.Read More…
  • Web Design
    Design Theory
    Building Content Hierarchy Through DesignDsfd hierarchy content retina
    Way back at the beginning of this series, we talked a lot about content and the importance content has in any design work. It’s something that should obviously be looked at and sorted through before you start any project, but you only get to see the real results of this work once you begin designing.Read More…
  • Web Design
    Design Theory
    An Introduction to HierarchyDsfd hierarchy retina
    Ensuring that your designs present a clear hierarchy is very important, and something that you should aim for in every one of your designs. There’s definitely an art to this, one which relates heavily back to your content planning and strategy stage.Read More…
  • Web Design
    Typography
    Understanding Typographic HierarchyThumb400x400 v3
    One of the most important techniques for effectively communicating (or “honoring”) content is the use of typographic hierarchy. Typographic hierarchy is a system for organizing type that establishes an order of importance within the data, allowing the reader to easily find what they are looking for and navigate the content. It helps guide the reader’s eye to where a section begins and ends, whilst enabling the user to isolate certain information based on the consistent use of style throughout a body of text.Read More…