Typography / Project 3B: Type Design & Communication
11.05.2021 - 11.19.2021 (Week 11 - Week 13)
Seojeong Kim / 0350085
Typography / Bachelor of Design (Hons) in Creative Media
Task 3B: Type Design & Communication
Instructions
Task 3B: Type Design & Communication
- For task 3B: Type Design & Communication, you need to select holidays, greetings from the given list. Stickers can contain minimal graphic or visual elements, and the final design should be color and animation. It measures 512px x 512px and the sticker must be readable and usable within its dimensions.
Notes:
- Sticker size: 512 × 512 px, RGB
- Minor graphical elements
- Choose an appropriate typeface
- Challenge is to ensure the type expression is readable and legible within that given space (zoom out to view sticker)
- Actionable part is the idea part
Process
Visual research:
- The one I chose for the design is Christmas. Christmas is coming soon, and I personally love Christmas very much because I was born in the winter of December. Then I searched for typography designs related to Christmas.
- Basically, Christmas seems to use 'red', 'green' and 'yellow' a lot. Perhaps it is because of the Christmas tree, Santa Claus and the stars that these colors are used a lot. With Christmas as the theme, I was pretty sure that a lot of ideas would pop up in my head.
Sketches:
- I tried to express images that remind me of Christmas. Christmas trees, tree decorations, Rudolph the deer, and many other things that come to mind. But if I'm thinking of normal typography, I know I shouldn't put a lot of images and logos.
- Also in our module class, the students got feedback from the teacher on what we should choose and what we would like to fix.
- When I showed my sketch to my teacher, he immediately picked out my first Christmas sketch. Because other sketches contain too many images.
- I explained this typo to him. This was a Christmas tree representing the letter 'M', and then putting the word Merry Christmas inside this tree. When I said this, he gave feedback that perhaps splitting the tree into two and expressing the letter 'M' would result in better typography. I accepted it and took his feedback and tried to sketch again.
Digital Sketch
- This is my first tried at digital design. Mr. Vinod told me to make this red color a little brighter and change the typography to 'Bell MT'. And he said that I would like to change the ornaments included here, and finally explained that it would be a better idea if two trees were used to express M.
- Next, we learned how to make social media stickers in class. And after uploading this directly to Telegram Messenger, we tried using the sticker we made.
Typeface
- When I first selected a font, I tried various fonts, but I thought that the one that can give the simplest and most luxurious feeling is suitable for Christmas. And since my teacher told me to use all capital letters earlier, I had to choose a typeface that felt a little thin and concise.
- So, the first font I chose was "Bembo Std". I thought this typeface would be best for my typography in my opinion. I thought this typeface was the best to give a slightly angular feel and a sense of luxury.
- After that, I got feedback from my teacher again, and he knew I was using the 'Bembo Std' font, and asked me how about the 'Bell MT' font other than this one. So I decided to try this typeface again.
- When I tried this font, I was sure that the 'Bell MT' font would fit better when I thought I would definitely use red and green for my work. This font was very concise, thin, and luxurious. So I finally decided to use this font for my final work.
Graphical Elements
- First, I made a Christmas tree to express 'M', one of the most important elements to be used in my work. Based on my first feedback from my teacher, I merged the two trees into one, resulting in the shape of an 'M'.
- Then I added some decorative lines to this because I wanted my typefaces to feel like they were decorated on a Christmas tree.
- After all digital Graphical Elements, I made M's next letter, 'erry christmas', using the 'Bell MT' typeface I selected. I wanted to make a sticker with these letters swaying like ornaments on the Christmas tree.
- I changed this typo to a little bright red as the Mr. Vinod feedback to me earlier, and added a little neon to give it a shiny feel. And the spacing was not uniformly placed on this typo. Because I wanted to express the feeling that this alphabet typography is slightly wobbly. The letter M can be guessed at this because later I will be using a red line around the Christmas tree.
- Next, I wanted to express a bell ornament that is a must-have for a Christmas tree. However, if I design this in too much detail, it will become very complicated, so I decided to express it very simply.
- Finally, this was expressed by putting neon lines outside to express my M letter. I used Photoshop to set a red line with the same color as the text on this, and expressed it as a neon line.
- To express this by aligning it with a 512x512px square , I placed it in the middle of the screen and made it feel like it was filled.
Final:
PDF:
Animation of sticker
- Before After Effects imported the Illustrator file, each element in the vector sticker was separated into its own layer. I gave each layer a name, and changed the layer to make it easier to recognize.
- After separating and importing all the files, I separated the ornaments and the text again. This is because it is convenient to use After Effects.
- Then I first separated the yellow/red and used Opacity on this to give the bubble ornament a shiny look.
- This was reversed so that the yellow/red color did not overlap.
- After the decorations were animated, I had to create the feeling of the letters waving. I wanted to make this typo move with a different feeling, just like ornaments moving on a tree.
- So I separated all the letters into separate layers and started making them move one by one.
Final outcome of Task 3B
Feedback:
Week 11
General Feedback: My first idea was too concise, and to make it a little better, my typography had to be a little thinner, and the graphic designs had to be a little more specific.
Specific Feedback: My typeface must be capital letters, and I have to make it feel thin and luxurious. And to make a square model, I had to place my typeface in the middle, and change these colors to match a little more. Red was too dark and green was too bright. Let's adjust this.
Week 12
General Feedback: In order to make a moving typography, I need to study After Effects a little more, and maybe I need to make my graphic design a little more angular so that it will be more comfortable to look at and better expressed.
Specific Feedback: I had to use a bright red color and make the background green a little darker because I needed to make the uppercase typeface a little thinner and stand out. And all the letters should be made to move non-uniformly, and the ornaments should be divided by color.
Reflections:
Experience: This project was more fun for me than any other project. At first I was not sure which festival and greeting to choose and I paused because I had to use and think about all the ideas related to using more graphic elements, but I'm glad the idea for Christmas came out well. The work I did in my first module class helped me a lot with this project. Because I was able to apply the same methods and elements as in that exercise and apply what I learned to this project. However, if there is one disappointment, my After Effects skill is very poor. If I could use it well, I thought it could have come out with a better animation.
Observations: What I have observed in this project is that typography is naturally incorporated into our lives. Wherever you go, wherever you look, typography is common, and that makes it all the more interesting. This typography is also included in our commonly used social media stickers, so it was very good for us to try and make them. I also found that merging graphics and typography was a very difficult but interesting project.
Findings: Graphic elements and colors have been found to play a very important role in typography. Even a small change in this can give you a different feel and mood. We learned that it is very important to use colors and graphic elements that match the typography we use.
Further Reading
Reference:
Carter, R., Day, B., Meggs, P. B., Maxa, S., & Sanders, M. (2015). Typographic design: Form and communication. Hoboken, New Jersey: John Wiley & Sons, Inc.
- Keeping the shape of the letters is important when considering readability as it is a clue to how we perceived each alphabet. The semicircle of each alphabet is also important for making the shape.
- You can use an existing font and lower its resolution to change its look and appearance. Another idea is to bend them slightly to create interesting shapes and expressions.
- Proper word spacing makes paragraphs of text easier to read. Setting a paragraph of text to all caps reduces readability because there is no visual cue for the reader to recognize each word.
Contrast:
- The subtlety of typographic variation that can be achieved in print goes unnoticed when viewed on screen.
- Antialiasing, lower resolution, and a backlit presentation dull typographic detail, which in turn lowers contrast.
- Shifts in typesetting and typeface selection must be further emphasized to promote proper clarity, texture, and hierarchy.
- Make at least two typographic shifts for contrasting text items on screen: typeface, size, weight, posture, orientation, margin, and color.
- Example: Bold or strong text in a paragraph is emphasized by being set two weights heavier (regular to black instead of bold) or by changing to a heavier weight of a contrasting typeface.
Comments
Post a Comment