CLIENT
PROJECT
YEAR

2018

DELIVERABLE
  • Graphic Design
  • Illustrations
  • Animations
  • Web Design
  • WordPress set-up & customization
  • Content upload and management

ALL ABOUT THE DETAILS

Treehouse is a new architectural development in Seoul, boasting six floors of unique unit layouts, amenities, and services. As part of the Treehouse design team, my task was to develop online platforms and any graphic illustrations for use as branding and marketing materials. Please check out the other two website I made for Treehouse: English version and Story landing page.

01

Seamless Transitions

With an array of unit types, my main challenge was to organize and present six pages worth of information, photos, and drawings while maintaining a clutter-free one-page design. The Ajax pop-ups enable users to navigate seamlessly between the main page and unit details.

02

Hidden Information

With more than 70% of Treehouse’s audience visiting from mobile devices, the website required a minimal and touch-friendly interface. I designed a set of simple but expressive graphic icons to represent building amenities – users can hover or touch for information. This was built with only HTML and CSS.

03

Interactive Map

The highlight of Treehouse is its numerous shared spaces on the ground floor. To showcase this online, while keeping with the brand aesthetic, I drew and built an animated map with GIFs, HTML/CSS and Javascript. The map has interactive hotspots and animated elements that resize with the screen. (Visit here for illustration)

MINIMAL + MAXIMAL

With the majority of young professional Koreans interacting mainly through mobile devices, developing a website that packed a ton of information into a lightweight and easily consumed one-page design was crucial. Meanwhile, working with responsive components allows this to scale up for an even more comfortable experience on larger screens.

Keeping with the Treehouse design language, the website incorporates fun and lighthearted touches featuring the signature Meerkat character.

Colors and Font

#4db748

#ffffff

Roboto

ㄱㄴㄷㄹㅁㅂㅅㅇㅈㅊㅋㅌㅍㅎㅏㅑㅓㅕㅗㅛㅜㅠㅡㅣ

Comfortaa

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z