Try our new Figma plugin! Sample and source thousands of assets without leaving the app.

15 Diagrams That Make Graphic Design Much Easier

By on Sep 1, 2016 in Inspiration
15 Diagrams That Make Graphic Design Much Easier

If you're a graphic designer reading this blog, there's probably a good chance you already know how tough graphic design can be. However, practice makes the design process easier — and your products better — over time. In addition to simply honing your craft, there are also some helpful resources out there that can make design easier and more insightful so you can spend more time unleashing your creativity and less time figuring out the basics. These 15 diagrams contain valuable shortcuts that will help you become a better designer.

1. Infographic Layout Cheatsheet

The Infographic Layout Cheat Sheet is a graphic design cheatsheet created by SeeMei Chow of Piktochart. This cheatsheet contains six unique infographic layouts, and a description of what type of infographic each layout is best-suited for. This design reference sheet will be helpful to you if you are trying to find the perfect layout for an infographic filled with numerical data, a versus comparison chart or a timeline, among others.

2. Specification Guide for Social Networking Sites

The folks at Raidious designed the Specification Guide for Social Networking Sites, which is a helpful guide for designing content of the right size for different social media platforms. The design reference sheet includes dimensions for Facebook, Twitter, Google+, LinkedIn and YouTube images. This guide is helpful for any designer who wants the content they design for social media to look ultra-professional.

3. Typography Cheatsheet

In this Typography Cheatsheet, Typewolf shares a host of typography shortcuts that can make typing unusual characters much easier. The cheatsheet contains copy-and-paste, Mac keyboard shortcut, Windows keyboard shortcut and HTML entity options.

4. Design Elements & Principles

Mary Stribley at Canva designed this infographic, called Design Elements Principles. It is a design reference sheet that outlines and illustrates the 20 most important design principles: line, scale, color, repetition, negative space, symmetry, transparency, texture, balance, hierarchy, contrast, framing, grid, randomness, direction, rules, movement, depth, typography, and composition. It is a great refresher for anyone who wants to go over the fundamentals.

5. The Missing Cheatsheet for Brilliant Color Combinations

For a color theory cheatsheet, check out The Missing Cheatsheet for Color Combinations from Peter M. at Creative Market. The cheatsheet outlines important color terms, gives some psychological associations with each color, and then explains how to pair colors unexpectedly to look great.

6. Design Dictionary: 36 Terms You Should Know and Understand + Cheatsheet

Need to brush up on your designer lingo? The Design Dictionary: 36 Terms You Should Know and Understand + Cheatsheet by Igor Ovsyannykov at Creative Market is a great place to start. The terms included will help ensure you know what you're talking about (and what they're talking about) when you discuss a project with a client or supervisor.

7. Photography 101 - Cheat Sheet & Camera Basics

Becky Thompson created this Photography 101 - Cheat Sheet & Camera Basics reference guide to outline important photography terms like aperture, shutter speed, ISO and exposure. She offers tips for the right settings for each, depending on how you want your photos to look.

8. Always Up-to-Date Guide to Social Media Image Sizes

For a helpful social media reference guide, check out Kevin King's Always Up-to-Date Guide to Social Media Size Images on SproutSocial. Updated regularly, the guide outlines appropriate image sizes for Twitter, Facebook, Google+, Pinterest, LinkedIn, YouTube, Instagram, and Tumblr.

9. HTML Tag Cheatsheet

Skillcrush created this awesome HTML Tag Cheatsheet, which is a great beginner's reference guide to using HTML for building a site. The cheatsheet is also helpful for any designer who works in WordPress.

10. Bootstrap 3 Cheatsheet

This Bootstrap 3 - Cheat Sheet created by the Creative Alive staff is a Bootstrap design reference guide that contains screen size cheat, grid behavior, and all classes names.

11. Anatomy of Typography

Martin Silvertant designed Typography Series - 01- Anatomy of typography as a helpful typography cheatsheet. The sheet outlines the actual physical elements of typography, like the aperture, apex, arc, arm, etc., with a labeled diagram and corresponding list.

12. Cascading Style Sheets (CSS 3)

This Cascading Style Sheets Quick Reference Guide from Smash Magazine is a useful, succinct reference guide for the style sheet language CSS 3. At five pages long, this guide is your go-to for basic and helpful CSS info.

13. CSS Font Shorthand Property Cheatsheet

Another helpful guide to CSS is the CSS Font Shorthand Property Cheat Sheet created by Louis Lazaris. This explanation of CSS design shortcuts can help designers save time by cutting a few lines of code.

14. Lettering Anatomy

Anyone who has ever wanted to improve his or her hand lettering should check out the Lettering Anatomy sheet by Mary Kate McDevitt. This lettering cheatsheet was hand-drawn by McDevitt herself, and it contains an explanation of the anatomy of hand-drawn letters (depicted), as well as examples of different weights and faces.

15. Print Terms Cheatsheet

As designers, there are times when we need to print our designs. For a better understanding of printing technical terms, check out the Print Terms Cheat Sheet on the Proforma Blog. The sheet includes info about ink, registration, paper weight, binding, finishing and more.

If you're a designer looking to get better at design, cheatsheets are an easy and convenient reference. For more basic but helpful info on graphic design, check out the design basics from Creative Market.

Products Seen In This Post:

Free lettering worksheets

Download now!


Download now!

Getting started with hand lettering?

Download these worksheets and start practicing with simple instructions and tracing exercises.


  1. cursedun

    Thanks for this compilation of cheatsheets and reference guides! Just a note that the HTML Tag Cheatsheet is dated 2012 and does not include HTML5 tags; also the Anatomy of Typography link appears to be broken.

You must be signed in to post a comment.

Made with Creative Market

Browse a gallery of inspiration made with design assets from Creative Market.

Explore the Gallery →

Meet the Creative Market Authors

Learn more about the talented writers behind the articles.

Meet the Authors →

Download Our FREE Branding eBook

Get a FREE, fun, and friendly guide to design your own brand.

Get your eBook →