Why design more typefaces? Need and demand.
1. Type design carries a social responsibility so it must be continued to improve its legibility. 2. Type design is a form of artistic expression.
Adrian Frutiger is renowned 20th century graphic designer, he designed the famous typefaces Univers and Frutiger. Frutiger is a sans serif typeface designed to create a distinctive and legible typeface that is easy to see from both close up and far away; extremely functional.
Mathew Carter was a contemporary British designer and craftsman, many of his fonts were created to address specific technical challenges, such as Verdana for Microsoft in 1996. Verdana was tuned to be extremely legible even at small sizes on the screen of electronic devices. It exhibits characteristics derived from pixel rather than the pen, brush, or chisel.
Edward Johnston is the creator of the typeface Johnston Sans in 1916. He was asked to create a typeface with "bold simplicity" that was modern yet rooted in tradition. He handed over details that would set the tone for printed text until the printed day. Notably, Johnson sans looks very similar to Gill sans, but actually, gill sans was heavily based on Johnston's work.
General process of type design
1.Research: We should understand type history, type anatomy, and type convections, terminologies, side-bearings, metrics, and hinting. And determine its purpose and applications.
2.Sketching: Some sketch their typefaces using traditional tool sets and others digital, both methods have their pros and cons.
3.Digitization: Professional software is used in digitization of typefaces, such as FontLab and glyphs app.
4.Testing: prototyping and testing are part of the process of refining and correcting aspects of the typeface.
5.Deploying: the task of revision doesn't end at deploying, there will be problems that occur that need more revision.
 |
| Fig.1.4: The Latin Alphabet arranged into Groups (17/5/2024) |
The 26 letters of the alphabet can be arranged into groups depending on physical appearance.
Week 5 (22/5/2024)
Lecture 5: AdTypo_5_PerceptionAndOrganisation
Perception is the way in which something is regarded, understood, or interpreted. Often in design, especially advertising design, what people view in the advertisements are what they are manipulated into seeing and understanding.
Perception in typography deals with the interpretation of the reader via contrast, form, and organization. Contrast is important to be created to create distinction or differentiation between textual information. Below are Rudi Reugg's different methods of creating contrast.
 |
| Fig.1.5: Methods of Creating Contrast (22/5/2024) |
Carl Dair provided his own method of creating contrast (most of which been covered by Rudi Ruegg albeit using different terms) which includes: size, weight, contrast of form, contrast of structure, contrast of texture, contrast of color, and contrast of direction.
Size: Contrast of size provides a point of which the reader's attention is drawn.
Weight: Weight describes how bold type can stand out in the middle of lighter type of the same style which provides a powerful point of emphasis.
Contrast/Form: Contrast of form is the distinction between a capital letter and its lowercase equivalent, roman letter, italic variant, condensed or expanded versions of the typeface.
Contrast/Structure: Structure means the contrast between different letterforms of different kinds of typefaces.
Contrast/Texture: By putting together the contrasts of size, weight, form, and structure, and applying them to a block of text on a page, you get contrast of texture.
Contrast/Color: The use of color to give emphasis on elements; it creates contrast and visual impact.
Contrast/Direction: contrast of direction of the opposition between vertical and horizontal and the angles in between.
Form refers to the overall look and feel of the elements that make up the typographic composition. It is the part that plays a role in visual impact and first impression. typography means to write in accordance with form; it can be seen as having two functions: to represent a concept, and to do so in visual form.
Organization, or "Gestalt" in German, meaning the way a thing is placed or put together. Gestalt psychology is an attempt to understand the laws behind the ability to acquire and maintain meaningful perceptions; it emphasizes that the whole is greater than its parts, this is based on the idea that we experience things as a unified whole.
2. Instructions & Tasks
Module Information Booklet
Task 2: Wordmark
The key
artwork is a wordmark/lettering, but is also an artwork. As a
wordmark/lettering it is used to identify a person but it is also
used as an artwork. The key artwork can be disassembled into
constituent shapes to form vibrant patterns that continue to
maintain and expand its visual identity.
Use your first name or pseudonym
Explore and compose as many permutations and combinations
of your name in the form of a wordmark/lettering. The final key
artwork must be an elegant solution, well balanced and
composed, not complicated or confusing that leads to a
functional and communicable key artwork.
Finding Inspiration and Deconstructing Myself
The first thing we were instructed to do is create a mind map and dissect ourselves into categories and words. I never had to fully list myself down like this before, so I had to really think about what words to describe myself. I broke myself down into my personality, my culture/heritage, my inspiration, my interests, my art style, my fashion aesthetic, my hobbies, and my music taste.
.jpg) |
| Fig. 2.0: Mind Map of Myself (5/15/2024) |
The parts of my self that I thought would be interesting to flesh out in designs were:
1. My Sharpness; when it comes to people I'm close to, I can come off as upfront and sharp. But I'd like to use this as a double edged sword and use another meaning; sharp can also mean accurate perception or observation. I pay attention to details a lot, so I'd like to incorporate both definitions.
2. My fashion Aesthetic; My aesthetic consists of Cybersigilism, edgy, grunge, and witchy vibes. I perceive fashion as walking works of art that is a physical manifestation of myself and my art.
3. Ambiversion/Balance; I'm a combination of both introverted and extroverted traits, so in a way it is an internal balance. I like a good balance among all aspects of my life. (Despite failing to achieve that balance sometimes, I still try nonetheless.)
4. Interest in insects; A lot of my inspiration comes from nature, and especially insects' design. I admire the details, the textures, and the shapes of the exoskeleton, and the overall bilateral symmetry.
.jpg) |
Fig. 2.1: Compilation of Inspiration (5/15/2024)
|
 |
| Fig. 2.2: Mood Board (5/16/2024) |
Sketching Ideas
My first choice for the wordmark is my art name, or the name I go by as an artist on social media. I typically use it as a watermark on my artworks. The name "EL ALT" is the initials derived from my name Leen Altaifi. Where "L" is taken from my first name and is written as how it is pronounced "El", and the first 3 letters of my last name "Alt", thus "El Alt" is formed. I prefer it in all caps because it looks more balanced that way.
 |
| Fig. 2.2: Wordmark Sketches for "EL ALT" (5/15/2024) |
My second idea was to design my simple name "Leen". I'm not quite a fan of it due to the lack of exploration or creativity I could come up with using my name. But the main idea remains the same: Sharp, balanced, and insect-like. The key idea here is that both 'E's are facing away from each other, somewhat resembling insect wings.
 |
Fig. 2.3: Wordmark Sketches for "Leen" (5/16/2024)
|
Digitizing
I chose my favorite out of all the sketches I've made to digitize as my first attempt to get a proper glimpse of how it would look like digitized.
 |
Fig. 2.5: Digitizing "EL ALT" Attempt 1
With Guides (5/17/2024) |
 |
Fig. 2.4: Digitizing "EL ALT" Attempt 1
(5/17/2024) |
I digitized one of "EL ALT" and one of "Leen". I already had an an inkling that I preferred the EL ALT one, but after digitizing both, I am certain.
 |
Fig. 2.6: Digitizing "Leen" Attempt 1
(5/17/2024)
|
 |
Fig. 2.7: Digitizing "Leen" Attempt 1
With Guides (5/17/2024) |
After receiving feedback, I redesigned my wordmark due to it being disapproved. I needed to make it more readable, and representing a positive keyword more clearly. I used other ideas from my sketches, and changed my keyword to 'visual'. I tried to keep to the aesthetic of my first attempts since it is my personal preference, but simultaneously adjusted it to the new keyword. The sharpness of the letters is supposed to mimic the sharpness of eyelashes.
 |
| Fig. 2.8: Ideation Sketches for Wordmark (5/21/2024) |
 |
| Fig. 2.9: Trying Out Color Palettes (5/24/2024) |
 |
Fig. 2.9: Digitizing "EL ALT"
Attempt 2 (5/24/2024) |
After the second round of feedback, I completely ditched my first few ideas and the aesthetic I was stubbornly trying to go for; I went for something more simpler instead. It is also derived from one of my earlier sketches, and the keyword remains to be 'visual'. After the lecturer pointed out that the curvature shape I was going with couldn't work out as a wordmark due to the vast negative space it causes when bordered with a square.
 |
Fig. 2.10: Digitizing "EL ALT"
Attempt 3 (5/27/2024) |
 |
Fig. 2.11: Digitizing "EL ALT"
Attempt 4 (5/27/2024) |
I came up with 2 ideas of the same design, one with a sans serif font, and one with a serif font. I ended up gravitating towards the sans serif version because it makes it look more like one unit and it is closer to my original idea. The sans serif has a more playful vibe to it, whereas the serif is more formal and serious. I felt the playful, sans serif version represented me more, since I'm silly and I don't take myself too seriously.
 |
Fig. 2.12: Chosen Wordmark
Design for "EL ALT" (5/28/2024) |
 |
| Fig. 2.13: Exploring Variations for Chosen Wordmark (5/28/2024) |
Visual Identity Expansion
I tried exploring different versions of the wordmark for expanding the visual identity, and started trying out different color themes for my identity. I first tried dark purple, red, and blues.
 |
| Fig. 2.14: Color Palette Attempt 1 (5/29/2024) |
I wasn't convinced with any of the palettes I've used previously, so I researched existing art/art supply brands to look at their color choices. I've noticed a lot of monotone black and white, hints of red, and sometimes gradients of rainbow.
 |
Fig. 2.15: Brands that Inspired Me,
'Procreate' & 'Prismacolor' (5/30/2024) |
I liked the idea of having a gradient color scheme, and it was especially fitting cause my brand represents visuality, creativity, and art. Thus, I chose the primary pigment colors: cyan, magenta, and yellow, and everything in between.
 |
| Fig. 2.16: Color Palette Attempt 2 (5/30/2024) |
I chose the word 'visual' for my visual identity expansion because it is the keyword I chose for my wordmark. I built the letterforms using the same blocks used in my wordmark, except for the letters 'S' and 'U', which seemed unappealing, so I used Arial font's letters and modified it a bit to suit the rest of the letters I've built; the result is a combination of both.
 |
| Fig. 2.18: Brand Identity Expansion (5/30/2024) |
 |
Fig. 2.17: Creating Font Process for
'Visual' (5/30/2024) |
I attempted my first grid collage. I integrated my wordmark with my image, included expansions of the brand, and chose 3 collateral items: sketchbook, tote bag, and a t-shirt. I wasn't proud of this because I knew I hadn't put much planning in the layout or expanding my identity. As sir has mentioned, there is a lot of repetition and lack of effort in the expansion.
 |
| Fig. 2.19: Instagram Grid Attempt 1 (5/30/2024) |
I took the lecturer's constructive criticism and improved my designs. I used letters from the wordmark to expand my identity, so the designs are strictly derived from the original wordmark. I started thinking of the grids as one unit, that way I put more thought into how the grids would look like collectively, instead of each grid being an individual unit.
 |
| Fig. 2.20: Process of Instagram Grid Attempt 2 (6/3/2024) |
I was attempting different designs for the T-shirt graphics, so I played around with elements from my wordmark, particularly the letter 'A', which is the distinctive feature of my brand. I took advantage of how the eye in the letter 'A' can also look like a stickman bending downwards, so I further played into that by rearranging the strokes thus making other stickman poses. That ended up as a brand identity expansion that was used in the T-shirt as well as the animation.
 |
| Fig. 2.21: Process of Brand Identity Expansion (6/3/2024) |
After a series of changes, I ended up with the 9 grids below on the left. The screenshot on the right shows my whole process and drafts of this task in adobe illustrator.
 |
| Fig. 2.22: Instagram Grid Attempt 2 (6/3/2024) |
 |
| Fig. 2.23: Full Process on Illustrator (6/3/2024) |
Animating Wordmark
I roughly animated my idea on procreate to illustrate what I had in mind. It made the process easier cause now I had a direction of what I want to do, and I visualized it so it ensured the idea could work.
 |
| Fig. 2.24: Rough Draft of Animation (6/4/2024) |
I moved to Illustrator to work on the actual draft. I used the frame by frame method using the artboards because I felt that I had more control over the output despite it being a lot more work. Below, to the right, is my first animation draft.
 |
Fig. 2.25: Process of Frame by Frame
Animation on Illustrator 1 (6/4/2024)
|
After I sorted out all the stick men key and in-between frames I started adding in the theme colors to the animation. Then, one by one, I added the gradient on top of each stick figure on photoshop because it was easier using the clip mask.
 |
Fig. 2.26: Process of Frame by Frame
Animation on Illustrator 2 (6/5/2024) |
After I was done with all the frames on Illustrator, I exported all the artboards to procreate and drew even more in-between frames (because I wanted it to be as smooth as I could), and exported it. However, I divided the animation into 3 sections, because I wanted the fps of one particular section to be higher than the rest. Then, I compiled the 3 sections using adobe premier pro, and exported it as a gif.
 |
Fig. 2.25: Process of Frame by Frame
Animation 3 (6/5/2024) |
Final Submission Task 2(A):
 |
| Fig. 2.26: Black Wordmark on White Background Submission (6/10/2024) |
 |
| Fig. 2.27: White Wordmark on Black Background Submission (6/10/2024) |
 |
| Fig. 2.28: Color Palette Submission (6/10/2024) |
 |
| Fig. 2.29: Wordmark on Lightest color on Color Palette Submission (6/10/2024) |
 |
| Fig. 2.30: Wordmark on Darkest color on Color Palette Submission (6/10/2024) |
|
 |
| Fig. 2.31: Wordmark Animation Submission (6/10/2024) |
|
Final Submission Task 2(B):
 |
| Fig. 2.32: Collateral 1 Submission (6/10/2024) |
|
 |
| Fig. 2.33: Collateral 2 Submission (6/10/2024) |
|
 |
| Fig. 2.34: Collateral 3 Submission (6/10/2024) |
|
 |
| Fig. 2.35: Instagram Screenshot Submission (6/10/2024) |
|
Instagram Profile Link: here
3. Feedback
Week 5
General Feedback: What is our design trying to communicate across? Sometimes the communication might be straightforward and clear to understand, or once explained it is clear to understand. Always attempt the idea with black on white first, if it works, then it can work with any other background, because features like readability and design with negative space should be solidified before using anything other than black on white. Your keywords represent your persona. You need to find the balance between attractiveness and legibility.
The enemy of form is white space.
Specific Feedback: I had 2 designs, but they were both not readable, and there were too many ideas I wanted represent in my design. I need to rethink my designs, let go of my personal urges, work under the limitations, and limit myself to one aspect of myself I want to sell.
Week 6
General Feedback: Consider the visual ramifications of the artwork. While it is a personal wordmark, consider how the client would interpret it as. There will always be loss if your artwork is complicated in order for it to be seen in a minimal scale.
Specific Feedback: In my design, the wordmark is in a big curve (the purpose of it was to give an eyelash feel) however, that was not translated well in my design. I need to focus on the main component of my wordmark, which is the eye in the letter A, and exclude all the additional aspects in the other letters. To remove the big curvature, and exclude the graphical elements that distract the main message of the wordmark.
Week 7
General Feedback: The items you choose should have a significance why you chose it and how they the 3 items relate to each other. If your design on your item is minimalist, then your background should be minimal as well. Choose colors that will appear on a white background.
Specific Feedback: I chose a sketchbook, tote bag, and a T shirt, but I should rethink the sketchbook because it doesn't match the other products. My grid is a too repetitive, I need to find creative ways to expand my brand and reduce the repetition in the grid. There is too much space above my picture, the negative space should be balanced.
4. Reflections
Experience
Since this task was a form of self-expression, I initially felt excited to work on it since I love delving into self-expression art, so I thought it would be similar. Little did I know, it was not. This task made me realize the biggest difference between design and fine art; art is a free form and can be open to any interpretation, however, in design, you must communicate your message clearly. Thus, it took me quite the number of attempts to get to my final key art, which is what the design process should be. I struggled in finding which parts of myself I wanted to brand, so that forced me to look inward and think about my positive aspects.
Observations
In midst of my numerous attempts of designing the wordmark, I've noticed I tend to gravitate towards niche/horror-looking designs which are very experimental. However, after every feedback I get from the lecturer, each of my attempts at the wordmark get more and more simplified and 'corporate'. It was almost like I was cleaning up the 'unnecessary' parts of the wordmark to get a straightforward and clean version of it. And this process is basically what branding is; to rid of the unnecessary distracting parts to make your brand have one distinctive factor that you can be known for.
Findings
An essential part of creating a brand is to know who your target demographic is; and to communicate their wants and needs coherently through your design. One thing that confused me in this task was how to separate my perspective and interpretation of the design from the objective perspective. Since the task is to curate how I want to be viewed by controlling how I want to be viewed. And that exact idea perplexed me because I did not know how to objectively control someone's understanding, but with branding you are in control of 'manipulating' your target audience. By controlling the narrative and giving them what they want, you can steer their thoughts and behavior.
Week 4:
 |
Fig. 5.0: Book Cover of Vignelli Canon on Design (5/17/2024)
|
"The notion of identity and diversity is a recurrent
theme in both two and three dimensional design.
In a Corporate Identity Program enough
diversity must be provided to avoid sameness and
to increase attention.
Too much diversity creates fragmentation -
a very common disease of badly designed
communication. Too much identity generates
perceptive redundancy and lack of retention.
Therefore, it is necessary to achieve the proper
balance between those components, or to offer
enough flexibility in any given design solution
to overcome those pitfalls."
In this excerpt, the author talks about the necessary balance between identity, diversity, and uniformity in design. He describes how an excess of one thing could lead to bad outcomes, and while I agree with the statement, I find it interesting why this is. We live in a society where there is an industry standard that designers must follow, otherwise their work will be rejected. Yet, at the same time, the industry searches for creativity, thus a conundrum is formed. There is a fine line between 'breaking the rules' and 'creativity' that is generally accepted by the industry, and that line is often blurry. Of course, this isn't to say that all experimental designs are rejected. On the contrary, they are celebrated and encouraged in some cases.
"We like to play with
those elements. We like to design a strong identity
program in which there is enough room to play
appropriateness without loosing identity.
A typical example would be a book series where
the basic identifiers are constant and the specific
illustration changes from cover to cover."
I liked this paragraph because it is directly related to this task, which is to create a visual identity through the wordmark. The thing about good design is having a strong and consistent identity whilst being flexible and adaptive. (Something I should keep in mind in my own future designs.)
"Throughout our creative lives we have sifted
through everything to select what we thought best.
We sifted through materials to find those for which
we have the closest affinity. We sifted through
colors, textures, typefaces, images, and gradually
we built a vocabulary of materials and experiences
that enable us to express our solutions to given
problems - our interpretations of reality.
It is imperative to develop your own vocabulary of
your own language - a language that attempts to
be as objective as possible, knowing very well that
even objectivity is subjective."
This is an excerpt from the last paragraph of the book, I especially liked the way the author concluded it. It emphasizes how, despite all the centuries of work that typography has been based off of, the essential design rules that have been made, and the industry standards that have been set, design is subjective. Even objectivity is subjective.
.jpg)
.jpg)
Comments
Post a Comment