Case 11 | Redesign: Linkedin.com

Case 11 | Redesign: Linkedin.com

Linkedin網站

這篇主要接上篇對於Linkedin網站的分析,是redesign。

首先從頂部開始

原網站👇

Redesign👇

・把brand logo和search bar的間隔拉大,icon"search"用品牌的藍色來突出表示

・Sign up 和 Sign in都用藍色加粗來表示,同樣的位置排列因為這兩者是同一層級

・拉大各元素間的距離,增加white space

・button "Agree & Join"加大於上一行的距離,讓button更加突出吸引用戶的注意力

・右側的圖片換成真人照片而不是用一個比較meaningless的插畫,照片拉近與用戶的距離。圓形的照片框像一個圓窗,希望能帶給用戶friendly的感受

原網站👇

這一塊區域堪稱是最不喜歡的一部分了,間隔和字體的細節都處理的不是很讓人滿意

Redesign👇

大篇幅照片和統一為藍色標題的字體,希望能為整個頁面增加動感

原網站👇

Redesign👇

這裡進行改動主要還是為了和上面其他元素呼應

因為上面一直是左右結構的排版,為了不顯呆板,所以這裡用一個中心排版的方式

整體redesign👇

🍺思考:

・排版的一致性;相同層級的元素用一樣的設計(如字體大小,顏色,間隔...)會讓網站的專業性上升

・圖片的使用的一致性;插畫和真人照片的混搭也不是不可以,但要搭的融洽很需要功力。Linkedin網站讓我個人吐槽最多的地方就是插畫和照片的混用讓整個網站顯得不專業

・White space要留足;就像是頁面的氧氣一樣,white space的仔細運用對整個網站的用戶瀏覽體驗有很大的影響。最近學CSS我理解到coding的時候就不想去查看設計稿裡到底多少間隔之類的,只想“差不多”就可以了。但作為設計師的角色的話,一定會希望設計稿能99%工程實現,而不是擠成一團的頁面