Christel's Design Workspace

~ My NM3217 design documentation ~

[mynnaloo]

Final Project: Brand Style Guide 

What a journey this has been~

Personally, I had not really reflected upon myself as an individual and how I wanted to portray and communicate myself to people, especially in terms of design. Hence, I took a long while in deciding how I wanted to approach this project but I eventually got there! It started with the ideation process, which is something we have learnt to practice throughout the assignments we have been doing. I found myself realizing the very different aspects of myself, which also translates into my design style. For instance, I recalled that my friends had always told me that on first impression I seem very cool, and serious but after getting close to me, they see a more weird, and funny side. I felt that such essences were also reflected in my design as I tend towards either being minimalistic, or a more wacky style. I managed to incorporate both elements in hopes of creating a unique brand identity for myself 🤩

As covered in the colour theory lecture, I realised colour takes up large importance in communication design and our everyday lives. Green connotes dependability, fertility and also being environmentally-friendly, traits which contribute to the sustainability and timelessness of the brand. Yellow conveys notions of playfulness and fun, and easily commands the attention of the viewer! I really like both colours and the meanings behind the colours in contributing to the essence of my brand. 

As for the critique sessions, I initially had 3 different logos, Two M, a logo of my face, and a smiley face with 'm's as the eyes. I liked all 3 and I felt they had gone with my image, yet, I was advised to go with Two M because of it's strong brand recall value and interesting narrative behind it. Although I liked the logo, I at first had a hard time thinking of how to further expand out from the logo, in order to create a unique branding which is consistent in all my other deliverables later on. I realised I could leverage on my other logo contestant, a doodle of my face. That's how I managed to branch out to slowly create and weave in elements, typeface, and colour to do so :) 

My classmates had also pointed out they really liked the blob illustration, hence, I improved upon it even more to suit my branding. I was also drawn to the idea behind a blob, as it is versatile and can change into anything, which is something that I aspire to be, while retaining unique distinctive features (i.e., green and yellow colour). This is further illustrated in the other elements I had designed, which included the green and yellow colours of my brand in order to establish a cohesive and consistent presentation of the brand. Hence, while elements can vary (showing the flexibility and versatility of the brand), the look and feel of the brand remains unique and consistent (green and yellow, black line style). 

As for the typeface, I chose a sans serif font, Moon for my logo and Quicksand for any other texts but with varying font weights, because it contributes in showcasing the brand as clean, minimalistic and fun. Using a serif font would possibly convey a different mood (more formal and print-style like) and send a different message to the viewer which is contrary to the brand value. 

After the creation of the deliverables, I was advised to work on my business card. Initially, the flip side of the card also housed a centre-aligned text over a blob. My classmates raised up the issue of readability of the text, to which I had streamlined the entire business card design to get rid of the blob instead because it was quite a hindrance, rather than contributing to the brand identity. Thus, I had moved my mascot blob instead to the back while the front had just my logo, Two M, which I think is more coherent as it casts a spotlight on the logo instead of including the mascot blob and logo together, which might lead viewers on into thinking both are included in the logo. I had also altered the alignment of the text to left because as mentioned in the lecture as well, such alignment better aids in readability as it guides the reader's eyes easily and seamlessly. 

I had enjoyed the design process especially using the Adobe suite software, Photoshop, InDesign, and Illustrator. In particular, I had utilised illustrator in creation of my elements, and deliverables to do so. As seen from the layers panel, I found it quite useful to have many layers to be more efficient in working on something specific (although the many layers can be quite overwhelming when finding a particular layer!). I mainly utilised the fill and stroke function for easy colouration of my design elements. I also found the smooth tool under the Pencil extremely useful in my branding image because I wanted smooth and curved lines as opposed to hard and sharp edges. I also discovered the usefulness of the pathfinder tools in applying an effect on multiple elements (i.e., applying gradient or creating cutlines for my mascot/elements and applying drop shadow after). As for the donut charts, I had first created a straight rectangles with both green and yellow overlapping each other, and added it as an art brush. I then applied the brush style to a circle shape which had enabled me to create a donut chart as I had wanted :) 

Overall, I had so much fun working on this branding guide, and it definitely was a good conclusion to the module as we were allowed to incorporate both theory (as covered in the lectures i.e., colour theory, typography, Gestalt principles, branding etc.) and practically execute it. The ideation and design process we had been practicing over the previous assignments, along with valuable input from Kai and our classmates, was definitely a comprehensive and necessary process that I hope to replicate in future design projects~ Thank you for reading my design documentation process thus far 🥰

[mynnaloo]

Assignment 3: Information Design

I was definitely very overwhelmed upon realizing we had to create an infographic for our final assignment. I had only used Canva once to do up an infographic and even then, I had taken for granted the different elements, icons and pre-made templates ready to be used. Furthermore, I had a lot of ideas to explore for the infographic since we had carte blanche over how we were going to approach it. So, initially, I had played with the ideas of a history of animal crossing, history of local food in Singapore, or even popular drinks in Singapore, and maybe even a Harry Potter infographic.

But I eventually decided on going with the topic of Salmon. This was because I always appreciated salmon as a versatile fish and I had not really known the health benefits of salmon until I had to source out for data on this topic. I soon realised that was just so many ways to approach this topic as an infographic, with the key objective of communicating your message, which has been abstracted from a larger data source, to your audience in order for them to easily comprehend visually. With this knowledge in mind, I first came up with sub-topics of salmon (i.e., different species, dishes, global suppliers/consumers, health benefits, and differences between wild and farmed salmon). I tried to organize them all into 1 infographic and realised this was too much and there was no flow of the information because it had seemed like I was pulling random facts about salmon and forcing them into one graphic design. After coming up with a few very rough sketches, I decided on the theme of “Salmon consumption today”, including both health benefits of consuming salmon as well as the global distribution of salmon consumption. After deciding so, I was able to finalise on how I wanted my visuals to appear. 

Firstly, I had been inspired by infographics including conveyor belt, sort of giving off the factory vibes and showcasing the process of something. Hence, I included the conveyor belt with the different forms of salmon as a consumable product. This ranged from salmon sushi, caviar (roe), fish oil supplement, canned salmon, and salmon fillet (cooked/grilled). This was quite a tedious process because all the elements used were created using the pen and pencil tool on Illustrator, with a mouse. It could be quite challenging and frustrating at times since using a mouse diminished the amount of control needed to create an illustration I was satisfied with. But with the help of the smooth tool and colour fills, I was able to better manipulate the elements to something more ideal and easily achieve a solid colour which is quite characteristic of infographics. To my understanding, and from what was covered during lecture, infographics have minimal textures and elaborate details which are more characteristic of artworks and other designs. However, the medium of infographics was meant to really effectively and visually communicate information easily to an audience. One that is in a way that is most comprehensible with the aid of visuals. Therefore, I tried to draw the line between adding too much details and also making sure the visuals were still recognisable. I think this assignment ties in both concepts of what we had covered for assignment 1&2 and I was able to tap on that while working on this project. The process of abstraction allowed me to create icons and salmon dishes that were relatively simple yet still retaining details so the viewer would be able to identify them. 

As for the critique session, I was advised to add more details to the conveyor belt because it looked relatively flat. In addition, i also worked on the arrangement of my elements on the wall of the factory. At first the chalkboard was rectangular, but I scaled it down by half, which gave me room to move the window and play around with the title. This is because my title was not obvious before the critique, I had incorporated the title into a small button on the left. But ever since, I was advised to play around with the typography and scale up the salmon fish to include the title. I think it worked very well considering considering there is much more hierarchy now in the typefaces used. However, I still kept to the use of 2 typefaces, calderock and brandon grotesque. This is because I really like calderock as a bold sans-serif font, which helps in drawing attention of the viewer immediately. I utilised brandon grotesque as it had a thinner stroke and less bolded font, which is good in indicating to the viewer that it is a body text for further elaboration on the header. Furthermore, I was also advised to add a white strike around my piechart because it was quite indistinct at first. Thus, I did so and also changed around the colour scheme to show contrast between the different segments, while still keeping to a relatively salmon-ish colour. 

For this project, I had use Illustrator, mostly working with the pen, pencil and smooth tool. In addition, I also used the shape and shape builder tool in creating precise shapes in my infographic, such as if I need a semi-circle or the shapes that make up the canned salmon and supplement. I had also mainly used the colour fills to achieve most of my desired colours in the graphic, but for the finer details, I had used the brush tool to create things like the reflection of the caviar roe or the supplement pills. I had used a font I really like, Calderock for most of the text. From the typography lecture, I understood that we were recommended to used 2-3 fonts maximum, which I tried to do. However, I used different text for the red button at the top and the chalkboard because I thought it would help in enhancing the identity of these elements. 

To conclude, I was a bit dreadful to start this assignment because I was worried about the amount of work needed to be put into it. From the process of procuring relevant data from an infinite amount of information from the internet, to organizing relevant information, and finally, sketching and coming up with the final prototype. I have definitely gained a deeper understanding, and appreciation of infographics and the many different types. It really is not an easy process, and the designer has multiple tasks to do throughout the whole process! Even the creation of icons to aid our understanding of the information visually, such things also require time and effort in considering how best to represent the information.

[mynnaloo]

In-lecture Exercise G: Creating Patterns

Hopefully I achieved some form of darker shade in the spectrum :O

[mynnaloo]

Assignment 2: Storytime!

Initially, I was quite nervous on working on this project because I had not attempted to tell a story in just a few photographs. But then I somehow got inspiration from watching TIk Toks, because I realised that a lot of these short videos manage to tell short, but also interesting and funny stories in a limited amount of time. Hence, I went on there for some inspiration, which was also accompanied by my recent discovery of a local YouTuber who does food challenges (Zermett Neo!) and the fact that I get get hungry by watching food-related videos/mukbangs. Thereafter, I drafted out a storyboard in my brainstorming phase. I realised the importance of storyboarding in this whole process because I was able to try out possible angles of portraying my subjects and pen down additional annotations which aided me in taking my desired photos in the next stage. 

During the phototaking part of the assignment, I was able to experiment with different angles, lighting, and placement of my subjects/props in order to ultimately discover the best shot that adds value in conveying my story to an audience. I think what aided me during the assignment were the examples covered during lecture, where the different types of angles were explained, and the possible implications of each angle. For example, the over the shoulder shot is a conventional Hollywood shot but one that easily communicates continuity. This was something insightful and facilitated in my storyboarding process as well. Hence, I likewise decided to include an over the shoulder shot of my character, which then depicts the main focus of the shot, which was the laptop screen showcasing Zermett Neo’s food video. This hopefully managed to create a sense of flow in the storyline and reveal the contents of what the character was watching in the first shot. 

This assignment had made me grasp the concept behind visual storytelling through photography and it made me appreciative of the amount of effort and detail in this process, from storyboard to execution, in order to communicate a certain message or story to the audience. This assignment also made me realise the importance of a title, which was the minimal text we could work with for this project. The title informs the reader of the flow and provides a certain structure to the story in order to guide the viewer in understanding and interpreting it. However, the main message was ultimately conveyed through the photographs which was something that made me reflect on the importance of visual elements in communication. 

As I worked on this process, I did face the difficulty of cutting out photos as I had too many to choose from. We were given the constraint of just 9 photos maximum, and I had to try different configurations of pictures in order to test out whether there would be a flow to the story if one image was taken out or the other. In the end, hopefully the 9 pictures carefully curated were able to effectively tell the story I had hoped to tell. Of course, this process was also further improved upon through the class critique. I was advised to pay more attention to the last concluding shot of my story as it was disproportionate (I had not kept the original proportions when scaling up the image). In addition, since my title was ‘Sharing is Caring’, the initial picture I had taken did not quite convey this idea. It was a shot of the main character squatting down to feed the banana to my dog. However, this was carelessness on my part because in my storyboard, I had wanted to include him as holding 1 half of the banana, and the other offering to the dog. Hence, as the class had also raised this up to attention, I had taken a better picture that best showcased the message of the story, which is sharing is caring. 

Working with Adobe Illustrator, I used mostly the platform for arranging my final storyboard and the curated photos. I also used many artboards when playing around with the possible flow of the photos I had selected, also giving each photo a border frame around them. I had used Procreate for my sketching of the storyboard as well. 

In sum, I have definitely gained more insight into the process of production as I was able to try my hand at the first stage of brainstorming and sketching out a storyboard, to the execution of it, curation of material, and finally, the finished product! It was quite a long process but I do see the necessity for each stage in creating an effective and interesting story by the end of it!

[mynnaloo]

In-lecture Exercise F: Colour Scheme 

#6D181F: a burgundy red, dark shade of red, readily captures attention at first glance, as indicated by the dress 

#8D5D4B: a warm, earthly tone of brown, conveys notion of nature, which mostly consists of skin colour in the photo

#E9D8CB: a muted but creamy white/beige which exudes purity, and also to a certain degree, calmness as showcased by both the blouse and a hue of the sunset at the background 

#89ACDE: a much dull shade of sky blue, which conveys feelings of serenity and peacefulness, as illustrated by the sky (maybe even the shorts?!)

#7B8089: a shade of grey which comprises most of the photo, indicating neutrality and practicality (walls, floor, gate, buildings), and might even seem gloomy 

[mynnaloo]

Assignment 1: Abstraction of Nintendo Switch

Before working on this project, I was intrigued by the whole abstraction process covered during lecture, and I discovered that our everyday icons and a lot of  designs around us are derived from this process of ‘stripping down’. Hence, I was quite excited to try my hand at this assignment. Initially I struggled with finding the right subject to abstract, I was contemplating on doing either the picturesque landscapes of Japan, to cup noodles/ramen, to even my pet dog. However, I realised that the Nintendo Switch I play almost everyday was an object that I could play around with on Adobe because of its relative complexity with many different buttons and relatively unique features.

What aided me the most during this assignment were the examples given in the lecture, and how abstraction as a process was explained. I recalled the example of the abstraction of a calculator and a computer, and how detailed they were as real life objects when taken as a photograph. However, the objects slowly turned out to be very minimalistic yet still identifiable even after many of the features were subsequently omitted after each stage. I was amazed as before this, I regarded icons for granted and discounted the fact that it might not be as easy as it seems to attain the many icons, signs, and abstracted pieces we see in our lives today. This assignment really made me see the inner workings of how signs are created and even in its simplest form, can still communicate a particular message to the receiver.

As I worked on this process, I was quite delighted to find that for every stage of abstraction, I was able to identify which features were absolutely essential in rendering the image still easily identifiable by the viewer. The red Mario casing in the initial stages were more for decorative purposes, which was considered as an unnecessary detail, and therefore, omitted from stage 3 onwards. Keeping in mind this exercise was about reducing multiple visual elements of an object to only typical features in order to be efficiently recognised, I also took into consideration the number of colours and tints in the final product. From utilizing red, black, white, and their varying opacities on Illustrator, I was slowly able to achieve merely using black and white for the final stage. I felt that many icons I encountered in life, be it digitally or physically, were mostly either 1 or 2 colours. As such, I applied this thinking into my work as well, in order to enhance the simplicity of my artwork.

However, my initial work before the critique session was only shades of black and white. I was advised to play around more with the first 2 stages of abstraction and incorporate more colour which would be more aligned with my original picture of the Nintendo Switch, which has a stark red casing. Hence, I was able to leverage on such areas of improvement so that my first 2 panels would better resemble the original source. With this improvement, I was also able to play around more with my subsequent panels, in taking out more unessential details such as buttons and colours. Another comment was that my last 2 stages had slightly oddly curved edges for the Nintendo Switch. With that in mind, I managed to correct this error with the pen and pencil tool, and hopefully the improvement made would be perhaps more visibly pleasing.

Working with Adobe Illustrator, I used mostly the pen tool and pencil tool to draw and trace the original image. I lowered the opacity of the original image in order to increase efficiency in attaining a vector artwork out of tracing. I also used the blob brush tool to colour certain parts of the artwork when the colour fill did not give me the exact outcome I wanted. As seen in the layers panel from my Illustrator workspace, the shape tool was also very useful in giving me precise circles that I considered as essential features for the buttons of the Nintendo Switch. It also allowed me to create accurate triangles and rectangles. With the freedom to play around with the different tints and shades of our chosen colours, I mainly altered the opacities of black and white to achieve a more greyish tone shown in my first 2 panels.

Overall, I enjoyed working on this assignment and I definitely became more cognisant fo the various signs and icons around me now, appreciating the process it takes in order to attain the final product, which should be both accurate and effective. I also felt that this practice of abstraction is something valuable in aiding us in our future design work, and I am looking forward in tapping on this learning point for any upcoming project I have!

[mynnaloo]

In-lecture Exercise E: Typography 

This typographic representation was not only a visual eye-sore but also terribly difficult to read 😢😭

Firstly, what stood out the most to be was the severe lack of contrast and choice of both typeface and font. The header was of greater font-size than the body which was good in guiding the reader when reading the text as it provides hierarchy to the typography. However, the choice of making the font hollow was quite problematic as it reduces the readability of the body text greatly and undermines the whole representation as a whole since it is of the same style as the title. To improve this, a choice of a non-hollow sans-serif would have been better in terms of looking cleaner and increasing readability. This would also produce contrast between the hollow slab-serif header, which might enhance the aesthetics of the typography. 

In addition, although the body text was of a smaller font size to indicate it is the body text, the use of centre-alignment was not the best choice as it makes the text hard to read. despite being consistent in the alignment for both header and body, this could be further improved by using a left-alignment, which again would increase readability since there is a hard edge present. 

[mynnaloo]

In-lecture Exercise D: Composing Compositions

I took 4 shots of my friend’s cool colourful keyboard. 

In the first picture, I took a standard photo of what a person would see when he uses the keyboard (Eye-level shot), including the computer screen as well (which is equally as colourful like the keyboard :) ). There is nothing particularly special to this shot but the rule of thirds was used where the keyboard was placed at the lower portion of the grid. Perhaps this draws more attention to the screen display of Rick & Morty, and less emphasis is placed on the keyboard itself. But overall, the colour from both screen and keyboard complements each other well. 

The long shot photo of the keyboard connotes the idea of capturing as many things as possible. In this case, a full front shot of the keyboard which essentially showcases the main feature of the product, which is the rainbow lights. 

The close up shot of the keyboard was taken from a relatively high angle, which displays, in greater detail, the more intricate details of the keyboard. It also adds depth to the photo since it is taken from an unorthodox angle (perhaps dutch canted angle?)

The final side profile close up shot also reveals the finer details of the keyboard, but not as much as the previous photo since it merely shows the side view. However, it does show the neat lines of colour which resemble a rainbow.

[mynnaloo]

In-lecture Activity C: Heinz Ketchup Ad

Signifier: Printed advertisement of slices of tomatoes, which are stacked to form a Heinz tomato ketchup sauce bottle.

Signified: Notions of total freshness and natural ingredients used in the products Heinz uses for their tomato ketchup.

For syntactics,  the unorganized alignment of the tomato slices similarly convey the idea of something natural, and untampered with which further adds to the credibility that their ketchup is produced with only organic tomatoes, unlike most foods these days with artificial flavouring.

This could be alluded to the concept of abstraction, where the ketchup sauce bottle is rendered into its simplest form, in a sense, where only its essential features (tomatoes) are depicted. This is to communicate the simplicity in its message in being understood to the audience, that their ketchup is in fact made with naturally grown tomatoes, which is the selling point of their product.

Red is the main colour used in this advertisement. It is striking and easily stands out to the audience, and additionally matches with the natural colour of the tomato.

The tagline of 'No one grows Ketchup like Heinz.' complements the message Heinz is attempting to communicate to the audience. The use of absolute language, 'no one' suggests that Heinz is the sole producer of organic tomato ketchup, and hence, it is leading in such an industry. The utilization of 'grows' also indicates ideas of fresh tomatoes cultivated just for the production of their tomato ketchup, boasting the best quality in the market.

[mynnaloo]

In-lecture Activity B: Great Wave Off Kanagawa

The iconic Great Wave Off Kanagawa is a ukio-e woodblock print in ink by Japanese artist, Katasushika Hokusai during the Edo period (1615-1868), in his series of Thirty-six Views of Mount Fuji.

This artwork is most distinct in the way it utilises the spectrum of varying blue tones to create a simple, yet complex looking perspective of Mt. Fuji amidst enourmous waves. Despite being created on a 2D woodblock print, the artwork is captivating in its use of different blue hues, in sharp contrast with the background of greyish tones that portray the sky. The lines used to outline the artwork are simple, yet the dynamic use of shades of blue clearly unveil much intricacies of this dignified Great Wave. The detailed shapes of the cresting waves add body and movement when visualising the artwork.

In spite of his endeavour of showcasing different angles of the nationally symbolic peak, Mt. Fuji, Houksai's masterpiece has garnered an enduring widespread influence for its magnificent composition of the Great Wave, which commands spectators' attention upon first inspection. The wave is majestic and powerful, as it is depicted in its overwhelming presence, posing a threat to the 3 boats in the sea. This could be representative of the sea (perhaps tsunamis) that wreck havoc in Japan. This artwork could be Hokusai's way of expressing the ambivalence of mother nature towards mankind, in its beauty yet deadly powers, which could be alluding to the fact that Japan’s susceptibility to earthquakes and thus, tsunamis, due to its geographical location.

Overall, while the art piece was created as part of his series of showcasing Mt. Fuji at different angles, it has commanded popularity mostly because of the Great Wave. It is a stunning success in its subtle portrayal of Mt. Fuji, and any added elements or textures would serve to undermine the beauty of this masterpiece.

[mynnaloo]

Hello~ my name is Christel, but some people call me Mynn :~)

This will be a creative space for me to document my journey in NM3217!

[mynnaloo]

In-lecture Activity A: Productivity/Creativity Machine 

🥂🥂🥂