Design

Bury your old stuff away

This is kind of my clutter-cleaning

Created on
Day
44/100
Reading Time
4 mins
Word Count
13K approx.

When you tidy up your room and want to clean up some space. We don’t just throw everything away. And you start fumbling around with your old stuff. There’re always some items occupies a special place in your heart. You might want to keep it somewhere. Others won’t understand the sentimental value of it. However, it means something to you. And that’s enough.

Burying my old stuff

To have a one good look at it for the last time.

Look what I’ve done

This post is to talk about a piece I designed couples of years ago. The Final Year Project of a degree done by a so-called professional.

Sometimes, you’ve to take a look back at yourself before moving forward.

As always, I’m not satisfied with anything that I’ve done. But you know what, it is what it is. I want a place to keep it and I decided to bury it here. Not because I think it was good but the other way around. This is a proof of I was once hard-worked on something. That’s it.

Let’s do this.

Little backstory

After eight years of working as a designer, I struggled for a good few years of should I study. I also got a feeling that I don’t quite qualified to be able to earn a better job title. So, I decided to pursue a degree course back in 2016. I thought about it very carefully because obviously, my family won’t pay for my tuition fee. I have to earn it. Also, studying after work while having a full-time day job was kind of exhausting. But I managed.

At the time, I kept asking myself: “Is it worth it? It gotta be!”. I think I was wrong to even think that a certificate could get me a better job. It works like a ticket, you pay for it then you’re in (the company). Anyway, I graduated with BSc (Hons) in Multimedia in 2017.

What was it about

I want to get to the point real quick. So, I will skip most of the details of the project. In short, I tried to create a Photo Journey using Responsive Web Design. I was very ambiguous—or you may say naive—and wanted to put everything that I learnt from work and school and distil them into this “masterpiece”.

The Project: urbnday | Discover the Unexpected

The project is about urban photography. To translate an abstract idea into a digital piece. Using Responsive Design approach to create a website catering to desktop and mobile devices. The project suggests a Photo Journey—a visual tour for an interactive browsing experience.

The final product is a responsive website which is designed and created from scratch: from concept, branding, photography, wireframing, UI&UX, web design, to front-end coding HTML/CSS and php. Also implemented the web technologies such as CSS3, SVG icon, website optimization & SEO. This is an individual project. Also, I couldn’t resist myself from creating print materials. The project includes the website and an academic dissertation of approximately 14,000 word count.

Design

Branding

For the very first step, I went back from the root of visual communication: use branding as an answer to solve the problem.

Guidelines for the Logotype

What I did basically was start from branding—visualize the concept with a logotype for which it carries the core message of the project. It’s about Urban Photography, the way I designed was inspired from the elements in the very city I’m living in: Hong Kong.

That was very nostalgic when I was designing the guidelines. A set of icons was created using SVG. I also created a set of custom typography for the design. If I can invest more time in the development process it could be more polished. But anyway, I did implement those elements as much as I could while maintaining the overall visual consistency. I think that’s no easy task. If I have to use any words to describe—“that’s all we got in our fridge and let’s cook them up and make a dish”. I guess you can’t just keep redoing everything, you gotta move on at some point.

Photo Journeys

As a designer, I thought I was not equipped with enough skills and wanted to extend it besides web or print layouts. I tried to explore my creativity through street photography. Hence, the Journeys. The Visual Tour take place in four different districts in the city. Each of them represents a unique theme of the location.

Tsim Sha Tsui
Mong Kok
Central
Sheung Wan

As I recall, it was in winter while I was taking the photos. I was new to photography and doesn’t even understand what is aperture and shutter speed. I got myself a cheap DSLR and start shooting without learning the basics. I thought how hard could it be and of course I was very wrong.

If I had to pick one thing that I like about is that I acted, without hesitation. It took me three days for all the photographs. “Make it happen” was all that I was thinking.

Wireframing and UI&UX

With all those “groceries” in place. I started to write the “recipe”—wireframing for the design. It took me maybe an hour and I already know what I wanted. I can tell you I was confident in creating all sorts of layout in PhotoShop. I draw sketches using pen and paper first, then recreate them on computer.

I was being too safe when planning out how the layouts will look. But the final product stays true to the original sketches. In order words, it reflects what I wanted exactly. The main structure of the website remains the same as in the wireframe.

Visual Design

I went straight into writing HTML and CSS without creating the visual design in PhotoShop. That was the first time I skipped the “pushing pixels” process. It saved me some time but end up the code became messy. I code while I figured out how I wanted the layout will be. The design was not concrete at first so I found myself putting extra time to solidify the details.

In the end, I think doing static mockups is a step that shouldn’t be skipped. It might look different if it was translated into code later but that’s the designer’s job: to have a better understating of HTML&CSS even if you never touched the code. I took me a week to build the main frame and make adjustments here and there while writing the dissertation.

Landing Page on desktop and mobile
Journey, Visual Tour at Mong Kok and Tsim Sha Tsui
Journey, Visual Tour at Central and Sheung Wan

The layouts above were captured from the site unaltered. Everything that I created remains the same as it was in 2017. Five years later, it seem nothing was broken and the plugins working just fine. Originally I want the Visual Tour to be featuring Panoramas. Like something you can see from Google Map: explore the place with 360° view. But I ended up didn’t have the time and skills required to implement that. Instead, I experimented with quite some CSS on the Hot Spot feature. I also implemented some JQuery plugins for some parts of the website.

Final Words

At this point, I want to tell myself is that I like doing visual design. It feels satisfying to create visuals on a blank canvas. I am confident that the design reflected my aesthetic taste. What I don’t like was it lacks depth and creativity. I was being naive and immature.

That was it.

Also, I want to quote some words that I had written when I put this piece in my online portfolio.

— Me, 2017

To be honest, the result wasn't quite as good as I expected. But this was something I enjoyed working on despite all the disappointment. I was able to build something from the ground up and call it finished. Everything comes from me. This piece will stay here to remind me to do better next time.

This is #Day44 of #100DaysToOffload.

Footnotes

  1. About my design background, here’s a post about it: A look back on my Journey in Design. ↩︎