專注于網站建設和搭建網絡營銷體系
商視互聯,北京做網站公司
標準網頁設計流程(草圖設計-PS效果設計實例)附PSD下載
作者:商視互聯   來源:北京網絡公司   日期:2013/7/6 19:21:07   熱度:℃   [ 標簽:網頁設計 ]

  對于很多剛入行的網頁設計來說,總有很多迷惘和不安,特別是在設計過程中,遇到反復修改,更是有想揍人的沖動,有句話怎么說來著,每一次網頁設計師背后,都有一群指點江山的大神。
  這里,就說一下我過往的一些經驗,以及一個網站的設計流程,盡量讓更多的新人少走彎路,踏入網頁設計這一行業。
  前期策劃:
  在做一個網站之前,必須對它有足夠的了解,從各方面入手,最好的情況就是,有一個好的產品,給你一份詳細需要求,或者是直接參與討論,對網站的定位,背景,收入,預期,有一個足夠清楚的認識。
  這是一個關于旅游的網站,類型是電子商務,主要客戶群是歐美用戶,針對性旅游,地點是西藏。有團體旅游,量身打造,普通旅游幾種類別。通過PAYPAL進行支付的一個方式。
  希望呈現給客戶的,是一種專業的特色的旅游線路的這么一個網站。當然,你也可提出你的意見或建議,這也是初期參與討論的好處。
  好比我們的案例,產品認為,這應該是一個極具西藏風情,充滿了花紋與圖騰的網站,我認為它是一個電子商務網站,其次,才是西藏旅游網站。我們要做的是推銷我們的產品,也就是路線,而不是傳播文化。


  原型圖:
  在前期討論一定的結果后,這個時候就可以開始設計草稿了也就是初稿,可以是紙質也可以是電腦的簡單圖形,只要能做一個簡單的初始交流就行。如果有一個好的產品,會給你準備妥當,如果沒有我想大部分都有沒有吧,就得自己來了。
網頁設計草圖

  初稿不用太規整,只需要排出需要的???,以及功能,網站的走向流程就行。體驗下網站是不是能走通,功能上是否有缺失,功能??櫚陌詵攀欠裼形侍?,產品如果通過了就可以下一步了。
  這個時候,我們可以做一個比較詳細一點的原型圖了,方法當然不限,只要最后有東西就行。這里推薦使用axure,可以很好的模擬網站,簡單的線框,就能達到網站上的效果,特別是不愛寫代碼的設計師的一大利器。
網頁設計架構圖

網頁設計架構圖

  線框原型圖完成后,就可以和產品進行溝通交流了,因為這個網站的雛形已經出來了,上線后,大概的樣子也有了,然后可以大家一起使用一下看看有什么不妥,流程是否通暢體驗是否妥當。
  當原型圖沒有任何問題的時候,那我們就可以開始下一步的工作了也就是各位WEB設計最喜歡的一步。

  效果圖:
  根據前面的一些準備工作,那UI的設計就可以開始了。整個網站的主色調,我們使用了西藏的常用色,喇嘛紅。
  根據網站的需求,在首頁上,重發的是凸顯BANNER,那我們除了讓BANNER明顯,還要讓周圍的??槿躉?,以達到這個需要。而在細節上,并沒有過多花哨的設計,幾個簡單的漸變,以及純色塊。更加符合我們的定位,受眾群。
  當然,還有一些小圖標,使用西藏獨有的元素,以增加氛圍。
  特別注意的是,網站必須規整,嚴謹,才能體驗出我們的專業,很多新手在規整上總是馬馬虎虎,這是很大的弊端。
網頁設計效果圖

網頁設計效果圖

 

  完成以后,就可以提交了,然后就是討論了。不過要注意的是這里的討論并不是按需求的喜好來,而是根據我們前期的定位進行一個探討。這樣才不會出現無意義的反復修改。比如你的需求突然告訴你,我更喜歡藍色黃色的網站,你就可以毫不客氣的進行反駁。
  這樣一個網站的設計流程,就到這里結束了,剩下的就是前端,程序……

網頁設計流程圖

  當然這個教程,只是一個大概設計流程,不權威,不獨一,每個公司,大小規模不同,肯定流程也會不同。只是希望能夠幫到新入門的設計師們少走一些不必要的彎路。謝謝瀏覽 (作者:半醉人間)

 

下載PSD網頁設計原件:
網頁PSD設計下載


本文網址: