Bury your old stuff away
This is kind of my clutter-cleaning
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 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.
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.
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.
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.
每次再回顧這份所謂功課，總會覺得有太多地方不滿意，質疑自己為甚麼當時會如此處理，很多細節感到不妥。做設計這麼久，沒有幾人會在去在意過程，大部份人對作品看一眼，憑印象感覺去判斷喜惡、美醜，立即下了結論，人是主觀，自己最清楚不過。對人嚴厲，對自己苛刻。太少人學會去理解、去體諒作者背後的想法。
這件事整體看我都做得不好，是的，想重做，可惜已經是我人生中完成度最高的一件事，難得的起心肝，由一片虛空到一步一步成形。講真，當你知道事情做完了也代表不了甚麼，你還會去做嗎？如果你知道這件事情是經歷不少過程推敲琢磨而得出，因此我會自信的告訴你，這東西很有我自己的成份，算是對自己一個交代。我最喜歡的不是最後結果，而是由無到有，有想法到實踐出來，用你的手段方法呈現，過程是最有滿足感。你有自己的想法嗎？憑你自己你又做了甚麼？
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
- About my design background, here’s a post about it: A look back on my Journey in Design. ↩︎