35網站建設專題頁面設計全過程 -網上推廣


10年經驗,萬家客戶!對于專門負責網站建設的兄弟部門來說,是一個足以回顧前程的臺階。而作為設計這次專題頁面的我們,覺得有必要把設計過程記錄下來,作為記憶的同時與大家一起分享。

先看看最后上線的部分截圖:

 

接下來,簡單回顧下整個設計過程(為什么加個簡單呢,因為碼字還是比較累的:P):

需求分析階段

此次的需求十分簡單明了,就是在網建10年之際做一個簡單的專題頁面,讓瀏覽者在頁面中能夠看到以往的客戶案例。從需求來看整體頁面不需要有過多的內容,因為客戶最關心的案例部分已經做成電子雜志和在線瀏覽兩種方式以供觀看,所以我們要做的實際上就是一個專題形象頁面。既然已經明確了需求,那就展開討論吧。

創意討論階段

有討論的時候就是有口福的時候:),幾瓶可樂,幾個小點心,拉出白板拿起畫筆,開始了嘰里呱啦的討論過程,此處省去三萬兩千字……

經過菜市場喊價殺價般的討論后,最終確認了以下幾點:
1. 以藍天、白云為背景:云是一種高度的象征,而天空則是另一種更高的高度象征;辛苦攀登了10年已經值得回望,但在回望之后還有更長的路要走;
2. 以10年為中心:正因為經歷了10年的攀登,才會有今天的高度,因此這個中心點肯定要牢牢抓住;
3. 以案例為輔助:有付出就會有收獲,10年的付出換來的是超過萬家的客戶,無數的案例就是最好的見證。

幾個核心點已經達成共識,那么接下來就是體現手法了(因為要記錄硝煙彌漫的討論過程難度那是相當的大,因此只給最后的討論結果留了張照片,請各位觀眾見諒見諒):

 

一共是三個方案,統一都用藍天白云作為背景。左上角的草案是對眾多的客戶案例進行陣列排版,憑借天空的縱深感來展現出磅礴的氣勢;右上角的草案則是將10字大大的立于云端之上,然后用看似成千上萬的案例環繞在10的周圍,體現出10年歷程的背后有著無數的客戶肯定;而最后左下角的草案是由無數的案例拼湊成10的形狀,體現萬家客戶共同見證的10年歷程。

為了重現“火拼現場”的雄姿,Juns拿起了畫筆,Cat擺起了姿勢,用彪悍的作風讓本已收起相機的攝影師十分委屈的給他們補了張俊照……看,當時就是這個姿勢。

 

咦?奇怪,此次的主要設計師飯特稀呢?這個,看來是討論時意見不合被這兩人給廢了,估計正躺在公司的某個過道上-_-!,這兩個人在部門可是號稱……剛寫到這里又感覺到強烈的殺氣,Yang覺得還是算了,再寫下去就不單單是變成亞健康狀態了-_-。

設計階段

在有了3種草案后,那么接下來當然就是各顯神威的時候了。但是Yang怎么看怎么覺得左下角的草案很眼熟啊,經過一番翻箱倒柜查找,終于找到了“罪魁禍首”(看右圖):

 

很相似吧,算了,既然已經被微軟先入為主了,那么作為強烈支持原創的我們來說,只好放棄了這個草案。

評審階段

在經過兄弟們很多很多~~~很多很多(回音)小時的埋頭奮斗后,設計稿終于出爐,顯而易見,兩稿中最后通過評審并最終確定下來的是稿二。

稿一草圖和最后實現效果:

 

從實際效果來看,整體展現不出“萬家”客戶的宏偉氣勢,注定被Cancel。
(由于是未采用的設計稿,因此只用小圖體現,請各位看客多多包涵)

最后看看稿二完善過程的效果圖:

 

稿二最終定稿效果圖:



剩下的就是廣告banner等周邊配件的設計和頁面實現階段了,再此就不多廢話了,看圖,收筆:)

首頁Flash Banner截圖:



有興趣的可以直接訪問專題頁面觀看整體效果:
網建10年專題頁面:http://www.35.com/promotion/site10years/default.html
廣告Banner更新頁面:http://www.35.com

原文:http://ui.35.com/2009/04/17/wangzhanjianshezhuantiyemianshejiquanguocheng/


arrow
arrow
    創作者介紹
    創作者 pagepe 的頭像
    pagepe

    pagepe的部落格

    pagepe 發表在 痞客邦 留言(0) 人氣()