TYPOGRAPHY FINAL PROJECT
7 June 2019 - 28 June 2019 (week 10-week 13 )
Ahmed Baahy Suhail (0333925)
Typography
Final Project- Expression, Hierarchy and Composition
LECTURE NOTES
Lecture 10: Online week
7 June 2019 ( week 10 )
Lecture 11: Typography in Different Medium
14 June 2019 ( week 11)
This was the last lecture of this semester and surprisingly, Mr Shamsul was the one covering the topics today. The main topics at today were types on screen versus types on print and we learnt about all the aspects of which they differ/ share similarities. All this time we have been doing type on screen and this is the first time we are designing to print it out.
Times New Roman was the default typeface back then and it was not available to everyone. It was interesting to hear that typography existed and drew attention only when it appeared on a piece of paper. Before, the status of typography was dependent on the skills of a typesetter and designer.
There are more factors in this day and age that must be considered when designing or looking at type, such as viewpoint etc. The browser also renders the typeface nowadays. Everything is handed to us and technological developments have made it much easier to design and deal with type as we have more resources compared to the earliest of times.
How do we ensure that type is smooth and free flowing? Adjusting and kerning is always efficient and we really have to keep an eye on all the small details. Squinting our eyes can help to identify odd gaps and so on. Some good typefaces for print are Caslon, Garamond and Baskerville. On the other hand, the best typefaces for screen are, Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Verdana, Georgia, Palatino and Garamond, We also learnt that typefaces for smaller sizes were more open spaced. We also grasped how the sizes defer in screen and print. In screen, the normal size is 10 points whereas for screen, it is 16 pixels which is equivalent to 12 points.
Hyperlink/ hyperactive is an image, phrase or word that you are able to click on and this will transfer you to a new document or new section within a current one. Hyperlinks for type are often blue and underlined by default. These can be identified if the arrow turns into a small hand pointing when you hover on top of one. Next, we were taught the difference between static and motion. The characteristics of static are expressed in minimal form wheres for motion, the characteristics are dramatized. In motion, letters become kinetic and more fluid and you can really bring type to life through animation and express it's meaning much better. It was an interesting point out that title sequences appear at the end of the movies nowadays compared to it appearing in the beginning.
This was the last lecture of this semester and surprisingly, Mr Shamsul was the one covering the topics today. The main topics at today were types on screen versus types on print and we learnt about all the aspects of which they differ/ share similarities. All this time we have been doing type on screen and this is the first time we are designing to print it out.
Times New Roman was the default typeface back then and it was not available to everyone. It was interesting to hear that typography existed and drew attention only when it appeared on a piece of paper. Before, the status of typography was dependent on the skills of a typesetter and designer.
There are more factors in this day and age that must be considered when designing or looking at type, such as viewpoint etc. The browser also renders the typeface nowadays. Everything is handed to us and technological developments have made it much easier to design and deal with type as we have more resources compared to the earliest of times.
How do we ensure that type is smooth and free flowing? Adjusting and kerning is always efficient and we really have to keep an eye on all the small details. Squinting our eyes can help to identify odd gaps and so on. Some good typefaces for print are Caslon, Garamond and Baskerville. On the other hand, the best typefaces for screen are, Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Verdana, Georgia, Palatino and Garamond, We also learnt that typefaces for smaller sizes were more open spaced. We also grasped how the sizes defer in screen and print. In screen, the normal size is 10 points whereas for screen, it is 16 pixels which is equivalent to 12 points.
Hyperlink/ hyperactive is an image, phrase or word that you are able to click on and this will transfer you to a new document or new section within a current one. Hyperlinks for type are often blue and underlined by default. These can be identified if the arrow turns into a small hand pointing when you hover on top of one. Next, we were taught the difference between static and motion. The characteristics of static are expressed in minimal form wheres for motion, the characteristics are dramatized. In motion, letters become kinetic and more fluid and you can really bring type to life through animation and express it's meaning much better. It was an interesting point out that title sequences appear at the end of the movies nowadays compared to it appearing in the beginning.
Lecture 12: No more lectures
28 June 2019 ( week 12 )
INSTRUCTIONS
FINAL PROJECT / Typography: Expression, Hierarchy and Composition
Our final project was express a social message in the form of a poster, which is related to the campus. As always, we had to use the typefaces given to us but this time around we were allowed to distort our fonts depending on our idea. I thought we had to create our own catch phrase/ headline but it turns out that we could also choose messages online.
I wanted to bring attention to the problems facing smoking. It is something I just do not understand and I do not like how it as become an aesthetic and a trend in recent generations. There are a lot of people even in my family who struggle or have struggled with this addiction and I hate to see them like this so I knew this social message was the right one to choose.
I went on google and searched for headlines relating to smoking awareness and decided to choose "hang tough, don't puff." I thought that I could express these words nicely however when I showed Mr Vinod, he did not like the "hang tough" but said puff was interesting. He gave it some thought and gave me a new and improved catchphrase which is, "puff puff poof." I think this is very catchy and impactful even though it is short. I chose to work with Gill Sans Std as I have gotten pretty attached to it and because it would connect well with the message.
Week 11
 |
| Fig 1.1: Hang Tough Don't Puff slogan from Google |
 |
| Fig 1.2: Sketches of first idea and Mr Vinod's feedback (circled) |
 |
| Fig 1.3: Sketches based around new catchphrase |
 |
| Fig 1.4: Sketches based around new catchphrase |
 |
| Fig 1.5: All art boards of idea development |
 |
| Fig 1.6: Mr Shamsul liked this effect of 'puff' ( Gill Sans Std ) |
 | ||
Fig 1.7: Mr Vinod liked the thick "POOF" ( Gill Sans Std )
|
 |
| Fig 1.9: Curved corners |
 |
| Fig 2.0: After applying brush stroke. |
 |
| Fig 2.1: Process of adding brush. |
 |
| Fig 2.2: Draft 1 |
 |
| Fig 2.3: Draft 2 |
 |
| Fig 2.4: Draft 3 |
 |
| Fig 2.5: Draft 4 |
 |
| Fig 2.6: Final Project "Puff. Puff, POOF'" |
PDF Submission of Final Poster
Week 13
 |
| Fig 2.7: All artboards ready for animation |
 |
| Fig: 2.8: Closeup of artboards |
 |
| Fig 2.9: Process of creating frame animation |
 |
| Fig 3.0: Animation trial "Puff, Puff, POOF" |
 | ||
Fig 3.1 Artboards stretched so there are no white spaces
|
 |
| Fig 3.3: Poster framed |
FEEDBACK
Week 10: No feedback as this was online week
Week 11: Specific feedback: When reviewing my composition for the phrase we had to type out on Illustrator, Mr Shamsul told me to move it down a bit as there is too much space on the bottom. Mr Vinod said it as a nice composition but suggested moving my name down a bit. He also said to tilt the composition and Mr Shamsul backed this up said that this is because there 's an axis . As for the final project, I cose the headline, "hand tough, don't puff." Mr Vinod said that he does not like the phrase "hang tough"but that he liked the word puff. He gave me a better phrase which was "puff, puff, poof" and told me to see how I can express that.
Week 12: My idea is there but composition wise, it can be much better. Mr Shamsul liked my puff expression and Mr Vinod said he likes the "poof" that is most thick. He then asked me to come around to his desk and showed me an animation of the word "poof"which was inspiring. Mr Vinod also sent me a link to a few brush sets to help me create the expressions nicer. The second time around. Mr Vinod said that the "don't smoke"has too much focus when the real emphasis must be on "puff puff poof". He said to fix the position of the whole composition. Last feedback was to adjust the puff nearer to the 'don't smoke' so that my composition floors nicely, and also to feather the 'puff'' so it blends better. He also said to make the "don't smoke" smaller, white and make the gap a bit bigger.
Week 13: Specific feedback: Today was marking day for our final project so we were all just waiting patiently for our turn to be called up. I was wondering why my teachers did not call my name but it turns out that I did a great job and so I did not have to change anything. Near the end of the feedback session my teachers finally noticed me and gave me the heads up to frame. I was hoping everything in my blog was okay and asked them about it to which they said yes it is good and congratulated me . I am happy that I have ended this semester on a strong note and improved quite a lot throughout this span of weeks.
General feedback: When saving gif, reduce file dimension to 480 pixels. Mr Vinod also prompted the class to label all our projects in our blogs according to the MIB.
Week 14: Specific feedback: Export exercise 1 as jpeg and not as screen grab and make sure there is enough space around the lettering. Also for project 1 upload a pdf and fix the odd mark at the right corner of the layout.
General feedback: Add PDF for type expression. Also, really put thought into reflection post and try to reflect on what it was like to maintain an E-portfolio. If you have any suggestions on how we can improve, dont hesitate to write them under findings.
Week 10: No feedback as this was online week
Week 11: Specific feedback: When reviewing my composition for the phrase we had to type out on Illustrator, Mr Shamsul told me to move it down a bit as there is too much space on the bottom. Mr Vinod said it as a nice composition but suggested moving my name down a bit. He also said to tilt the composition and Mr Shamsul backed this up said that this is because there 's an axis . As for the final project, I cose the headline, "hand tough, don't puff." Mr Vinod said that he does not like the phrase "hang tough"but that he liked the word puff. He gave me a better phrase which was "puff, puff, poof" and told me to see how I can express that.
Week 12: My idea is there but composition wise, it can be much better. Mr Shamsul liked my puff expression and Mr Vinod said he likes the "poof" that is most thick. He then asked me to come around to his desk and showed me an animation of the word "poof"which was inspiring. Mr Vinod also sent me a link to a few brush sets to help me create the expressions nicer. The second time around. Mr Vinod said that the "don't smoke"has too much focus when the real emphasis must be on "puff puff poof". He said to fix the position of the whole composition. Last feedback was to adjust the puff nearer to the 'don't smoke' so that my composition floors nicely, and also to feather the 'puff'' so it blends better. He also said to make the "don't smoke" smaller, white and make the gap a bit bigger.
Week 13: Specific feedback: Today was marking day for our final project so we were all just waiting patiently for our turn to be called up. I was wondering why my teachers did not call my name but it turns out that I did a great job and so I did not have to change anything. Near the end of the feedback session my teachers finally noticed me and gave me the heads up to frame. I was hoping everything in my blog was okay and asked them about it to which they said yes it is good and congratulated me . I am happy that I have ended this semester on a strong note and improved quite a lot throughout this span of weeks.
General feedback: When saving gif, reduce file dimension to 480 pixels. Mr Vinod also prompted the class to label all our projects in our blogs according to the MIB.
Week 14: Specific feedback: Export exercise 1 as jpeg and not as screen grab and make sure there is enough space around the lettering. Also for project 1 upload a pdf and fix the odd mark at the right corner of the layout.
General feedback: Add PDF for type expression. Also, really put thought into reflection post and try to reflect on what it was like to maintain an E-portfolio. If you have any suggestions on how we can improve, dont hesitate to write them under findings.
REFLECTION
Experience
Week 10: Online week so was just working on updating my blog for project 2 submission and other assignments so was very stressed.
Week 11: Spent the day trying to come up with cathphrases but in the end that seemed to be a waste of time as I ended up choosing one from the internet. This was then modified by Mr Vinod and I really liked the new phrase as it is very intriguing and the play of words, 'puff, puff, poof"is intelligent.
Week 12: Felt very productive today as I made a lot of variations for my poster idea. I was able to fine tune my design according to the feedback given on the spot and finish creating my poster up to Mr Vinod's standard and hence I felt accomplished and satisfied.
Week 13: I felt a bit nervous not knowing whether or not my teachers have marked mine and was wondering why they did not call out my name. After realizing that it is because my final project went well, I was delighted and able to finally relax a bit.
Week 14: Today should have been stress free and everything was going somewhat smoothly until the pod could not print my poster in A4. I had everything else printed and ready to be filed but this one thing did not seem to work out. I ended up having to make double trips to the other side of campus and print from the art shop. It was exhausting but I managed.
Week 12: Felt very productive today as I made a lot of variations for my poster idea. I was able to fine tune my design according to the feedback given on the spot and finish creating my poster up to Mr Vinod's standard and hence I felt accomplished and satisfied.
Week 13: I felt a bit nervous not knowing whether or not my teachers have marked mine and was wondering why they did not call out my name. After realizing that it is because my final project went well, I was delighted and able to finally relax a bit.
Week 14: Today should have been stress free and everything was going somewhat smoothly until the pod could not print my poster in A4. I had everything else printed and ready to be filed but this one thing did not seem to work out. I ended up having to make double trips to the other side of campus and print from the art shop. It was exhausting but I managed.
Observations
Week 10: I observed that my journey doing project 2 and thought of how much I enjoyed doing project 2 whilst compiling all my work for the blog.
Week 11: I noticed the change in spirit in my self and was thinking about how I have developed throughout the course of this semester. Towards to final few weeks I really have noticed an improvement in my work efficiency and time management as before I would have never been able to finish and get the approval in class. Starting out, I felt very fragile and sensitive but I see that I have developed into a stronger and confident individual and can deal with the stress better and make use of it.
Week 12: I observed my frustrations start to rise as my Illustrator artboards for animation of the social message kept freezing every time I clicked on something. It was frustrating because I know this is slowing me down more than it should, I could have been done much earlier but my laptop is just not compiling. I have tried to be as patient as I could and even when I try to save the work it takes 30-45 minutes and I am not exaggerating. I know for a fact that I would be done now if it weren't for this.
Week 13: As I did not do much for the entirety for the class, I was looking around and notice the change and improvement of the class as a collective and was able to share a breathe of relief.
Week 14: I noticed the different mindsets of my peers during the printing process and E-portfolio submission. Some were patient with it and were taking their time whilst some seemed to be hiding their state of panic. It was interesting seeing how we all react differently to situations and tackle on the obstacles such as the problems we faced with the pod and printing.
Findings
Week 10: I found that even though the spacing in the edit section of blogger is even, it does not apply to the actual blog and it may still be uneven, so I must be more careful in the future.
Week 11: In order to have a good layout, there are many different principles that come into play and I must be aware, in terms of having a designer mindset, in order to obey these principles and create a good outcome.
Week 11: In order to have a good layout, there are many different principles that come into play and I must be aware, in terms of having a designer mindset, in order to obey these principles and create a good outcome.
Week 12: My laptop has too many files which is causing my Illustrator to crash and it is affecting my work efficiency hence I should consider clearing out my files to the hard disk or worse case scenario, get a laptop in the near future.
Week 13: Being patient and keeping a cool and collected mind despite the circumstances is one of the aspects that make a true designer.
Week 13: Being patient and keeping a cool and collected mind despite the circumstances is one of the aspects that make a true designer.
Week 14: Again, I learnt the importance of patience and staying calm. I was very stressed inside because the poster did not print but all I had to do was take my time with it and be comfortable with time being spent trying to get it done, as we had the whole of class time to submit so there was no real need to rush.
FURTHER READING
The Layout Book: Ambrose/ Harris
Week 10
Fig 3.4: The Layout Book
Since our final project revolved around us making a poster, I borrowed this book to help me get inspiration from different layouts designed by leading graphic designers around the world, and seeked some knowledge from these talented individuals. And I got exactly that. This book is filled with information about the principles that direct the layout, and it is more focused around expamples such as creating balance through harmony, selection of page size, and also the vital role layout plays. The first ever development of layout actually began in ancient Egypt through geometry of the pyramid which supposedly contains the golden ratio.
Measurement is one main element in a layout and these come in two forms, absolute and relative. Absolute measurements are those which have a fixed value whereas relative does not. Character spacing is linked to the type size and so its ever changing.
The rules of the golden section apply to a various disciplines including design, art and architecture. Due to the desktop publishing packages that most designers use, the importance of this gold section is null as they use measurements and not proportions. The golden ratio adds a sense of harmony to all the elements and brings them together in unison., it is one of the most breathtaking principles of layout as it can be applied to so many things.
This book also informs about the rule of third which I am familiar width. It is essentially just a grid of three rows by 3 columns. It portrays the areas that attract the average individual and gives the percentage of this interest in accordance to the placement of the element. Then their is the visual center, which is basically the point a bit higher than the centerpoint of a paper and slightly to the right.
All in all, there are plenty of examples this book has to offer and the different layout from the ever so talented designers did indeed lend me a hint of inspiration and helped me to steer in the right direction.
The Layout Book: Ambrose/ Harris
Week 10
 |
| Fig 3.4: The Layout Book |
Innovations in Layout Design: Page Unlimited: For Books,Magazines,Posters
Week 11-12
Fig 3.5: Innovations in layout design
This book is more much visual based than the first one hence, there are more examples inside. It consists of over a hundred editorial designs from across the world, and these designs are of books, magazines and posters. I mainly focused on the posters as that was what my project was about but I did look through the ones for books and magazines as well as I flipped through. I got a sense of how many different outcomes of layouts there can be and this book at hand allowed me to broadened my mind into more possibilities and expand my imagination.
Comments
Post a Comment