This unit contains seven sections. Work through the content in order.
When people mention a design’s “layout,” they are usually speaking about one of two things (or perhaps both at once!):
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…
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.)
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.
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:
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:
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.
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.
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.
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.
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:
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!
If you have technical issues or need to reach me directly, please send an email.