Fundamentals of Design: Spacing + Layout

This unit contains seven sections. Work through the content in order.

Spacing + Layout (Overview)
Setting Up Your Canvas
Designing for Print vs. Web
Spacing Your Elements
Best Practices
In Conclusion

Fundamental #5 — Spacing + Layout

When people mention a design’s “layout,” they are usually speaking about one of two things (or perhaps both at once!):

  • The shape of the design itself (dimensions, orientation)
  • The positioning of information/elements within the design

Spacing of information in your design will impact everything we’ve discussed so far. Is there enough breathing room between elements? Are the margins uniform? Will the eye instinctively know where groups of information are split? 

This is the hardest aspect of design to teach, but with practice, your skills will improve.

If you’ve ever heard someone say, “Oh, s/he has an eye for design,” what they mean is that this individual is uniquely good at laying out information. It may seem like they simply know where content should be grouped, divided, placed, etc, but more likely, this person has mastered all the design fundamentals we’ve discussed so far and, as a result of both skill and practice, is exceptionally proficient at applying them.

That said, there are still a few key pointers we should cover regarding spacing and layout. Let’s dig in…

Setting Up Your Canvas

Much like how a painter creates their art on a physical canvas, you will be creating your designs on a digital canvas. Some software programs will literally call it the “canvas” while others may simply call it “design size” or “image size.”

Regardless of terminology, the canvas is your workspace. Elements that you add to the design can span beyond the edges of this workspace, but when you save your final image, anything that lays outside the edges will be cropped/cut from the final product.

Always, always, always know your canvas size before you start. Sometimes this will be easy (a standard US postcard is 4x6in, so if you’re designing a postcard, you’ll choose a canvas size of 4x6in). Other times it will be more abstract. When posting for instagram, you may want something square, but at what exact size? 800×800 pixels? Bigger? Smaller? What if you’re posting to your stories instead of your main feed? This is where things get murky fast.

You can google dimensions for almost any type of social media post. This roundup from Hootsuite is a good starting point. That said, if you work with a user-friendly, beginner-designer software like Canva, you’ll have templates to choose from. So long as you know what you’re creating, your canvas is created with the click of a button. (More on this later.)

Designing for Print vs. Web

Some of the design projects you tackle as an author will be designed for print (bookmarks, postcards, anything that exists in the physical world). Others will be designed for web (social media graphics, website content, anything that lives on a digital screen). 

When designing for print it is so very crucial to consider image resolution. DPI stands for dots per inch. In short, it is how much detail—how many points (or pixels)—are rendered in one inch. The more pixels you’re printing per inch, the higher the print quality.

  • 72 dpi is the standard for web/digital products
  • 300 dpi is the standard for print products

You may have heard the terms “high res” and “low res” (short for high resolution and low resolution). When you design something for print, you always want to use “high res” images within that design—images with a dpi of 300. 

Image quality will suffer when you scale an image up. A photographic image (such as a jpg of your book cover) is considered a raster element, meaning the pixels are set in place. Scaling this image down (making it smaller) will not hurt the quality because the computer will condense/remove pixels as necessary. But scaling it up (making it larger) requires the image’s existing pixels to stretch to fill the new dimension, resulting in loss of quality. The image will end up looking blurry and pixelated.

Have you ever picked up a flyer or brochure and noticed that elements are blurry or pixelated? In these instances, a few things could have happened:

  • The designer worked in 72dpi, so the design prints blurry
  • The designer worked in 300 dpi but used low res images, so they print blurry
  • The designer scaled up their images, causing them to lose detail and pixelate

Pro-Tip: More advanced design programs (like Photoshop) will allow you to set your dpi when you set your canvas dimensions. Others, such as the free and easy to use Canva, won’t. Depending on your comfort level, you may decide to tackle digital design projects on your own and outsource (higher a pro designer) for print projects.

Unlike images, vector graphics are digital art that is rendered by the computer using a mathematical formula. Vector graphics can be scaled up or down any number of times without a loss of quality. Shape tools within most design software are vector. Text is also vector unless you specifically choose to rasterize it. 

In short, here’s some key guidelines as you approach your projects:

  • When you design for print, use 300 dpi and high resolution images.
  • When you design for web/digital, use 72dpi and any resolution imagery.
    • Keep in mind that higher resolution images have larger file sizes, which mean they will load slower. This is why most web designs use 72dpi imagery where possible. 


This is all getting very nuanced and potentially overwhelming. Much of the info on this particular page is technical specifications for design, not a design fundamental. So if your eyes are starting to swim, my suggestion is this: start by tackling web/digital projects only. Designing for the screen is great for beginners. The cost barrier is lower too! No need to order/pay for printing. Plus, you can immediately see how the design looks on screen because you are designing on the screen. 

Once you feel confident designing digital products, you can potentially take a stab at designing print products. (I didn’t even get into how print products also have their own color mode (CMYK) while digital uses RGB.)

You may be the type of author who never feels comfortable designing for print, and that’s totally okay! The vast majority of authors’ design needs are digital, so outsource the few print projects you need to and  save yourself some money by tackling your digital/web work. 

Spacing Your Elements

The key to spacing and arranging your elements well is to group related information together and use various design cues (size, color, font, etc) to communicate hierarchy.

There are many ways to accomplish this and often there is no wrong or right way to do so. What works in one design might not work in another. This is where a lot of play enters the picture. In many ways, this fundamental is when all the design work actually happens. You’ll move elements around on your canvas. Resize them. Change colors. The process can be a lot of trial and error until you land on a version that is both visually appealing and communicates your design’s purpose effortless. 

Here are some tips and tricks to keep in mind as your arrange and space your design’s content:

Use negative space to your advantage. Like a comma, negative space is a pause that can help the viewer’s eye relax as they move through your piece. Another way to think of this is padding. You want there to be padding, or breathing room, between key groups of information. 

“Split” a design into sections by using blocks of color and/or changes in opacity. This approach is the cousin to negative space/padding. For example, four-fifths of your design could utilize a dark blue background. Perhaps all main content lives in this section. The final fifth at the bottom could have a white background and hold footer info (like a website address, publisher logo, etc). These different color blocks visually split your content, letting the viewer digest the content in sections.

Overlap elements to show an immediate connection between related content. For example, a circle with the words ‘on sale now’ overlapping a book cover immediately communicates that said book is now available to purchase. Similarly, if a graphic had multiple book covers on it and a different headshot overlapped each cover, the viewer would easily infer that the person in each headshot authored the book beneath.

Strive for uniform margins around elements. This doesn’t mean that every single margin has to be the exact same size. Instead you want to have uniform margins within each section of content. (A visual representation of this is shared in the video examples.) That said, remember that the viewer’s eye can sometimes be tricked or misled by other elements on the canvas. It is more important for the design to feel balanced and evenly spaced than it is for it to be perfectly spaced.

Examples of Spacing + Layout in Action

In this video, I’ll share a few designs and discuss how spacing and layout is applied within the pieces.
For the best viewing experience, I strongly suggest watching in full-screen mode.

Spacing + Layout Examples

Spacing + Layout Best Practices

In many ways, the act of designing IS laying out your content and spacing it appropriately.

Some best practices to keep in mind when working with this fundamental:

DO design at the right DPI and use high- or low-res images as necessary.

DO determine your canvas dimensions before you begin.

DO group related information together.

DO strive for balanced margins and padding.

DO use negative space to create breathing room (“pauses”) between content.

DON’T use low resolution images (less than 300dpi) for print pieces. 

DON’T expect the spacing and layout that works in one design to work for all others.

DON’T be afraid to experiment with various layout options. Your first iteration will rarely be the best option.


And…. that’s it! Congratulations! You’ve worked your way through the five fundamentals of design.

In Conclusion

Thank you for taking this course. I hope you now feel educated and empowered enough to tackle a few projects on your own. I hope you can also see how much design and writing have in common: 

  • Revision will always be necessary. Time-permitting, put your design away and come back to it with fresh eyes. Always consider getting feedback from a friend. What do they take away from the design? Does this align with the purpose you established when you kicked off the project?
  • There will inevitably be instances when it makes sense to break a rule. The rules I’ve laid out in this workshop aren’t set in stone, but they are guidelines because they work 90% of the time. As with writing, break the rules when you need to.
  • It’s still storytelling—you’re just telling a story with mostly visuals instead of mostly words. Trust your storytelling capabilities and return to the fundamentals when in doubt.

To make it easy to revisit the fundamentals at any time, I’ve created a downloadable Cheat Sheet. It lives in the Resource Center, along with a list of useful websites and apps that you’ll definitely want to check out.

Visit the Resource Center


Happy designing!

Erin's signature

If you have technical issues or need to reach me directly, please send an email.