iT邦幫忙

2021 iThome 鐵人賽

DAY 15
1
Modern Web

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

【設計+切版30天實作】|Day15 - 來個完美的簡約風Footer結束這回合

設計大綱

Landing Page的主要色都偏深色,另外CTA也有用主要色作為背景顏色了,所以這邊的Footer就決定用淺色的Secondary-color來作為背景顏色。

Footer的設計通常都是滿版的,但這邊跟CTA一樣是滿版也沒關係,只要背景顏色不要一樣深就好!Footer會包含LOGO、social media的連結、一些不太重要但又要存在的連結(?),最後就是copyright啦!

步驟

背景

  1. 在畫布畫出一個滿版寬的長方形,不用管高度
  2. 背景顏色為Secondary (#FDFCFC)
    https://ithelp.ithome.com.tw/upload/images/20210927/20139489THF12BI6sN.png

LOGO

  1. 把Navbar上所設計的「LOGO」 複製貼上
  2. 顏色調整為Primary (#9B3C05)
  3. 與背景上方保持一定距離(目前還沒有確實的數字,先大概就好)
  4. 維持置中對齊
    https://ithelp.ithome.com.tw/upload/images/20210927/20139489hcNxszp3jY.png

Social Media 連結

  1. 載入目前最多人用的社群媒體icon —— Facebook、Instagram、Line
  2. 調整大小為24px*24px
  3. 調整顏色為Primary (#9B3C05)
  4. 左右間距維持 24px
  5. Margin-top維持 16px
  6. 與上方維持置中對齊
    https://ithelp.ithome.com.tw/upload/images/20210927/201394895lCzOXXX3f.png

不太重要但又要存在的連結

  1. 輸入可能會有的「a連結」之文案
  2. 文字大小為 16px
  3. 文字字重為Normal
  4. 文字顏色為 Primary (#9B3C05)
  5. 左右間距維持 48px
  6. Margin-top維持 16px
  7. 與上方維持置中對齊
    https://ithelp.ithome.com.tw/upload/images/20210927/20139489CJfEzGZq9n.png

Copyright

  1. 輸入Copyright的文案
  2. 文字大小為 16px
  3. 文字字重為Normal
  4. 文字顏色為 Primary (#9B3C05)
  5. Margin-top維持 16px
  6. 與上方維持置中對齊
    https://ithelp.ithome.com.tw/upload/images/20210927/20139489xxkLPxCaW6.png

調整間距

  1. 檢查目前所有的東西是否都有置中對齊
  2. 全選這些元件,調整Margin-y為112px
    (*為什麼是112px?因為本來用96px,但看起來不夠寬廣的感覺,所以再多加了一點!)
    https://ithelp.ithome.com.tw/upload/images/20210927/20139489LkKNrOo7YQ.png

結論

這十幾天就完成Landing Page的12個區塊了,雖然其實實際上應該不用到十幾天就可以設計完這些區塊,但因為要寫文章-v-,所以分成一天一個區塊來寫~ 相信每個區塊都有學到東西吧!(吧?XD)

好!那設計完,接下來就要開始把設計出來的設計稿進行切版囉!是不是又緊張又期待呢!(怕.jpg)/images/emoticon/emoticon08.gif


上一篇
【設計+切版30天實作】|Day14 - 簡約CTA的用處及設計的注意事項
下一篇
【設計+切版30天實作】|Day16 - 進入切版前的前置作業之列出設計稿上的數據
系列文
30天以設計+切版實作(Adobe XD、Bootstrap 5)30

尚未有邦友留言

立即登入留言