iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

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

這次的實作將會是50%記錄如何根據Bootstrap去用Adobe XD設計,50%記錄用Bootstrap在VSCode切版。
整個主軸會以Bootstrap作為框架,例如設計時所參考的參數,以及切版時的框架。

DAY 1

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

前言 在開賽前,先來做個小小的自我介紹好了!目前是火箭隊的網頁設計組,加入火箭隊前有上過六角學院的UI課程(上課前完全是0基礎 ><!!!),但卻從...

2021-09-15 ‧ 由 烙詩 分享
DAY 2

【設計+切版30天實作】|Day2 - 開始設計前的環境建立 (Adobe XD)

簡介 今天會講一下在設計前要怎麼建立環境,畢竟在設計前還是要先備好畫布嘛,但畫布的尺寸要怎麼挑選呢?所以下面會簡單講一下怎麼根據瀏覽器的尺寸和Bootstrap...

2021-09-16 ‧ 由 烙詩 分享
DAY 3

【設計+切版30天實作】|Day3 - 參考Bootstrap畫出理想的header(上集)

設計大綱 今天來設計Landing page的header。這次想要做的是一個滿版的header,在header裡面會有標題、內容、以及input(提供使用者填...

2021-09-17 ‧ 由 烙詩 分享
DAY 4

【設計+切版30天實作】|Day 4 - 參考Bootstrap畫出理想的header(下集)

設計大綱 上一集設計完header的滿版背景後,今天會設計Navigation bar。Navbar在網頁來說也是蠻重要的一個元件,通常會有LOGO、常用按鈕或...

2021-09-18 ‧ 由 烙詩 分享
DAY 5

【設計+切版30天實作】|Day5 - 做出3欄式「痛點」設計

設計大綱 早安!今天來設計痛點,這邊我想要做三欄式,列出三個他們目前主要可能會遇到的問題,再加上圖片,讓使用者有感到身受的感覺。另外,因為Grid system...

2021-09-19 ‧ 由 烙詩 分享
DAY 6

【設計+切版30天實作】|Day6 - 設計出背景上又有背景的吸睛小廣告

設計大綱 上一個區塊設計了使用者的「痛點」,因此接下來的區塊想要做一個「平台的小廣告」,讓使用者了解到我們這個平台可以幫助他們解決問題。 由於上一個區塊並不是滿...

2021-09-20 ‧ 由 烙詩 分享
DAY 7

【設計+切版30天實作】|Day7 - 設計出無外框式的三欄式pros區塊

設計大綱 上一個區塊賣完小廣告後,今天馬上就給它塞個平台的優點進來,這樣可以讓使用者有「感同身受」的感覺,同時也能讓他們覺得「哇!好像真的很棒唷!」。 「優點」...

2021-09-21 ‧ 由 烙詩 分享
DAY 8

【設計+切版30天實作】|Day8 - 看起來簡單但不單調的steps設計

設計大綱 稱讚完平台的優點後,接下來的區塊就要向使用者介紹使用的流程,但因為現代人都很懶得看很冗長的「說明書」,所以使用流程會採用簡約的方式去做介紹。 因為上面...

2021-09-22 ‧ 由 烙詩 分享
DAY 9

【設計+切版30天實作】|Day9 - 把Bootstrap預設的Carousel新增變化

設計大綱 一個平台要成功,當然少不了圖片/照片的介紹(很愛看圖的懶人XD),所以接下來要設計一個區塊 —— 專門輪播「使用平台的過程照片」。 Bootstrap...

2021-09-23 ‧ 由 烙詩 分享
DAY 10

【設計+切版30天實作】|Day10 - 因應Bootstrap的元件去彈性設計Reviews區塊

設計大綱 原本想把Reviews做成一行六個、並且可以超出視窗,另外使用者可以用拖曳的方式去移動卡片。但看完Boostrap 5的官網,目前好像沒辦法切出超出視...

2021-09-24 ‧ 由 烙詩 分享