Case 08 | Imitate design: Disney.com

Case 08 | Imitate design: Disney.com

Disney.com

首頁nav bar在左側,和Microsoft design網站一樣

但是search bar乍一看有些突兀

黑色的線條做邊框,裡面用的背景灰色過重不太自然。藍色的“放大鏡”標誌很粗糙,整體這個search bar就想一個粗糙未完成的部分,與整個Disney的網站顯得格格不入(後文有redesign部分)

如果回想之前模仿Airbnb網站的search bar部分

把search icon部分用主題色背景標出,既有一個強調的作用也突出一個主題色(增加趣味)

👇 redesign search bar

主題網站部分和Airbnb排列方式類似

框框變換每行不同個數的組合

這裡的Disney Visa Card鼠標懸浮的時候,不能單個單個卡“浮”起來。這部分的設計略感覺不夠優雅精緻(後文有redesign部分)

對於文字的處理,對齊方式

title, content, CTA(call to action)都沒有對齊。讓用戶有一些困惑,是不是沒有處理好的設計和代碼?

👇Redesign typography(保持對齊)

一致性

相同模塊的部分是一樣大小的照片,一樣的字體細節

深色背景和淺色背景交替

保持連續一致

After 模仿設計

🍺思考:

・對齊,保持專業性的呈現

・Search bar的技巧值得多研究

・用大幅照片和小幅照片(一行排列)來間隔,保持版式的趣味性