Treehouse is a new condominium development in Seoul, boasting six floors of unique unit layouts, amenities, and services. As part of the Treehouse team, my task was to design and develop client-facing websites for pre-sale purposes. I created 2 different websites for English and Korean audiences.
Treehouse Web Design
Project
- Design
- Brand, UI/UX, graphic design, web design, web development
- Software
- Adobe Photoshop
- WordPress
- HTML, CSS, PHP
- Client
- Kolon
Minimal + Maximal
Korean Audience Website
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.
01
Seamless Transitions
With an array of unit types, my main challenge was to organize and present six pages worth of information and images while maintaining a clutter-free 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)
Korean website in mobile
English website in mobile
Simple parallax
English Audience Website
In addition to the main Korean-language Treehouse website and the animated landing page, KOLON wanted an English version that maintained the core information in a similar one-page design, focusing on highlighting the unique custom elements of the six unit types. Utilizing a single flowing column, subtle parallax effects provides an elegant and lightweight scrolling experience for future tenants.
One-page tricks
To de-clutter the main page, each floor is represented by a simple image – clicking or touching reveals an AJAX window housing drawings, photos, and text. This elegant solution maintains all the information in a single page, preventing the need to reload or create new windows. This ensures a smooth and seamless flow between sources of information.
COLORS
#4db748
#ffffff
FONTS
Noto Sans
ㄱㄴㄷㄹㅁㅂㅅㅇㅈㅊㅋㅌㅍㅎㅏㅑㅓㅕㅗㅛㅜㅠㅡㅣ
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
Roboto
ㄱㄴㄷㄹㅁㅂㅅㅇㅈㅊㅋㅌㅍㅎㅏㅑㅓㅕㅗㅛㅜㅠㅡㅣ
Comfortaa