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
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.
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.
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.
Korean website in mobile
English website in mobile
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.
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.
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