Milü 密慮
May 26th, 2017
Website Work

We have created a mini website for PYE’s new independent publication, Milü. The design is adapted from the art direction of the printed book, which can be read entirely online.

The layouts are straightforward and mobile first, catering to modern reading habits. Appropriately, that is what Milü‘s first issue is about: the act of reading in this day and age.

Editor-in-Chief: Chang Tiehchih
Creative Direction & Book Design: Project Projects
Website Design & Development: pill & pillow

Visit Milü website here

我們為 PYE 的新獨立刊物《密慮》設計及製作網站,設計以實體書為基礎。
《密慮》的創刊號主題是關於閱讀,我們希望網站亦能以閱讀體驗為優先。

主編: 張鐵志
創意指導及書籍設計: Project Projects
網站設計及開發: pill & pillow

按此前往《密慮》網站

Creative Direction & Book Design by Project Projects

ifc 6PMusic 2017
March 9th, 2017
Website Work

We have created a website to promote ifc mall’s music event, 6PMusic.

Using 3PM/4PM/5PM as the website intro, the performance is a relaxing musical event people will look forward to after a long day.

The website has an automatic scroll effect to take the visitor through the content gradually, while a video plays in the background. This helps make browsing the site feel more like a movie-watching experience, as we want to position the performance as more than a typical mall event, but as something like a musical festival.

Aside from standard biographies, we introduce the performers using existing photos and musical works they have put on social media, to give the visitor a more personal understanding of the musicians.

Design and development: pill & pillow

Visit the ifc mall 6PMusic website here

我們為ifc商場的音樂活動 6PMusic 設計及製作網站。

我們用 3PM/4PM/5PM 作為引入,帶出等待放工的心情,而 6PMusic 就是六時後可以放鬆欣賞的音樂表演。

進入網站後,網頁會自動向下捲動,放手不理也能瀏覽內容,像看電影的體驗。我們希望表演不只是一般的商場活動,而較像一個音樂節。

我們搜尋表演者在社交媒體的相片或音樂作品,加上地圖等手法整合他們的資料,豐富網站介紹,讓觀眾更了解他們。

網頁設計及製作:pill & pillow

按此前往ifc 6PMusic網站

Tai Kwun 大館
February 28th, 2017
Website Work

We have created the website for Tai Kwun (大館), a Hong Kong centre for heritage and art, offering a space for leisure and cultural experiences. This is a mobile-first website, designed with usability and simplicity in mind.

Design and development: pill & pillow
Visual identity: Marc & Chantal

Visit the Tai Kwun website here

我們為 Tai Kwun 大館設計及製作介紹網站。大館為香港的古蹟及藝術館,集文化和休憩於一身。這是一個以手機版本為先的設計,非常易用精簡。


網頁設計及製作:pill & pillow
視覺系統:Marc & Chantal

按此前往大館網站

Cathay Pacific — The Artmap Project
January 12th, 2017
Art Website Work

We worked with McCann to help Cathay Pacific create The Artmap Project, which uses an algorithm to create a unique piece of artwork for Marco Polo Club members, based on their flight history on Cathay Pacific and Dragon. Each member will receive a 20-second long animation on their birthday.

The animated art map consists of strokes and dots, representing the member’s flights and destinations respectively. No matter how many there are, or how they are distributed, the algorithm ensures the art piece still looks aesthetically pleasing. With over a million club members, even for people with the same flight history, no two art maps are the same.

Concept, Creative direction, Campaign website design & development: McCann Cathay Pacific Central Team
Artwork creation and programming: pill & pillow
CRM system: ICLP

我們和 McCann 合作為國泰航空製作「藝術航圖」,根據每位馬可孛羅會員的飛行紀錄,產生獨一無二的藝術品。完成品是一段約二十秒的動畫,在會員生日時送上。

地圖動畫由線和點組成,分別代表飛行路線和目的地。我們的計算方法確保不論航班的分佈和多少,也會得出滿意的結果。另外,在處理超過一百萬個會員數據時,即使兩人的航班記錄一模一樣,他們收到的結果也會是獨一無二。

概念,網站設計及開發:McCann 國泰航空團隊
藝術創作,系統開發:pill & pillow
客戶關係管理系統:ICLP

ifc Christmas 2016
December 9th, 2016
Website Work

We have created a mini-site for the Christmas campaign by the ifc shopping mall. Their 2016 theme is “The Polar Resort”, so we created digital environments in which the animals celebrate their Christmas, based on the mall’s decorations.

Design and development: pill & pillow

Visit the ifc Christmas 2016 website here

我們為 ifc 商場設計了全新聖誕活動網站。為了呼應”Polar Resort”的主題,我們把商場內的裝飾繪畫成不同場景,讓北極的動物玩樂和慶祝聖誕。

網頁設計及製作:pill & pillow

按此前往 ifc 聖誕2016網站

IPSA — DECODE ME
November 24th, 2016
Website Work

IPSA — DECODE ME is a campaign that collects users’ self-portraits, analyzes their skin data, and predicts their “fate”.

As the technical consultant, we were mainly responsible for the animation design and website development.

To ensure the animation plays at 60FPS on mobile, it was built with WebGL, and we used buffer geometry to animate nearly 2000 polygons on screen smoothly.

Concept / Graphic Design / Copywriting: AllRightsReserved
Technical Consultant / Animation / Development: pill & pillow

Visit IPSA — DECODE ME here

IPSA — DECODE ME 是一個推廣活動,透過分析用家的自拍照,收集皮膚數據,預視用家「未來命運」。

我們主要負責技術顧問,動畫設計及網站開發。

為了動畫在手機上達到 60 FPS 流暢度,我們不但使用了 WebGL,更使用 buffer geometry 技術,讓接近2000個 polygon 流暢地顯示。

概念/平面設計/文案:AllRightsReserved
技術顧問/動畫/開發:pill & pillow

按此前往 IPSA — DECODE ME 網站

過往作品也使用過面孔多邊形化的設計(Squeal, 2011 / Painted Face, 2012)

4A China 作品徵求網站也用過類似技術,但尚未使用 buffer geometry,最多只能應付約700個多邊形的設計。

十如論壇 Integral Conversation 2016
August 19th, 2016
Website Work

We have created a website for Integral Conversation 2016. It is a forum organized by Esquel group, that brings experts from different industries together for a discussion on sustainable development.

The website features an animation built with HTML5 Canvas, showing separate dots that connect into lines, transforming into a globe in the end. It represents this year’s conference theme: individual countries coming together, making an collaborative effort to improve the world.

Design and development: pill & pillow
Visual identity: Stanley Wong

Visit Integral Conversation here

我們為2016年十如論壇設計及製作全新網站。十如是由溢達集團在桂林舉辦的會議,邀請各領域的專家討論可持續發展的議題。

我們用 HTML5 Canvas 製作動畫,把獨立的點連成線,再匯聚成為地球的形狀,代表不同地區聯手為可持續發展出一分力,回應今年區域互通的主題。

設計及製作:pill & pillow
十如視覺系統:Stanley Wong

按此前往十如論壇網站

4A China Call for Entry 2016
August 18th, 2016
Website Work

We have created a call for entry mini-site for 4A China, which simulates the experience of talking to an AI persona, through preset dialogue that tells unique stories about top ad agencies in China.

The 3D AI character model is rendered with WebGL technology in real time.

The mini-site is designed to be viewed inside WeChat, but can be visited from normal mobile/desktop browsers.

Concept / Copywriting: Amber Shanghai
Design / Development / 3D animation: pill & pillow
Music and recording: tony&oni@sync music

Visit the 4A China Call for Entry website here

我們為中國 4A 金印獎設計作品徵求網站。網站模擬人工智能,透過數據和對話挑戰中國廣告界。

我們使用了WebGL 和 3D scanning技術,在手機上實時呈現 60 FPS 流暢度的動畫。

網站訪客以中國內地為主,大部分在 WeChat 內瀏覽,但也能在一般手機和桌面瀏覽器觀賞。

概念/文案:琥珀傳播 上海
設計/製作/3D動畫:pill & pillow
音樂/錄音:tony&oni@sync music

按此前往中國4A金印獎作品徵求網站

Harmonic Motion
July 29th, 2016
Website Work

We have created a mini-site for a special event organized by ifc, a leading shopping mall in Hong Kong. The exhibition features a large scale hand-knitted playground for people of all ages to enjoy, made by Japanese textile artist Toshiko Horiuchi MacAdam.

Design and development: pill & pillow

Visit the Harmonic Motion website here

我們為 ifc 商場設計了全新活動網站,介紹紡織藝術家堀內紀子在香港製作的大型編織遊樂場「Harmonic Motion」。

網頁設計及製作:pill & pillow

按此前往 Harmonic Motion 網站

T · PARK [源 · 區]
May 23rd, 2016
Website Work

We have designed the website for T · PARK, a sludge treatment facility in Hong Kong open to the public for educational and recreational purposes.

In Hong Kong, around 1200 tonnes of sludge is produced everyday as a byproduct of the sewage treatment process. T · PARK burns the sludge and reduces its volume by 90%. The electricity and water generated in the process goes back to sustain the facility’s operation.

Design and development: pill & pillow
Naming and visual identity: Milkxhake

Visit the T · PARK website here

我們為 T · PARK [源 · 區] 設計及製作全新網站。

T · PARK 是位於屯門稔灣的污泥處理中心,亦是推廣生態保育的教育休閒設施。

香港每天污水處理過程產生約 1200 噸污泥。T · PARK 利用焚化爐讓污泥體積減少九成,過程產生的電力和水則可以供應設施本身運作,自給自足。
網頁設計及製作:pill & pillow
視覺系統:Milkxhake

按此前往 T · PARK 網站

ifc
April 27th, 2016
Website Work

We have redesigned a responsive website for ifc, one of the iconic world-class shopping mall in Hong Kong. We decided to take an image driven approach to showcase the beauty of ifc. The website features an extensive shopping directory, dining directory, movie options and a tile based interactive floorplan.

Creative direction: pill & pillow and Stanley Wong
Design and front-end development: pill & pillow
Map illustration: Johnny Chan
Back-end development: WEEWUNGWUNG

Visit the ifc website here.

PYE 2015
December 18th, 2015
Website Work

We have updated the website for PYE, a shirt specialist brand.

2 years ago, we helped relaunch PYE’s brand with a new website. Now, we have updated it to reflect PYE’s latest identity design, showcasing their shirt-making process in a stylish, fashionable way. Beyond a visual refresh, we also focus on providing more in-depth information about the shirts, as PYE’s philosophy comes from the quality within their products.

Visit PYE’s website here

Credits:
Design and development: pill & pillow
Identity design: Project Projects
Photography: Francis Chen, Thomas Lohr
Shirt illustrations: Kaliz Lee

Openskools
December 14th, 2015
Website Work

We have created a website for Openskools.

Openskools is a Hong Kong education database. The website contains comprehensive information of over 6,000 educational institutions in Hong Kong, and displays them in a clear, consistent layout for easy comparison. Drawing from graduates data, Openskools can generate unique roadmaps for each school to help parents and students plan their study path.

Deciding on the right school can be difficult, but with our website, we hope to make it a little easier.

Design and front-end development: pill & pillow
Visual identity: Sandy Choi Associates
Back-end development: Innopage

Visit Openskools’ website here.

HKU Faculty of Architecture
October 30th, 2015
Website Work

We have redesigned the website of the University of Hong Kong’s Faculty of Architecture.

To rethink the structure of a conventional university website, we have placed the faculty’s logo vertically at the centre. The split-screen approach separates the content from the navigation. The website menu is presented in layers, to let the user travel across multiple levels of content easily.

Design and development: pill & pillow
Visual identity: Stanley Wong

Visit the Faculty of Architecture’s website here.

Design concept

Design concept

十如論壇 Integral Conversation
September 10th, 2015
Website Work

We have designed a website for 2015 Integral Conversation. Integral is a forum organized by Esquel group, that brings experts from different industries together for a discussion on sustainable development.

This year’s theme centres around the four necessities in life: Clothing, Food, Living, and Mobility, symbolized by the four concentric circles on the website. The circles are incomplete and always spinning, representing the imperfect state of reality, and our endless pursuit to make it better.

Design and development: pill & pillow
Visual identity: Stanley Wong

Visit Integral Conversation here

Ronald Abram
April 30th, 2015
Website Work

We have redesigned Ronald Abram’s website.
Ronald Abram is renowned for stones that are admired for their unique beauty. The company’s founder, Ronald Abram, and his sons Jonathan (‘JJ’) and Jordan, proudly offer a purist’s approach to the appreciation of fine jewels, inspired by extensive experience having handled some of the world’s most extraordinary stones.
Visit Ronald Abram here.

PYE Defining White
October 23rd, 2014
Website Work

We have created a campaign website for PYE, celebrating its 30 years of shirt craftsmanship.

The philosophy of white is sophisticated.
The definition of white is singular, yet contains a broad spectrum of meanings.
Defining White celebrates the color by letting the crowd contribute and appreciate the different meanings of white. We used different images of white from both nature and our living environments to let viewers realize, appreciate, and provide meanings for the color white.

Visit Defining White here.

Bebegarten Education Centre
September 11th, 2014
Website Work

Bebegarten is a place for children to explore, discover, and learn about the world we live in.

We have redesigned a responsive website for Bebegarten Education Centre. We used time-lapse videos to capture their playful and enriched learning experiences, as well as to showcase their spacious activity areas and classrooms where children can learn through play.

The identity is designed by Sandy Choi Associates Limited.

Visit Bebegarten Education Centre here.

PMQ
June 6th, 2014
Website Work

We have designed and produced the new official website for PMQ.

After two years in the making, the former Police Married Quarters has been revitalised into a new creative hub at the heart of Central, with a collection of studios, stores, and restaurants.

Because PMQ consists of many independent brands, we approached the project with a shopping-mall-like structure in mind, plus a magazine style of storytelling. Together with an illustrated floor plan of the stores, we hope the website can allow visitors to explore PMQ’s space with style.

Credits
Design and development: pill & pillow
Creative Director: Stanley Wong, Henry Chu
Illustration: Justin Wong

我們為「PMQ元創方」設計及製作全新官方網站。

「PMQ元創方」在經過兩年的活化工程後,現已由前荷李活道已婚警察宿舍演變為成位於中環 SOHO 區的創意設計集中地,由工作室、店舖,餐廳,及表演場地組成。

由於PMQ內的店鋪多數由獨立品牌組成,所以我們以商場網站為骨幹,加入雜誌式的介紹,用插畫形式呈現店鋪地圖,讓大眾以充滿個性的方式探索 PMQ 的空間。

合作單位
設計及製作: pill & pillow
創作總監:Stanley Wong, Henry Chu
插畫: Justin Wong

深业上城 UpperHills
May 15th, 2014
Website Work

We designed a website for UpperHills – a large-scale urban complex based in Shenzhen.

The main page is composed of twelve sections, each named by a single Chinese character.
Each section provides an immersive experience of “Upper Living” to the visitors, as if they are exploring the actual show suites.

Credits
Design and development: pill & pillow
Branding consultant: Stanley Wong
Photography of the show suites: Jonathan Leijonhufvud
Visual effects consultant: Centro Digital Pictures

我們為深圳大型城市綜合體項目深業上城(UpperHills)打造全新官方網站。

其主頁由十二個段落組成,每一個段落分別以不同的單字去命名,當中「上」代表着尚上生活的精神,「舍」是高端商務公寓的呈現等等。進入不同的段落,猶如推開實體展示中心不同展廳的門,讓未能親身走進深業上城展示中心的人,也能真切地感受到「尚上生活」的理念。

合作單位
設計及製作: pill & pillow
品牌形象顧問:Stanley Wong
展示中心建築攝影:Jonathan Leijonhufvud
視覺效果顧問:Centro Digital Pictures

PYE
May 8th, 2014
Website Work

We designed and built the website for PYE.
PYE is a shirt specialist. Their products are made, tailored, produced and styled by their own team.

NEONSIGNS.HK
April 4th, 2014
Website Work

We have created the website for NEONSIGNS.HK. The identity is designed by gardens&co.

It is an online exhibition presented by M+, the museum for visual culture as part of the West Kowloon Cultural District. The website contains essays, videos, galleries, and a timeline documenting the history of neon signs, but in particular — we have created an interactive map that crowdsources photos of neon signs submitted by the public.

Visit NEONSIGNS.HK here.

New World Development
February 14th, 2014
Website Work

New World Development Company Limited is a world-leading conglomerate based in Hong Kong with big vision of building a better society through innovation and sustainable growth.

We partnered with Coconut Inc. and took the challenge of creating a bold corporate website which envisions the client’s goal of pursuing a “Brave New World”. Over the last six months, we greatly involved in the branding process and worked closely with Coconut to improve the architecture of the website as well as providing a good online communication platform for client and their shareholders.

It is one of the most comprehensive corporate websites that we have ever designed and the experience is rewarding to both client and us.

I AM HERE
January 16th, 2014
Website Work

We designed and built the website for I AM HERE – The giant panda art & charity project, which is curated by AllRightsReserved.

WCWP
January 8th, 2014
Website Work

We have created the website for WCWP. The identity and art direction is designed by Sandy Choi Associates.

WCWP International Ltd is a leading architectural consultancy firm.

Lane Crawford – Autumn/Winter 2013 interactive game
December 24th, 2013
Website Work

We’ve created an interactive game for Lane Crawford.

Client: Lane Crawford
Concept, Design: pill & pillow
Programming: Razorfish Shanghai
Photography: Patrick Demarchelier

Scroll’ Christmas Tree
December 16th, 2013
Website

Oh Christmas Tree! Oh Christmas Tree!

We’ve created the website Scroll’ Christmas Tree to celebrate christmas with you all! Please add the hashtag #scrollchristmastree and be part of our christmas tree! We wish you a Merry Christmas and a Happy New Year!

Silver Lining Productions
October 25th, 2013
Website Work

We’ve created the website for Silver Lining Productions. The identity and art direction is designed by Sandy Choi Associates.

ROCCO Design Architects
June 17th, 2013
Website Work

We’ve created the website for ROCCO Design Architects. We took 2 years to design and build the interactive HTML website for the renowned architect Rocco Yim.

Link: http://www.rocco.hk/

M+ MATTERS
December 5th, 2012
Website Work

We’ve created the website for M+ MATTERS. The event includes 2 public symposiums “Asian Design: Histories, Collecting, Curating” and “Histories and Individual Practices of Contemporary Ink Art”. A series of public talks exploring critical issue with key players in the fields of visual art, design, architecture and the moving image.

We designed a special navigation, it spins around the content.

Creative Direction, Art Direction, Design, Program : pill & pillow
Booklet Design: Garden&Co.

Link: http://www.mplusmatters.hk/

NIKE HK – MvsW
December 3rd, 2012
Website Work

We created the website MvsW for Nike. It is a running competition between men and women. After they registered with Nike+, their data are gathered and visualized on the website. They can compare their running stats with other runners and celebrities.

Creative Direction, Art Direction, Design, Program : pill & pillow
Logo, Art Direction of Main Visual: Benny Luk (Sixstation)
Copywriting: McCann Erickson
Video: Papajay Pictures

Link: http://www.nike.com.hk/MvsW

Hong Kong Design Legacy and Beyond – The 70 Fruitful Years of Kan Tai-keung
September 27th, 2012
Website Work

We’ve created the website of “The 70 Fruitful Year of Kan Tai-keung”. The event includes 3 exhibitions and feature 35 designers who create new works in response to “Uncle Kan”‘s design and artworks.
Link: http://www.kandesign70.com/

School of Creative Media, City University of Hong Kong
August 30th, 2012
Website Work

School of Creative Media from City University of Hong Kong, renewed their faculty site. Presented a new approach to media school website interface with a moving background. The background was generated based on the new campus’s architectural slope and form unpredictable shape. The research websites ALiVE lab and ACIM also share the same design, however different color schemes were applied to differentiate from the School website.
Link: http://www.scm.cityu.edu.hk/

Mobile version of the website

Design, I Say
August 22nd, 2012
Website Work

Design, I Say” 是我們最新作品,是一個網上平台,讓大家發表對設計的想法。
概念上我們用了 “Forgotten War” 中留言版配合地圖的想念。每一個留言都會變成了一張便利貼,並用便利貼拼出一個香港的地圖。留言可以是關於文化、生活、思維或未來等等,也可以在這個平台發表。
Link: Design, I Say

Henry 早前接受了本地字體設計師 Julius Hui 於《Milk》雜誌專欄的訪問,訪問已於今期刊出。

Off-Lo-Hi
March 1st, 2012
Website Work

We’ve redesigned the website for Off-Lo-Hi. Using canvas and CSS3D transform, it allows us to re-create the similar style and effects as in the previous flash version. The website is best viewed with latest Safari/Chrome.

Link: http://www.offlohi.com/

100% iPad compatible, including the smooth 3D effects and page transitions

Hong Kong Design Year 2012
January 18th, 2012
Website Work

Our very first project in collaboration with Mr. Sandy Choi and we proudly present – Hong Kong Design Year 2012 !