Advanced Typography / Task 2 / Key Artwork & Collateral

20.9.2023 - 10.10.2023 (Week 4 - Week 10)
Elysa Wee Qi En / 0355060 / Bachelor of Design (Hons) in Creative Media / Taylor's University
Advanced Typography
Task 2 / Key Artwork & Collateral

LECTURES

Lectures were done in Task 1.

INSTRUCTIONS

Fig 1. Module Information Booklet

Task 2A: Key Art

For this assignment, we had to make a wordmark with our own name. This wordmark would be applied onto chosen collaterals later as well, so my teacher gave the advice that if it's not something I'd put on a shirt, it's not good enough.

He also advised to create a mindmap of characteristics we have or want to have to convey through the mark. After I did that, I created some sketches based off random ideas in my mind.

Fig. 2.1. Idea sketches (1/12/2023)

I had the ideas to incorporate both sharp and round corners and also have a thicker, bolder design. I played around with those ideas, and the ones in the bottom left felt the most wordmark-like. However, after consulting my teacher, he said I should focus on just one aspect on the mindmap and not try too hard to mix them all together. So instead, I decided I wanted to focus on the 'complexity' of it all, and created a sketch of my name pieced together by rectangles and triangles, like somewhat of a glitchy effect. To show that I am a mashup of a bunch of other things.

Fig. 2.2. Beginning of digitalisation (1/12/2023)

I started off by using the pen tool to outline and plot points in the general shape of my sketch. After refining, I cut off specific parts to use based on my sketches. For the thinner strokes, I used the rectangle tool to create thin rectangles.

Fig. 2.3. Adjusting stroke width (1/12/2023)

After printing it out, the stroke width seemed too thin to be readable from a distance or when small. So I thickened it, at first just the thinner strokes by changing the rectangle width. However, it still needed to be thicker, so my teacher advised that I use the grid to create a giant logo.

Then I had to choose a colour scheme for my wordmark. Below are all the ones I considered:

Peach, yellow, blue: https://colorhunt.co/palette/ffb3b3ffdba4ffe9aec1efff
Red, yellow, teal, blue: https://colorhunt.co/palette/fd8a8af1f7b5a8d1d19ea1d4
Peach, orange, yellow: https://colorhunt.co/palette/ef9595efb495efd595ebef95
Yellow, pink, peach: https://colorhunt.co/palette/fff5e4ffe3e1ffd1d1ff9494
Red, peach, yellow: https://colorhunt.co/palette/e97777ff9f9ffcddb0fffad7
Shades of red: https://colorhunt.co/palette/3d0c11d80032f78ca2f9dec9

I settled on the last one, the shades of red for now.

I used a darker red on the triangular shapes, and a pink on the thicker rectangles. This helped differentiate the 'pieces'.

However, I eventually changed this colour scheme as my teacher said it was too light-coloured and did not stand out enough. I then chose a palette consisting of strong primary colours:

I did make the yellow slightly warmer though, as it felt too sharp, and I did not use the green.

Fig. 2.4. Chosen colour palette (4/10/2023)

Task 2B: Collaterals

It was now time to choose collaterals. I ended up choosing a skirt, notebook and shirt to design.

Fig. 4.1. Chosen collaterals (4/10/2023)

Fig. 4.2. Drafting collaterals (1/12/2023)

After colouring the logo, I placed it onto my chosen collaterals, using warp effects to make it look more natural on the skirt. But like I mentioned earlier, I ended up changing the colour scheme.

Fig. 4.3. Changing colour scheme and shirt design (1/12/2023)

According to my teacher, the shirt design might be difficult to read as my wordmark design is already chopped up, so I changed it. It went through two revisions, before I settled on the final design on the bottom. I eventually make small changes to it - I make the left line extending from the 'A' yellow and add a blue line plus a small red triangle on the right.

Fig. 4.4. Continuing work on collaterals (9/11/2023)

At first, for my white notebook, I simply made the thin rectangles black instead of yellow and put it on the book. However, I decided that this made it stand out less, so I decided to create a jagged black box to put behind the wordmark to highlight it.

I also added some shapes to the skirt to expand on the brand identity. It fits with the wordmark and is overall an aesthetic I enjoy.

Fig. 4.5. Creating the animation (8/11/2023)

Then I had to work on creating the wordmark animation. I wanted to make each stroke appear individually, in a seemingly random order. Some of the strokes, for example the blue strokes that come in from off screen, have to be animated by changing both their scale and position values, do I could not use masks to achieve the affect I wanted. At first, I also used this same method to animate the thin yellow lines, but it was tedious as adjusting the position due to the mask took a while and would have slowed progress with how many lines there were. So eventually I switched over to animating masks instead, and this was much quicker.

Fig. 4.6. Creating images for the Instagram page (9/11/2023)

Finally, all that was left was to create the assets for the Instagram account. I started with making the profile picture. It was a bit odd to fit the entire wordmark in the profile picture, since it will end up being round, so I settled with using only the first three letters of my name since that is a nickname some people use for me. I changed the position of the 'Y' to be lower, almost giving the impression of a lowercase letter, especially since it has a tail that is normally seen on lowercase 'y's. I also added a blue triangle to add a little more blue and balance out the colours. It also almost looks like an underline.

Fig. 4.7. Idea sketch for Instagram posts (1/12/2023)

As for the actual posts, I came up with the idea to have the shapes overlap into the other posts. I tried to make it look random, while still having a balance of the shapes and colours. Still, I tried to pay attention to the angles the shapes were tilted at so it wouldn't look too deliberate and the patterns too common.

I also came up with the idea to have the background be fading from a black to white, so the panels in the middle would be grey. I like that the notebooks fit in with the background with this idea. I tried to place the black one on top and the white below, but I liked the look of this order more. In Fig. 2.8. above, it shows that I used one large square with the gradient effect, however I then changed this to make each post have one square, and I adjusted the colours manually. The shift in colour also was no longer just from down to up, but slightly from side to side in a zig-zag motion as well.

FINAL Submissions

Fig. 5.1. Wordmark B&W (1/12/2023)

Fig. 5.2. Wordmark Colour (1/12/2023)

Fig. 5.3. Wordmark against lightest colour (1/12/2023)

Fig. 5.4. Wordmark against darkest colour (1/12/2023)

Fig. 5.5. Final Art Animation (GIF) (8/11/2023)

Fig. 5.6. Final colour palette (1/12/2023)

Fig. 5.7. Collateral 1 (1/12/2023)

Fig. 5.8. Collateral 2 (1/12/2023)

Fig. 5.9. Collateral 3 (1/12/2023)

Link to Instagram account: @elysa_works

Fig. 5.10. Instagram page (PC, dark mode) (1/12/2023)

Fig. 5.11. Instagram page (Mobile, light mode) (1/12/2023)

FEEDBACK

Week 4
General Feedback:
- Make the design have meaning. That is how you impact a non-designer
- No matter how creative, the design should still have a sense of readability
- Simplicity can be memorable as well
- Meaning has to work first, form comes later (form follows function)
Specific Feedback:
- Don't think that the design has to encompass every part of you. Just focus on one aspect, maybe one of the contradictory aspects
- Second design has an interesting shape, some people might like it

Week 5
Specific Feedback:
- Idea is good
- Make the strokes and gaps between them thicker

Week 6
General Feedback:
- Expand the brand identity
Specific Feedback:
- Use graphical elements and even text to expand the identity. Create a pattern if you want

Week 7
General Feedback:
- The colour palette should be clear and distinguishable, intentional
- Present yourself in a way you want to be viewed
- Don't be overly repetitive with the brand name, don't have too much emphasis on just the word mark, have some expansion

REFLECTIONS

Experience
By this time, I managed to fix my Adobe problems, so I was able to use Illustrator for my work once more. I was originally kind of excited for this wordmark assignment, since I enjoy doing introspective stuff, but it was tricky to come up with a good design that I felt embodied me. I do like my final design though, I think it does have a part of me in it and vice versa. It was interesting to create an Instagram layout for the assignment. I've done similar stuff before as part of my hobby, following themes for my Instagram thumbnails, but deliberately creating so many posts at once to create a giant artwork is less familiar to me.

Observations
Creating a brand logo or wordmark that encompasses what you want to convey can actually be quite tricky, especially when it's something so vague like 'your character'. It took me some time and experimentation to come up with an idea, and even then it was just something that popped into my head. But this also means I should give those random pop-up ideas a chance, because they might be something I can really work on.

Findings
Creating a design that flows smoothly throughout the posts on the Instagram layout can be tricky. You have to make sure the gaps between the artboards in Illustrator are close to the gaps in the Instagram app itself to have something like diagonal lines flow smoothly. I didn't quite think about this, and I wish I gave myself more time to improve it, but it is a learning experience. Also, brand colours should be bright and vibrant to capture attention, which makes sense looking at lots of famous brands.