Categories / Design Basics

10 Basic Elements of Design

There are hundreds of rules when it comes to creating beautiful designs on and off the web, but these ten are the basic essentials to craft appealing and professional work. Make sure to download our free PDF poster!

Maryam Taheri May 25, 2021 · 5 min read

Creating beautiful design is about more than inspiration or a great idea, it’s about understanding the fundamentals of the subject. Although it’s possible to spend years studying the nuances of design and the many varying takes on how to be successful at it, there are a handful, or two, of basic elements that every designer should know before beginning any project. Even amateurs in the field who maintain personal blogs or only make a hobby of it can utilize these following ten tips to create professional looking pieces, and anyone who intends to earn money from the endeavor must know them. Rules were made to be broken, of course, but you have to know what they are first.

10 Basic Elements of Design Poster
10 design fundamentals, summarized
Free Design Poster

Download this printable PDF poster and hang these 10 design principles on your favorite wall.

Get the file

1. Line

The first and most basic element of design is that of the line. In drawing, a liene is the stroke of the pen or pencil but in graphic design, it’s any two connected points. Lines are useful for dividing space and drawing the eye to a specific location. For example, think about how a magazine uses lines to separate content, headlines and side panels.
Here are a few examples of what we traditionally think of when we think of lines:

LineTypes
elements-f02-en.svg

Further Reading:

Explore the power of lines to create visual interest in your design projects with these geometric background patterns:

2. Color

486465_thumbnail

Color is one of the most obvious elements of design, for both the user and the designer. It can stand alone, as a background, or be applied to other elements, like lines, shapes, textures or typography. Color creates a mood within the piece and tells a story about the brand. Every color says something different, and combinations can alter that impression further.
Further Reading:

Check out these classic swatches and see what vintage colors can do for your design pieces:

3. Shape

Shapes, geometric or organic, add interest. Shapes are defined by boundaries, such as a lines or color, and they are often used to emphasize a portion of the page. Everything is ultimately a shape, so you must always think in terms of how the various elements of your design are creating shapes, and how those shapes are interacting.

2dshape_2d_shape

Further Reading:

Playing with shapes is easy with a pack like this one from Ottoson:

4. Space

Negative space is one of the most commonly underutilized and misunderstood aspects of designing for the page. The parts of the site that are left blank, whether that’s white or some other color, help to create an overall image. Use negative space to create shapes as you would any other element. Check out this article if you’re interested in learning more about frequently used design terms like negative space.

mc-escher-birds-to-fish

Further Reading:

Experiment with white space using a pre-designed template like Holo:

Neue is a great alternative if you want to apply negative space principles to enhance your next presentation:

5. Texture

It’s counter-intuitive to think about texture when the piece isn’t ever going to be touched. Websites and graphic design do rely on the look and impression of texture on the screen, however. Textures can create a more three-dimensional appearance on this two-dimensional surface. It also helps build an immersive world.
Further Reading:

Texture packs like these make it much easier to try subtle touches of visual interest:

6. Typography

Perhaps the single most important part of graphic and web design is typography. Like color, texture, and shapes, the fonts you use tell readers you’re a serious online news magazine, a playful food blog or a vintage tea tins shop. Words are important, but the style of the words is equally essential.
These shop owners have created flexible font families that can make your text look distinctive and memorable:

7. Scale (Size)

Playing with the scale and size of your objects, shapes, type and other elements add interest and emphasis. How boring would a symmetrical website with all similarly sized ingredients be? Very. But the amount of variation will depend heavily on the content within. Subtle differences suit professional content, while bold ones prefer creative enterprises.

size

Further Reading:

Tweaking size and pressure effects on your Photoshop stamp brushes can create visual interest around scale:

8. Dominance and Emphasis

While you can talk about emphasizing one thing or another, the element of emphasis has more to do with an object, color or style dominating another for a heightened sense of contrast. Contrast is intriguing, and it creates a focal point.
If you want to test out how dominance and emphasis can change your project’s visual impact, try a saturated Lightroom preset like this one:

9. Balance

There are two schools of balance: symmetry and asymmetry. While most designers, artists, and creative folks much prefer asymmetry for its eye-catching nature, symmetry does have its place. Sometimes.

Further Reading:

10. Harmony

Harmony is “The main goal of graphic design,” according to Alex White, author of “The Elements of Graphic Design.” So, you know it must be important. Harmony is what you get when all the pieces work together. Nothing should be superfluous. Great design is just enough and never too much. Make sure all the details accord with one another before you consider the project complete.
Further Reading:

++++

There are hundreds of rules and many more principles when it comes to creating beautiful designs on and off the web, but these ten are the basic essentials that will ensure anything you create is appealing, professional and perfect. We highly suggest you continue your learning path looking at this infographic featuring ten essential commandments of graphic design.


Products Seen In This Post:

10 Basic Elements of Design Poster
10 design fundamentals, summarized
Free Design Poster

Download this printable PDF poster and hang these 10 design principles on your favorite wall.

Get the file
About the Author
Author
Maryam Taheri

I'm a recent graduate of the University of San Francisco with a degree in Biology and a passion for the creative arts. I love building websites, trying new things, and I have a passion for social media.

View More Posts
Go to My Shop
Related Articles
43 Comments
  • Wow, they say great minds think alike, i've just put the finishing touches to my very own Color Wheel - https://creativemarket.com/wingsart/17181-Wings-Color-Wheel-Design-Tool?u=wingsart 8 years ago
  • Thanks for sharing! @Christopher King, great job on your color wheel! 8 years ago
  • Thanks Beth. It's something i've wanted to try for ages. 8 years ago
  • Beautiful article, thank you! Especially for the references :) 8 years ago
  • Very useful, thank you :) 8 years ago
  • Thank you for the valuable info post.Raybiztech helps you align your IT withstrategic business initiatives with reliable IT Services Responsive Design Company 8 years ago
  • Great article! I never heard of a trapezium before! I took Color Theory class in the olden days before computers. I found it really interesting creating a color wheel in Illustrator vs paint. Might be worthwhile doing some of the other assignments (if I could remember them). 8 years ago
  • awesome 8 years ago
  • Inspiring!! got new idea :D 8 years ago
  • Maryam - you always write such informative, useful post. Excellent stuff - Caroline 7 years ago
  • This reminds me the Gestalt Psychology. 7 years ago
  • Sometimes you really need to go through basics again even when you are doing designing for 3 years. Looking at some of these elements, I feel like I didnt know about them. Usman http://www.logogulf.ae/website-design-service/ 7 years ago
  • this is really helps tons ! Thanks 6 years ago
  • Nice 6 years ago
  • Very helpful! 6 years ago
  • We are about to start studying basic elements of design in digital art and design. This was really helpful. 6 years ago
  • This is very helpful i touched on all of these in my 9th grade art class but we didn't get very far into them 6 years ago
  • This is very helpful! 6 years ago
  • This is pretty cool for digital arts and design. It helps you alot! 6 years ago
  • Very helpful. 6 years ago
  • Very nice 6 years ago
  • vErY hElpful. 6 years ago
  • this is very helpful thank you! 6 years ago
  • This is very helpful 6 years ago
  • Awesomeness 6 years ago
  • very informative 6 years ago
  • very inspiring helps allot 6 years ago
  • now i have a direction to follow. thanks alot. 6 years ago
  • Alluuuuuuuuu Akbar 6 years ago
  • wet bread 6 years ago
  • Follow me on Instagram @lilbr00mstick 4 years ago
  • Thank you for this directions, I now know what do follow 4 years ago
  • Super helpful for my textiles and design assignment! Thank you so much!!! 4 years ago
  • Well, when I was a pup, before computer aided graphics, we had a "design code" that sort of parallels what is presented here. I'd like to take issue with the shapes. There are only three basic shapes and, back then, the "super ellipse" was being considered for inclusion into the basic shapes. If you look at the basic shapes presented here past circle, square, triangle, they can be made from the basic shapes of circle, square, triangle (hence "the basic shapes"). For example the pentagon is simply five triangles nested together (edge to edge in design-speak). A rectangle is simply a series of squares and, well, you get the idea. As I learned the nature based design code from Fred Grffin: http://www.fredgriffinart.com/PORTFOLIO/Popups/d_DesignCode.htm 3 years ago
  • i eat children 3 years ago
  • i eat kids 3 years ago
  • also dogs 3 years ago
  • I seem to recall proximity was part of design. Perhaps you are calling it something else 3 years ago
  • Anonymous
    Awesome 2 years ago
  • Thanks for sharing this information with us. It is a work process that has a user perspective and drives development based on your specific customers' needs. Firefox Not Loading Pages https://www.notsupporting.com/firefox-not-loading-pages-after-update/ 2 years ago
  • Really good design elements presentation! 2 years ago
  • Very helpful! Thanks 1 year ago