版面設計要如何做呢?

相信很多人跟我一樣會有下列幾種比較常見的問題

  • 為何我想要的風格往往跟我想做的差異這麼多呢?
    有些時候趕案子,腦袋中突然閃過的念頭,好像每次都跟做出來差好多唷
    !!明我要的感覺是溫馨的,怎做出來變成可愛風格? 明明想要用得專業點,結果變成很活潑-___-
  • 為何我版面看起來不太平衡?
    有些人怎說我的版面看起來歪歪的
    ? 好像左邊資料太多?? 還是右邊資料太多拉? 兩邊比重怎感覺太一致,沒有重點的感覺呢?
  • 為啥我做的版面顏色配起來怪怪的?
    記得剛在接觸網頁設計時,常被唸的第一個問題就是色彩怪怪的,為何我總是
    用那幾種顏色 ? 這顏色好像與網頁主題風格不太一樣? 是不是太嚴肅拉?

    舉個例子,也許我們覺得學校應該用活潑點的顏色,代表學生的活力,但是主
    管也許就認為說, 我們網頁是不是該用點專業的顏色,讓我們感覺比較有專業 .
  • 為何我感覺漂亮的網頁主管不滿意?
    這網頁花了我好幾天弄得,為何主管看到就批說難看? 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. 不錯的網頁觀念推薦

Leave a Reply

Your email address will not be published. Required fields are marked *