GMD Y2S1
stories, methods and form
visual summary visual summary visual summary visual summary visual summary
type tribute logo a no on! interference
Visual Summary
SIN17535988 CHLOE SIN
1
1
visual summary visual summary visual summary visual summary visual summary
SIN17535988 CHLOE SIN
2
Table of Contents
01 TYPE TRIBUTE 5-26
TYPEFACE RESEARCH MUSIC GENRE RESEARCH MUSIC PACKAGING RESEARCH BAND & LP LAYOUT RESEARCH DESIGN PROCESS DESIGN OUTCOME EVALUATION
2
02
03
04
LOGO a NO NO
INTERFERENCE
REFLECTION
27-34
35-42
43-45
WORD RESEARCH SYMBOL RESEARCH DESIGN PROCESS DESIGN OUTCOME EVALUATION
LOCATION OVERVIEW INTERFACE ANIMATION USER EXPERIENCE EVALUATION
SEMESTER 1 REVIEW EXPECTATIONS
3
4
01
E P E Y T T IBU R T A range of co-ordinated designs will be carried out that will help to explore the identity, history and value of typefaces. A profound understanding of all of its anatomical details will be developed in this project.
5
TYPEFACE
S
Foundry Gridnik TYPE FAMILY
HISTORY
Bold
ABCDEFGHIJKMLNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789,.!@#$%^&*?
Medium
ABCDEFGHIJKMLNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789,.!@#$%^&*?
Regular
ABCDEFGHIJKMLNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789,.!@#$%^&*?
Light
ABCDEFGHIJKMLNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789,.!@#$%^&*?
1974
1976-2002
1997
A typewriter manufacturer Olivetti who asked Wim Crouwel to design a new typeface for their new electric typewriter.
Gridnik was used in the low-value postage stamps of the ppt, Dutch post office, which feature the stamp value only.
David Quay of The Foundry asked Wim for permission to digitalize the typeface. The Foundry then issued the Foundry Gridnik with all additional characters.
However, the Gridnik was not released by Wim as the typewriter arrived before he finished the type design.
6
It is named Foundry Gridnik because Wim Crouwel had a nickname “Gridnik” as his designs are always grid based.
S TYPEFACE
‘I am a functionalist troubled by aesthetics.’ Wim Crouwel Foundry Gridnik is a single weight monospace san serif typeface. The weight of the types are the same. The typeface neatly lines on the baseline. Gridnik is based on logic, rationality and strict adherence to the grid with the 45˚ corners. With its characteristics that make Foundry Gridnik has a sense of machine modernity.
ASCENDING LINE
1
X-HEIGHT
2.5
BASELINE
1
DESCENDING LINE
The ratio of Foundry Gridnik is 1:2.5:1 which can see a very tidy and clean layout when applying this typeface.
Foundry Gridnik is monoline in upper case but not in lower case. The width is slightly different.
7
TYPEFACE
examples Foundry Gridnik has high readability. It also has strong and appealing geometric forms which is suitable for headlines and logos. According to Freda Sack, the founder of The Foundry, many designers choose it for architecture and design because it works well with three-dimensional materials when it is in larger font size, the details of the types can be clearly seen with nice spacing. It is seldom used in content text because the corners are not smooth so it may look a bit weird when people reading small font size text in Foundry Gridnik.
Lo Siento, 2012
Patrick Myles, 2017
Steve Attardo, 2012
Bunch, Kurppa Hosk, 2017
8
Pentagram and Abbott Miller, 2009
Stockholm Design Lab , 2004
Jesse Kirsch , 2015
MUSIC GENRE
e l f f i k S
Skiffle is an odd British hybrid which was popular in 1956 to 1958 in the UK. Lonnie Donegan is famous for making Skiffle music. Skiffle is contemporaneous and retrospective. The music is free flow and develops its own discursive areas. It does not have a very significant base of melody but it is a kind of cumulative enrichment, added supplements to it.
Skiffle LP Cover
Dress Code Most instruments used to play Skiffle music are handmade instruments. The materials used to create the instruments can be anything that can create sounds that they can be found everywhere. Skiffle is a creative music that they combined different materials to make instruments and play fun music.
Instruments In the 1950s, the Skiffle bands wore formal dressing in their performance but they acted very high during their performances which is quite contradict. For the Skiffle band in recent years, they wear denim and in farmer styles which is more close to the style of Skiffle music that is a mix of folk and jazz.
Information retrieved from the following Books: Wynn, N. A. (2010). Cross the Water Blues. ; African American Music in Europe. University Press of Mississippi. Cohen, R. (2012). Folk Music: the Basics. Florence: Taylor and Francis. Brocken, M. (2016). Other voices: hidden histories of Liverpools popular music scenes, 1930s-1970s. London: Routledge.
9
MUSIC PACKAGING RESEARCH
I have done research on different music packagings. I discovered that the structure of those packagings are usually not very complicated. The designers focus more on the materials and the method of printing. Also, I noticed that most album covers do not give audience a clear image of the content of the albums but keep a sense of mystery to attract people to explore the music and the packaging design. When audience listens to the music, the packaging should be able to help people to understand the style and message of the songs.
10
11
BAND & EP
Based on the research of the typeface Foundry Gridnik and the music genre skiffle, we decided to name our band “raar� by considering the points of connection between them. Dutch Word
Raar is a Dutch word. The typeface is designed by a Dutch designer, Wim Crouwel. Naming the band in Dutch can make a connection with the band and the typeface.
Weird
Raar means weird. Foundry Gridnik looks cool and hard but its angles are round angles which is quite contradict and makes it looks a bit weird. For the Skiffle music, the songs are not very harmonic that you may hear some out of tunes but it is comfortable and relaxing to listen.
TRACKLIST Troubled by Aesthetics The Sixties Forty-five Corners Ligature Mr Gridnik Olivetti Politene Human Precision Futuristische
12
The tracks were named according to the keywords and characteristics of the type Foundry Gridnik. Also, they are named based on the feeling and reaction to Skiffle music.
DESIGN PROCESS
layout research Before designing the LP cover, I have done some research on different typography designs to learn how to play with the typefaces, colours and some simple graphic elements to express the message aesthetically without destructing the typeface.
13
DESIGN PROCESS layout
EXPLORING LAYOUT In the first workshop, we were asked to print out the LP title and band name then put them on the actual size paper to explore the typeface and how to work with the corresponding title. Under limited time, the outcome was not satisfying as the printed font size is too small and did not emphasize the features of the typeface.
GRID SYSTEM In the second workshop, we were required to explore different layouts based on the given grid layout and design principles. Our group chose scaling, repetition, space and structure to work on. The outcome was fun and able to explore more methods with less limitation to play with the typeface.
The above two designs were done by me based on 6 columns grid. The design idea of the left one is working on space process. The font size is relatively small and with the line joining the letters to make it like the stars in the sky also to echo with the definition of ligature which is to join things together.
14
The right design is working on repetition process by overlapping the title with different tracking and the band name with different font styles. Using those colours can give a retro feeling.
DESIGN PROCESS drafted layout The below are drafted LP covers I worked in order to explore different layouts and find the most suitable one to further develop the idea. The design ideas are based on the research of the relationship between the type and the music genre. The two design on the left are based on the grid system of Foundry Gridnik. The top right corner one is to join letters together as to echo to the LP title “Ligature�. For the right bottom corner one, the strokes represent one of the instrument, comb and paper which used in Skiffle and to put the words in between them to show the monospace feature of Foundry Gridnik.
15
DESIGN PROCESS
LP 1st experiment As instruments used in Skiffle are mostly handmade and the materials used to create the instruments can be recycle, so my first idea is to use corrugated paper to represent washboard which is one of the most significant instrument in Skiffle.
In my first prototype, the packaging has to be opened to see the corrugated paper. The tutors suggested that it is better to make it in the cover as it is a good material so do not need to hide.
I want to use it in the whole packaging design then surrounded by a paper slip with words in Foundry Gridnik. However, I am not able to buy the material in suitable size and colour and it is not able to highlight the typeface so I have to give up this idea. 16
DESIGN PROCESS LP 2nd experiment Based on the advices from Paul during lesson, I try to modify and develop my idea of the repeated line design. I wanted to emboss the words in order to highlight the feature of Foundry Gridnik which is single weight monospace. However, it is hard to emboss the words accurately between lines and I cannot soak a printed paper in the water before embossing. Thus, I have to think of other solution to highlight the words.
I chose cheese yellow and dark red as the colour because this colour combination looks harmony and brings the feeling of vintage. The Skiffle music is relaxing and positive so it also comes up with energy.
I carved on the plastic board and try to do the embossing and debossing. However, I did not reverse the words horizontally so it is not able to emboss.
It still look like when it is debossed. I tried with different pressure to see which carry out a better result. Also, the board have to be larger the actual size of the LP. Otherwise there will be the edges.
17
DESIGN PROCESS LP 3rd experiment Under the limitations, I decided to screen print the LP cover. Screen printing is a kind of hand printing which matches as Skiffle instruments are handmade. I did not highlight thet word with other techniques as I think people can guess the word and know what the word is when they see the cover back.
I redesign the back cover with bars to echo with the cover and barcode to make contrast with the bars with same width.
The colour sometimes did not print evenly on the paper that make it try a lot of times to fix the problem until the good one appeared.
18
FINAL OUTCOME
LP I used orange ink and mango yellow paper to do the packaging with screen printing. As I had damaged the barcode on the screen when I was creating the screen which was not really perfect. I decided to have the one printed with some imperfection to show it is a handmade work.
19
DESIGN PROCESS Cassette packaging The first version is only the inner sleeve of the cassette packaging. The tracks are rotated in 45 degrees and located freely on the layout. There are too many elements that make the design do not have a concentrate point to draw the audience attention.
20
FINAL OUTCOME
cassette packaging I screen printed the cassette packaging. The design is based on the LP cover design with a slightly different layout. I reserved slighty more space which is not very fit for the casette to put in. I will do more testing on how much space do I need to reserve before printing the final.
21
FINAL OUTCOME
digital download format The only element on the digital format is text. The spacing is not even as it is captured from the LP cover that the words are in uneven spacing to fit in the negative spaces.
22
EVALUATION
This is my first project in LCC. I enjoyed the whole process of the project.
TYPE TRIBUTE TYPE TRIBUTE TYPE TRIBUTE TYPE TRIBUTE TYPE TRIBUTE
It is a very good chance for me to explore different printing methods and techniques. It has been a bit challenging to design a set of packaging under a lot constraints but it is a good practice to do detail research in order to find out more possibilities for the project. The tutors gave me useful suggestions and provided me some inspiring references to work with. I keep my design simple instead of distorting the type because I want to show the beauty and the features of the type in my design which is the aim of this project. I developed professional skills like screen printing and embossing. There are still rooms for improvement for this project. For example, there can be a better choice of material used and put more effort on craftsmanship to explore a better structure of packaging. Also, I am still weak in colour combinations so I wish I can work better and improve my skills in the future.
23
24
02
LOGO a NO NO! To explore the potential of symbols in communication and to embody complex notions. A monochromatic symbol will be generated under a series of investigation and experiments to express its beautiful meaning.
25
RESEARCH
word
VELOCITY A vector quantity that refers to the rate at which an object changes moves to a direction.
DEFINITION
It can be calculated by divide the distance by the time it takes to travel plus the direction. The rate at which money changes hands within an economy.
26
slow motion
speed meter
light travel
physics
RESEARCH
symbol
Icon is anything that represents an idea or a picture and delivers information and instruction. Felix Sockwell Logo and symbol are different. Logo is commercial but symbol usually not. Symbol pops meaning. It is all about definition and history. We always have to look back to proof whether it is appropriate. Symbol can express any messages that the designer want to express visually.
27
DESIGN PROCESS workshop To apply the things we have done during workshop in this project, the symbol does not need to be very complicated and have too many details. The key visual elements of the word has to be well used and most important is to keep the symbol simple.
3D Sculpture Throughout the process of forming a sculpture with a piece of paper let me think of how to express the meaning in a 3D way and explore more on how to express the word in different forms.
Drawing I brought my wide angle len for the drawing workshop. I drew it in different setting and ways. By drawing it in different ways, I find out many possibility to visualize an object. The longer time you take to draw does not mean to be the best one. It does not need to be very detail as the key elements is more than enough to let audience understand what the object is.
28
DESIGN PROCESS ideas generation According to the research and brainstorming I did on velocity, I created the following symbols. I worked directly with Illustrator instead of drawing with pen because the software allows me to accurately make use of the lines and shapes more accurately to develop the symbols.
29
DESIGN PROCESS further development I think the most visual expression of velocity will be light. I looked at different images of lights traveling to different speed and directions and I decided to further develop the symbol based on how light travel in order to design the symbol significant to velocity.
Version 1
Symmetric symbol with repeating triangles pointing at the square to represent motions from big square transforms to the middle one. I wrote the above statement in less than 140 characters to describe my symbol in the workshop. This practice reminds me how to keep things simple and to remove unnecessary things. The position of the triangle can modified as to make the feeling of moving towards something stronger.
Version 2 I refined the lines and make the square smaller to make the feeling of moving forward stronger. Also, as velocity contains the information of moving direction so I made the 8 compass directions into arrows. It is still readable when it is scaled down. I am happy with this version.
30
poster
The balls are moving to different directions from the square and the rays represent the motion and speed of the balls.
31
DESIGN PROCESS further development I received comments from my classmates in the final review section. It is suggested to use more colours to make the poster more attractive and more 3D. I wanted to try the gradients with more colours merging together so I find some reference and learn from the online tutorial to create the effect with Illustrator. Also, they suggested to keep the text simple as the graphics are strong enough to communicate.
reference poster designs from Baugasm
I watched some tutorial and reference posters online and tried to create the multi colours gradient with grid tool in Illustrator. I modified the balls on the poster in which I think that the colours help to make the poster much more attractive and realistic. Also, I tried to show movement of the ball and use other background. I finally decided to choose the second one below because I think it is the most effective one to tell the audience what velocity is and can echo to the symbol in a less direct way.
32
FINAL OUTCOME
33
EVALUATION
I thought this will be the most challenging project for me when I first read the brief. However, it is the favourite project for me in this semester.
LOGO a NO NO LOGO a NO NO LOGO a NO NO LOGO a NO NO LOGO a NO NO
I always find symbol design is the most difficult for me because it is hard to express a message with simple lines and geometric elements. There are not much information and definition about velocity. I tried to interpret the word with different forms and found it really fun through the design process. The poster design allows me to try the gradient effect in which I am interested in design with the use of gradients. I am happy I learn new functions in Illustrator which is really useful for me in my future career. I also tried to tile an A1 poster with 9 A3 pieces. It is the first time I learned that the software can export the file in such setting. To conclude, I enjoyed this project and I learned many useful skills in this project.
34
03
INTERFERENCE
Design a site-specific digital intervention that encourages an audience to interact with or consider a space in a different way.
35
RESEARCH
location
Stockwell Caldwell Street Bike Docking Station I started this project by investigating the bike docking station in Caldwell Street. It is located along the busy Clapham Road in which many people rent bike here. I observed the user experience and found out that most people do not aware of the safety tips on the terminal. Most of them just pay and start to cycle.
36
IDEA OVERVIEW
objective The project aims to increase people’s awareness towards safe cycling and improve the terminal by making it available to communicate with people from anywhere through digital media.
Key insights When I observe in the docking station, I discovered the two main reasons why people are not aware of the information on the terminal. The texts are too long that people are not patient to read and may not aware of the importances of the texts. Only English is shown on the terminal which cannot communicate with everyone such as the tourists who are frequent users of the bikes.
change People will be more aware of cycling safety and find it easier to rent a bike from the terminal. It is more efficient and easy to rent a cycle in the docking station with integrated technology. More people use the service.
Audience The users of the public bikes in any age and whether or not they can read English.
digital intervention Animation
A series of motion graphics will be played randomly in between the process of renting cycles. The motion graphics will be played when there is no people using terminal.
Interface
The interface of the renting system will be redesigned with more graphic and it will be easier to use with clear instruction and directory system.
37
INTERFACE The interface of the current system is old and the reaction is really low. I had interviewed some users and they think that the instructions are not very clear so make them sometimes do not know what to do. The interface is redesigned to a clearer flow and worked with other technology in order to provide a better user experience.
technology LED tap screen The screen will be replaced with a larger LED tap screen with higher resolution and with shorter responding time. It will be more efficient.
Paywave The current payment method has to insert the credit card into the card reader. However, some people may forget to take the card. Paywave is now widely used which is very convenient and more safe. User just need to tap the card reader with the card or even their smart phones.
design The design used navy as to look more mature as the service is provided for adults. The type used is Johnston which is the official type of London transport. Also, more icons are added in the new interface as an assistant to the words to increase its readability and easier to understand.
38
ANIMATION The series is combined by 5 to 6 animations which is around 3 seconds long for each one. The animation is about the safety tips of cycling that aims to alert users to be aware of road safety. Using animation can easier to catch people attention and it is a fast way to get to know about the message compare to plain words.
colour The colour are chosen based on the colour of the cycles. I used with different gradient of them and look harmony with contrast.
style I chose bold graphic illustration style to make it more attractive and eye catching. The motion are quite simple but it can show the message in a clear and direct way.
39
USER EXPERIENCE
40
1
2
3
Start by choosing a language.
Choose the service.
Choose the type of access.
4
5
6
The 3 seconds animation will be played during the processing time.
The detail of the transaction will be listed.
Pap the payment card to pay.
7
8
9
Another animation is played during the processing time.
Collect the receipt with the release code from the terminal.
Release the bike at the docking station and start cycling.
mock up
There is two sides on the terminal. One side will be the screen showing the animations randomly continuously to promote safety cycle and cycling in London. The another side will be the touch screen for people to rent the cycle.
41
EVALUATION
INTERFERENCE INTERFERENCE INTERFERENCE INTERFERENCE INTERFERENCE
42
This project is under a very tight schedule. It is a project that allows me to put a lot creative input and explore different kinds of techniques such as coding, interactive media, apps, animations etc. I have no idea what to work on in the beginning. However, after I did more research in the location and discussed with my classmates, I found the direction. Although the final outcome is not yet done, I did explore more on a user-friendly interface and animation. I am still a beginner of After Effect which I spend quite a lot of time on it. I will further develop this project in my break time and try to improve my animation skills.
04
REFLECTION
A review on what I have done in this semester and set up some targets to achieve in the future.
43
SEMESTER REVIEW
In the beginning of the semester, I set up some targets for myself. In terms of time management, I hope I can work on the timetable set up for myself. I did achieve this target and I never work overnight for my project in this semester. I am here in LCC to learn more professional skills and develop better design senses. I did a lot more research than in the past and it helped me to know more about different design and knowledges to improve my design. I joined the screen printing workshop and embossing workshop. I had applied the technique and skills in my project which is very useful for me. I explore more possibilities in design finishing throughout the semester. There were chances to work on moving images and codings. However, due to the limited time, I am not able to develop and improve my skills in these areas. I still found my photography skills not strong enough that I could have a better practice before next semester.
44
EXPECTATIONS
I had set up some target for my next semester and I will try my best to achieve them. Firstly, there will be group projects in the coming term. I wish I could get along well with the team and learn from one another as everyone has different background which will be great to share experiences. It is a good practice before working in the industry. Secondly, I hope to try Coptic binding and foiling in this term but I cannot manage my time to do it. I will try coptic binding or other book binding method next term. Thirdly, I will start looking for design studio that I like and start to plan my career. I will start building up my online portfolio and make more connections with people working in the design industry.
45
46