iT邦幫忙

2021 iThome 鐵人賽

DAY 1
2
Modern Web

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

【設計+切版30天實作】|Day1 - 開賽宣言

前言

在開賽前,先來做個小小的自我介紹好了!目前是火箭隊的網頁設計組,加入火箭隊前有上過六角學院的UI課程(上課前完全是0基礎 ><!!!),但卻從未碰過程式語言。人生第一次學切版就是在火箭隊學的,但自問還是個菜鳥,而且腦袋每次要從設計轉換成程式,說真的一開始還真的有點困難(哭),但還是有堅持下去!

5月的時候因為想了解Bootstrap,所以參加了六角學院的Bootstrap 5實戰營。在裡面一個多月的時間,切版技巧大概有再進步一點點(但還是不夠-v-),畢竟思考邏輯等等的還是沒有到非常順手。所以接下來想要來挑戰自己,以Bootstrap為標準,來進行設計和切版的實作,籍此機會來練習如何「以設計角度切版」,以及「如何以切版角度去設計」。

Landing Page

這一次要設計的Landing Page是一個自由教練的預約平台,不過,這次設計的平台使用對象不是「需要健身的學生」,而是「需要學生的自由教練」。目的除了增加他們的教學經驗以外,還可以讓他們逃出傳統大型連鎖健身房的魔掌(大財團不要討厭我QAQ)!畢竟外面的大型健身房可是從中抽不少利潤呢(-v-)。由於只有30天,所以只會有Landing Page的設計和切版,還請大家不要嫌棄(><)!!!

實作模式

這次的實作將會是「一半記錄如何根據Bootstrap去設計」,「一半記錄用Bootstrap去切版」。整個主軸會以Bootstrap作為框架,例如設計時所參考的參數,以及切版時的框架。

使用之工具及來源

  • 設計工具:Adobe XD
  • 切版工具:VSCODE
  • 圖片:unsplash
  • icon:Google Font

好!那我們就廢話不多說,馬上開始吧!/images/emoticon/emoticon05.gif


下一篇
【設計+切版30天實作】|Day2 - 開始設計前的環境建立 (Adobe XD)
系列文
30天以設計+切版實作(Adobe XD、Bootstrap 5)30

2 則留言

0
祐yo
iT邦新手 5 級 ‧ 2021-09-15 23:39:41

恭喜開賽??
竟然是健身相關的題目!!
一定要follow啊

祐yo iT邦新手 5 級 ‧ 2021-09-15 23:40:23 檢舉

?? 是表情符號…

烙詩 iT邦新手 5 級 ‧ 2021-09-16 08:38:36 檢舉

XDD謝謝~~~~

0
alincode
iT邦新手 2 級 ‧ 2021-11-14 11:45:06

有感受到真的寫得很用心 /images/emoticon/emoticon08.gif
有提供 source code 嗎?
不然只有程式碼片段,很難完整呈現整個範例。
除此之外看不到程式碼,怎麼組織的。

我要留言

立即登入留言