Case 01 | Imitate design: Apple Website "Newsroom" Page

First case study and imitate design analysis of Apple website "Newsroom" page

Case 01 | Imitate design: Apple Website "Newsroom" Page
An image of Apple Macbook

Apple Newsroom

苦惱於提升自己的設計思考,光是看好的產品和作品總是紙上得來終覺淺。所以就開始了這個模仿並思考的Case Study系列。第一篇就從Tech Giant:Apple的網頁設計開始吧。
選擇了Apple Website 中的"Newsroom"這一部分來進行設計模仿,本篇將從一個新手的視角從一步步來分析模仿過程,以及最重要的是在這個過程中的思考和獲得的新ideas
用時:8h
使用工具:Figma, Chrome瀏覽器,Eagle(存圖片工具)

1. 導航欄部分

截圖導航欄部分,並粘貼至Figma中

在Figma中,我選擇了"MacBook Pro"的Frame, 畫一個等長的Rectangle (寬度待調整)

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f06e7f03-859b-4ad8-a62f-f1c18b3a6402/Untitled.png

✨如何能準確覆制到顏色,字體的細節呢?

網頁的Inspect(代碼檢查)功能
用網頁打開一個網站,右擊鼠標放在你想了解更多細節的元素上,點擊Inspect即可以看到元素的代碼。可以看到color, 或font-size, letter-spacing etc.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/2b057c00-4948-4eab-9e2b-eca2e452181a/Untitled.png
https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b33980d2-5c18-4446-a989-51fbff67afc5/Untitled.png

Apple的字體,圖標和很多資源都是可以在官方免費下載

Apple平台的Symbol下載鏈接:https://developer.apple.com/design/resources/

Apple平台的字體下載鏈接: https://developer.apple.com/fonts/

下載好SF Symbols在電腦中,如圖可以搜索需要的圖標

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/43626cc4-fd02-408b-bd24-f1bb1ce354c7/Untitled.png

按照Inspect代碼中的信息,字體大小,間距在Figma中進行複刻調整

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4173dafd-f412-4b72-8615-d053ed170f86/Untitled.png
Figma右侧面板中的调整图片

Figma中也可以用“Inspect"功能來檢查相關元素的值

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/49ff6ed1-31f7-4cc2-be46-dd66dd9ed264/Untitled.png

Done (橙色圈起部分是截圖,下方是設計模仿)

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/dbc1771e-43d0-46d4-9dca-0c00d8d182c6/Untitled.png

🍺思考:

巧用好網頁中的鼠標右擊"Inspect"功能,可以看到元素的細節(比如字體大小,背景顏色等)在學習他人好的設計網頁時非常有用

Apple Resources可以在Apple Developer的網站上免費下載,包括SF的字體,圖標等

2. Nav bar下方的白底bar

包含Search bar 的有“Newsroom"的nav bar

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/c251dd90-20de-49b8-b275-835c39522823/Group_34.png

用做nav bar時候的方法去inspect蘋果官網的代碼,找到字體的細節(顏色,字號,字間距等)

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/0cf76e08-c7a8-4316-8c24-016e7ede4155/Untitled.png

在SF Symbols裏找到下拉箭頭圖標

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/380759ac-1ed5-49dd-8b19-31fbfb8346b0/Untitled.png

🍺思考:

  • 對齊;“Search Newsroom"在Support下方中間位置,“Popular Topics"右對齊上面的“Shopping bag"的圖標

3. 內容區域

如果字體是懸浮在圖片上面的,註意背景圖片和上方文字的對比度
這是蘋果官網圖片

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/42782826-77d5-4c33-adeb-da8b089f9ebb/Untitled.png

下面是我隨機選的一張圖片

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/516a72c8-fe57-48a0-9438-45e55a4f577f/Untitled.png

文字內容"UPDATE"因為是白色的,需要深色的背景來襯托。而我隨機選擇的這張圖片與上面白色的字對比度遠遠不夠,幾乎看不到字了

🍺思考:

設計的細節:背景圖片和懸浮在圖片上方文字的對比度,忍不住感慨好的設計中沒有一張圖片是隨隨便便選出來的

4. 對稱的排版

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/cb08e36e-ac0d-468c-a7b2-13758caa5f86/Untitled.png

margin-right, margin-bottom都是36px, 對稱性的設計讓閱讀體驗舒適簡單
用Figma Component組件功能來高效的做相同排版的區域

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/8a6e8c6c-771d-45d9-964c-dc6b67391d91/Untitled.png
https://s3-us-west-2.amazonaws.com/secure.notion-static.com/a60547cd-a123-4e3b-af7c-c56cc7e55ff8/Untitled.png
https://s3-us-west-2.amazonaws.com/secure.notion-static.com/605e0b57-3825-48f0-9a24-ff3fbb4978dc/Untitled.png

  • 字間距有變化:次級的信息(如“UPDATE" "July 2021"的"letter-spacing"都是-1%左右)比較緊湊,主要信息(如“Apple scored 35 Emmy..."是1%左右)稍微松一些
  • margin是32 (文字內容距離上下左右都是32px)
https://s3-us-west-2.amazonaws.com/secure.notion-static.com/ffc3ff32-2342-4ece-8f6c-b47f6729691d/Untitled.png
https://s3-us-west-2.amazonaws.com/secure.notion-static.com/ea59205f-536e-4c49-9976-ddcb01c7d44f/Untitled.png

🍺思考:

  1. 2個boxes一行的,和3個boxes一行的中“UPDATE" & “July 2021"這兩行的文字的細節是一樣的(字體,顏色,字間距),保持了一致性
  2. 中間黑色文字部分的字體大小和間距不一樣
    two boxes一行的: 黑色中間部分文字:字體 24 bold(700) 字間距0.9%
    three boxes一行的: 黑色中間部分文字:字體 24 bold(700) 字間距 1.2%
  3. 文字和box的邊距不同, 因為每行的box數量不同,box的寬度不同,box裏面的文字側邊距也不同
    two boxes一行的: margin 32px
    three boxes一行的: margin 24px

5. 填充圖片

鼠標右擊圖片“Save Image"
因為是Eagle會員,所以這裏顯示的是“Save to Eagle"。Eagle是挺不錯的用來管理圖片素材庫的一個工具。(非讚助廣告)

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/ff99cf22-8394-4cfc-9bc6-d914f53ffec8/Untitled.png

把對應圖片直接覆制粘貼到Figma裏
Tips: Figma圖片粘貼:Ctrl+C原圖,在Figma裏直接選中想要粘貼的區域,一般是一個rectangle即可, 然後Ctrl+V

6. 背景黑色的分割區域

這一塊區域的覆刻方法同上,但這塊區域讓我感覺很妙的是:它起到了一個很好的分割的作用,上面一堆box的文字,下面也是一堆文字。這塊區域讓整個頁面不那麽全是文字加白色背景堆疊在一起,妙啊🐱

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/0a7c1064-6c10-4de9-ae6e-45f2a6e399ef/Untitled.png

上方是文字box

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/72303ee9-8854-46bf-990a-3f7f3adcc31f/Untitled.png

下方也是文字區域

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/7fd84e92-d368-4ae2-88c7-ba8295db6918/Untitled.png

7. 底部區域

這塊區域的覆刻方法同上,有趣的是每一塊小區域中每行文字的間距是固定的(中間黑體字有2行的也有3行的)

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/316dfeb1-f11a-4be9-b3b0-6fe9de450905/Untitled.png

UPDATE與中間黑體間距4px
中間黑體與下方日期間距8px
而之前上面的box區域裏的文字是邊距確定,但每行文字間的間距不固定

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4a67a709-783c-4952-9560-1cf415a71f72/Untitled.png

總結:

工具技巧
・用好網頁中的“Inspect"功能,可以學習到好的設計網站的細節
・保持一致性:字體的整體的層級(分層的顏色)
・文字的對齊和margin保持邏輯(比如24px, 32px這種基本都是4的倍數)

設計思考
・好的作品是每一個細節都很註意,很連貫
・模仿好的作品的過程一直保持思考,從數據(數值)中看一些規律