Organization & Structure
“Designers use grids to organize content and manage the clarity of a message”
– Jenn & Ken Visocky O’Grady
Visual Design thinking has a lot of moving parts to make it all work together. One thing I learned this week is that every good design starts with intent. That is, a Visual Designer must remember the basics, hierarchy, and composition. One of the basics is structure. In Graphic Design for Everyone, Caldwell points out “No matter how simple the design, it needs structure – an ordered and logical way of positioning elements” (Caldwell, 133). According to Caldwell, using one of the three most common structures will achieve the goal of getting your audience to the important pieces of your design in a logical way. The most common structure she describes are Golden Ratio, Rule of Thirds, and Modular. Reading our required reading reminded me of a quote from Jenn and Ken Visocky O’Grady’s book The Information Design Handbook. In their chapter on structure and grid systems, they say “Designers use grids to organize content and mange the clarity of a message” (O’Grady, 98).
Focus the audience
When your designing a layout, along with the organization and structure is a hierarchy which helps to guide the eye to the areas the designer want them to go. This is important because there is a purpose to the content being consumed by the audience. Connie Malamed, a visual designer and instructional designer with over 20 years, says there are two reasons for directing the audiences eyes. In her book Visual language for designers: Principles for creating graphics for creating graphics that people understand, Malamed states you want “to steer the viewer’s attention along a path according to the intended ranking order and to draw the viewer’s attention to specific elements of importance” (Malamed, 71). Martina Bretous, a writer for the HubSpot marketing blog echo’s similar tone on the importance of good hierarchy. In her article 7 Visual Hierarchy Principles for Every Marketer, Bretous says “create a visual structure that facilitates understanding and guides the user” (Bretrous, 2023).
Patterns Emerge
At this point as a newer designer, I was becoming overwhelmed, but I began to recount previous a reading as an Instructional Designer about hierarchy and the planning of patterns. In her book Visual Design Solutions: Principals and Creative Inspiration for Learning Professionals, Connie Malamed reminds us that as humans when we read there is a pattern to how we view things. She explains that “The most common eye-scanning movements of people who read in left-to-right languages is an F pattern. The next most common is the Z pattern.” (Malamed, 160). Knowing this eye-scanning movement helps the designer be thoughtful and methodical where they place images, text, and calls to action so the audience does with the visual design was meant to do. Below is an example of the website I based my project on regarding event promotion. Notice how the viewer starts left at the logo (1), then moves across to the right for the login (2). Then as they scan diagonally down to the left a “hero” image or video is in the middle. As they arrive at the lower left there’s useful information (3) and finally they move to the lower right where the call-to-action (CTA) is, which in this case is to play the game (4).
Promotion
So, for this weeks project we were tasked with creating several assets as part of a event promotion. We could choose any large scale event. It had to be large scale because the assets we created for the event were:
- Flyer
- Poster
- Facebook banner
- Instagram posts (3)
- VIP Invitation
- T-shirt
The event I chose was the annual CitizenCon. This is similar to Comic Con but instead for a PC Game my son and I have backed for the last 10 years. Each year they hold the conference in different locations. This year’s will be held in Manchester, UK, their headquarters (HQ). Since I’m vested because I’m going, I elected this event. Below are the different assets I created with a brief explanation of choices I made.
Flyer and Poster
First up was the flyer. I did have a poster of this event from a previous project. However, I wanted to update and give it a fresh look. As you can see in the sketch below, I was planning to reuse the venue as a focal point and rearrange the elements around it. I was always trying to keep the event logo center prominence as the event was what was important. Using the design ideas from our book, I tried to give ranking order to dominance. As I got into the design, I abandoned the venue idea and brought in the element which the game is about…outer space.
Social Media
For the social media piece the focus as stated earlier was on Facebook and Instagram. Here I had to look up what the dimension needed to be so they fit appropriately. For Facebook I found and used the dimensions 1920×1005 pixels and for Instagram it was 1080×1080 pixels. The Facebook design I used the event logo over a sepia sort of toned venue image on the left. Keeping with including the important elements, I also wanted to entice my audience by utilizing a few of the known characters who are voiced by celebrities such as Mark Hamill. Each of the Instagram post had their intention too. The first would be the initial post get the audience “psyched up” to attend. The next post would entice those who enjoy the cosplay experience. The final post was aimed at appealing to the “nerd” who wants to meet the celebrity who voices their favorite character in the game.
VIPs Only Please
Designing the VIP invitation was probably the most fun next to the T-shirt (coming up next). Keeping with the flyer and poster theme was important to keep the cohesion of the entire event. First I sketched the invitation in order to get what elements I wanted to include on the invitation and what rank I would give. However, the twist on this asset was that I made the invitation as if the player (as an officer of the game’s military) was receiving a direct invitation from their highest ranking officer. I felt that using the storyline element weaved into the design will intrigue the person who would receive this invitation. As an incentive, I included a sample on their invitation of the swag item they would get (a collectors badge based on their level of ticket they purchase).
Everyone wants a T-shirt
As with a few of the assets I delivered, I had an idea for a T-shirt design and drew it up on my Remarkable pad. The initial design didn’t pan out because I needed to keep in mind that the theme had to pull through as many elements that were in the print and digital promotional assets already. Therefore, my final design kept some of the main elements like the event logo being prominent, the location of the event, and incorporating a few of the characters to draw the audience in to want to come and receive or buy the swag.
Citations
Bretous, M. (2023, June 20). 7 visual hierarchy principles for every marketer. HubSpot Blog. https://blog.hubspot.com/marketing/visual-hierarchy
Caldwell, C. (2019). Graphic design for everyone: Understand the building blocks so you can do it yourself (R. Skene, Ed.). Dorling Kindersley Limited.
Pernice, K. (2019, August 25). Text scanning patterns: Eyetracking evidence. Nielsen Norman Group. https://www.nngroup.com/articles/text-scanning-patterns-eyetracking/
Soegaard, M. (2021). Visual hierarchy: Organizing content to follow natural eye movement patterns. The Interaction Design Foundation. https://www.interaction-design.org/literature/article/visual-hierarchy-organizing-content-to-follow-natural-eye-movement-patterns#:~:text=The%20Z%20Pattern%20%E2%80%94%20In%20designs,what%20we%20want%20to%20know.
Malamed, C. (2011). Visual language for designers: Principles for creating graphics that people understand. Rockport Publishers.
O’Grady, J. V., & O’Grady, K. V. (2008). The Information Design Handbook. How Books.
Malamed, C. (2015). Visual design solutions: Principles and creative inspiration for learning professionals. Wiley.