iT邦幫忙

切版相關文章
共有 50 則文章
鐵人賽 Modern Web DAY 30

技術 【設計+切版30天實作】|Day30 - 最後一天了嗚嗚嗚的30天參賽心得

感人時刻 今天是鐵人賽30天的最後一天了,有種「嗯?30天了喔?」的奇妙感覺!畢竟已經習慣每天上來發文,也習慣隊友們每天互相提(恐)醒(嚇)發文!!! 突然有點...

鐵人賽 Modern Web DAY 26

技術 【設計+切版30天實作】|Day26 - Reviews區塊 - 卡片可以因應不同用途而千變萬化

前面完成了「Carousel」區塊,今天來完成「Reviews」的區塊。 數據收集 card 標題的樣式 Font-weight:Regular F...

鐵人賽 Modern Web DAY 24

技術 【設計+切版30天實作】|Day24 - Steps區塊 - 如何做出漸層背景?

前面完成了「Pros」區塊,今天來完成「Steps」的區塊。 數據收集 標題的樣式 Font-weight:Medium Font-size:24p...

鐵人賽 Modern Web DAY 23

技術 【設計+切版30天實作】|Day23 - Pros區塊 - 看似無邊框的三欄式卡片,到底要對準哪條欄位?

前面完成了小廣告區塊,今天來完成「平台好處 - pros」的區塊。 數據收集 card標題的樣式 Font-weight:Bold Font-siz...

鐵人賽 Modern Web DAY 22

技術 【設計+切版30天實作】|Day22 - 設計小廣告 - 背景上又有背景到底怎麼切!

前面完成了「PainPoints」,今天來完成這一塊「小廣告」的區塊。 數據收集 Content標題的樣式 Font-weight:Bold Fon...

鐵人賽 Modern Web DAY 21

技術 【設計+切版30天實作】|Day21 - PainPoints - 怎麼切出標題底下的highlight 裝飾?

大綱 昨天完成header的部分了,所以接下來就會進入main的部分,今天要完成的是「PainPoints」的區塊。 (如下圖) 數據收集 標題的樣式...

鐵人賽 Modern Web DAY 20

技術 【設計+切版30天實作】|Day20 - Navigation bar - 打破預設的navbar排版

大綱 昨天完成了header的下半部分,今天的任務就要來完成header的上半部分 —— Navigation bar!廢話不多說,馬上開始吧! 數據收集 n...

鐵人賽 Modern Web DAY 19

技術 【設計+切版30天實作】|Day19 - 切版 - Heroheader - 怎麼切出滿版heroheader?

大綱 前半段都在設計,今天開始就要進行切版了!(緊張!!!)那我們header的部分分成heroheader和navbar,今天的任務是切「Heroheader...

鐵人賽 Modern Web DAY 18

技術 【設計+切版30天實作】|Day18 - Bootstrap的客製化

大綱 上一篇把環境都建立完成後,今天要來做客製化,但在這之前,先來說明一下為什麼要客製化,以及為什麼會把客製化放在前面。 由於這一次的挑戰是以設計師角度去做,因...

鐵人賽 Modern Web DAY 17

技術 【設計+切版30天實作】|Day17 - Bootstrap的環境建立

大綱 要切版前當然是要先來建立環境,所以我們下一篇再來做客製化!那環境要怎麼建立?其實還蠻簡單的!只要跟著下面的步驟去做,很快就會上手啦!不過先說明一下,這篇文...

鐵人賽 Modern Web DAY 16

技術 【設計+切版30天實作】|Day16 - 進入切版前的前置作業之列出設計稿上的數據

大綱 前面已經把Landing Page的設計稿設計完成了,接下來要開始切版實作!但在切版前,我們需要把設計稿上的數據都先列出來,因為切版前要先做客製化的設定唷...

鐵人賽 Modern Web DAY 15

技術 【設計+切版30天實作】|Day15 - 來個完美的簡約風Footer結束這回合

設計大綱 Landing Page的主要色都偏深色,另外CTA也有用主要色作為背景顏色了,所以這邊的Footer就決定用淺色的Secondary-color來作...

鐵人賽 Modern Web DAY 14

技術 【設計+切版30天實作】|Day14 - 簡約CTA的用處及設計的注意事項

設計大綱 設計CTA的用意一方面是讓結尾不會來得太突然,另一方面是想在網頁的最後再來一個「Call To Action」。 由於上面已經有蠻多不同樣式的設計區塊...

鐵人賽 Modern Web DAY 13

技術 【設計+切版30天實作】|Day13 - [設計進階挑戰] 把原本Plans的背景圖形改成特殊形狀

設計大綱 昨天設計的「方案」區塊的背景設計是單純一個長方形+背景顏色+陰影。今天想來做點不一樣的,所以來寫個「進階挑戰」。這一個挑戰主要打算修改「方案的背景框」...

鐵人賽 Modern Web DAY 12

技術 【設計+切版30天實作】|Day12 - 怎麼讓使用者選中您想要他選的Plans設計?

設計大綱 今天要來設計「方案」,外面的網站通常會有3個方案供使用者選擇。另外如果要吸引使用者註冊的話,那通常會有一個是「免費試用」方案讓使用者試用,從而引導使用...

鐵人賽 Modern Web DAY 11

技術 【設計+切版30天實作】|Day11 - [設計進階挑戰] 如何把Reviews的呈現方式改成可滾動式的卡片呢?

設計大綱 在上一篇設計「Reviews」這個區塊時,有提到切版時可能會有「切不出來」的情況發生,所以只好把原本腦海裡想要的設計改成簡單兩行的卡片式去呈現。但是!...

鐵人賽 Modern Web DAY 10

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

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

鐵人賽 Modern Web DAY 9

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

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

鐵人賽 Modern Web DAY 8

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

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

鐵人賽 Modern Web DAY 7

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

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

鐵人賽 Modern Web DAY 6

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

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

鐵人賽 Modern Web DAY 5

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

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

鐵人賽 Modern Web DAY 4

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

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

鐵人賽 Modern Web DAY 3

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

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

鐵人賽 Modern Web DAY 2

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

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

鐵人賽 Modern Web DAY 1

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

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