故事發生在 2019 年,Facebook 從過去結合個人用戶和商業發展,如火如荼地引領著行銷,到後來因為持續修改貼文顯示的演算法,導致許多失望的用戶和企業轉移到 Instagram(雖然也是 FB 的)。而在 Instagram 的個人介紹欄中,由於只能放置一個網址,所以後來便有了 Linktree 和 LNK.BIO 等能夠導出多個網址頁面的服務。自己使用了 Linktree 一段時間,雖然使用簡單、好管理,但介面說不上好看,也沒辦法有效的凸顯個人風格,於是決定連同頭像,來打造一個全新的多網址導出頁面。這次專案並沒有用到什麼艱難的技術,不過從發現問題並思考解決方案,再到最後的實行完成,總是一大樂事!
- 使用預處理器 Sass 撰寫 CSS
- 使用 Photoshop 將 Open Peeps - 開源插畫圖庫 的人物插畫改造為自己的專屬頭像
- 字的顏色使用深灰而不是純黑,降低對比度太高造成的使用者不適感
- 標題使用輕鬆的手寫字體,按鈕字則使用開發辨識度高的程式字體,結合美術設計和編程開發的專業感
- 排版部分使用 CSS 設定根元素為定製的視窗寬度百分比,並搭配
rem
屬性設置達成伸縮響應式設計 - 使用
@media query
做出移動設備和電腦桌面兩種截然不同的內容呈現方式 - 線上版 / CodePen 連結