The word composition, according to the Britannica dictionary, is “the combination of parts or elements that make up something” (britannica.com, accessed 28-Apr-2024). Thus, it gives order and hierarchy to your design in a way that is not aesthetically pleasing to the eye, but also flows naturally. In design, several principles are employed to achieve this. These include using techniques such as the golden ratio or the rule of thirds. Additionally, selecting the correct typography for your project is yet another principle. Choosing the correct colors for your branding and mood. However, choosing and using a grid and wireframing are also important in design.
Grids
In the design world, grids help designers lay out elements in a way that allows them to easily see if elements will complement each other or not, and adjust accordingly to meet the project’s needs. For this reason, Cath Caldwell shares three types of grids: single-column, multiple-column, and modular grids. According to Caldwell, “The type of grid you choose will depend on factors such as the amount of content you have, the number of pages, and whether it is a print or online project” (Caldwell, p 158).
Wireframes
Wireframes. What are they? Well according to Michael Angeles, an interface designer at Balsamiq and User Experience (UX) industry speaker, “wireframing is a language for communicating user interface ideas, which helps developers, designers, product managers, and stakeholders think about and understand the big-picture structure of a website or app without being distracted by the details” (Angeles, p.1). Yeah, but I’m a visual designer, not a UX designer. How does this help me? Well, actually, all designers, UX, graphic, or otherwise, can benefit from wireframing. Why? As Angeles states, it will help you and your stakeholders align on a layout before spending countless hours on development. This, in turn, helps the project run more efficiently, and you appear more professional.
Applying Lessons to a Newsletter
This week, I was challenged to create both a wireframe and a comp layout for an Email Newsletter for a company of my choosing. I decided to continue my journey with Tre Fichi Infused Olive Oils. Before discussing my wireframing tool of choice, I created a rough sketch of an idea I had. Then, as I do with many of my designs, I immediately went into Balsamiq to begin wireframing. However, this time, armed with the knowledge of grids, I designed the Email newsletter using a 6-grid column on a standard email width of about 650 pixels. Once I was satisfied with the wireframe, I transitioned to Illustrator, where I applied the wireframe layout.
Applying Lessons to a Website
In addition to an Email Newsletter, I was also challenged to create both a wireframe and a comp layout again. Except this time it was for a website Homepage. Continuing with Tre Fichi Infused Olive Oils, I approached the website in the same manner. An initial sketch to start to get my wireframing juices flowing. Again, using grid knowledge, I designed the Tre Fichi Homepage in the standard 12-grid style. The desktop size I used was a standard 1920 pixels wide. However, to view the entire Homepage, I expanded the height to 2160 pixels. I got to fiddling in Balsamiq, and then when I felt it was good to go, I moved over to Illustrator, where I applied the wireframe layout using the same dimensions.
Conclusion
A great deal was learned, not only in the last week, but over the past several weeks. This week was an opportunity to integrate everything I had learned into a finished piece. Using Design Thinking isn’t easy, but with practice, it can be a fun, creative outlet. I discovered the rules are there to take your design from zero to hero if you just trust in the process.
Citations
Angeles, M., Barnard, L., & Carlson, B. (2023). Wireframing for everyone. A Book Apart.
Brown, M. (2020, June 12). Marketing 101: What are grids (design)?. MarketingSherpa Blog. https://sherpablog.marketingsherpa.com/design-2/marketing-101-what-are-grids-design/
Caldwell, C. (2019). Graphic design for everyone: Understand the building blocks so you can do it yourself (R. Skene, Ed.). Dorling Kindersley Limited.