大綱

前面已經把Landing Page的設計稿設計完成了，接下來要開始切版實作！但在切版前，我們需要把設計稿上的數據都先列出來，因為切版前要先做客製化的設定唷！

流程

1. 把設計稿上的所有顏色都列出來，例如primary-color、secondary-color、text-color、link-color等顏色
2. 把設計稿上所有文字的font-family、font-size、font-weight列出來，並檢查一下有沒有不統一的地方
3. 把設計稿上的margin、padding通通列出來，檢查一下有沒有不統一的地方
4. 下載或複製頁面上的圖片及icon

Landing Page的設計稿

實際操作

Theme-color（網頁顏色）

• Primary：#9B3C05
• Secondary：#FDFCFC
• Dark：#707070
• Primary-light：#EFDFD6
• Linear gradient：#9B3C05 ~ #4E1E03
• Opacity-text：$primary + opacity 40% → #B38366

Gradient（漸層效果）

• 把原本預設的漸層改成主題顏色的漸層（要看設計稿是哪兩種顏色去做漸層）
• 設計稿上漸層有兩個圓點在最左和最右，那就是漸層的開始與終結
  
  

Font（文字）

• font-family：思源黑體（Noto Sans TC）
• font-weight：btn-medium、topic-bold、text-normal
• font-size：14px、16px、24px、32px、40px、48px、56px

Margin、Padding（間距）

看看設計稿上是否所有元件的padding都是8的倍數，以及可以同時看一下Bootstrap原始檔裡的variables，可以參考裡面$spacers的數值喔！（下圖附上$spacers的數值）

8px
12px
16px
24px
32px
40px
48px
96px
112px

結論

因為之前曾經試過沒有根據Bootstrap的規範而設計，導致在後續的切版上遇到很多麻煩，因此希望下次在設計時可以先考量到後續切版的因素而去適度地調整，另外也先把重要的細節先列出來，這樣切版時就能輕鬆許多！
那明天就可以來進行下一步囉