But fear not: You don’t need an art degree or thousands of hours logged in the Adobe suite to build engaging designs. With the right resources and a clear plan, anyone can put together compelling art for a blog post, Tweet, website, app, or other project. That means instead of asking your designer or hiring a freelancer to develop basic images, you can make them yourself.
Delightful design starts with the essentials. This guide covers the basic design elements—including line, shape, color, texture, and type—then explores more advanced principles like balance, contrast, rhythm, and white space. We’ll teach you how they can easily fit together to create great graphics to go along with your content.
We’ll also cover tools and resources you can use to spur creativity and build beautiful graphics faster.
Ready to send your design skills into overdrive? Let’s get started.
The Basic Elements of Design
“Design is a plan for arranging elements in such a way as best to accomplish a particular purpose.”- Charles Eames, designer
Design isn’t something mysterious, only to be mastered by artistic prodigies. Even the simplest design can be broken down into separate chunks, or “elements.” These elements include line, shape, color, texture, and type.
Design is simply “a plan for arranging elements in such a way as to best accomplish a particular purpose,” as ISDA’s Most Influential Designer of the 20th Century Charles Eames has said. Break the core elements of design down, and you can piece them back together into any number of creations.
But be warned: If you use the design elements arbitrarily, your design will arbitrary, too. Understanding how each element influences your design—and using them accordingly—lets you create something that evokes a specific emotion, complements your content, and aligns with your brand.
You know what a line is: anything that connects two points. Lines have a couple of important functions in design: separating content, and drawing your eye to a specific place.
Take a look at the MailChimp homepage. A line divides the menu at the top (a.k.a. the navigation bar) from the central focus of the page. Under the main section, we’ve got another line introducing Mailchimp Pro. This linear layout makes it easy for the visitor to understand exactly what’s going on.
Meanwhile, Digiday uses lines to draw your attention to key areas of site. Thanks to all the surrounding lines, the “subscribe” section of the homepage stands out—thus driving more visitors to enter their email.
Different lines generate different feelings, as well.
Horizontal lines evoke feelings of stillness and stability (think of a sun slowly sliding below the horizon).
Vertical lines, on the other hand, are energetic (picture an alert, upright person).
If you want to create a sense of drama, use diagonal lines—they convey a restless, even raw sense of motion.
Look at the Vibrant Composites landing page for an example. It contains two types of lines: the vertical lines of the hand, and the diagonal line in the right corner. Because both types are dynamic, this homepage feels exciting and powerful.
Lines might seem like a simplistic tool, but they’re crucial for organizing visual information, and setting the tone for a design.
When you read “shape,” you probably think of a square or triangle. Those aregeometric shapes. But there are also natural, “organic” shapes, which are irregular and often contain curves (circles, for example, fall under this category, even though they’re technically geometric). Then, there are abstractshapes, which are recognizable but not realistic (a stick-figure, for example).
Like lines, each type of shape produces different emotional effects. Geometric shapes suggest structure, control, and order. Organic shapes, on the other hand, are more comforting and friendly. Abstract shapes communicate a information very quickly.
The Visage homepage uses purely geometric shapes, and consequently, it feels professional and reliable.
The Basecamp homepage, on the other hand, uses organic, rounded shapes to evoke warmth and childlike curiosity.
When you’re designing something new, don’t forget about basic shapes—they provide the framework for our interactions on the web, and the forms you choose communicate more than meets the eye.
The psychology and theory of color is extremely relevant to marketing. After all, people decide how they feel about a product within 90 seconds—and researchers have found up to 90% of that judgement is solely based on color. Plus, further studies have found consumers are more likely to buy when acolor feels “right” for the brand.
Ultimately, no two people will have the exact same response to a color: we all have personal preferences, unique backgrounds, and cultural influences that affect what a color means to us. But there are general trends you can use.
Warm colors, like red, orange, yellow, and their variations, project passion, warmth, happiness, power, and energy.
Cool colors, including blue, green, and purple, are calmer and more soothing.
Neutral colors include white, black, and gray. Technically, they don’t have an emotional effect (but I’d argue “no effect” is an effect in and of itself!)
There’s also variation within colors. For example, you probably think of hunter green as more serious and somber than neon green. Luckily, it’s easy to look at a color and
know instinctively what type of effect it’ll have—at least on people with a similar background to your own.
Take a look at Prezi’s site for proof. The bright blue feels energetic, punchy, and modern.
In stark contrast (literally), we’ve got the Revelator homepage. As you can see, simply flipping from black to white has a huge impact on your perception of the product and the brand. This design feels urban, powerful, and intense.
Color provides pop and emotion for your designs, but it’s easy to get carried away, too. If you’re building something to accompany text, readability is goal #1—avoid color combinations that clash with other elements or distract from your message. Your eyes are generally a pretty good litmus test for color; if it feels off, play with different hues.
It might seem kind of strange to talk about texture in digital design—after all, you can’t touch something through your computer screen. But you can stillimagine how something would feel.
According to Smashing Magazine writers Jon Savage and Simon H., “Texture is becoming integral to design. It can guide the user’s eye and emphasize the importance of key elements.”
You can use texture in your background, as Houndstooth Coffee did.
You can also add texture through images.
On the site promoting [Uncharted]((http://uncharted.sunbrella.com/), a documentary about the US Olympic sailing team, the textural aspect of the waves makes you feel like you’re part of the scene.
That being said, flat design is currently experiencing a renaissance, eschewing texture, drop shadows, gradients, and anything that makes a design look 3-D. Instead, they’re using simple illustrations and icons, 2-D shapes, and bright colors.
This minimalism can feel refreshing and modern.
For example, check out the Make This Year landing page. Thanks to the typing animation and vibrant color combo, this design definitely doesn’t need texture to make it interesting.
Texture adds depth to design, though you’ll want to be careful when mixing materials. Tossing conflicting textures together—like wood and glassy surfaces—might turn a physical connection with your art into a more grating sensation.
Getting your message across matters. And typography—or, the art and technique of arranging lettes and symbols—has a huge impact on whether or not your audience understands that message.
First, let’s clear up the difference between a “typeface” and a “font”. Think of each typeface as a family, and fonts as individual members of that family. For example, in the Helvetica typeface (or family), fonts (or family members) include Helvetica Regular, Helvetica Light, Helvetica Bold, Helvetica Compressed, and Helvetica Rounded.
Typefaces can be classified as well. Although there are several variations, the two most important are serif and sans serif.
Serif refers to typefaces with little decorative marks tailing from each letter. Popular serif typefaces include Times New Roman, Rockwell, Georgia, and Baskerville. Serif fonts are generally considered easier to read, since individual letters are more distinct, and they also feel more traditional or classic.
Sans serif includes typefaces that—you guessed it—don’t have little decorative marks. Helvetica, Arial, Futura, and Franklin Gothic are in this family. These typefaces feel cleaner and more modern, but can be harder to read.
There’s also monospace fonts, including Courier, Courier New, and Lucida Console. Each character of a monospace font is exactly the same width. They look like typewritten text, and are typically used for code, screenplays, and in some writing apps—especially for the first draft. However, they can be harder on the eyes than proportional fonts, so they’re not typically used for long chunks of text in design.
It’s also handy to understand the other factors that impact the readability of your text:
- Tracking: How much space exists between each letter. The more space, the more readable your type is.
- Leading: How much space exists between each line. Use a leading value that’s 1.25 to 1.5 times bigger than your font size.
Size: Font size is a complex matter, as it changes depending on what device someone uses, how big the screen is, the settings he or she has applied, and so on. Jakob Nielsen, an expert in web usability, suggests using at least a 10 point font size—or perhaps bump that up to 12 points for better readability.
- Hierarchy: This demonstrates the relative importance of each piece of information. You can create hierarchy using scale—notice how the title of this post is bigger than my name underneath? That’s because you probably care more about what the content is about than who wrote it. Traditionally, titles have the largest font size, followed by sub-headings, followed by body type.
- Weight: You can also create hierarchy using various weights of a font. A weight describes a font’s thickness and is typically described as lighter, normal, bold, or bolder. In general, lighter weights look more subtle, graceful, and modern, while heavy weights communicate power and force. To see how changing a font’s weight impacts its appearance, try out thiscode editor.
- Style: Like weight, a font’s style adds emphasis. “Upright” or “normal” is the most common, followed by “italic.” “Oblique,” which looks similar to italic, is the least common, as some web browsers don’t support it.
- Line length: As the name implies, line length defines the horizontal width of your text. After detailed research into how people read, the optimal length for a line seems to be around 45 to 85 characters.
Just like wine and cheese, certain fonts work together better than others. A serif typeface with a sans-serif is the classic pairing, but you can definitely play around.
Typewolf—a curated collection of “fonts in the wild”—is a great source of inspiration for type parings. Typefinder is also really helpful: Answer a series of questions about where you’ll be using this type and what style you’d like (i.e. “web,” “modern,” “expressive,” etc.) and get matching suggestions.
And if you want to really sink your teeth into typography, you’ll love Typeface. This Mac app stores all of your fonts so you can compare them, both side-by-side and through overlays. You’ll be able to pick up on even the most subtle differences.