Solitarily
你 好 世 W e a r e t h e m o s t l o n e l y. 界 Lost on the way his heart. 網 頁 設 計 企 劃 書
Hello World
Solitarily
Solitarily YeanFang-Ho Ęźs web profoli o
1
Solitarily
contens.
網站名稱 目的與目標 設計理念 (1) 創意緣由｜ (2) 視覺風格｜ (3) 色彩計畫
網站架構圖 設計概念圖 (1) 首頁 ( 附 DIV 標籤圖 ) (2) 關於我 (3) 按鈕設計
時間進度表 相關參考網站 (1) 網 址 彩 色 擷 取 圖 ( 首 頁 與 內 頁 ) 跟 網 址 (2) 參考網頁製作的解剖圖
3
網頁設計企劃書
網站 名稱
Solitarily Solitarily
YeanFang-Ho ʼs web profolio
YeanFang-Ho ʼs web profolio
Solitarily 將 作 為 未 來 何 彥 鋒 的 作 品 集 網 站，以 及 各 目的 目標
式合作企劃案消息將會在此網站發布，希望未來能與設計 界的夥伴們能藉由此網站發布的企劃案內容更認識何彥 鋒，此外更延伸領域擴展至策展企劃及活動策劃的合作。
(1) 創意緣由
設計 理 念
Solitarily 意 思 為 孤 獨 的 意 思， 作 為 本 身 自 我 的 孤 獨，也因此採用這詞作為此網站的品牌整合名稱。 品牌標語「我們總是孤單的，迷失在自我的心中」 (2) 視覺風格 主要以幾何線條及圖案作為本網站的風格設定，以及互動 式的動態效果與觀看者做更進一步的連結，網站內也有部 分詼諧風格的小彩蛋按鈕提高觀看者的興趣。 (3) 色彩計畫
#080705
#0066B5
#FBEFEC
本身很常使用深色以外的顏色做為視覺主色，但這此我想 採 用 大 膽 的 黑 色 來 搭 配 我 的 網 站 ， 再 以 PA N TO N E 的 色 票 選擇能搭配孤獨一詞的藍色，最後文字用接近白色的粉白 來平衡整體視覺。
4
Solitarily
網站架構
Home page 1
Home page 2
NEWS
About
Works
Recommend
ABOUT
GRAPHIC
EXPERIENCE
PHOTOGRAPHY
MESSAGE
FUTURE
PROJECT
LINK
FRIEND
Contact
I N F O R M AT I O N
MOTION
5
網頁設計企劃書
DIV 標籤圖
Wrapper
6
Solitarily
設計概念圖（首頁 2）
DIV 標籤圖
Header
ContentA
ContentB
ContentC
ContentD
ContentE
Footer Wrapper
7
網頁設計企劃書
設計概念圖（關於我 - 上半段）
DIV 標籤圖
Header
ContentA
ContentB
ContentC
ContentC-1
Wrapper
8
ContentC-2
Solitarily
DIV 標籤圖
設計概念圖（關於我 - 下半段） ContentD ContentD-1
ContentD-2
ContentD-3
ContentE ContentE-1 ContentE-2
Footer Wrapper
9
網頁設計企劃書
設計概念圖（關於我 - 經驗 1）
ContentD-1
ContentD-4
DIV 標籤圖
ContentD
ContentD-5
Wrapper 10
Solitarily
設計概念圖（關於我 - 經驗 2）
ContentD-1
ContentD-4
DIV 標籤圖
ContentD
ContentD-6
Wrapper 11
網頁設計企劃書
設 計 概 念 圖 （ 關 於 我 未 來 ）
ContentD-1
ContentD-7
Wrapper 12
DIV 標籤圖
ContentD
Solitarily
設計概念圖（關於我 - 全部）
13
網頁設計企劃書
14
Solitarily
游標靠近 Go alone 按鈕，主標題會漸漸轉成藍色
15
網頁設計企劃書
點擊花圖示的按鈕，會出現詼諧文字的效果
16
Solitarily
NEWS
NEWS
ABOUT
ABOUT
WORKS
WORKS
RECOMMEND
RECOMMEND
CONT ACT
CONTACT
游標靠近選單文字，會改變文字顏色
游標靠近選單文字，會出現裝飾性框線
17
網頁設計企劃書
游標靠近名字，圓圈將會反白為藍
18
游標點擊頭貼的藍圓點，文字資訊會出現
Solitarily
First impression
First impression
看起來很累的人 第 一 印 象
沒睡飽 吸毒犯
看起來很累的人 第 一 印 象
喜 愛 音 樂
吸毒犯
Preference
Preference
平面編排
平面編排
網頁設計
網頁設計
底片攝影 偏 好 創 作
沒睡飽
動態影像 男體
底片攝影 偏 好 創 作
動態影像 男體
Musi c
Musi c
日本流行
日本流行
巴薩諾瓦 弦樂爵士
喜 愛 音 樂
巴薩諾瓦 弦樂爵士
游標靠近項目選單，色塊框將會變動
19
網頁設計企劃書
20
Solitarily
點擊白色圓點，文字欄將會滑掉到下個小分頁
21
網頁設計企劃書
作品連結分四個項目
靠近選項後圖片會放大，跑出選項文字
22
Solitarily
所有文字內容
23
網頁設計企劃書
時間進度表
10/08
10/22
11 / 11
初稿構想
視覺定案
企劃書完成
11 / 2 0
12/03
12/16
細節修改
製作網頁
收集資料
12/31
網頁完成
24
Solitarily
相關參考網站
優點： 作為一個設計公司的網 站，很注重之前案例的 文案內容，也歸類為文 章，很適合參考。 缺點： 首頁採用過多的視差滾 動，可能對一部分的觀 看者會造成眼花的問 題。
Header
ContentA
ContentB
ContentC
https://fishsaut.com 25
網頁設計企劃書
相關參考網站
優點： 整 體 網 頁 的 DIV 標 籤 並 沒 有 很 多， 雖 然 普 遍，但用編排手法達到 間單又美的效果。 缺點： 按鈕的連結跳動有點不 太流暢。
Header
Content
Footer
http://www.2tigersdesign.com/#!/about/ 26
網頁設計企劃書
2
何 彥 鋒 YeanFang-Ho
Solitarily YeanFang-Ho’s web profolio