Case 04 | Imitate design: Facebook Design Website

Case 04 | Imitate design: Facebook Design Website

Facebook Design网站

使用大面積的淺色作為背景
F1F4F7作為網頁大背景
FFEBEB和FFFFFF作為文字部分背景
字體顏色:73000F

用網頁Inspect功能看照片長寬的細節
照片是正方形,沒有圓角(在最近圓角遍地的設計中具有獨特的個性)

一長段文字的排版之前我一直有些困惑,因為不管是哪種對齊方式在有時候就是無法調整到想要的排版。Facebook Design這裏一行一行的來寫這個長段的代碼,一行一行單獨的來填充文字而不是一整段方便排版

藍色系列文字及圖片互相對應,和粉紅色有一個對比
淺粉和深藍的對比,不會太“輕”也不會“重”

藍色(#385898)的背景上,文字的顏色用的是淺藍(#E1EDF7)

🍺思考:
・有顏色的大塊背景上的文字可以用同色系的淺色
・大塊的背景色可以有對比色,比如Facebook Design用的藍和粉

圖片排開,展現出照片墻的感覺
橫向的排版和上面的豎向的排版進行調劑

大標題的文字都以兩行來排列,保持一致性

用彩色和漸變色先遮住內容,幕布拉開“敬請期待”
UX非常有趣味性,讓讀者想去探尋

總結:
・大塊的較為柔和的彩色作背景色
・彩色背景色上的文字可以用同色系的淺色作為文字顏色,和諧不突兀
・大塊的圖片直接給人視覺上的一個強調,和旁邊的文字互補。既有視覺上的沖擊又有文字提供的信息。整體兼顧美觀和內容