版面設計要如何做呢?
相信很多人跟我一樣會有下列幾種比較常見的問題
- 為何我想要的風格往往跟我想做的差異這麼多呢?
有些時候趕案子,腦袋中突然閃過的念頭,好像每次都跟做出來差好多唷!!明明我要的感覺是溫馨的,怎做出來變成可愛風格? 明明想要用得專業點,結果變成很活潑-___-
- 為何我版面看起來不太平衡?
有些人怎說我的版面看起來歪歪的? 好像左邊資料太多?? 還是右邊資料太多拉? 兩邊比重怎感覺太一致,沒有重點的感覺呢?
- 為啥我做的版面顏色配起來怪怪的?
記得剛在接觸網頁設計時,常被唸的第一個問題就是色彩怪怪的,為何我總是用那幾種顏色 呢? 這顏色好像與網頁主題風格不太一樣? 是不是太嚴肅拉?
舉個例子,也許我們覺得學校應該用活潑點的顏色,代表學生的活力,但是主管也許就認為說, 我們網頁是不是該用點專業的顏色,讓我們感覺比較有專業性 .
- 為何我感覺漂亮的網頁主管不滿意?
這網頁花了我好幾天弄得,為何主管看到就批說難看? Banner怎長得這樣怪異 ( 也許你會認為這樣有創意 ) Content這樣配我覺得不錯阿,可是主管怎認為不夠清楚? Menu不是應該大部分在左邊? 為何要改到右邊呢,有的還放上面.
這些是我開始做網頁工作後,最常遇到的一些問題 . 你是不是也曾經遇過呢?
隨著工作時間的拉長,看得東西越廣 ,其實也漸漸了解到,有些其實可以透過一些小技巧,避過這些煩惱,不過有些時候也必須要有適度的心理建設
1. 建立自己的資料中心
- 圖庫
仿間很多圖庫是需要錢的,假設所在的公司有購買,那是最好不過,但是也總是會遇到圖片不太適用,缺少某些類型的情況,這或許也是許多設計師愛亂拍照的原因之一,自己拍圖庫使用🙂 ,但是切記!!如果拍攝的東西牽涉到版權問題,例如人像..商品..,請記得詢問當事人或者是稍加處理過再使用,不要直接拿來引用!!
- 版型(Layout)
仿間有出一些版面設計的書籍,平常可以買來當參考書籍使用,也可以在平常看網頁時,隨手將一些不錯的頁面存檔,或依據區塊存檔,將來草圖設計時頗方便使用
2. 初期:收集資料
其實做網頁版面設計,第一步不外乎就是收集資料 . 要收集到多詳細呢? 越詳細越好!!
- 網頁的對象為何? ( 網頁希望給End User? 或者是給技術人員使用? )
- 對方所希望的版面風格? (可愛? 專業? 活力? 設計感? )
- 是否有提供相關的圖片? ( 相關活動圖片,Logo原圖?或者是要自行設計?
- 有沒有特殊偏好? (喜歡Menu在左邊? 喜歡Logo跟形象區塊合在一起? 喜歡藍色?)
- 預期要放置哪些資料呢? (網頁為靜態網頁或者是需要Flash ? DHTML? 是否須要搭配程式設計人員? )
- 網頁預期要做到多少階層? ( 網頁要有多少的分頁? 要依據使用人員,還是要依據性質分類? 分類網頁要做到顏色區分嗎? )
3. 中期:設計草圖
收集完資料,該是時候設計草圖了,透過草圖 , 能更快的讓設計者看清所有的需求,知道這
麼多資料在搭配上,會出現怎樣的問題 , 建議在此 ,可以多設計兩三個型態的版面 (Layout ,
如果對象有偏好的版型,就以小範圍更動為主),與主管進行確認動作 .
- 將已存的小圖 ,區塊圖拿出來剪貼
- 簡單的打一些沒意義的文章 (或去其他網頁剪貼),將需要文章性區塊的地方補上
- 進行初步的調整,色系,區塊樣式
- 利用黃金比例或格線排版劃分區塊大小
訪間有些書籍會介紹一種叫灰色區塊的方式,利用大大小小的灰色區塊來設計草圖,用意其
實相同,了解這些資料合在一起會發生怎樣的問題.不過灰色區塊有個缺點-感覺太陌生,
用實例的小圖反而效果更好 .
4. 後期:設計完整版
這段時間大概是最花時間的,由草稿轉變成的完整版,往往會因為與主管預期 ( 業主,對象 )
有些許落差,導致反覆的修改,但是必須要提醒的是,人對於視覺是很主觀的!!你認為好看
的,別人不一定有這樣的想法 . 往往會因為一張小圖 (你引用的圖片或某個文章字體大小),
會希望你改成他想要的樣子,不辛的,這樣的步驟會重覆好多次!!
解決方式呢?沒有,很現實,不過導是提供幾個我常用的方法給大家參考
- 找出參考資料
假設你引用一個不錯的設計概念,你可以將相關資料一並提供,讓對方了解其實有這樣的做法 - 參考該對象相關網頁
如果你做的是某單位的網頁,你可以去看一下她們現行網頁,了解他們的偏好,某些配置大體相似,可以省去相當多這類的修改時間 - 換個顏色
有時候其實改一下顏色配置,可以讓不顯眼的文章變得清晰,讓搶過主題的區塊稍微降低
5.書籍推薦
- web layout design-最優的版面風格設計
- Design玩設計!出色網頁大賞
- web design index 系列
- 超越式CSS
文章寫到這已經亂七八糟了,希望能幫助到想了解的人,也歡迎大家交換意見,有機會可以一起研究網頁設計 :)
6. 不錯的網頁觀念推薦