【设计+切版30天实作】｜Day15 - 来个完美的简约风Footer结束这回合

设计大纲

Landing Page的主要色都偏深色，另外CTA也有用主要色作为背景颜色了，所以这边的Footer就决定用浅色的Secondary-color来作为背景颜色。

Footer的设计通常都是满版的，但这边跟CTA一样是满版也没关系，只要背景颜色不要一样深就好！Footer会包含LOGO、social media的连结、一些不太重要但又要存在的连结（?），最後就是copyright啦！

步骤

背景

1. 在画布画出一个满版宽的长方形，不用管高度
2. 背景颜色为Secondary (#FDFCFC)
   

LOGO

1. 把Navbar上所设计的「LOGO」 复制贴上
2. 颜色调整为Primary (#9B3C05)
3. 与背景上方保持一定距离(目前还没有确实的数字，先大概就好)
4. 维持置中对齐
   

Social Media 连结

1. 载入目前最多人用的社群媒体icon —— Facebook、Instagram、Line
2. 调整大小为24px＊24px
3. 调整颜色为Primary (#9B3C05)
4. 左右间距维持 24px
5. Margin-top维持 16px
6. 与上方维持置中对齐
   

不太重要但又要存在的连结

1. 输入可能会有的「a连结」之文案
2. 文字大小为 16px
3. 文字字重为Normal
4. 文字颜色为 Primary (#9B3C05)
5. 左右间距维持 48px
6. Margin-top维持 16px
7. 与上方维持置中对齐
   

Copyright

1. 输入Copyright的文案
2. 文字大小为 16px
3. 文字字重为Normal
4. 文字颜色为 Primary (#9B3C05)
5. Margin-top维持 16px
6. 与上方维持置中对齐
   

调整间距

1. 检查目前所有的东西是否都有置中对齐
2. 全选这些元件，调整Margin-y为112px
   （＊为什麽是112px？因为本来用96px，但看起来不够宽广的感觉，所以再多加了一点！）
   

结论

这十几天就完成Landing Page的12个区块了，虽然其实实际上应该不用到十几天就可以设计完这些区块，但因为要写文章-v-，所以分成一天一个区块来写～ 相信每个区块都有学到东西吧！（吧？XD）

好！那设计完，接下来就要开始把设计出来的设计稿进行切版罗！是不是又紧张又期待呢！（怕.jpg）