Final Project

Introduction

Thank you for joining me as I close my NM3217 chapter. I chose to do option 1 - personal branding for this assignment, because I wanted to use it in my future endeavours. So, my personal brand has to represent the Professional ME. I am studying Communications with a specialty in UI/UX and computer science, so I want to express that. This is going to be a rather long read, so please stay strapped on. In fact, you could play this in the background as you read. I love The Weeknd's latest album so if you haven't heard it, the time is now! This was one of the albums I had on repeat as I worked on my designs :')

Research, Exploration

Since it's personal branding, I decided to go with wordmarks or letterforms. I did not reason myself to be big or famous enough to be able to use anything more abstract, and I didn't really have any strong ideas on what abstract shapes represented me either.

First, I went through an exploration phase where for two weeks, I carried my notebook around and penned down sketches whenever inspiration took hold (It took two weeks because I wasn't satisfied with what I had). I ended up with a ton of pages of scrapped material, but I figured I should pay my respects to the designs that did not make it.

I had several iterations of ideas. I first wanted to use the strokes present in my Chinese name to form into my english initials: ZH. I really liked the concept, but I felt it wasn't enough. It didn't really reflect my intended brand image, and it's not like I'm all that fluent in Chinese anyway. Moving on, I started experimenting with more inorganic shapes, to really push through with the "UI/UX" idea. Along the way, I experimented with using basic shapes and negative space, but again, nothing seemed to stand out or speak out enough.

Along the way, as I experimented with geometric shapes, I got the idea to do something isometric, because I like Isometric designs. I didn't quite find something that I liked again, so I left it all for presentation and consultation.

The Aha! Moment

I finally got inspiration when I showed my sketches to my peers, two of whom (Thanks Elizabeth and Sergio!) commented about my isometric designs resembling Rubik's Cube. I felt it very appropriate: Rubik's Cube is quite tied to Computer Science and Algorithms, plus I had already intended to use geometric shapes, and I loved Isometric designs. It's perfect!

So, that week, I experimented with various arrangements. Actually, I didn't initially intend to put the "C" in my name in the cube. I had intended for "ZH" to be on two faces, with some secondary shapes on the top face. The reason for this was because the H, when turned on its side, looks like the character in my Chinese name, again! So, viewed sideways, the H and the shapes on top formed another shape - the Chinese character! (Design in red in the picture)

By the way, please forgive me for using Figma at this stage. Sometimes my computer with Illustrator is unavailable so I used Figma to draft things up. You gotta make do with what you got.

I also experimented with the other side of the cube, other letters of my name, and how I could use the same style to spell out my name. I didn't like the look, though.

Unfortunately, I simply had to scrap the idea of trying to incorporate my Chinese character. But, it did inspire me to think about the potential orientations of the characters! A major problem was that the "Z" looked like an "N" when rotated, and I had to be very careful about orientation. But! It could also be used to my advantage - Just like how the H looks like my Chinese character sideways, the "Z" could also represent the "N" which is also present in my name when spelled out. It's also akin to Rubik's Cube how you can rotate faces to get the orientation you want. I'll reference this again later, so please take note of this!

Building Blocks

Eventually, I decided to fill in the top face with my initial "C" to actually give it a cubic silhouette. Without it, it didn't resemble a cube enough. My next step was to play with arrangements. I knew my "H" had to be on the right bottom, but I experimented with changing positions of the "C" and "Z" to see which reads in the best way. This time round, I focused on preventing unintended readings of my logo, before exploring on perspective tricks. So, for now my "Z" is to be strictly read as a "Z" and not an "N". I can explore that later.

I did all this on Adobe Illustrator, having downloaded an isometric grid from online. After many tries, I settled on an upright hexagonal shape as it tiles nicely (If I do plan to tile it) and looks proper. C on top, Z H on the bottom.

Deliverables

I copied my Illustrator shapes over to InDesign to create my documents.

Documents

For my business card, I wanted to keep things simple. Rule of thirds: I came up with a tagline that describes what I do in three words. On the back, I have my contact. It's meant to be flipped such that the logo remains on the same position. I decided to use my primary colours to give the business card more life.

As for the resume, after I populated it with content, I felt it was lacking in graphics as the only graphical element I had was my logo at the top. So, I went back to the drawing board to create some accents and secondary graphics. This became the outline (Watermark) and triangles, which I added to my resume.

Brand Style Guide

To tie everything together, my Brand Style Guide had to show off my documents plus also follow the same design guidelines I laid out. In hindsight, I noticed that I have a habit of enlarging things, like my logo and font size. Thanks to feedback, I have reduced my font size to the standard 12pt. I think it's a habit from working with web graphics for the sake of visibility, or that I have old people eyesight LOL (But I still have perfect vision, maybe this is why!).

The following are screenshots of my InDesign workspace. I made extensive use of styles and swatches.

Typeface

As I am a big fan of Swiss design, I wanted to use Helvetica. However, as I intend to use this in the future, I didn't want to run into licensing problems. So, I chose a free alternative: Inter, for my headings. I also chose Open Sans, another free typeface, for body text. Both were chosen for their legibility on screens and print, being open source + free, and they are also Sans-serif, which is in line with UI style.

For Inter, I used really narrow tracking because I love the way it looks. It's stylish, but somewhat professional too. As for my other elements, now that my body is 12pt, my other headings were calculated using the golden ratio. 12pt body, 20pt headings, 32pt titles, etc, with some slight adjustments if necessary.

I filled in the rectangles containing the header text. I thought it looked really stunning because Swiss design also uses bold blocky shapes. I'll be honest with you: this was done on accident. I had intended to change the text colour but accidentally changed the fill colour. But I'm glad I made that accident! To create hierarchy, I made the subsection headers shorter than the title headers. For my smaller elements, like body text and labels, I decided to add a coloured line, which is quite clean. These additional elements allow me to use my colours in more than just the logo while maintaining a clean look.

Future-Proofing

I want to ensure my guidelines can be followed with no ambiguity. To construct the logo, and with my Typography, I used ratios so that they can be followed at any size. My free typefaces also prevent any licensing or copyright issues in the future. For the most part, I used black and paper white in my documents to ensure everything is printable. I have also slightly tweaked my colour scheme to contain CMYK-appropriate colours that can also be displayed in RGB (Using Adobe's auto adjustment for out of gamut). I also provided a logo with no colour if I ever need to use it. I also heard that if your logo doesn't rely on colours (i.e. can be black and white), it is a good logo. I used that as a metric.

Post-Final Critique

I got some really valuable feedback and I will describe the changes I've made in response.

Orientation

Ah yes, the big issue bugging us all. I think at this point, I've cemented the relative positions, but the "C" remained troublesome due to sometimes looking like a "U". Some feedback I got was to rotate the C or re-shape the C by curving it in. I also got the idea of having the C be upright instead of angled. I experimented with those, but it didn't sit right. I then got an idea, another happy accident: Previously, I wanted the "H" to look like my Chinese character from the side. What if, it could read as an "I" on the side, so if viewed from an angle, my initials could also spell "UI"? It's similar in idea to what I wanted earlier!

Rejected.

This is unrelated to my module's submission, but in the future, I do want to explore additional ways I could utilize my logo. As with Rubik's Cube, you can rotate its faces. I might want to animate my logo in the future, with rotations and different orientations+faces spelling out my full name or things I'm interested in. Example: Z+H+A+N (using N which is a rotated Z). But that's for the future!

Typography

I had qualms about using Open Sans. Although I liked the typeface, it was also sans-serif and I felt I could just use Inter for everything, with different settings for tracking and leading between Body and Headers. Plus, I can avoid seeming like I used the wrong typeface. Anyway, both are optimal on screens. Thankfully, I used character styles so everything could be changed at a snap.

Documents and Secondary Graphics

I decided to use my watermark in my business card's back side. I also added another section in my Brand Style Guide to detail how to use these secondary graphics. I also moved my logo introduction and construction earlier in my Brand Style Guide so it flows well. I had wanted to do this before, but I followed the order stated in the project brief which asked for the Business Card and Resume before the rest of the brand style guide. Maybe it's just me being kiasu. If you're reading this, Kai, you can take this as additional module feedback!

For my resume, I sized down the logo. Sorry, when I look at it from afar, it really is large. That's my old eyesight habit. I also fixed the alignment of the sections. The images show before and after. Before, my resume was quite cluttered. I also had to be careful with my list items and the associated years. Actually, the years are on different lines because I wanted to fit everything in the margin and avoid typographic orphans or weird text silhouettes. After getting feedback, I put the years in the same lines, but rearranged the text. Anyway, most resumes put the degree on top and the university below. I was now also able to bold the university name to group the list items better.

I also used more icons for some skills and for the contact details, which I aligned better.

Unresolved Issues?

This is a minor thing pertaining to my section headings. If you have a look at the Title (Guidelines) and the section heading (Please do not) you may notice that the alignment is different. The title is aligned against the box while the section heading has a very small padding. This is due to me using text box fill instead of using rectangles in the background. With different font sizes and weight, there is also a varied space/padding and alignment. I decided that for larger font, I would allow the text to be aligned with no padding. This was fine as it's large enough. As for smaller headings, I gave it a bit more padding to be more legible at the small size. I did not have enough time to fully experiment with this (Such as using separate rectangles instead of just filling the text area), but this is an area to look into in the future.

Closing Remarks

Well, that's it! I really thank you for reading, thank you Kai and my fellow classmates for guiding me through, inspiring me, and giving me feedback throughout. Next time you see my website, I'll update it to fit the logo. You may even see it animated, if I learn how to do that.