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 is giving order and hierarchy to your design in such a way that is not aesthetically pleasing to the eye but also flows naturally. In design there are a several principles to accomplish this. These include using things like the golden ratio or rules 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 a designer layout the elements in a way that they can easily see if elements will complement each other or not and adjust according to the needs of the project. For that reason, Cath Caldwell shares three types of grids; single column, multiple columns, and a modular grid. 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? Because 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 be more efficient and you look more professional.
Applying lessons to a Newsletter
This week, I was challenged to create both a wireframe and 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 going into my wireframing tool of choice, I did 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 happy with the wireframe, I moved over to Illustrator where I applied the wireframe layout.
Applying lessons to a Website
In addition to an Email Newsletter, I was also challenged to again create both a wireframe and comp layout. Except this time 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 lot was learned, not only in this last week, but over the past several weeks. This week was a chance to put everything I learned together into a finished piece. Using Design Thinking isn’t easy but with practice 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.