A Print Poster + Mobile Experience Design for Folk Music Concerts
- Introduction
For Info Design Project 2, we’re tasked to design primarily a print poster for an assigned client with an accompanying mobile experience. The goal for project 2, in my understanding, is to push us to experiment with type, hierarchy, scale, color, and image to grasp the effect and importance of each of these elements in design, and come out with something that leverages these different influences well.
2. Chocolates ;)
Before we started to do any of the visual design on our little laptops, we did a fun exercise with chocolates and sweets to “familiarize” (pun intended) ourselves with the design process, which is to familiarize first, then develop, and finally refine our design. In this exercise, I found myself thinking in shoes of the “user” of our chocolate arrangement, and how they would approach our arrangement and find it easy to access or adding additional work to their cognitive load. In the end, we as a class chose to arrange the chocolates in accordance with their ingredients instead of packaging or other labels.
[APOLOGIES FOR THE LACK OF VISUAL EVIDENCE HERE]
Through arranging chocolates, I realized that good design should be consistent and user-centered, and nice, thorough familiarization would be extremely helpful in the later stages.
3. Effective/Ineffective Designs
After playing with chocolates, we went on a discovery of effective and ineffective designs of posters on campus, and here are what I found:
and
I actually found this activity to be very insightful because (a) the ineffective design demonstrated an example of a poster that was clearly very thought-out and “designed”, but due to the images chosen and the hierarchy of the text and image, turned out to be an ineffective poster in terms of its ability to capture the readers’ attention and its overall readability. (b) what I thought was effective because I liked the color scheme of it was actually pointed out to have quite a few design mistakes — readability of text in combination with the background color, the information hierarchy, and the wording of the topic all needed some further work.
This exercise informed me on how I should design my own poster for it to be effective and challenged my understanding of what was effective and what wasn’t.
4. Exercises on Hierarchy, Scale, Color, Image and Final Poster
Now we’ve officially moved onto the phase where we were playing around with our assigned text and see how different factors affected the effectiveness of our poster design.
My assigned client was Calliope Concerts, a folk music concert right here in Pittsburgh that host small artists as well as established stars.
From here, I’m going to pick a few exercises that I thought was particularly insightful for my final design. The first one is this one below:
In this exercise, I realized that too much linespacing can be very confusing for the audience because it obscures the clustering of information, even with the help of weight differences, it wasn’t clear which date went with which artist.
The second one that was helpful was this:
In this exercise, I included a lot of horizontal shifts and weight enhancement, and it turned out to be quite disastrous as well. I realized in this exercise that too much horizontal shift and weight differences can be visually unpleasant instead of successfully differentiating information like they supposed to do.
Now the train of thoughts were quite clear—less is better—having fewer differentiating factors can enhance information architecture, while utilizing too many of it can have the opposite effect.
Now let’s see a pre-scale example I thought was particularly effective:
Just the right amount of weight emphasizing for the title and the acts, plus nice clustering of texts thanks to limited linespacing differences, this was really effective in terms of what the poster was about, what the acts were, and what time were they on.
When things move to scale, an element of design I think is particularly powerful just because of how much of a difference it could make, things started to get a little bit chaotic as I tried to play around with too much elements and lose focus of the “less is better” motto.
Here is an example of a not so successful scale practice that tried to squeeze in too much information all at once.
For scale, my best iteration is this one below where dense weight were only applied to the concert title and the acts, with the title positioned down left instead of at the top. However, it was for sure lacking negative space and looking very compact.
For color, I first created a color palette using magazine pages (see below).
The idea behind my chosen colors was that I was trying to select the more leafy, country colors that would fit the theme of Calliope being a folk music concert, I did use them for my color practices, but for my image practices I decided to move away from these colors because they were limiting my choices for my poster’s overall visual image. I had to admit that I did get a little carried away with the color palette as I tried to merge Tyga and Trump together with the masked vintage lady standing across. It was fun though.
My color exercises were particularly weak, especially once put on the big poster wall in a background full of posters. It was hard to notice it (see below for one example). What I did get out of this is that print is very different in terms of the visual feel from backlit computer screens, and that I needed to be careful with my color choices.
Then for image, this is where things started to get really fun for me. At first, I misunderstood the assignment and thought we were going to have one image but three different sets of color. So I did that, which now that I’m seeing it looks very basic and not really pushing myself to see how an image could enhance my poster design.
However, through this misunderstanding, I did find out that having too vibrant of colors contrasting off of each other can be very difficult to read for the audience, and I should really move away from using big texts and splashy colors.
Learning from my mistakes, Vicki and I explored several different images trying to catch the vibes of Calliope being a folk music concert, and one of the ideas we had was incorporating rural patterns and letting rural symbols take the center stage instead of having an exact concert image to explain what it is. The outcome of that is the image practice below, which is honestly my personal favorite because of how delicate and neat the image looks (the power of the image!) and how the image naturally creates a bar in the middle that I utilized to display act information.
Nevertheless, this practice did not make it to become my final chosen image because the structure it created was not distinct enough and the pattern did not allow the eyes to clearly have a differentiation of text and negative space.
What made it to the final cut is the image practice below.
The hand this image includes has really good structure and it parts the text and the accompanying guitar really well. Plus the guitar is a classic folk music instrument, which is a little more telling than the rural pattern image as to what Calliope really is. What’s more, the color of the image (black and white), works fantastically with my beige color of the fonts to create an old-school, classical kind of vibe that I personally think goes well with Calliope’s brand image based on what I’ve read on their website. However, I was enlightened during critique that the text on this poster would look enormous in print (from my eyes today, it even looks big on screen), so I toned down the text a bit, adjusted the hierarchy a little, added a new color to highlight information, and added back the text I left out in the process that describes Calliope.
And here is the final poster:
I liked how the guitar in the image naturally leads the eye to see the information on the upper right corner, where I used to have the address of Calliope and their website there. The final version places the address and the website right below the big title text, which I found to be aesthetically pleasing and the bright orange working well in the color palette of this poster. Hope it looks good on the audience’s end as well :)
5. Mobile Experience
For the mobile experience that accompanies the poster, my goal was that it has the consistent design style as the poster, but looks visually different from the poster, all the while putting stresses on different information that may be more important now that the reader has arrived on the website (so the website url now is definitely NOT important). Here is the final version of my mobile experience created for Calliope Concerts.
I decided to further highlight the description of Calliope, so that the audience going into the website interested in one of the acts but not sure what Calliope is (or other scenarios where Calliope’s identity was not super clear) could have a good idea of what Calliope is from the big orange text. The acts were placed following the lead of the description, with the address of the concerts following the acts and the website dimmed down. My rationale for having the address each word filling up a line is so that the address does not intrude on the negative space on the right separated by the hand, and it looks aesthetically pleasing and fits the style of the concert title as well.
Overall, this has been my project 2 for Information Design. I had a great time playing with different exercises and learned a lot about visual design. The granularity of visual design was new and fascinating for me as my previous work in HCI were less focused on the exact look of things. I will for sure bring what I learned in this project to my future work in the UX space and create more visually compelling design!