iT邦幫忙

2021 iThome 鐵人賽

DAY 3
2
Modern Web

30天以設計+切版實作(Adobe XD、Bootstrap 5)系列 第 3

【設計+切版30天實作】|Day3 - 參考Bootstrap畫出理想的header(上集)

設計大綱

今天來設計Landing page的header。這次想要做的是一個滿版的header,在header裡面會有標題、內容、以及input(提供使用者填寫email去subscribe平台)。由於怕篇幅太長,所以header會分上集和下集,明天下集才會講Navigation Bar唷!

步驟

  1. 處理header的圖檔

把header的圖片拉進設定好Grid system的畫布裡

https://ithelp.ithome.com.tw/upload/images/20210916/20139489rZjpRBOSZa.png

把圖檔放在畫布的頂端,並調整與畫布同寬

https://ithelp.ithome.com.tw/upload/images/20210916/20139489e8PRMK68Ew.png

  1. 輸入標題、內容、input、button
    這邊會把Header裡的標題、內容及input統一靠右,因為想突顯背景圖

標題

https://ithelp.ithome.com.tw/upload/images/20210916/2013948926Lr7BiS4L.png

  • 在右邊6欄裡輸入標題
  • 文字大小為40px(h1的大小)
  • 字重為Bold
  • 顏色為Secondary(#FDFCFC)

內容

https://ithelp.ithome.com.tw/upload/images/20210916/201394895srd33m395.png

  • 在標題下一行間隔24px,並輸入內容
  • 文字大小為24px(h4的大小)
  • 字重為Normal
  • 顏色為Secondary(#FDFCFC)

Input

https://ithelp.ithome.com.tw/upload/images/20210916/20139489h5jULu90WT.png

  • 在內容下一行間隔40px,並畫出一個長方形
  • 調整為沒背景顏色、外框顏色為Secondary(#FDFCFC)
  • 長度先隨便拉(因為要看Button多長再決定Input的長度)

Placeholder

https://ithelp.ithome.com.tw/upload/images/20210916/20139489tKjrM4TvyH.png

  • 在input內輸入placeholder的文案
  • 文字大小為16px(p的大小)
  • 字重為Regular
  • 顏色為Secondary(#FDFCFC),加上60%透明度
  • 調整Button的Padding,從而調整Button的高度
    (整個Landing page裡的所有input也都會一樣)
    • Padding-y:12px
    • Padding-Left:24px

Button

https://ithelp.ithome.com.tw/upload/images/20210916/20139489zf2Y9Cmy6x.png
https://ithelp.ithome.com.tw/upload/images/20210916/20139489ZPiJepL4vW.png

  • 在Input右邊間隔16px,並畫出一個長方形
  • 背景顏色為漸層的Primary(#9B3C05 ~ #4E1E03)
  • 在裡面輸入Button的文字
  • 文字大小為16px
  • 字重為Medium
  • 顏色為Secondary(#FDFCFC)
  • 調整Button的Padding,從而調整Button的長度與高度
    (接下來整個Landing page裡的所有button也都會一樣)
    • Padding-y:12px
    • Padding-x:40px

調整Input的長度

  • 根據Button的長度,再去確認間距(spacers)是否為16px
  1. 調整位置

https://ithelp.ithome.com.tw/upload/images/20210916/20139489Q2DDdmk2nn.png

  • 確認所有元件的間距
  • 全選header裡的元件,並垂直置中

小提醒:

  • 元件之間的間距大小能分辦出群組的分別,因此這邊能看出有兩組:「標題與內容」「Input與Btn」
  • 記得所有的元件的長度、高度,盡量以padding去「內推」而成

結論

這是我第一次寫實作,還真的有點困難XDD,畢竟在設計時腦袋想到手就開始動了,但要記錄的話,就還要思考哪些部分要拆開講(哈哈哈哈),所以如果有任何錯誤或不懂可以和我說Q_Q!下一篇會講header的下集 —— Navigation Bar!
明天見/images/emoticon/emoticon08.gif


上一篇
【設計+切版30天實作】|Day2 - 開始設計前的環境建立 (Adobe XD)
下一篇
【設計+切版30天實作】|Day 4 - 參考Bootstrap畫出理想的header(下集)
系列文
30天以設計+切版實作(Adobe XD、Bootstrap 5)30

尚未有邦友留言

立即登入留言