Advanced Typography - Task 2

25.10.2023 - 17.11.2023 / Week 5 - Week 8

IAN CHOO XIN ZHE / 0369451

Advanced Typography / Bachelor of Design (Honours) in Creative Media

Task 2

LECTURES

Lecture 5: Perception And Organisation

One important factor that affects how readers receive and comprehend textual material is perception. It includes how people interpret and process typography's visual elements, like layout, letter spacing, and font selection.

- Contrast in Typography

Different font sizes, weights, styles, colours, and spacing (leading and tracking) can all be used to create contrast. Typographers and designers can create visual hierarchy, highlight particular text, and enhance readability by deliberately using contrast. A key component of typography is the effective use of contrast, which enables compelling and unambiguous communication in both printed and digital media.

Fig 1.1 Contrast in Typography

- Size

Size describes an intended variation in font size and other type element dimensions. Within a text, this variety is utilised to establish hierarchy, emphasis, and visual interest. Bigger font sizes are appropriate for headlines and crucial information, whereas smaller font sizes work well for body content and less significant elements. Typographers and designers can improve a composition's visual hierarchy and facilitate readers' comprehension of the text by employing contrast in size. One essential typographic technique that enhances readability and a design's overall effect is size contrast.

Fig 1.2 Size Contrast

- Weight

When we talk about weight contrast, we're talking about the deliberate application of varying thicknesses or boldness levels within typefaces to produce emphasis, hierarchy, and visual appeal. By changing the boldness of text elements, some characters or words will appear heavier and more prominent than others, while other text elements will remain lighter. When it comes to separating headlines from body text, highlighting important ideas, or directing the reader's attention through a composition, contrast in weight can be very useful. It contributes significantly to the creation of a visually appealing and well-balanced typographic design by giving the text depth and contrast.

Fig 1.3 Weight Contrast

- Form

Deliberate changes in the form and style of letterforms within a text are what create form contrast in typography. This can include using different typefaces (such roman and its italic variant) or selecting condensed or expanded variants of a typeface, as well as variations in capitalization (uppercase vs. lowercase). Typographers and designers can add visual hierarchy and diversity to their compositions by utilising these form-based contrasts. While lowercase is typically used for body content, uppercase letters can be utilised for acronyms or headlines. Certain words or phrases can be emphasised by using italics, and changes in space and visual impact can be made to typeface variations that are extended or condensed.

Fig 1.4 Form Contrast

- Structure

Typefaces enable designers to establish visual hierarchy and emphasis in their compositions since they frequently have unique styles, weights, and letterforms. These variations can be used by designers to improve readability, draw attention to important details, and provide visual interest.

Fig 1.5 Structure Contrast

- Texture

Texture-wise, contrast in typography refers to how type elements are used to provide a variety of tactile and visual effects in a design. Designers change the text's density, spacing, and placement to accomplish this. Textural contrast can be achieved, for instance, by mixing distinct typefaces with contrasting textures, such as a script font with a sans-serif font, or by changing line spacing (leading) and letter spacing (tracking). The objective is to enhance a typographic composition's tactile and visual aspects with more depth and intrigue. Designers can make their typography more visually engaging and dynamic by enhancing its readability, hierarchy, and overall effect through the smart use of textural contrast.

Fig 1.6 Texture Contrast

- Direction

Direction contrast refers to the way that type elements are positioned and aligned within a design. In order to provide eye-catching layouts and distinctive visual interest, this technique plays with changes in text flow, such as horizontal and vertical text or diagonal groupings. It can be used to draw attention to certain words, establish visual hierarchy, or give a composition more movement. Typographers and designers can improve the visual appeal and readability of their work by using contrast in direction, which results in a more visually arresting and captivating typographic design.

Fig 1.7 Texture Contrast

- Colour

Colour contrast is a tool used frequently by designers to draw attention to important details, provide visual interest, and direct the reader's eye across a composition. This can entail utilising more muted colours for body text and bold, contrasting colours for highlights or headlines. Colour contrast is an effective technique for improving typographic designs' aesthetic appeal and visual impact while also facilitating reading, communication, and overall appeal.

Fig 1.8 Colour Contrast

- Form in Typography

In typography, form describes the way characters and letterforms within a typeface are arranged, shaped, and look. Every typeface has its own forms, which are determined by elements like the individual letter shapes, the thickness of the strokes, the presence or absence of serifs, and the overall design aesthetic.

Form is a factor that typography designers take into account when choosing a typeface for a given project. Through their forms, many typefaces communicate different moods, ideas, and personalities. A sans-serif typeface with thin, consistent lines may imply modernism and simplicity, but a typeface with bold, thick strokes and serifs might reflect tradition and authority.

When choosing a font, line style, and general layout, typography designers also take form into account. The shape of letterforms is an essential component of typographic design since it affects reading and legibility. In printed and digital media, proper form is crucial for effective communication and eye-catching visuals.

- Gestalt Theory

A group of German psychologists created the Gestalt theory around the beginning of the 20th century. It is a psychological framework that focuses on how people see and interpret their environment. The German term "Gestalt" means "form" or "configuration," and the theory it refers to investigates the notion that individuals often view objects and their interactions as ordered wholes as opposed to separate components.

The key principles of the Gestalt theory include:

Law of Similarity: In perception, objects are grouped together based on shared visual properties, such as size, colour, or shape. This idea is essential to comprehending linkages and patterns in the environment.

Law of Proximity: Nearby objects are interpreted as a group or as a single entity. This idea clarifies why individuals arrange information visually.

Law of Closure: To produce a whole and coherent form, people often mentally fill in the blanks or close gaps in incomplete figures. This idea demonstrates how we tend to notice patterns even in the absence of certain details.

Law of Continuation: People typically see lines or forms as a single object or line rather than as multiple disjointed portions when they follow a continuous course. This idea explains how we interpret routes and lines that flow.

Law of Symetry: People find it easier to recognise and understand forms when there is symmetry, as it provides a sense of balance and order. People instinctively put pieces in symmetrical configurations and see them as a single, cohesive whole. Our visual perception relies heavily on the idea of symmetry, which enables us to arrange complex visual data into logical and aesthetically beautiful patterns.

Law of Simplicity: This idea highlights how individuals will always go for the clearest, most logical explanation for what they observe rather than one that is intricate or nuanced. Clarity, unity, and economy are prioritised by it, guiding our vision in a way that makes sense of the world.

Fig 1.9 The 6 Gestalt Principles

INSTRUCTIONS

TASKS

Task 2A: Key Artwork

In this task, we have been assigned to create and understand what a Key Artwork is. Within the framework of this task, the primary artwork fulfils two functions. It serves as a wordmark or lettering that is mostly applied to personal identification. But it's also regarded as a piece of art in itself, frequently making an appearance as collateral materials on things like T-shirts, lapel pins, and posters. This important piece of art has the intriguing quality of being able to be dissected into separate shapes that, when rearranged, produce colourful patterns. These patterns are essential to maintaining and enhancing the artwork's visual character.

Next, we are required to create a variety of products, such as an animated key artwork, a lapel pin, and a T-shirt. In addition, to set up an Instagram account, which is crucial to turning the main piece of artwork into a brand. We will first concentrate on the animated key artwork and strive to polish the final product there. The ultimate objective is to develop a unified, captivating brand that appeals to the target market.

Process & Progress

Fig 2.0 Mindmap

A blank canvas or, in my case, a blank mind was where it all started. I started the assignment by using the method of mind mapping for ideation. My intention was to allow my imagination go wild, to catch every idea, no matter how tiny or odd, and to release a flood of ideas. This process provided the foundation for my design journey, as I watched the interconnected web of ideas sprawl across the page.

It was time to focus on the main keywords that would guide the design of my lettermark. Two terms jumped out during the process: "laid back" and "versatile." These were more than just words; they encapsulated the main idea I wanted my lettermark to represent. "Versatile" represented my capacity to adjust to different creative difficulties, while "laid back" summed up my character and way of living.

Fig 2.1 First Drafts

Fig 2.2 First Drafts

My first design sketch lacked the depth and level of detail necessary to produce anything genuinely amazing. I felt as though I had just scratched the surface, having grasped a small portion of the opportunities. With this realization, I decided to embark on a quest for deeper exploration. It was obvious what I had to do: I had to think bigger, dig deeper, and broaden the scope of my creative vision.

Over the years, I've come to realise that the creative process is full of surprises. The most profound ideas can occasionally come from the most unlikely sources. I started to accept that creativity is unpredictable and saw each diversion as a chance to find hidden treasures.

Fig 2.3 Gaming/Tech Font

I set out to investigate the vast ocean of typography on Pinterest. I saw a potential subject there amid the typefaces and lettermarks: a tech-inspired, gaming-inspired font that had all the right vibes. I suddenly started considering replacing my keywords with "gaming and tech savvy." It seemed to be the ideal fit for the course that my design was taking. This new option matched my interests in technology and gaming.

Fig 2.4 Sketching Process

I was excited about this new path and started to sketch down each idea that came to me. However, as I examined my drawings, I couldn't shake the uneasy feeling I had. My instinct told me that it didn't seem as good as I had imagined, but it just wasn't convincing. It was an unclear and challenging moment at the same time. I was aware that the goal of this creative journey was to push limits and aim for perfection, even if it required starting over from scratch.

Fig 2.5 Abstract Icons and Shapes

And now, when I was delving deeply into my artistic exploration, I then stumbled across another potential idea. Abstract shapes and marks are like a buried treasure trove that I discovered. To be honest, I've always liked abstract shapes a little bit. I've always been fascinated by those unusual, distinctive, and wonderfully weird shapes for some reason. It resembles a puzzle in which each component is extraordinarily flawless.

I sensed the possibility of something noteworthy as I ventured farther into this abstract universe. It was like to discovering a mysterious island brimming with opportunity.

Fig 2.6 Windmill looking Icon

Out of all the symbols I created during this creative frenzy, the one that looked like a windmill stood out like a lighthouse in the night. It was like falling in love at first sight, and I couldn't help but think that it could be used as a symbol for my art. I then realised that the initials of my name: ICXZ (Ian Choo Xin Zhe) could actually be extracted from the windmill icon, I really liked the uniqueness in that and was excited to proceed further.

Fig 2.7 Digitalised Version of Both Ideas

I started the digitalization process in Adobe Illustrator. Both the gaming/tech-inspired idea and the windmill idea developed in the digital realm. Something interesting happened, even though at first I had thought of "gaming and tech-savvy" as the new keywords for the gaming/tech-inspired concept. I discovered that the keyword "laid back" could be used to describe both designs as I worked on them. Their lowercase lettering exuded an air of casual approachability. It felt as though a common thread connecting all of the designs had been found.

I gave Mr. Vinod a look at my work during the next class to seek for feedback. We had an open discussion about the designs, the keywords, and the messages they represented, taking into account every detail. Eventually, we both came to a conclusion. The windmill idea was clearly the better one because of its unique appeal. It seemed to be the ideal representation of the keywords, signifying versatility, laid-back and freedom. The windmill was undoubtedly the focal point of the display, and I was eager to watch how it would develop further during the next phases of my project.

Fig 2.8 Updated Versions of the First Draft

Mr. Vinod advised me to consider alternative approaches to portraying the letters "i" and "z" since he thought they appeared a little strange and out of place. I then developed two iterations of the revised i and z. I chose to go with the z that had sharp corners since I thought it looked nicer than the one that had rounded edges.

Fig 2.9 Colour Scheme Exploration

It was time to set the scene with the ideal colour palette as the windmill concept earned its due attention. I was keen to make my design stand out because I felt this was an essential step in making it a reality. I therefore started on a new journey, this time looking for the perfect colours that would characterise my design and, consequently, my personal identity. I cruised Behance and Pinterest, looking through the personal branding efforts of other designers. Opening a treasure chest of inspiration was the experience, as every project showcased a distinct colour story. These journeys into the artistic spheres of others made evident the ability of colour to evoke strong feelings and send a message.

Fig 2.10 Chosen Colour Palette

I chose a colour scheme that would produce a harmonic symphony of feelings after giving it some thought and researching colour psychology thoroughly. The two main components of my colour scheme are orange and blue. Blue, as my personal favorite, was an obvious choice. It was an excellent portrayal of peace and calm, exactly what I wanted to portray. In the hectic world of design, its calming attributes would offer a visual oasis. On the other hand, orange stood for creativity and imagination. It was like a spark of inspiration, igniting the flame of fresh ideas and artistic thinking. Orange was the pulse of energy that would breathe life into my design.

I made the decision to incorporate off-white and dark grey into the mixture to go with these vibrant colours. Off-white was more in keeping with my personal taste in design, with its delicate and slightly retro feel. It was a tribute to my passion for contemporary retro graphic design, bringing nostalgia into the present day. To keep the colour palette balanced, dark grey was used in place of pure black. Sometimes, stark contrast produced by pure black could strain the eyes after extended viewing. Dark grey produced a pleasing visual experience by adding structure and depth without being overly dramatic.

Fig 2.11 Colour Palette with Names & Hex Values

With this carefully selected colour palette, I felt like I was creating a canvas where calmness and creativity would dance together. It was an invitation to embark on a visual adventure, where every shade and tone had a story to tell.

Fig 2.12 Chosen Typeface: General Sans

I chose the General Sans typeface to provide a modern and sleek image for my brand. This modern sans-serif font complements my concept well, expressing polished simplicity and beauty. Its clean letterforms and well-balanced proportions combine to a visual language that is not only ageless but also connects with the modernity I want to convey through my brand.

Fig 2.13 Final Logo

In my design, I create a distinct visual hierarchy by making the "x" blue. The viewer's attention is immediately drawn to this central feature by the blue icon. It turns into a visual focal point that invites examination. The orange in the upper portion of the "i" and the blue in the "x" combine to provide a striking complementary colour interplay. This decision not only gives my design more colour, but it also represents the harmonious coexistence of separate elements. The two colours on the "i" represent how adaptable and versatile my abilities and style are. The orange top represents an explosion of invention, demonstrating my ability to adapt to various interpretations.

Fig 2.14 Logo Variations

Fig 2.15 Logo Extraction

Fig 2.16 Logo Construction

There are two reasons why the "x" was chosen as the icon. It not only corresponds with my name's initials, but it also takes on the meaning of extraction—a creative process in which the essence is condensed into a distinctive and identifiable mark. The contrast between these two logo iterations illustrates how adaptable my design methodology is. The symbol streamlines the story to ensure easy recognition and memory, while the main logo, with its detailed elements, provides a varied representation of my work.

Final Outcome

Task 2B: Collaterals

We have been tasked with building a cohesive brand from an animated key artwork, extending its identity over a t-shirt, lapel pin, and an Instagram account, as part of a multidimensional design project. The outcomes are fine-tuned through a refinement and branding process to guarantee alignment with the intended message and mood. The key artwork is transformed from the digital world to phsical mock ups like a t-shirt and and pins, where little areas are imbued with character. And last but not least, an Instagram account is required to showcase the brand.

Fig 2.17 Storyboard Sketching

I used a storyboard to sketch out the animation frame by frame. However, because the first two boxes didn't quite fit the overall idea, I chose to exclude them. They seemed out of place with the rest of the animation. It was similar to editing a story to ensure that every piece matched nicely and made sense together.

Fig 2.18 Animated Key Artwork

I used blur animations for the entry and exit, similar to how a curtain opens and closes on an animated stage. The blurring offered a nice touch, effortlessly bringing the audience into and out of the animation. After everything was said and done, I was pleased with the end outcome. Surprisingly, it turned out much better than I had anticipated. The blurring blended in with the motion, giving it a polished and professional appearance.

Fig 2.19 Logo & Shirt

When the animation was finished, the next step was to put the logo/key artwork into the real world. I put the logo on a shirt as a test to evaluate how well it functioned in a physical form. After being pleased with the performance of the logo on the shirt, it was time to widen the brand's horizons. As I transitioned from the digital to the physical space, I worked on collateral and mockups. These physical representations would help to increase the brand's visibility.

Fig 2.20 Namecard Sketch

Recognising the significance of a designer's identification, I started this branding journey by creating a name card - a basic piece of collateral. In the business world, this small but important object serves as a visual handshake. I imagined using the negative space within the "x" in the brand logo to create a unique arrangement for the card. The card's edges would encircle the "x," enclosing the primary content like my name, phone number, and email address within the famous symbol.

Fig 2.21 Namecard Digitalised

The incorporation of the negative space of the "x" onto the name card was a strategic decision to mark every interaction with the brand's logo. The "x" became more than a logo; it became a distinctive element, framing the vital facts and guaranteeing that every handshake, in the form of giving up a name card, conveyed the brand's distinct character.

Fig 2.22 Mockup of the Namecards

With the name card design taking shape, the next step was to apply it to a mockup. Mockups provide as a link between the digital and physical worlds, showing how designs will appear in reality. Recognising the importance of presentation, I set out on a hunt to find a high-quality mockup. Mockup quality is more than simply pixels on a computer; it is about generating a visual narrative that reflects professionalism. With their attention to detail and realistic rendering, good mockups have the ability to improve the overall presentation, making designs appear more polished and refined.

Fig 2.23 Notebook

A notebook mockup provides a blank canvas for your creativity and organisation. Placing the brand on a notebook not only represents professionalism, but also creativity and ideas.

Fig 2.24 Bottle

A mockup of a bottle combines practicality and branding. It elevates an ordinary item and associates the brand with a healthy lifestyle.

Fig 2.25 Tote Bag

Tote bags are more than just accessories; they are walking advertisements. A tote bag mockup enables the brand to travel and reach out to potential clients. It elevates a plain bag into a statement, making the brand a part of daily life and a personal style item.

Fig 2.26 T Shirt

T-shirts are worldwide, and it elevates the brand's own statement. It's a walking advertising for the brand, transforming it into a fashion statement.

Fig 2.27 Brand Posters

Posters are effective visual tools, and a brand poster mockup expands on the visual story. It's about making a broader statement and creating a lasting impression. In public settings, posters act as brand ambassadors, increasing visibility and recognition.

Fig 2.28 Brand Posters

A sign on a building mockup transforms the brand into a landmark. It's about establishing a physical presence in the environment.

Incorporating a variety of mockups isn't only for visual variety; it's also a strategic move to integrate the brand into various aspects of life. Each mockup serves as a touchpoint in the overall brand experience. The brand becomes an integrated part of both normal and remarkable occasions, from daily necessities like notebooks to larger-than-life posters and building signage.

Fig 2.29 Social Media Idea Sketching

Fig 2.30 Social Media Idea Sketching

With the design of social media postings, the next chapter in brand expansion occurred as it moved from the physical world to the digital landscape. Social media is a dynamic canvas that provides limitless opportunities to express the brand's personality, engage with the audience, and communicate relevant messages. The adventure started with a stream of ideas, each of which inspired a potential social media post. I accepted the creative chaos, allowing every idea to take the form of a sketch. The goal of the sketching step was to capture the essence of each idea in its raw form rather than to achieve perfection.

Fig 2.31 Social Media Posts in Illustrator

Each social media post was inspired by an overall idea of significance. I wanted each design to be meaningful as well as physically beautiful. Every post becomes a mini-story, telling a story, providing insights, or urging the audience to join in.

While diversity of material was encouraged, having a consistent look was critical. Each article added to an overall visual harmony, whether it was a thought-provoking statement, a behind-the-scenes peek, or a humorous graphic. This strategy meant that the brand's social media presence was more than just a collection of posts, but a curated gallery with a consistent identity.

Fig 2.32 Social Media Final Tile Covers

The digital collage took shape as each sketch evolved into a finished digital post. It wasn't just a collection of pictures; it was a visual trip. Every post, with its distinct personality, added to the brand's larger story. The completion of social media post designs represented more than simply a digital presence; it revealed a story in pixels. The process from sketches to finished postings represented not only the brand's visual identity but also its commitment to intentional storytelling.

Fig 2.33 Social Media Profile Screenshot

The completion of social media post designs represented more than simply a digital presence; it revealed a story in pixels. The process from sketches to finished postings represented not only the brand's visual identity but also its commitment to intentional storytelling.

Final Outcome

Instagram Profile Link: @icxzdesign

Fig 2.34 Final KA (BW)

Fig 2.35 Final KA (BW Inverted)

Fig 2.36 Final KA (Coloured)

Fig 2.37 Final KA (Coloured, Inverted)

Fig 2.38 Final KA (Alternate)

Fig 2.39 Final KA (Alternet, Inverted)

Fig 2.40 Final KA Animation

Fig 2.41 Brand Colour Palette

Fig 2.41 Brand Typeface

Fig 2.42 Final Name Card Design

Fig 2.43 Final Notebook Design

Fig 2.44 Final Bottle Design

Fig 2.45 Final Tote Bag Design

Fig 2.46 Final T Shirt Design (Front)

Fig 2.47 Final T Shirt Design (Back)

Fig 2.48 Final Posters Design

Fig 2.49 Final Sign Design

Fig 2.50 Final Instagram Page

Fig 2.51 Final Task 2 PDF

FEEDBACK

Week 4 - Task 2A: Key Artwork

Specific Feedback: Come up with more concepts and ideas, current draft is way too shallow and lacks exploration. Identify keywords and design my lettermark around it & remember less is not more.

Week 5 - Task 2A: Key Artwork

Specific Feedback: Option 1 is better suited to the keywords. However, the letter "i" and "z" look out of place and inbalanced compared to the "c" and "x". Colour scheme is approved and note it in my blog if I explored any other colour palettes. Next, start working on the collaterals and social media.

Week 6 - Task 2B: Collateral

Specific Feedback: Collaterals, mock ups and the logo animation are approved, move on to completing the social media posts. Explore ways to creatively display my brand in instagram posts & complete everything as soon as possible to move on to the final assignment of the module.

Week 7 - Task 2B: Collateral

Specific Feedback: Social media approved, tiles look okay and complete E Portfolio for submission.

REFLECTION

Experience

For me, embarking on this branding journey has been a very pleasurable experience. As someone who enjoys branding initiatives, getting into the process felt like going onto familiar yet exciting territory. However, this time was different, it was a journey of self-discovery as I played both designer and client. The idea evolved into a platform for personal expression and exploration.

Observations

Throughout this journey, it became clear that designing for oneself is a tough task. Navigating the creative process for personal branding was a mixture of enthusiasm and uncertainty. There were times when I felt lost, grappling with the matter of what I actually wanted to say.

The transforming potential of high-quality mockups was one notable observation. These digital canvases considerably improved the designs. The careful search for high-quality mockups proved to be more than simply a visual upgrade; it became a critical step in professionally presenting the brand and developing a lasting impression.

Findings

A significant fact emerged as the pixels settled and the brand identity came together: every design choice is a strong communicator. Each decision, whether it's the choice of a typeface, the creation of a colour palette, or the design of a visual narrative, is significant. Every piece must be carefully picked in order to convey a meaningful and effective message to the audience.

In essence, the journey shed light on the complicated dance of intention and visual representation. Designing for oneself requires not only technical ability but also an in-depth understanding of one's own story and the message they intend to express. As the curtain lowers on this personal design journey, the discoveries serve as pointers for future endeavors, each design decision a brushstroke on the canvas of intentional expression.

FURTHER READING

Investopedia: Brand Identity: What It Is and How To Build One

99 Designs: What is brand identity?

The Branding Journal: The Power of a Strong Brand Identity

Logo: 6 Tips To Create The Best Wordmark Logo Design