iT邦幫忙

2021 iThome 鐵人賽

DAY 6
2
Modern Web

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

【設計+切版30天實作】|Day6 - 設計出背景上又有背景的吸睛小廣告

設計大綱

上一個區塊設計了使用者的「痛點」,因此接下來的區塊想要做一個「平台的小廣告」,讓使用者了解到我們這個平台可以幫助他們解決問題。
由於上一個區塊並不是滿版的設計,所以今天這個小廣告的設計將會用滿版的設計,這樣就會比較有平衡感喔!
而小廣告的內容底下,我想要用一個微透明白色作為小小的打底背景,讓小廣告的內容更能突顯出來,所以設計將會是以「背景圖 > 微透明白色背景 > 文字內容」的方式進行!這樣講是不是很抽象XDD,好啦!直接進入重點!

步驟

滿版背景

https://ithelp.ithome.com.tw/upload/images/20210917/20139489fCtI0wFsJw.png

  1. 找出適合的圖片來作為滿版的背景圖
  2. 把圖片直接拉進畫布
  3. 調整寬度與畫布同寬
  4. 維持上下margin為96px

微透明白色背景

https://ithelp.ithome.com.tw/upload/images/20210917/20139489qnqaZrZSTZ.png

  1. 畫出一個與container同等寬的長方形
  2. 高度等等再調整
  3. 長方形的顏色為 #FFFFFF+80%

標題與箭頭

https://ithelp.ithome.com.tw/upload/images/20210917/20139489uGqUlOJj15.png
https://ithelp.ithome.com.tw/upload/images/20210917/20139489lNOjkVfpt5.png

  1. 標題和內容想以 靠左對齊 來呈現,所以這邊直接在左邊開始輸入文案
  2. 標題文字大小為32px(h2的大小)
  3. 標題字重為Bold
  4. 標題文字顏色為Text(#707070)
  5. 這邊用鋼筆工具幫標題的下方畫一個裝飾用的小箭頭,顏色為Primary-color(#9B3C05)
    (這是裝飾用哈哈哈哈,看你們啦~)

內容

https://ithelp.ithome.com.tw/upload/images/20210917/201394895iVfhcrUHv.png

  1. 內容和標題一樣從左開始輸入文案
  2. 內容文字大小為16px(p的大小)
  3. 內容文字字重為Normal
  4. 內容文字顏色為Text(#707070)

按鈕

https://ithelp.ithome.com.tw/upload/images/20210917/20139489z1iAs7mNw1.png

  1. 按鈕的部分想 靠右對齊,這樣才能平衡視覺感覺,讓小廣告的右邊看起來不會太空!
  2. 把上面的Button複製下來使用
  3. 修改Button的文字為「瞭解方案」

調整間距

https://ithelp.ithome.com.tw/upload/images/20210917/20139489pJnY35wl6b.png

  1. 把「標題」、「內容」、「按鈕」之間的間距調整為24px
  2. 把「整個文字內容」與「透明白色背景」之間的間距調整為margin-y:96px、margin-x:72px
  3. 調整完後,你會發現「透明白色背景」的高度就自然而然地出來了
  4. 把調「透明白色背景」與「滿版背景圖片」之間的margin-y調整為96px
  5. 這時候,「滿版背景圖片」的高度也出來了

結論

今天的區塊設計也不太難,而重點就是 整個區塊裡面的元件高度不用預先設定好,這就是之前提到的 用padding去推擠高度 的做法,這樣在之後切版時也會比較輕鬆!來想想,只要加上「py-10」就能讓元件撐大,不用再另外開新的scss去加入padding的客製化(下省1000字),這樣是不是方便多了呢!
明天再來寫下一個區塊吧!/images/emoticon/emoticon08.gif


上一篇
【設計+切版30天實作】|Day5 - 做出3欄式「痛點」設計
下一篇
【設計+切版30天實作】|Day7 - 設計出無外框式的三欄式pros區塊
系列文
30天以設計+切版實作(Adobe XD、Bootstrap 5)30

尚未有邦友留言

立即登入留言