Solitarily 網頁設計企劃書

Page 1

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


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.