/linktree-clone

Primary LanguageSassOtherNOASSERTION

Linktree (before)Photo

Linktree ClonePhoto

Let’s Make A Linktree Clone (A Refined One)

故事發生在 2019 年,Facebook 從過去結合個人用戶和商業發展,如火如荼地引領著行銷,到後來因為持續修改貼文顯示的演算法,導致許多失望的用戶和企業轉移到 Instagram(雖然也是 FB 的)。而在 Instagram 的個人介紹欄中,由於只能放置一個網址,所以後來便有了 LinktreeLNK.BIO 等能夠導出多個網址頁面的服務。自己使用了 Linktree 一段時間,雖然使用簡單、好管理,但介面說不上好看,也沒辦法有效的凸顯個人風格,於是決定連同頭像,來打造一個全新的多網址導出頁面。這次專案並沒有用到什麼艱難的技術,不過從發現問題並思考解決方案,再到最後的實行完成,總是一大樂事!

  • 使用預處理器 Sass 撰寫 CSS
  • 使用 Photoshop 將 Open Peeps - 開源插畫圖庫 的人物插畫改造為自己的專屬頭像
  • 字的顏色使用深灰而不是純黑,降低對比度太高造成的使用者不適感
  • 標題使用輕鬆的手寫字體,按鈕字則使用開發辨識度高的程式字體,結合美術設計和編程開發的專業感
  • 排版部分使用 CSS 設定根元素為定製的視窗寬度百分比,並搭配 rem 屬性設置達成伸縮響應式設計
  • 使用 @media query 做出移動設備和電腦桌面兩種截然不同的內容呈現方式
  • 線上版 / CodePen 連結