20th May 2024 - 18th June 2024 (Week 5 - Week 9)
Sin Jun Ming 0364638
Advanced Typography / Bachelor of Design in Creative Media / Taylor's University
Task 2 - Key Artwork & Collateral
LECTURES
Refer to Task 1
INSTRUCTIONS
Task 2(A) - Key Artwork
In Task 2(A), we will create a key artwork (wordmark) of a name minimum of 4 to 5 letters. The key artwork can be disassembled into constituent shapes to form vibrant patterns that continue to maintain and expand its visual identity. The final key artwork must be an elegant solution, well balanced and composed, not complicated or confusing that leads to a functional and communicable key artwork. This key artwork will subsequently be used in Task 2(B) collateral.
1. Ideation & Exploration
The wordmark is a visual identity of ourselves. I wish to be a web designer that focus on website design and development, so I research on style and concept like programming codes and futuristic font. I began to search for top websites with futuristic style and checked on their wordmark.
Fig 1.1 Website wordmark (1) (21/5/2024 - Week 5)
Fig 1.2 Website wordmark (2) (21/5/2024 - Week 5)
Fig 1.3 Website wordmark (3) (21/5/2024 - Week 5)
First, I think of the keyword for my wordmark, which is sharp personality, to create a minimalist design, and also having a concept of futuristic font. I began to sketch out my ideas and do some exploration. I started to do sketches using my name "junming".
Fig 1.4 Exploration (22/5/2024 - Week 5)
I selected this sketch and proceeded to go for digitalization.
Fig 1.5 Chosen sketch (22/5/2024 - Week 5)
Fig 1.6 First attempt digitalization (22/5/2024 - Week 5)
After receiving feedback from Mr. Vinod in week 7, he suggested me to increase the space between the letters and develop rounded corners.
Fig 2.1 Second attempt digitalization (29/5/2024 - Week 6)
Mr. Vinod then told me to print out the key artwork on a paper and check on the details. He suggested me to refine on the sharp vertex on letters "U", "N" and "M" and decreasing the sharpness of those vertex would look better.
Fig 2.2 Third attempt digitalization (29/5/2024 - Week 6)
After finishing on the key artwork, I started to search for the color palette for my key artwork. I tried various color palettes on my wordmark, and at the end I found the combination of orange, black and lightyellow matches the futuristic style and looks good on it.
Fig 2.3 Applying colors on my key artwork (31/5/2024 - Week 6)
3. Final submission
Fig 3.1 Black wordmark on white background (4/6/2024 - Week 7)
Fig 3.2 White wordmark on black background (4/6/2024 - Week 7)
Fig 3.3 Color palette (4/6/2024 - Week 7)
Fig 3.4 Wordmark in actual color on lightest shade of color palette (4/6/2024 - Week 7)
Fig 3.5 Wordmark in lightest shade of color palette on darkest shade of color palette (4/6/2024 - Week 7)
Task 2(B) - Key Artwork & Collateral
In Task 2(B), we need to transform the key artwork into a brand and create merchandise for our brand to post them in Instagram. The output must have exploration and expansion of the wordmark to make the brand more interesting.
1. Idea exploration
To convert my key artwork into a brand, I have some ideas at first, which is to create an application or a website for my brand. Hence, I search for visual reference from Pentagram — The world’s largest independent design consultancy.
From this website - Juzdan (pentagram.com), I found some ideas to create an application using the key artwork.
Fig 4.1 Visual reference (4/6/2024 - Week 7)
To create an application, I need to design a logo for the users to recognize this particular application. From my key artwork, I noticed that my letter "J" is unique, and I think it would fit the requirement to leave an impression on the users.
Fig 4.2 Exploration on the app icon (4/6/2024 - Week 7)
2. Design
I am quite satisfied with this icon, hence I continued to do the mockup on electronic devices using my icon. The website I used for mockup is Best Free Mockups Online with AI Mockup Templates | Mockey.
Fig 5.1 Some mockups of my brand as a software (4/6/2024 - Week 7)
Other than this idea of promoting my brand as an application, I also did the mockups on t-shirt and sweatshirt with my icon and key artwork.
Fig 5.2 Mockups on apparels (4/6/2024 - Week 7)
Following the requirements, I need to combine the mockups and ideas to create an Instagram 3x3 grid layout.
Fig 5.3 Instagram layout first attempt (4/6/2024 - Week 7)
In Week 7's class, Mr. Vinod likes my idea of applying my wordmark on software applications. However, the mockups on sweatshirt and the t-shirt looks simple and the design with my picture lacks expansion that could make my brand interesting. He suggested that I should work more on the expansion on my brand to leave impression on the users.
To explore the expansion of my key artwork, I observed my wordmark again to find if there is any crucial feature in it. I noticed that there are semicircle shapes in both letter "J" and "G", I think this could be a start to expand my wordmark, so I explore it by duplicating the semicircle and align them to form a pattern.
Fig 5.4 Expansion of the wordmark (5/6/2024 - Week 7)
Fig 5.5 Expansion applying my color palette (5/6/2024 - Week 7)
Fig 5.6 My brand shown on the city big screen (6/6/2024 - Week 7)
I gave up on the idea of apparel collateral since I do not like the design combining my expansion and my key artwork on a t-shirt or sweatshirt. I tried to do the mockup on tote bag and phone case, and I think they look better than apparel collateral.
Fig 5.7 Tote bag (6/6/2024 - Week 7)
Fig 5.8 Phone case (6/6/2024 - Week 7)
To increase the reputation and credibility of the brand, I decided to add a motto for my brand. Since this is a design company, so I created the motto - "Designing your Dreams."
Fig 5.9 Motto of the brand (6/6/2024 - Week 7)
Since I have a pale-yellow color in my color palette, I tried using it in my grid layout, but it didn't turn out well.
Fig 5.10 Instagram layout second attempt (9/6/2024 - Week 7)
Since it looks weird, so I changed the color back to orange and black, and I did some changes on the design on my picture grid.
Fig 5.10 Instagram layout third attempt (9/6/2024 - Week 7)
For the animation, I used Adobe After Effects to do it because the keyframes tool in it is very useful to do animation.
Fig 5.11 Animation in After Effects (15/6/2024 - Week 8)
3. Final Submission
Fig 6.1 Collateral 1 (13/6/2024 - Week 8)
Fig 6.2 Collateral 2 (13/6/2024 - Week 8)
Fig 6.3 Collateral 3 (13/6/2024 - Week 8)
Fig 6.4 Animation GIF (15/6/2024 - Week 8)
Fig 6.5 Instagram screen grab (21/6/2024 - Week 9)
Fig 6.6 Instagram Grid Layout (PDF) (21/6/2024 - Week 9)
FEEDBACK
Week 5
General Feedback:
The keyword for our wordmark must be positive, avoid using keyword like "lazy", "stubborn" etc. to leave negative impressions to the client. Think of the market for our own wordmark, think of the target client of our wordmark, create a wordmark that can tell the identity of yourself, that best
represent yourself.
Specific Feedback: -
Week 6
General Feedback:
Think of a responsive wordmark, find the element inside the wordmark that can best leave an impression to the audience and let them think of your wordmark when they see the element. Be aware when choosing color for the wordmark, take reference from Maxis, Coca-cola etc., consider a bright color to represent your wordmark.
Specific Feedback:
The wordmark is almost there, try to increase the letterspacing between the letters, and make some vertex of letterforms rounded, and make comparison with the original. After the first refinement, Mr. Vinod advised me to refine on the sharp vertex and refine on the letter "G".
Week 7
General Feedback:
Do the case study from the website "Pentagram", from there we can see a lot of ideas on how to do the expansion of a wordmark and make it more interesting.
Specific Feedback:
The use of the abbreviation wordmark "J" as the app icon is fun. However, the bottom right two tiles are lack of imagination, need to think about how to present them in much interesting way. For the shirt and the hoodie, the shirt does not show full wordmark feature and the hoodie is simple because it just shows the wordmark. Think of the expansion on the wordmark and use them in the collateral to make them more interesting.
REFLECTION
Experience
This is a very interesting task to be honest, because I have a dream of creating my own company based on my own identity, this feels like a dream comes true. It also feels good and proud to have an opportunity to create a brand that is so realistic with all those collaterals.
Observation
After finishing this task, I found that it is crucial to create an identity for a designer and also most importantly it must be a positive identity, which can give our client confidence. To create a brand, we need to know who we are first, and also identify the target audience, this can lead to clear purpose of our branding. The wordmark acting as a brand logo here in this task means that our wordmark is the first impression on others, it is crucial to know what we need to include in the key artwork so that we can attract more clients.
Findings
From the Task 2(B), where we need to create collateral, it is important to include expansion into our branding. It would be very boring if there is only a key artwork to show our client, the expansion can create room for imagination and make the brand interesting.
FURTHER READING
Fig 7.2 Typographic design: Form and communication (2015)
(by Rob Carter)
I read the part where the author wrote about the legibility factors for on-screen typography this time.
1. Capital and lowercase letters
To provide rhythmic word sequences and characteristic word images that promote readability, we can use capital and lowercase letters.
2. Interletter and interword spacing
Interletter spacing should be increased to compensate for the spread of antialiased type and tthe illumination of the screen, especially at smaller sizes.
3. Line length and interline spacing
Generous interline spacing is recommended for displaying text on a computer display. Line lengths on the display are best viewed and perceived when viewed at a glance.
4. Weight and width
Letterforms lose the visual balance between form and counterform when they appear too heavy or too light on screen.
5. Alignment
Flush-left, ragged-right text alignments are easiest to read, whether implemented in print or in electronic display applications.
Comments
Post a Comment