Advanced Typography - Project 1
Atiqah Farzana Binti Syalleh Karimyee (0336740)
Advanced Typography
Project 1
LECTURE NOTES
Module Information Booklet:
I sketched out a few ideas and layouts that I could use.
FEEDBACK
Week 6: General feedback: The key artwork should be 50% type and 50% visuals, but preferably 75% typography and 35% visual. Overall, it must reflect a typographic look and feel. A key artwork is not exactly a logo, but it behaves like one. It should be able to stand by itself and needs to be a solid, compositional block. Mr. Vinod suggested we look at Fahmi Reza's work and how he incorporates the punk look and feel. Punk is not just about music, but its ideology is also about design. The process of a design involves: (1) Sketching by digital means or traditional pen and paper; keeps the hand moving and the brain processing as many different ideas you currently have. (2) Identify potential ideas. (3) Develop form. (4) Keep to black and white; if it doesn't work in b/w then it wouldn't work in colour!
Observation: Week 6 (19/05/20); Majority of the class seemed to be struggling as well, so I was relieved that my work wasn't the only one that's not up to standard. Week 8 (02/05/20); I noticed that emphasising a word or simply making it bigger can make the key artwork look much better. Not everything in a title should be the same size or it will look dull.
Findings: Week 6 (19/05/20); I think I haven't quite grasped the concept of a key artwork yet so I still have to keep trying and do more research on the fundamentals of punk culture. Week 8 (02/05/20); After seeing all of my classmates' work, I think that I understand what a key artwork should look like- it should be related to the topic/ have elements of it but shouldn't be too complex like a poster.
FURTHER READING
The Complete Manuel of Typography by James Felici
(14/05/20 - 21/05/20)
Week 6 (19/05/20):
No lecture today.
Week 7 (26/05/20):
No lecture as today is a public holiday (Hari Raya).
Week 8 (02/05/20):
My group was supposed to present today unfortunately we didn't due to the limited amount of time for consultation.
Fig. 1.1 Interactivity and Motion in Typography: Slides
Fig. 1.2 Interactivity and Motion in Typography: PDF
INSTRUCTIONS
Module Information Booklet:
EXERCISES
Event: Key Artwork
(Week 6 - Week 8)
19/05/20 - 02/06/20
Event: Key Artwork
(Week 6 - Week 8)
19/05/20 - 02/06/20
For this project, we had to creatively and conceptually use visual and type in combination to create a key artwork to be used in collateral for the subsequent task down the line (*collateral design). The focus here is to use visual elements, and or graphical elements and the title (type) in an experimenting, impactful and visually attractive manner. The use of imagery must be, to a degree, subservient or of similar importance, with the title (in terms of visual hierarchy). We must explore the boundaries of communication using the knowledge gained in typographic systems and type and image interplay exercises. By synthesizing our knowledge, we could create beautiful, attractive, impactful designs that communicate well.
Important requirements:
- choose a topic out of the 3 provided in the 1st exercise (typographic systems)
- since it is a vector-based artwork, try to keep it within Illustrator because the quality will remain even when it is resized
- not restricted to the 10 typefaces
- poster and microsite is mandatory, the rest is up to us
- must follow the same title, date and venue- only the speakers' names can be changed
The topics:
The Design School,
Taylor’s University
All Ripped Up: Punk Influences on Design
or
The ABCs of Bauhaus Design Theory
or
Russian Constructivism and Graphic Design
or
The ABCs of Bauhaus Design Theory
or
Russian Constructivism and Graphic Design
Open Public Lectures:
November 24, 2020
Lew Pik Svonn, 9AM-10AM
Ezrena Mohd., 10AM-11AM
Suzy Sulaiman, 11AM-12PM
November 25, 2020
Muthu Neduraman, 9AM-10AM
Fahmi Reza, 10AM-11AM
Fahmi Fadzil, 11AM-12PM
Lecture Theatre 12
Mr. Vinod showed us a few examples of key artworks and their collaterals. Below are posts from @morrre.design on Instagram.
I chose to use 'All Ripped Up: Punk Influences on Design' because I did a lot of research on the topic when I used it for my 1st exercise.
 |
| Fig. 1.1 Research on Punk Movement |
I sketched out a few ideas and layouts that I could use.
 |
| Fig. 1.2 Sketches 1 |
 |
| Fig. 1.3 Sketches 2 |
Idea 1- I took the literal meaning of 'ripped' and applied it to my design, thus making it look like a poster that had been torn up. Collage and DIY was a big part of punk design so this is my version of mimicking it digitally. I kept the overall design fairly minimal and clean for a start, as I intend to apply this torn-up-paper-look for my other designs later on.
The type used here is Roboto in black and medium.
 |
| Fig. 1.4 Key Artwork - Idea 1 |
Idea 2 - For this idea, I wanted to convey how powerful words are. The pistols coming out of the mouth are pointing at the audience, which could symbolise how some words are like bullets. They could be impactful in the sense that you feel empowered by them, but they could also cause harm. To show that the mouth is 'speaking', I added these comic-like speech bubbles.
The type used here is Don Graffiti.
 |
| Fig. 1.5 Key Artwork - Idea 2 |
Idea 3 - I incorporated the torn paper look here, along with two floating heads with their eyes crossed out. This was a very popular characteristic of punk design and I wanted to try it out for myself. I chose a picture of someone who had face tattoos because punk is all about self-expression, and having something permanent on your skin is a perfect example of that.
The type used here is Bastion Regular.
 |
| Fig. 1.6 Key Artwork - Idea 3 |
Idea 4 - Moving away from minimalism, I wanted to create a few chaotic designs. I used the same image previously and drew a skull over it. I wish it more noticeable, but nonetheless, I continued to layer and overlap the sketches and words to create more of a havoc.
Red is a very strong and powerful colour which symbolises war, energy, danger, power, bravery, and sometimes, love. However, it is usually associated with danger, as our primal instinct understand that blood is red and seeing it instinctively signals a warning in our brain.
The type used here is Don Graffiti.
 |
| Fig. 1.7 Key Artwork - Idea 4 |
Here's another version that I did without the 'punk' repetition at the bottom.
 |
| Fig. 1.8 Key Artwork - Idea 4 (ver 2) |
Mr. Vinod said that my first attempt seems to be more on the right track, but it still needs more work. Since he said that the type I chose was too rigid and clean-cut for a 'punk' look, I should change it. He also suggested various ways of making it more 'punk' by adding elements namely safety pins, photocopying, etc.
I liked the idea of safety pins so I tried to incorporate them with my torn paper design. Here are my first attempts:
As I remembered how Mr. Vinod said to make the key artwork like a logo, I decided to try to make the design more contained. In Fig. 1.12 I used a circular saw as my base and my text is placed on top of it.
I liked the idea of safety pins so I tried to incorporate them with my torn paper design. Here are my first attempts:
 |
| Fig. 1.9 Key Artwork - Idea 5 |
 |
| Fig. 1.10 Key Artwork - Idea 5 (ver 2) |
 |
| Fig. 1.11 Key Artwork - Idea 5 (ver 3) |
As I remembered how Mr. Vinod said to make the key artwork like a logo, I decided to try to make the design more contained. In Fig. 1.12 I used a circular saw as my base and my text is placed on top of it.
 |
| Fig. 1.12 Key Artwork - Idea 6 |
Due to a public holiday (Hari Raya) we didn't have a class, but I managed to send my work to Mr. Vinod for his feedback.
Generally, he said my idea 5 (version 2) has good eye movement, but the paper is too dark/dull for the letters to stand out. He also asked me to work on the word play.
I changed the colour to a lighter gray and tried to make the letters have more contrast to each other.
 |
| Fig. 1.13 Key Artwork - Idea 5 (reworked) |
After showing Mr. Vinod and Mr. Shamsul, I was told to make the 'PUNK' bigger and to reduce the size of the rest of the words.
 |
| Fig. 1.14 Key Artwork - Final Attempt |
Fig. 1.15 Key Artwork - Final Attempt PDF
FEEDBACK
Specific feedback: Don't try to make a poster! A key artwork should look more like a logo. My first attempt seems more on the right track, but it needs more work. Mr. Vinod commented that the type I chose was too rigid and clean-cut for a 'punk' look, hence I should change it. He also suggested various ways of making it more 'punk' by adding elements namely safety pins, photocopying, etc... He recommended that I make 2-3 different key artworks too.
Week 7: Specific feedback: I think you're coming close. But not there yet. The razor blade would be better if it was vector based in this case but the words seems a little over shadowed by the blade.
I like the safety pin idea but the grey tones are too dull/dark and the words don't stand out. You need to design in for BW and not in colour then convert it to BW. The eye movement for this is good (2nd safety pin attempt). But the word play needs much work. Ah ok the choice of type and the combination of the diff types and sizes (aka contrast). What you said here too can be considered (interplay between image and type). But I was referring to the above said.
Week 8: General feedback: We can start the poster as soon as our key artwork is approved. Save the microsite for last. 12pt is the largest you can use for an A3 size poster. Negative space is your friend, learn how to embrace it.
Specific feedback: The lettering is too difficult to read. You've done a good job on the word 'PUNK'; perhaps you don't have to do all the letters in the same way. The other words should look less 'punk-y' but should work with the 'PUNK', and their styles should be similar in nature. Increase the size of the 'PUNK' to become the point of interest. The letters are generally normal, with variation to size and typeface. (After showing the reworked version) 'PUNK' looks excellent, keep reducing the size of the other words and increasing the size of the 'PUNK'. It's coming along.
REFLECTION
Experience: Week 6 (19/05/20); I think moving from the exercises to project 1 is always frustrating and confusing. With all our other modules also starting project 1, I felt overwhelmed and honestly didn't spend much time on this project. Week 8 (02/05/20); We started a new way of having class- by showing our work through the comment section of a Facebook post. This was extremely efficient and good for both ends!
Experience: Week 6 (19/05/20); I think moving from the exercises to project 1 is always frustrating and confusing. With all our other modules also starting project 1, I felt overwhelmed and honestly didn't spend much time on this project. Week 8 (02/05/20); We started a new way of having class- by showing our work through the comment section of a Facebook post. This was extremely efficient and good for both ends!
Observation: Week 6 (19/05/20); Majority of the class seemed to be struggling as well, so I was relieved that my work wasn't the only one that's not up to standard. Week 8 (02/05/20); I noticed that emphasising a word or simply making it bigger can make the key artwork look much better. Not everything in a title should be the same size or it will look dull.
Findings: Week 6 (19/05/20); I think I haven't quite grasped the concept of a key artwork yet so I still have to keep trying and do more research on the fundamentals of punk culture. Week 8 (02/05/20); After seeing all of my classmates' work, I think that I understand what a key artwork should look like- it should be related to the topic/ have elements of it but shouldn't be too complex like a poster.
FURTHER READING
The Complete Manuel of Typography by James Felici
(14/05/20 - 21/05/20)
[Click here for the PDF]
The two basic kinds of fonts: Outline and Bitmapped
Digital devices—computer monitor screens, desktop printers, imagesetters—create images out of dots. The simplest way to create type for one of
these devices is to draw a picture of every character as an array of dots and
store these drawings in a font. Then all a device has to do to image the type is
to copy those dots into place on the screen or page. When this technology was
first figured out, each one of those dots was represented by one bit of computer
data—a simple yes/no choice of whether to image a dot or not. Images created from pre drawn, prearranged arrays of dots are called bitmaps. Fonts using this trick were called bitmapped fonts.
Outline fonts store character images as outlines described mathematically as a series of curves and straight-line segments (sometimes called vectors and vector fonts). They can be scaled to any size without distorting the shapes or proportions of the characters.
PostScript fonts
These fonts are written in the PostScript page description language, and they need to be processed by a PostScript interpreter before they can be imaged.
TrueType fonts
Apple Computer and Microsoft collaborated to create a new font format: Truetype. This new format enabled both companies to build outline font-imaging capabilities into their respective operating systems without being beholden to Adobe.
OpenType fonts
OpenType is a hybrid font format created by Adobe and Microsoft. It reconciles the differences in the PostScript and TrueType formats, allowing them to exist together in a single file. OpenType font is a TrueType font with a “pocket” for PostScript data. An OpenType font can contain TrueType font data, PostScript font
data, or (theoretically) both.
Web fonts
They do not refer to a specific font format but to fonts that have
been extensively hinted for optimum legibility when displayed on computer
screens and other electronic devices.
Comments
Post a Comment