[Case Study] Urban Village Project

網站：https://www.urbanvillageproject.com/

這次的網站案例分享評分大致為：

• 網站類別：產品介紹，故事
• 故事及結構完整度 - 起承轉合  ⚫ ⚫ ⚫ ⚫ ⚫ 
• 動態與公司個性  ⚫ ⚫ ⚫ ⚫ ◯
• 動態與資訊傳達  ⚫ ⚫ ⚫ ⚫ ⚫ 
• Transition
• Opening  ⩗
• Breathing moment ⩗
• One information at a time ⩗
• Chapters Transition ⩗

故事結構：

Introduction > 3 Approaches > Each approach with explainer (sub-item 1, 2, 3) > About > Resources

在Breathing Moment 過後，直接承接了下一個句子：A new way of living。破題後帶入公司達成這樣new living的方法。開始介紹公司以及這個Project願景。

使用互動幫助資訊傳達：

以圖片互動的方式去解釋空間的運用，代替文字敘述的Efforts。

動態與公司個性：

簡單大方，高質量且清楚的圖片，路牌式的。以素色組成品牌個性，再用動態帶出質感。

Transition:

1. Opening: Smoothing in 的 Transition, 順道帶出公司以及網站的風格。率直，大膽不失仔細。
• 先帶出 Menu button, 爾後introduce Section 1。標體簡單大方。
2. Breathing  moment: 帶出標題過後，從空白的藍天慢慢帶入Co-living的主題，破題式的故事模式。背景圖片逐漸集中於Co-living的房子以及人們生活的樣貌。
3. One information at a time: 利用大方的全螢幕空間，將使用者一次需要消化的資訊單一化。
4. Chapters Transition: 章節和章節之間使用使用Booklet/DM interaction 的方式去區分，以Scroll interaction去區分Chapters，再以Overlay Cards的方式去和切換Chapter的interaction 做區分，帶出章節內內容。