NM3217 @minyi-mouse - Tumblr Blog

11/Final Project Brand Style Guide

For my final project, I went with option 1 on creating a brand guide for myself.

From the beginning, I knew I wanted to include a rabbit in my logo as it is not only my zodiac animal, I have similar traits of being sensitive and cautious as well. I had explored 3 different icons using 3 different colour schemes that I liked and tried to include a rabbit in them.

Week 9 Critique

During the first critique, many felt that the third icon with my name incorporated with a rabbit’s head suited me the most, but it was not obvious that the logo was of a rabbit’s head. Some felt that the head looked like the Playboy Bunny while others thought it looked like a fish’s head. Based on these comments, I had changed my icon to be a line drawing of a rabbit instead of just having the rabbit’s head to make it more explicit that it is a rabbit.

Another comment I received was that the colour scheme for my selected logo was too dull as it was just a black, white, and grey colour scheme. When I first started the assignment, I had separated my liking of pastel and dark colours and incorporated them in different icons. However, since this is meant to be an icon for myself, I felt that I should incorporate my liking of both pastel and dark colours into one icon, hence I changed my colour scheme to a light pastel blue with a dark grey. I felt that this colour palette was something that really suited me and fit my image.

Week 13 Critique

For this critique, some of the comments I received were that my resume was too dull and that the size of my text in both my name card and resume were inappropriate.

After the critique I had changed my resume and added more colour, tightened the sizing of my fonts, and made it less wordy. The first resume was very cluttered and had too many words which were packed tightly together, causing it to be unsightly and made it difficult for one to read.

Firstly, in my final submission I added icons to represent my software skills instead of having them as text. To show my degree of skill with each software, I enclosed a ring around each icon and the blue colour of the ring represents my level of skill. I had got the icons online and the icons for Microsoft software was too bright, thus I added a grey circle which was set to an opacity of 40% to dim the entire icon to better match my resume.

Secondly, I had enclosed and sectioned off each point of my resume (e.g. Personal Statement, Experience). I felt that this had greatly tidied up my resume as each section is clearly separated and I had better control of spacing throughout the entire resume. I used different colours as a background for each section as I felt that having two colours adds another layer to the resume instead of just having one colour as a background. The background colours are light, to ensure enough contrast between that and the text so that it is easily readable.

Next, I shortened the descriptions in my resume and spaced them out more to make it less cluttered. To help with visualisation, I made a small timeline for my experience and education section, with the most current information placed on top.

Lastly, for my name card I had shrank the size of my sub-headers and added a signature like font, Mina. During the critique I mentioned that I wanted to do something with the blank space on the right side of my name card and someone had suggested to include a cursive font since my name on my logo is cursive. Thus, I added this signature and rotated it so that it nicely fills up the side of my name card.

General Changes

I had made some other changes as well after I had looked through my brand guide. Firstly, I felt that the original black of the fonts was too dark and sharp for my resume, thus I had changed it to the dark grey colour that was in my colour palette. I was happy with this change as I felt that it had tightened the entire brand guide and since dark grey is visible against a light background, the visibility of my guide was not compromised either.

Next, I added another page which just shows my logo and provided a brief description of my logo along with a short sentence on its uses. Since the colour of my logo is light, it can only be displayed on a dark background to ensure that the logo can be seen.

Lastly, I made my colour guide and typography more interesting to look at. Previously, I had just placed the colours along with their RGB colour codes and the fonts are haphazardly placed in the typography page. In my final submission, I used a table to organise the details of my colour palette and included the Hex and CMYK colour codes as well. In the typography page, I used different background colours to segregate the different fonts used. Under each coloured block, I would place all the fonts of that font family inside it, for example since I used Jubliat Book and Light, they would be placed in the same section since they are of the same family.

Throughout this project, I had to be organised with my layers and character styles. Especially with my logo being the same line drawing 3 times set in different stroke sizes and colours, I had to be careful to group the correct items together if not I would end up with an oddly coloured or disjointed rabbit. To help me keep track of fonts, I had added the names and pt of each font in the name so that I knew what I was using.

#final project #nm3217

10/Patterns (In-Lecture Exercise G)

For this exercise, we had to create a pattern using any element. I used a mickey mouse icon to create a pattern as I was inspired by one of my clothes. For the first few patterns, I had randomly put the icons in the squares, and for the last few, I used a more structured approach by trying to place them in fixed intervals in certain directions. For the last pattern, I arranged all the mickey mouse icons in a row before duplicating them and alternating their heights to create a lattice-like pattern.

#week 8 #nm3217

09/Assignment 3 Information Design

For this assignment, we had to create an infographic based on a set of data. I had chosen to do an infographic of capybaras as they are one of my favourite animals. Before starting to design my infographic, I went online to look at what other animal infographics looked like to get some inspiration. I wanted to know what information was introduced by an infographic beyond basic facts such as an animal’s height and weight. A particular infographic that inspired me was one on polar bears where at the end they had shown polar bears in pop culture. I found this very cute and thus wanted to apply it in my own infographic as well (link).

Process

I knew that I wanted to have a big capybara in the centre of the infographic with certain features highlighted and elaborated on. For the main capybara I had two birds sitting on it as other animals like to hang around or ride on capybaras, making them known as nature’s ottoman. I wanted to put some basic information at the side of this main capybara to show their scientific name, height, weight and diet. To show this list, I was inspired by a pokedex and how it lists out information. I had also added other information on their diet, reproductive cycle and their native land with drawings above it to make it more interesting. Lastly, I had a section on how capybaras had become one of Japan’s internet superstars.

After having a rough guideline on what I wanted to show in the infographic, I went to find images which I could either use or trace and edit. In the end, most of the photos were traced using the pen tool since I could edit them as I wish. For example, to create the icon for location, I had traced an image but had edited it to have more trees. I used the tree I had traced and just scaled, reflected or changed the colour of the leaves to create an image of a densely packed forest with a stream running through it. Also, by tracing the image I was able to have a more consistent art style since I could decide on the amount of details shown.

Next, I had positioned all the elements into something similar to what I had sketched into a mockup page. From there I added all the text and descriptions that I wanted to convey and tried to organise them. I also added a description of capybaras that was essentially a summary of my infographic to make it more similar to a pokedex, where there would be a description beneath the table of data. This was a very rough draft of what I wanted to show, and I left it as a black and white work as I just wanted to play with the positioning of all these images. I had shifted the main capybara to the left of the infographic rather than leaving it in the centre as there would be less blank space created. Also, it leaves me more space for the text in later sections.

Lastly, to create the actual infographic for critique, I created another artboard and finally added colour. Since capybaras are cute and brown, I wanted to go with soft, light pastel colours that go well with brown and thus chose yellow as a background. I did not want any of the images to be too glaring, so I used lighter colours and a light grey to circle these images. To colour the images, I used the dropper tool to pick out colours from the original image and if the colour was too bright, I would go to ‘tints’ and choose a similar colour that would better fit the poster.

Throughout this entire process I found that I was important that I was organised in my layers and groups since there are a lot of elements in this infographic. If I were not organised, I would always select too many objects which I do not want to select and it becomes very difficult to lock objects when they are in different layers and each part is in a different group. This is especially so when I want to scale and move object since I would often move most of the image but lose some of the parts.

Critique

In the critique, there were two main problems which were highlighted. Firstly, there was a space at the top right corner next to the title and secondly, the font in the text was not very suitable as it is too faint. To resolve the first issue, I had shifted the main capybara to the right and moved it up slightly so that the blank space is used. I moved and scaled down the data table that is beside the main capybara so that I could accommodate the space the circles and description text used. One issue I had faced was the margins around the infographic, if the capybara was too high, there is very little space for some of the text, but too low and the blank space would still be there. Thus, I had to go through quite a few adjustments and scaling before I managed the final work.

The second issue was much harder to resolve as I had a lot of problems with font, even when I was doing up the infographic for the critique. Initially I used Gill Sans for the title and Courier New for the descriptions to have a serif and a sans-serif font. However, Courier New was too faint as the strokes are very thin, combined with the fact that I had used a rather small font size, the descriptions in the infographic are not easily read. After playing around with many fonts and researching on which font goes with Gill Sans, I ended up with Minion Variable Concept as it is still a serif font, but its strokes are slightly thicker, improving the readability of the infographic.

#assignment 3 #nm3217 #capybara

08/Assignment 2 Storytime

For this assignment we had to design a storyboard and take a few photos to tell a story. I chose to tell a story of two characters – Capybara and Yoshi sword fighting using highlighters. I had sketched out a few ideas before deciding on this as I thought that it would be interesting to shoot as the story would solely be told through their actions rather than changes in locations. The other two storyboards were of a day in the life of Capybara and of the Capybara baking.

The story starts with Capybara and Yoshi facing each other holding their ‘swords’, after they struck each other’s ‘sword’, Capybara was initially able strike Yoshi. However, Yoshi managed to get up and retaliated, striking Capybara back. Capybara had fell and lost his ‘sword’, thus causing him to lose the fight. In the end, Yoshi won!

Although this was a relatively simple story, I realised that it was quite difficult to convey the story just by using photographs. I realised that I relied very heavily on captions or words to communicate the story to the audience. After the critique, I had further simplified the story and tightened the flow of the photos to better tell the story.

Pre-Critique

To prepare for this assignment, I had taken the scenes from different angles before deciding on which ones to use in the assignment. I used my desk as the background for this scene and would change the characters’ positions to get certain shots. To get Capybara and Yoshi to hold the ‘sword’, I stuck blue tack on the highlighter and propped the highlighters behind them, creating the image that they are holding the highlighter. When drawing the storyboard for this, I had listed out some of the angles that I wanted to try to capture these shots. Some of these shots turned out well but others ended up either looking awkward or having strange patches of light in the photo.

Critique & Edits

During the critique, there were a few points raised on how it is difficult to tell the different scenes in each shot and that the flow of the story could be made smoother to show more of the tension and fight. To make the story flow better, I had removed the shots where Capybara had struck Yoshi and where Yoshi had gotten back up. This had not only freed up a few more shots but had made the story easier to convey since there are no twists and turns in it. Also, to better show that Capybara was defeated (7th photo) I stuck a piece of paper with ‘x’ on it to represent its eyes and to convey the message that he had ‘fainted’. I felt that this made it clearer when showing the close up of Capybara ‘fainting’, if not it would just look like Yoshi had suddenly disappeared, but the highlighter was still there.

Another suggestion was to add tension to the story by having a close-up front shot of Capybara’s and Yoshi’s eyes. I had tried doing that but a problem is that Capybara’s eyes are on the side of its head and the distance between its eyes and nose are big, which means that when I take a front shot and crop to show just its eyes, one cannot tell that that is Capybara much less that that is its eyes since there are no other distinguishing features in the shot. Thus, I decided not to take a frontal shot to show tension even though Yoshi’s shot is good, as it makes Capybara unrecognisable. To resolve this and to still show tension, I had taken side shots of both which made them recognisable but still showed the tension between them.

After looking through my photos, I had realised that I had a big problem with continuity, where in the previous shot, Yoshi had struck Capybara from Capybara’s right, yet in the next close up shot, I had initially placed the highlighter on Capybara’s left, causing the photos to become disjointed, affecting the flow of the story. There were quite a few instances of this occurring and I had placed some of these disjointed images in the curated photos to show what I mean.

Curated Photos

The main problems I had with the photos were lighting issues, disjointed photos or the shots could not be cropped or displayed in way where it could fit into the final story. The lighting issue was mostly due to where my light source was. The light in my room is on the wall which is to the right of my desk, this caused me to have certain shots where the light would reflect of my desk and create a white patch in the photo. I did not want to use these images as I felt that it would not just cause the photos to be unaesthetically pleasing, it also provides a point of reference for the audience which would make it very difficult to move the characters into different places but to still shoot a continuous flow of events.

Another problem was continuity issues which I had mentioned in the previous section where due to the direction of where the characters are facing or where the highlighters are pointed, it had caused the story to be fragmented.

Lastly, some shots were fine, but it was unable to fit into the final work. During the storyboarding process, I did not consider how I was going to arrange my shots and what sizes were they going to be. As a result, it had caused me to take images which while they were fine, could not be used as there was no space or it would make the flow of viewing the images awkward.

#assignment 2 #nm3217

07/Colour Scheme (In-Lecture Exercise F)

The five hues in this shot are blue, light grey-ish blue, purple, dark yellow and mustard yellow. I picked out the colours using the dropper tool and compiled them into the squares below. The colours are bright and vibrant, the yellow gives feelings of happiness and draws one’s attention to photo. The light grey-ish blue provides a good neutral contrast to the yellow and prevents the background from being too glaring and drawing the attention away from the yarn Yoshi. The Yoshi is largely blue, with white cheeks and belly as well as bright purple shoes with a yellow base. The soft blue of Yoshi makes it seem more friendly and complements its cute character. The shoes are an example of a complementary colour scheme which gives Yoshi another dimension since its shoes are not just a singular colour.

#week 7 #nm3217

06/Assignment 1 Abstraction

In this assignment, we had to take a photo of something around us and present a process of abstracting by stripping the photo down to its base components. The photo I chose was a Kaws bag with one character carrying the other. I chose this photo as the shapes of the characters were distinct and I wanted to construct the image using shapes, especially during the later stages of abstraction.

Initially I used a combination of shapes for the first stage of abstraction, but it was unable to capture enough details and it added other features that were not in the original image as well. Although I liked the effects of replicating the entire image with shapes and having the ‘joints’ effect, for this assignment on abstraction, it is not suitable, thus I had left it out.

Abstraction Progression

Before abstracting the image, I thought of what features or idea that I wanted to convey from this abstraction process. I wanted to keep the ‘X’s on their eyes as well as the carrying of the character. From there, I had just slowly deleted the other features throughout the process.

For the first abstraction, I used the pen tool to trace out the outline of the characters and just layered them accordingly. For example, I would over draw the outlines of the ears and after filling them, would just send them back so that the skull would cover the outline. To replicate the hand drawn effect, I changed the brush stroke from ‘basic’ to ‘pencil’ to create a more realistic effect. I find that this adds another layer to the image as well.

In the second abstraction, I copied the trace from the first one and changed the brush stroke to ‘basic’ and used the simplify tool to smoothen out the edges. Then, I deleted some features such as the nostrils, ‘X’ marks on the hand and the detailing on the pants. The main transition between the first two stages are that the lines were neatened, and some small features were removed.

In the following abstraction, I started replacing certain pen drawings with shapes to not only get rid of more details such as the ridges on both character’s ears. By using shapes instead of the pen tool, a lot of details would be removed and the lines that are created would be much smoother. I had mostly just overlapped the shapes or used the path finder function to punch out or merge certain shapes together. I had reduced the hand to a circle and thumb instead of showing each individual feature and connected different shapes to create “bendy” features such as the character’s arm. Rather than following the natural curves of the character’s legs, I had replaced them with two curved rectangles, removing another layer of detail.

For the fourth abstraction, I removed the joint detailing of the characters such as its wrists and ankles, leaving them with their major limbs and hands and feet. Instead of having two overlapping ellipses for each ear, I had just used a big one to represent the ear. I had also simplified the skull to an oval to further simplify the drawing.

In the last abstraction, I solely relied on shapes to create all the features. Since the only things that I wanted to keep was the character being carried and the ‘X’ marks on their eyes, I had created a basic shape of these two characters where one is carry the other in a bridal style with ‘X’ marks on their eyes.

Critique & Edits

I had received pointers that I should include another colour to add layers to the abstraction and that the last two stages of my abstraction are too far from the original image and no longer recognisable as being part of Kaws beyond their eyes. It was suggested that my last abstraction should be abstraction stage 3 and I should add another two stages between them. Also, the transition between stage 2 and 3 were not obvious.

From these, suggestions, I first used a dark blue colour on the character for the first few stages of abstraction. This had given me an additional layer to use to show the transition between stages which was helped make the step between stage 2 and 3 more prominent.

I had also added another stage before the original stage 1 of my abstraction. From looking at other works and listening to my classmates’ critiques of those works, I found that I could add a lot more details to the first stage of abstraction, hence I added fur and texture to the characters using different layers. Initially I was hesitant on doing it especially the cross-stitch effect around the character’s head and ears as when I tried it, it made the entire image very cluttered and awkward. However, during the critique I was shown how to make smaller lines using the pen tool and replication these lines and changing their shape, size or rotation to create bolder or more scattered looks. By having these details on a separate layer, it made it easier to select and edit these features as I would not have a problem of selecting the wrong features. Another thing I learnt was that I did not have to copy the exact details of the fur or textures which was what I had done initially. Rather I should have added the details based on what I felt was suitable which created a much better, more realistic effect.

In the end, I had chosen to further simplify the abstraction in stage 3 rather than having another stage in between as I found that I am unable to make an obvious step between these stages. During the critique, the last stage was too far as it was unrecognisable that it is a Kaws character, thus I had kept the ellipses on the ears, the skull and the ‘X’ marks to better allude that it is from Kaws.

#assignment 1 #nm3217

05/Typography (In-Lecture Exercise E)

What seems to be off about this particular typography representation?

The title looks off-centre as compared to the body of text, making it slightly uncomfortable when looking at this image from far.

Next, while it is fine for the title to have such a blocky, outlined typeface, when it comes to the body of text, this typeface is not suited for reading. It is uncomfortable to read the body of text and readers are unlikely to want to finish reading it. Also, by centre-aligning the body, there is no consistent starting point at the start of each line, coupled with the hard-to-read typeface, it increases the discomfort that readers would feel when looking at this image.

Although both the title and body use the same typeface, it creates discord rather than harmony between the title and the body, making the entire image very awkward. Also, it looks like the body of text is a sub-header to the title rather than a body.

How would you improve this typographic representation?

Firstly, I would use a grid to place both the title and the text to provide structure to the image. Secondly, I would use a different font for the body, perhaps a san-serif typeface to complement the current serif title. I would choose a simple, easily readable typeface such that readers can easily read the body. In addition, the typeface would be a smaller size as compared to the current body’s font size to better reflect that it is a body rather than a sub-header. Lastly, I would align both the title and the text to the left, so that readers have a fixed point at every line to start reading from.

#week 6 #nm3217

04/Composing Compositions (In-Lecture Exercise D)

Different Shot Sizes

By using different shot sizes, I am able to distort the viewer’s perception of my subject’s size. In the close up shot, with the slight upward facing angle and close range shot, the audience has no point of reference to judge Yoshi’s size. It is only with the medium and long shot, where a reference (the capybara stuff toy, Tonkatsu) is provided to show viewers that Yoshi is actually very small, about the size of a keychain. In the long shot, the audience is able to see more of the surrounding environment, which in this case is just my bed.

The key difference between the medium and long shot is that Tonkatsu and Yoshi are further in the background in the long shot as compared to the medium shot. Since these photos are only shot in my room, the difference between both shots are not particularly big.

For the close up and medium shots, I tried to apply the Rule of Thirds and focused Yoshi on either the lower third of the shot or at the intersection of the photo. In the long shot, I find that I am unable to apply this rule, Yoshi and Tonkatsu are in the middle of the shot, but I feel that this is more appropriate since this shot aims to capture more of the background. Thus, I chose to have the subjects in the center of the shot, rather than at an intersection point.

Over the Shoulder Shot

For this, I took 2 over the shoulder shots with different focus. I think that these photos are interesting since they capture different subjects. In the first photo, the focus is on Tonkatsu and the audience would be more able to see Tonkatsu’s features and expressions. Whereas in the second photo, Yoshi’s back is the focus of the shot, which does not provide the audience with much since Yoshi’s expression cannot be seen. This highlights the importance of choosing the correct subject to focus on. Even though both pictures are of the same shot, with a different focus, it affects the quality of the shot.

Bird’s Eye View

By taking this bird’s eye shot, I am able to distort the audience’s perception of not only Yoshi’s size, but also where Yoshi is sitting, since Tonkatsu’s fur looks like a rug from a close up, bird’s eye view.

I applied the Rule of Thirds in taking this shot. Yoshi is in the bottom left corner of the shot and it lies at the bottom left intersection of the photo.

#week 5 #nm3217

03/Signs and Symbols of Heinz (In-Lecture Exercise C)

Ketchup Bottle

The print ad shows a Heinz ketchup bottle that is made up of sliced tomatoes. The signifier is a ketchup bottle and the signified is the quality of ketchup provided by Heinz. In showing that the entire ketchup bottle is constructed of pieces of sliced tomatoes, Heinz is insinuating to viewers that they use fresh tomatoes in making their ketchup and they do not add additives into it. By showing that when the bottle is cut up, with only tomatoes inside, it reassures their customers that Heinz ketchup is made of quality ingredients and that customers should feel safe when consuming their product.

Caption

The caption below on how “no one grows ketchup like Heinz” is interesting, as normally one would say that they grow tomatoes, rather than ketchup since ketchup requires the tomatoes to be processed. However, through this caption, not only does Heinz hint that they take care to ensure the quality of their ingredients; it also gives the image of them meticulously preparing their ketchup, similar to how one might take care of a plant. This highlights their dedication to their products and shows their customers that Heinz puts a lot of effort in creating and producing their ketchup.

#week 4 #nm3217

02/Deemo (In-Lecture Exercise B)

“Never left without saying goodbye”

Credit: sishenfan (https://www.deviantart.com/sishenfan/art/Deemo-ALICE-GOOD-NIGHT-659387167)

Deemo is a rhythm game with beautiful music accompanied by well designed artworks. It serves as a form of inspiration to many and this is one of the plethora of fanart that can be found online. (spoilers beyond the line)

#week 2 #nm3217 #deemo

01/Prompt Generator (In-Lecture Exercise A)

I am easily inspired by things I see online and would often save them on my phone to refer to them later. Having a cute prompt generator on my desk would easily fuel my creativity.

With such a cute figure acting as motivation along with whatever prompt that is displayed on the chalkboard, it will just be a matter of translating my the scenes in my head onto pen and paper!

I was very excited to try out Adobe Illustrator and was inspired by my sketch to see if I could replicate my sketch digitally. I am rather proud of the final result!

#week 1 #nm3217

Trending Blogs

Recently Viewed Blogs

NM3217