網頁設計流程大揭密-首頁上線Ready Go

網頁設計流程大揭密-首頁上線Ready Go

今天請網頁設計師Ellis跟大家介紹紅威網頁設計部門作業流程~讓業務以及新進同仁能更快掌握每個步驟，讓案子更有效率誕生。

網頁設計進行首頁上線時會針對LAYOUT做切版動作，分成頁首、頁尾和中間的欄位，以往的版型LAYOUT設計都很制式化(如下圖1案例：曉玲服飾)，且需套用系統後台設定，像中欄位均很規格式的劃分為左、中和右欄位，在後台頁面設定則依照LAYOUT的切版上線(如下圖1-1)。

不管是推薦模組的最新消息和促銷商品，還是相關連結的FACEBOOK粉絲團，以及最常用的自定模組，以往設計師的作法都會以一個一個區塊去製作和上線，甚至連語法的設定CSS都會在同一個頁面裡，但這樣很容易導致客戶要維護更新時，勿刪到語法或是動到原本的程式，使得網站跑版和變形了(如下圖1-2)。

(圖1)

(圖1-1)

為了滿足客戶更多的需求以及讓後台能更方便維護更新，設計師們打破傳統式的做法。出的LAYOUT已不再是很制式的版面，而是更多樣式變化和破版的感覺，已經不再局限所謂的左、中、右欄位框架裡了。(如下圖2，案例：匯通商務)。

在後台的首頁設定，就變成以100%一欄位去呈現網站的畫面，中間欄位會以自定模組先把每一個區塊都劃分好框架，而每一個區塊都是以模組去製作，再使用javascript語法去搬移到每一個框架裡，就所謂一個蘿蔔一個坑(如下圖2-1)，甚至也已把每一區塊裡習CSS設定移至在整體頁面裡，這樣一來客戶即使在維護後台時，使用html編輯器也不會動到語法(如下圖2-2)。

(圖2，匯通商務網頁設計)

(如下圖2-1)

經過Ellis詳細解說大家應該都能快速掌握網頁設計作業流程，一個好的網頁是需要紅威全體同仁一起努力才能盡善盡美，並運用創意在市場中殺出一條血路，願與大家共勉之^^~

設計師Ellis分享