The Layout Sins

Source: https://uxdesign.cc/power-your-designs-by-using-blank-spaces-e2d10fa3e7b9

As a beginner designer, I had no idea that there were so many layout “sins”. For instance, I had no idea how much meaning was behind white space and how powerful it can be like in the photo above. I was familiar with the rule of thirds which is described in Cath Caldwell’s Graphic Design for Everyone that says, “based on the premise that a space is divided into three feels more comfortable and looks more pleasing than one split in half” (Caldwell, 133). From basic web design, I knew that splitting a space in half can seem amateur, but I came to discover that there are so many more guidelines.

For example, I am guilty of bulky borders, which can seem very basic and draw attention away from the image. In “White space is not your enemy,” Kim Golombisky and Rebecca Hagen point out that “negative space can do the same separating job only without the showboating and claustrophobic effect” (Golombisky and Hagen, 36). For example, seperating something with a border is less effective than just leaving negative space between sections.

Another rule that stood out to me was avoiding “naked photos”. Although you do not want to create bulky borders, sometimes photos blend into the same color of the screen such as the example below. Golombiski and Hagen’s recommendation is:

When a photo border is necessary, use a hairline rule (as thin as a strand
of hair). The idea is subtly to mark the photo’s edges without distracting
from the photo. You want the viewer to think, “Cool photo,” not, “Whoa,
check out that bulky border.

(Golimbski and Hagen, 35)
Example of a naked photo with the top of the photo disappearing into the background color

These are only a few of the many layout sins that are extremely helpful to pay attention to so you don’t fall into the trap of your project looking amateur.

The Luxury of White Space

When designing a project, it’s easy to fill up your entire art board with images and text. However, white space can be equally powerful where less is more. I have always been drawn to the color white. The color white is “often associated with luxury” and can “make a powerful statement, exuding confidence and authority” (Caldwell, 131). In any of my website designs, I have always been drawn to white because I believe it makes the layout look cleaner, more sophisticated, and makes your content pop. For example, Apple uses lots of white space to give the user a sophisticated and clean aesthetic and make their products pop.

Example of an Apple ad utilizing white space.

Caldwell also points out white space’s importance when using scale to create order. For instance, she says, “text or images set within a larger area of white space will draw the eye and make an impact”. (Caldwell, 147).

Typography and Order

Using typography to create order is another important factor in your layout. For instance, uppercase case characters attract attention and flag key information (Caldwell, 142). In the example below, in “Get Inspired by These 30+ Event Poster Designs and Make Your Own,” Iris Leung identifies creative ways typeface can influence design and uses uper case letters to highlight the title of the event. She also identifies different typefaces to fulfill different roles in the layout to make the design more interesting as in the example below (Caldwell, 142).

https://piktochart.com/blog/event-poster-designs/

What I’m working on

In using this knowledge of layout and hierarchy, I designed some deliverables for the Tony Awards Gala. The Tony Awards Gala is an annual after party in New York City for everyone invited to the Tony Awards. It takes place at the Plaza Hotel and is an epic and elegant New York event. I wanted the design to emulate celebration but also communicate that it is the fanciest Broadway event of the year.

On the poster below, I used an off center glitter top border to off set the centered title as to not make everything too centered.

Then, I created an invitation using the rule of thirds with the gold banner giving some seperation for the logostical details at the bottom.

For some printed assets, I created a simpler background that could easily be printed on colored black paper. I created some shapes at the bottom to display the offer text to break up the design and used Iris Leung‘s advice on exploring caps and lower case letter to stress the importance of different phrases.

I created T-shirt designs for the staff because it would not be likely for any guests to use T-shirts, as it is a formal event. I also created a simpler logo lock up that could easily be placed on a black solid color T-shirt.

Finally, I had the most fun with the layout of the Instagram posts. I explored using the horizontal logo layout in the secod post for variety and incorporated diagonal layouts with the first post.

Overall, even if you think you have a natural eye for effective layouts, making yourself aware of the layout sins can make all designs easier to digest. Not only do layout and heirarchy guidelines make content easier to read, it makes your designs looks more professional. I learned to not be afraid of using white space, to explore different layouts with the rule of thirds, explore different directions to present text, and many basic border best practices.

Citations:

Caldwell, C. (2019). Graphic design for everyone. Dorling Kindersley Limited.

Hagen, R., & Golombisky, K. (2017). White space is not your enemy: A beginner’s guide to communicating visually through graphic, Web & Multimedia Design. CRC Press, Taylor & Francis Group, CRC Press is an imprint of the Taylor & Francis Group.

Leung, I., Tomboc, K., Mileva, G., & Skidmore, P. (2023, September 26). Get inspired by these 30+ event poster designs and make your own. Piktochart. https://piktochart.com/blog/event-poster-designs/

Mikel. (2020, January 22). Power your designs by using White Space. Medium. https://uxdesign.cc/power-your-designs-by-using-blank-spaces-e2d10fa3e7b9

Leave a comment