I'm Yu Siang, a visual designer based in Singapore. I love making pretty and meaningful stuff, such as illustrations, logos and magazines, and I'm particularly interested in UX design.

I graduated with a Bachelor of Business Administration (Accountancy). Which means I can converse with you about kerning, white spaces, conversion funnels and profit margins in the same breath—if I inhale deeply enough.

I created a project called Building Singapore, born out my love for the country. I also publish my own webcomic. This website is coded by me.



H
D

TEO YU SIANG

Hipster stat board logos

Illustration, Web Design, Coding

Building Singapore

To celebrate Singapore's 50th birthday, I created a project titled Building Singapore, which explores how honest histories of 50 buildings tell a different Singapore Story. It's a celebration that, unlike the state-driven, self-congratulatory ones, is a little more introspective and a whole lot less masturbatory. Here's how the different parts of the project came together.

Building Singapore


How buildings built us

Building Singapore is, at its core, about exploring the alternative narratives that drive the history of Singapore. It's a response to the state-controlled, narrow interpretation of our past best summed up in a sound bite: "fishing village to metropolis."

And what better way to do this than to look at the buildings around us—some iconic, some forgotten—that bore witness and were parts of the various stories that made us who we are? This project is a happy coincidence of graphic design, social commentary, web design and coding.

Art direction: constructing the buildings

Illustration design
Each building in the series of 50 is illustrated in a style that takes inspiration from flat design, but is also intricately detailed. Bold, flat colours were used (no gradients here), with a sense of depth portrayed through semi-opaque block shadows. The illustrations are created based on reference images, with an exceptional level of detail put into the buildings (that is oh-so-satisfying to create).

Red Dot Design Museum

Creating this level of detail might seem a little self-indulgent, but it reflects a philosophy I feel strongly about: that just because something can't be widely appreciated doesn't mean it shouldn't be well designed.

Tiong Bahru SIT Flats

Details in the Tiong Bahru SIT Flats illustration

Typography
For such a clean and minimalist project, typography plays a large role in setting the tone and style.

The primary font I've chosen for the project is Futura Std Heavy, which I felt was a great mix of modernity and history. There's something about the geometric font that really complements the style of the illustrations.

The secondary font (used mainly for web purposes) is Source Sans Pro, a neutral and clean Google font that greatly complements Futura.

Video showcase
As part of the Facebook page branding, a video was created to showcase the tone and style of the project. The video was conceptualised together with my brother and created by me.

Designing an immersive, clean website

When creating the website for Building Singapore, I wanted a content-first, image-centric design that creates an immersive experience for viewers.

Image-centric
To create an immersive experience, the main focus was brought to each building in the vertical scrolling website. While each building had an accompanying write-up explaining its significance to Singapore's history, the text is hidden by default to provide an optimal, uncluttered view on desktops.

Screenshot of webpage

As little buttons were added as possible to keep the distractions to a minimum. Only 2 buttons are shown at the bottom right of the webpage, which provide navigational functions to the user. The first is a move-to-top button, which brings the user to the top of the page, and the second is a grid view button, which allows the user to view all buildings and jump to any one of them.

Grid view gallery

In going with the image-centric theme, the grid view is displayed as a gallery of colourful buildings, with building names appearing only on mouse hover.

Designing for mobile
To create an optimal mobile experience, some of the elements in the website had to be repositioned and rescaled. For instance, the write-ups of each building are not hidden on mobile devices (because button interaction can be clunky on a touch device). The gallery grid view is also replaced with a list on mobile for better useability.

See how the desktop and mobile experiences differ below. (Click on the different tabs to view the various pages/segments of the website.)

Home viewGrid/List viewBuilding viewAbout pageframe

From pixels to HTML. And CSS. And jQuery.

To bring the website live, I did front end development (with help from lots of amazing online resources) to translate the designs from Photoshop and Illustrator to web browsers. Most of the website is pretty simple and straightforward, so I'll just focus on a few parts of the site.

Modal windows
Modal windows are used for the About page and the grid view gallery. Basically, the About and Gallery pages are fixed positioned, full-height divs with a high z-index value so they would cover the main page when brought into view. By default, the "display" value is set to "none", so they are hidden from view; a jQuery method is run to fade-in the div whenever the About or Gallery button is clicked.

Fading in the descriptions of buildings
For the write-ups that accompany each building, I've chosen to use the opacity setting in CSS to toggle their visibility rather than using jQuery's "fadeIn" method. This is because CSS animations performs faster than jQuery's, at least when it comes to fading animations. A traversal method is used so that only the write-up for the building is toggled into view.

You can see the live website here, and like Building Singapore's Facebook page here!



Share:






Have an awesome design project in mind? Let's talk over coffee!

Contact me




What to read next:

Logo

What if stat boards had hipster logos?

Logo

Logo

A company booklet you'll wanna read

Print