13.05.2024 - 21.06.2023 | Week 4 - Week 9
Maisarah binti Mohd Sufian | 0358458
Interactive Design | Bachelor of Design (Hons) in Creative Media
Task 2: Key Artwork
___________________________________________________________________________________
LECTURES
Week 4
Designing Type
Type Design is a form of artistic expression.
General Process of Type Design
1. Research
Before creating a typeface, it's important to study typography history, anatomy, and conventions. Understanding terminology, spacing, and the intended use of the typeface is crucial. Examining existing fonts can provide inspiration.
Before creating a typeface, it's important to study typography history, anatomy, and conventions. Understanding terminology, spacing, and the intended use of the typeface is crucial. Examining existing fonts can provide inspiration.
2. Sketch
Designers can sketch using traditional tools like brushes and paper or digital tools like Wacom tablets. Each method has its pros and cons.
Designers can sketch using traditional tools like brushes and paper or digital tools like Wacom tablets. Each method has its pros and cons.
3. Digitize
Professional software like Fontlab and Glyphs App are used to digitize sketches. Some designers use Adobe Illustrator, though this is not always preferred. Attention is paid to both overall form and counter forms for readability.
Professional software like Fontlab and Glyphs App are used to digitize sketches. Some designers use Adobe Illustrator, though this is not always preferred. Attention is paid to both overall form and counter forms for readability.
4. Test
Testing helps refine the design and provides valuable feedback. Readability is important, especially for text typefaces.
Testing helps refine the design and provides valuable feedback. Readability is important, especially for text typefaces.
5. Deploy
Even after deployment, issues may arise. Thorough testing during prototyping helps address these problems.
Even after deployment, issues may arise. Thorough testing during prototyping helps address these problems.
Week 5
Perception & Organisation
Contrast:
Size = The reader's attention is directed to a point by contrast in size. For instance, if there is a huge letter and a little letter, the big letter will be seen before the small one. Making a title or header substantially larger than the body content is the most typical usage of size.
Form = Contrast of form refers to the difference between a capital letter and its lowercase counterpart, or between a Roman letter and its italic variation. Condensed and enlarged variants of the typeface are also included in the contrast of form.
Structure = Structure refers to the many letterforms seen in various fonts. For instance, an italic and a blackletter, or a monoline sans serif and a conventional serif.
Texture = The contrast of texture is reached by combining the contrasts of size, weight, shape, and structure and applying them to a block of text on a page. Texture describes how the typeface appears as a whole, both up close and at a distance. This is dependent on both the letterforms themselves and their arrangement.
Direction = The opposition between vertical and horizontal, as well as the angles in between, is known as a direction contrast. The arrangement can change dramatically by flipping one word. Additionally, text blocks can be oriented vertically or horizontally. Adding towering columns of small lines and large blocks of long lines together can also produce contrast.
Colour = According to the usage of color, a second color is frequently less dramatic in values than only black on white. As a result, it's crucial to consider which component should be highlighted and to pay attention to the tonal values of the colors that are employed.
The Law of Similarity = the gestalt grouping law that states that elements that are similar to each other tend to be perceived as a unified group.
The Law of Proximity = the gestalt grouping law that states elements that are close together tend to be perceived as a unified group.
The Law of Closure = the mind's tendency to see complete figures or forms.
The Law of (Good) Continuation = humans tend to perceive each of two or more objects as different, singular, and uninterrupted abject even when they intersect.
The Law of Symmetry/Law of Praganz = you can find out more about these laws by viewing the links provided or simply Googling them. However, keep in mind that you will find variation in the interpretation and you will have to weigh them all to come to a consensus of your own.
___________________________________________________________________________________
TASK 2(a) - Key Artwork
Instructions
Fig. 1.1 Module Information
For this task, we must create a wordmark/lettering using our first name/pseudonym. The final outcome should be elegant, composed, functioning and communicable as a logo.
1. Ideation & Sketches
 |
| Figure 1.2 Inspiration from Pinterest. (27.05.2024) |
I listed down 2 keywords that would best describe my approaches to design:
- Fluid: A personal style preference, I like smooth types that are similar to a brush/fountain pen
- Free-flowing: I lean towards a free approach to design, and don't bend to rules as much.
I first sketched out 4 drafts,
 |
| Fig. 1.2 Sketches. (27.05.2024) |
2. Digitisation
I realised that the a between the M and i was not so clear, so I fixed that while digitising.
 |
| Fig. 2.1 Digitising First Attempt. (03.06.2024) |
Mr Vinod commented that my strokes were inconsistent, especially for the letter a. So, I fixed that. I also decided to get rid of the star, as it looked a bit out of place.
 |
| Fig. 2.2 Further attempts. (03.06.2024) |
 | |
|
3. Colour Scheme
I struggled a bit to find a good colour scheme that I thought suited my logo, and aligned with my personal tastes.
 | |
|
I thought the first scheme looks too much like toothpaste, while the second one lacks contrast. For my final attempt, I decided added more contrasting colours, such as the pink and blue.
 | |
|
4. Logo Animation
I used After Effects to animate my logo, I wanted to emphasize fluidity.
 |
| Fig. 4.1 Animation process. (10.06.2024) |
 |
| Fig. 4.2 Final animation. (10.06.2024) |
Task 2(b) - Key Artwork & Collateral
1. Collaterals
I then used these colours to work on my collaterals, I chose collaterals that can be used for everyday use, while still being able to look aesthetic. I avoided apparel items, because personally I would not wear them.
 |
| Fig. 5.1 Collateral Process (10.06.2024) |
 |
| Fig. 5.2 Three collaterals (10.06.2024) |
2. IG Page
After expanding my identity, I worked on my instagram page.
 | |
|
Submission
 |
Black wordmark on white background (21.06.2024) |
 |
White wordmark black background (21.06.2024) |
 |
| Colour pallete (21.06.2024) |
 |
Wordmark in actual colours on lightest shade of colour palette (21.06.2024) |
 |
| Wordmark in actual colours on lightest shade of colour palette (21.06.2024) |
 |
Wordmark Animation BW (21.06.2024) |
 |
| Word Animation Actual colours on lightest shade of colour palette (21.06.2024) |
 |
| Word Animation Coloured Reversed (21.06.2024) |
 |
| Collateral #1 Wallet (21.06.2024) |
 |
| Collateral #2 Bottle (21.06.2024) |
 |
| Collateral #3 Shopping bag (21.06.2024) |
 |
| IG Screengrab (21.06.2024) |
IG Link: https://www.instagram.com/maizcollaterals/
___________________________________________________________________________________
FEEDBACK
Week 5:
General feedback:
1. The logo must have meaning, a design without meaning is soulless.
2. It must represent what it means to you and the clients.
3. Be aware of competition, refrain from creating a generic design that is similar to others.
4. The design must be impactful and distinct.
5. Retain objectivity and make sure the design is readable and legible to an unsuspecting person.
6. Avoid white space, it reduces the impact.
7. Incorporating personal preferences into a design can be a hit or miss, and one way to judge it is to look at it from the perspective of a client. It may narrow down a target audience. It can instead be incorporated in a minimal way that can be maneuvered around.
8. Look at the design from a perspective of would you buy something with this logo? (shirt, print, etc.)
Week 6:
General feedback:
1. Consider the fact that the logo will be reduced.
2. Colours should not be too light, avoid pastel, use a high contrasting colour as a highlight.
Specific feedback:
1. The letter a looks weird, fix the strokes so that it is consistent with the rest.
2. The tail of the z makes my logo look bottom heavy.
___________________________________________________________________________________
REFLECTION
Experience
We were given ample time to work on our tasks in class, and Mr Vinod provided clear guidance on our tasks. During the process of creating the logo and expanding the brand identity, I experienced a lot of difficulty. Initially, I was slightly overwhelmed by the challenge of encapsulating a brand's essence into a single visual representation. However, as I delved deeper into research and ideation, I found myself becoming more confident in my abilities.
Observation
This task required me to think beyond the logo and consider how various elements such as color schemes, typography, and imagery could cohesively represent the brand across different platforms. I had to maintain consistency by being creative. I learned new tools, such creating mockups, and improved my ability to create more high quality work.
Findings
Although my work is not exactly professional level quite yet, I am content with what I've produced. I found that creating a brand is not quick work, and it requires numerous research and planning.
___________________________________________________________________________________
FURTHER READING
 |
| Fig. 7.1 Branding For The People |
I read up on how other brands established their identity, for example McDonald's. The brand uses it's well-known yellow arched logo for a number of products, such as the handles for packaging and even support for sign structures.
 |
| Fig. 7.2 Pentagram |
Comments
Post a Comment