Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
作品集
Search
ZUO
July 17, 2019
Design
82
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
作品集
ZUO
July 17, 2019
Other Decks in Design
See All in Design
【2026】ポートフォリオ_大坪明日香
tsubo52
0
130
富山デザイン勉強会_生成AIを使ったデザイン制作2026最新版.pdf
keita_yoshikawa
0
160
デザインハーネス 〜AIが生成する"デザイン"の妥当性を、誰がどう担保するのか〜 / PdEConf2026 Design Harness
kgsi
14
22k
Agentic Design Workflowを育てる 「三層デザインハーネス」の現在地
sayadesign2
0
790
信頼をデザインし、ブランドで市場を拓く。/ Designship2026
assuredjp
PRO
0
240
LP制作のための熱量ハーネス -人の熱量を、AIとの制作につなぐ-
niccy
0
1.8k
少人数チームで_使われるプロダクトにたどり着くための_デザインハーネス.pdf
nishame
1
1.6k
このスロップ時代に良きデザインをつくるには? / good-design-in-the-slop-era
kgsi
1
1.1k
デザインレビューを「他者へのおすそわけ」に再定義し、たのしい場にする試み
webnaut
0
110
StartDesignEngineering
uchiyama886
1
150
【Designship2026】「社内受託中心部署」から、事業とカルチャーを動かすデザイン組織へ
sugiyama_sukedachi
0
140
Basket_of_love.pdf
terencebasart
0
360
Featured
See All Featured
How to Align SEO within the Product Triangle To Get Buy-In & Support - #RIMC
aleyda
2
1.8k
GraphQLの誤解/rethinking-graphql
sonatard
75
12k
The B2B funnel & how to create a winning content strategy
katarinadahlin
PRO
1
570
16th Malabo Montpellier Forum Presentation
akademiya2063
PRO
0
410
Speed Design
sergeychernyshev
33
2.2k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
2.2k
VelocityConf: Rendering Performance Case Studies
addyosmani
331
25k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.8k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
128
56k
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
inesmontani
PRO
3
2.5k
Crafting Experiences
bethany
1
380
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
12
1.3k
Transcript
None
CONTENTS
01 Graphic Design Works 02 Web Design 03 Interaction Design
/////////////////////////////////////// 4 10 15
WORKS 01 Graphic Design Design tools : PhotoShop 4 4
//////////////////////// Graphic Design Banner 5
6 ///////////////////////////////////
Poster Card We were all meant to Fly. In my
barren land you are the final rose. 明信片義賣活動 //////////////////////// Graphic Design 7
Cover Sticker Design Thinking for Future 8 ///////////////////////////////////
Poster //////////////////////// Graphic Design 9
02 Web Design Design tools : Front-end : Html, Css,
JavaScript Back-end : PHP 10
i ✿ Blossom 為了讓鐵花窗再次步入大眾眼 中,我們以網站形式放上蒐集 到的台南鐵花窗資料,製作成 台南的花窗地圖;同時,使用 者可以在地圖上標示出他所發 現的花窗地點,所有人都可以 共同完成這張台南花窗地圖。
此外,網站中還有鐵花窗的歷 史故事、照片集、散步路線等, 期望可以透過這些資訊讓對於 鐵花窗有興趣的人可以更加了 解鐵花窗,擁有一張自己的鐵 花窗地圖。 黑鐵花窗是富有台灣特色的民間裝飾工藝,曾經流行一時,發 展出許多獨特的樣式,卻在工業發展下迅速地消失了,現在大 多僅能在巷弄間窺探一隅。 2. 設計理念 1. 設計背景 鐵花窗 地圖 資料 呈現 大眾 力量 將我們原本蒐集到的既有資料以 網站方式呈現。 透過互動功能,使用者可以自 行新增他們所發現的新的花窗 地點、資料等。 期望以網站的方式呈現資料,讓鐵花窗可以被更多人所看到, 並透過大眾的力量蒐集更多鐵花窗資料,形成一個鐵花窗地圖。 推 廣 //////////////////////// Web Design 11
3. 網站架構 進入頁面 花窗地圖 花窗檔案 攝影集 散步地圖 職人專欄 友善連結 網頁進入頁面
4. 網頁實際畫面 (滑鼠滾動、點擊) (側邊欄點擊) • 花窗故事地圖 • 新增花窗 • 花窗歷史 • 紋理工法 • 實拍台南花 窗照片集 • 三種主題的 散步路線 • 調查紀錄 • 訪談紀錄 • 參考資料 • 店家資訊 /////////////////////////////////// 12
網頁主頁面 - 花窗地圖 網頁側邊欄 - 檔案故事 //////////////////////// Web Design 13
網頁側邊欄 攝影集 台南花窗散步地圖 調查紀錄、訪談 參考資料、店家網站 /////////////////////////////////// 14
03 Interaction Design Design tools : Processing, Illustrator 15
Game Design - 鐵花窗 延續之前對於鐵花窗的調查研究,在製作網站後,開始思考還 有什麼更有趣的作法可以讓鐵花窗更廣為人知。以本身經驗出 發,認為遊戲是一互動性較強也更有趣、吸引人的媒介。 遊戲分為三個關卡,前兩關沿著窗花歷史的時間軸設計,分別 為:黑鐵窗花的興盛、鋁窗出現後黑鐵窗的衰落,由此兩段帶 出鐵花窗的歷史。
而最後一階段則是用特殊圖案的鐵花窗圖形,帶出背後具有特 別意義的窗花故事。 1. 設計背景 2. 設計構想 1 2 3 迷宮遊戲 客製化 拼圖遊戲 遊戲背景時間軸 關卡 1920 年代,鐵 花窗盛行時期 1990 年代,黑 鐵花窗被不鏽 鋼、鋁窗取代 花窗歷史故事 遊戲類型 迷宮遊戲 (鋁窗) 拼圖遊戲 (黑鐵花窗) 小畫家 (特色黑鐵花 窗) 關卡重點 a. 有趣、吸引人 b. 客製化 c. 讓玩家開始思 考「這」是什麼 a. 緊張、令人煩 躁 b. 為接下來的歷 史故事鋪墊 a. 繪出專屬於自 己的花窗 b. 講述特色故事 設計重點 故事呈現 /////////////////////////////////// 16
3. 遊戲內容畫面 1 玩家可以任意 將左側的元件 放置到右側的 框架中,創造 出屬於自己的 拼圖。 完成拼圖以後,會出現對應的現存花窗紋理
> 2 玩家必須要在 限制的時間內 從原點到達指 定的終點。 第二關結束以後,會進入鐵花窗的歷史故事。 //////////////////////// Interaction Design 17
3 玩家可以利用左 側的筆刷工具來 彩繪出鐵花窗的 圖樣。 第三關結束後,進到收集冊,可以收集之前關卡中所繪製的花窗圖形。 在遊戲開始前有特殊含義 的鐵花窗故事說明,讓玩 家可以在開始前了解此階 段的遊戲意義。
/////////////////////////////////// 18
None
None