ADVANCED TYPOGRAPHY

14/10/19 - 21/10/19 (Week 8 - Week 9)
Piyaphon Inthavong (0337589)
Advanced Typography
Project 2

INSTRUCTIONS

EXERCISES

Week 8:
October 14th, 2019

As a continuation work from the first project, we're now to create a poster, 2 collaterals and a microsite from our final key artwork (The Troublemakers Manifesto).

Pre-plan for the poster layout.

Continuation of the planning for the poster layout.

As part of the planning process, I decided to use a classic sans-serif typeface to match the theme of the puppets, which are invented in a very long time ago. After a little trial and error of different typefaces of both serif and sans-serif, Univers Std was my final choice on the typeface.

Figure 8.1. First attempt on creating the poster. All details are right-justified to align with its title.

After realizing that the layout 1 (figure 8.1) is not working, I quickly proceed to create a new layout.

Figure 8.2. Version 2 of the Troublemaker Manifesto poster.

Version 2 of this poster (refer to figure 8.2) focuses on achieving a balanced center-align layout. "Open Public Lectures" is the largest in point size to define a clear hierarchy. I think it is important for the audience to know what's going on right after looking at a poster. A line was also placed in between the organization and the dates to divide them for a separate read; This helps the details to be digested faster from the people looking at the poster.

Figure 8.3. Version 3 of the poster.

The idea behind version 3 (figure 8.3) relies on creating a clear contrast by increasing the point size of the date of the manifesto, which was previously given lesser attention.

Figure 8.4. Version 4 and its variations.

I consider version 4 (figure 8.4) as an upgraded version from the third version as the date is still emphasized in the biggest point size. Working in a new date-time format gives the poster a different feeling; It also allows me to work on the layout differently. The first poster on the left side was critiqued by many as off-balance. The people also mentioned that the hierarchy doesn't seem appropriate, and the components of the layout don't appear as one composition, but rather a separation of different parts. The fixed versions mainly reduced the point size to give the key artwork more space and attention.

Figure 8.5. Version 5 and its variations.

After receiving feedback from Mr. Vinod, he advised that the previous layouts I have been working on were too rigid and uncreative. To create a more dynamic layout, I have to work along with the axis created from the puppet strings. This means aligning the contents to group it with the key artwork along the "invisible axis."

Figure 8.6. Version 6 of the poster.

Due to the reasons that things do not feel right from trying to align the contents to the invisible axis, I decided to give it a try once more on a new version. Version 6 (figure 8.6) aims to realign everything differently from all previous layouts. Troublemaker's key artwork was shifted to the left to provide space for the contents on the right. The work appeared more balanced after doing so. I then aligned the contents to the same axis of the key artwork to give the sense of them being grouped.

Figure 8.7. Reworked version 6 and color variations.

In this reworked version (figure 8.7), I addressed the visual hierarchy issue by enlarging the key artwork and decreased the point size of the contents; This gives a clear hierarchy and contrast to the composition.

Figure 8.9. Final outcome of project 2 poster.

In the end, I finally selected my color of choice and turned the line beneath "Open public lectures" into an element similar to the key artwork, which is the snapped puppet string. The final decision in choosing the right color was initially a very time consuming process. To portray a nostalgic feeling was one of the idea as puppets have a long history and are very well known back then during the times of b.c.e. The color also gives a sense of the old wooden materials that once was used to make puppets. This light brown tone is also used for the collaterals, which are the shirts and the tote bag.

Week 9:
October 21st, 2019

Following the first project, our next objectives are to create 2 collaterals of our choice using the key artwork produced earlier. I initially planned to work on a hoodie which is one of my favorite types of clothes. Although, after giving some thoughts about the cost and its feasibility, my final decision on the products was a T-shirt and a tote bag to carry the shirt.

It was my first time to design a tee, and in the beginning, I was a little lost and did what I thought was right. I broke down my key artwork into two parts, which are the "troublemakers" and the "manifesto" and separated each part on both sides of the tee. That was the idea on my first attempt as shown below in figure 9.1.

Figure 9.1. First design

After a little while, my design intuition recognized something wrong with the design. Displaying the key artwork at the back on a full scale didn't feel right to me. There were too many puppet wires attached to the top part of the shirt, so I thought of a solution by framing them.

Figure 9.2. Second attempt on the T-shirt design.

By framing the key artwork, it allows more flexibility on the positioning because it previously needs to be placed on top only, as the puppet wires will look detached and disconnected if its placed elsewhere. The black color in the golden box seemed to be visually appealing to me so I continued the design in more variations.

Figure 9.3. Variations of the framed troublemakers.

I then tried framing the key artwork differently in various sizes, stroke weight, and different scaling. Zooming in was the next option, since the entire artwork did not look nice in smaller scale, while scaling the artwork up only make the design look uncomfortable with less negative space and also looking like it's in the face of the people looking at it.

Figure 9.4. More variety of the framed versions of the key artwork.

Picking the right color was the next essential part as it gives identity to the artwork so that it can be easily recognized by the viewers. The red does a great job to attract attention due to its strong contrast with the dark color; Light blue makes people feel calm and it has its charm. In the end, light gold was my final decision as it gives the most authentic feel to the key artwork. Gold is cheerful and can represent magic which expresses how I feel toward puppets. It also makes a great pair to both black and white type.

Figure 9.5. Experimenting different colors.

Figure 9.6. Trying out a new layout by adding everything to the front.

While spending some time with the same layout, I wanted to try something new so I zoomed my artwork on a large scale while keeping it masked in the square frame. The result was unexpectedly positive which gives the artwork a satisfying look, despite not being able to understand it.

Figure 9.7. Zoomed version.

Taking a piece of the falling letters off and displaying it solo at the back of the shirt was my next idea. It gives off a basic look and a huge amount of negative space to work on. The design style will be coupled with a small box of the key artwork on the front so the design matches with each other. This is a very clean look for a T-shirt.

Figure 9.8. Back and front of a different version design.

As feedback was given, Mr. Vinod suggested that the key artwork is to remain original as breaking the "troublemakers" away from the "manifesto" makes it difficult for viewers to understand the message. It was also impossible to read if the text is too small. The objective comes before aesthetic. I had to give up on some of my designs and make use of what is understandable for everyone.

In the end, I decided to use the framed artwork for the aesthetics in front of the tee, and the full key artwork at the back to make sure the message is clearly communicated to whomever sees the shirt.

Figure 9.10. Final outcome of the shirt collateral.

The tote bag was next on the list. Initially, I left the key artwork separated in two parts as I didn't know but worked my way out to the end to match the design with the T-shirt.

Figure 9.11. First try on the tote bag design.

Figure 9.12. Variations and colors of the tote bag design.

Figure 9.13. Final outcome of the tote bag collateral.

The Troublemakers Microsite

The final part of the collateral for the Troublemakers Manifesto project is the microsite. To create a landing page interface for the event was our next task. Again, I began by planning out its contents, the objectives and the design purpose. A wireframe is a necessary process in creating any websites.

Figure 10.1. Planning process for the Troublemakers microsite.

Figure 10.2. Draft and wireframe for the microsite.

Figure 10.3. Preparing columns to divide the microsite sections into a reliable grid.

Figure 10.4. Placing the type and the key artwork according to the wireframe sketched earlier.

Figure 10.5. Initial layout of "Hear More From Us" page.

Figure 10.6. Finishing up the website wireframe with the footer.

Figure 10.7. A complete wireframe of the microsite made in Adobe Illustrator.

This is the website coded from scratch:

https://piyaphonwebsite.000webhostapp.com/index.html

Final outcomes

Below are the compilation of the final outcome of all the collaterals presented from above:

Final poster of the Troublemakers Manifesto project.

Final embedded PDF of the poster

Final T-shirt of the Troublemakers Manifesto project.

Final printed tee on user

Final embedded PDF of the T-shirt.

Final tote bag for the Troublemakers Manifesto project.

Final printed tote bag (front).

Final printed tote bag (back).

Final embedded PDF of the tote bag

Final microsite of the Troublemakers Manifesto project.

Final embedded PDF of the microsite

Flat lay.

FEEDBACK

Week 8:
October 14th, 2019

Specific feedback

The positioning and the composition looks fine, however, the way they are placed is dull. The layout may be done in a lot better ways. Be more experimental, try placing the type diagonally to make a more dynamic layout. The top and bottom section of the poster is competing with each other for attention, they don’t feel belonging. Align the information to the invisible line with the puppet strings, the eyes will group the elements automatically once they are aligned in the same axis. Do not make changes to the main key artwork even in scale; Keep all the original key artwork in the same proportion.

Week 9:
October 21st, 2019

General feedback
The full key artwork has to be displayed/captured somewhere on the shirt if you plan to break the original key artwork apart so that people understand the design even without knowing about or seeing the design yet. Print the work in an A3 paper to show it to Mr. Vinod for design approval.

Specific feedback
Turn the line beneath the “Open lecture theatres” into the puppet string for a more constant style. The color of the poster is your choice, be reasonable with the color and don't just consider the aesthetics. Don't stay in the safe zone all the time, putting box to the key artwork will limit my choices.

REFLECTION

Experiences

Week 8: Again it was discouraging to leave the room without any approval from all the several attempts. It was the feeling of strain from not being able to do better and having a design I put the effort in to be turned down. After all, I knew it was only a part of the process.

Week 9: I was really off track and did not know to continue with my designs. It was the feeling of doubt which fills my head and at the same time, also caused me to feel less confident about my design throughout the week.

Observation

Week 8: Recently, I've been noticing myself working with type only in my comfort zone. Being afraid to pump up the point size or align type dynamically resulted in a dull layout where lesser hierarchy and contrast is achieved.

Week 9: The energy of the class slowly dropped as we reached the beginning of the final project. It was exhausting and everybody felt the same way, but as if our thoughts were read aloud, Mr. Vinod's little inspirational talk was surprisingly helpful and revived the momentum of the class.

Findings

Week 8: Mr. Vinod's advice on "be more experimental" helped me realize the big gap in design I've been missing earlier. I learned that doing anything which I previously considered odd or weird has been opening up doors for me to view my design differently, from a point of view that is not observed by general perception.

Week 9: To be able to become dependent is a necessity, staying in the comfort zone only limits our exposure to pressure and stress which is required to become better. This quote applies to not only design but life to all individuals. The inspiration from Mr. Vinod was necessary as I start to realize how much I have relied on feedback from peers and lecturers recently. The regular feedback from other people slowly mold my thoughts and prevent me from thinking or being independent. I knew I was having those fear, and I have to get over them.

Joe's Design Blog

Search This Blog