版型的設計不能單純以視覺設計角度來看待網站風格,網站版型設計同時關係到一個網站的版面資訊規劃、網頁使用流程、網頁瀏覽動線。因此,在設計一個網站版型時,必須同時考慮網站風格、介面設計、切版工程的相互整合。

此階段工作大致包含以下工作項目:

  • 視覺概念發展
  • 網站風格設計
  • 網頁介面設計
  • DIV+CSS網頁切版工程

 

視覺概念發展

網站的視覺元素來自於網站的背景定位。如果是中秋節的活動網站,其網站背景可能就會有滿月、飛雲等意象造形;如果是企業網站,適度帶入企業識別(CI, Corporate Identity)的設計符碼,將能表現企業品牌的視覺一致性。視覺元素有可能是某種造形、材質或紋路,適當的使用就能為網站帶來別出心裁的設計。

網頁設計 視覺概念發展

 

網站風格設計

網站風格是對網站一種視覺上的詮釋。如果是企業網站,就會展現出落落大方、有條理、簡單、清楚的網站風格;如果是活動網站,就會以繽紛的色彩或文字造形來引發網友參與活動的欲望;如果是購物網站,價格和清楚的購物車圖示,才能讓人一眼看出這是個可以線上血拼敗家的地方。每種網站風格都有其設計背景源由,透過正確的網站背景分析才能建立正確的網站風格,吸引到正確的網站訪客,同時也節省網頁設計公司與業主客戶間雙方面來回修改溝通的時間。

網頁設計 網站風格設計

 

 

網頁介面設計

網站是拿來用的,不是單單做完後放到網路上觀賞,網站的整體網頁使用介面,包含導覽、連結、表單、內容編排,都應該要有一致性的設計。使用介面必須能讓網路上的訪客看到就知道怎麼用,不需要花時間思考「這個到底是做什麼用的?」因此,按鈕就必須長得像「按鈕」;選單就必須長得像「選單」;「最新消息」也不要無厘頭的用「看看新玩意兒」,某些文字創意,在網路上可能會讓網友很想直接關掉網頁。

網頁設計 網頁介面設計

 

CSS+DIV網頁切版工程

「切版」指的是將網站風格提案後的圖檔,切成許多小圖片,再利用CSS語法及網頁DIV標籤組成一般在瀏覽器上所看到的網頁。DIV標籤構成網站版面位置,如同蓋房子時的鋼筋結構;CSS則定義出每個位置的介面樣式,如同蓋房子時的磁磚與內部裝潢。

網頁設計 切版

ABOUT

CADIIS凱士網頁設計公司,專為中小企業設計、規劃、建置網站,
提供網站建置前後設計規劃諮詢服務。

整體
規劃
從產業策略洞悉到網頁設計
專精RWD網頁技術及SEO架構
簡約
設計
堅持化繁為簡的設計理念
讓網頁用戶專注您的產品服務
彈性
管理
透過全站式網站管理系統
讓您隨時調整網站架構與內容
維護
諮詢
不論是網站維護諮詢或網站行銷
我們是您長期的網路策略夥伴

REVIEWS

  • 從網站規劃到完成,發現凱士數位細心及專業度都很足夠,如果有下一次機會,我們還是會再給凱士數位施作。

    康普材料, 2017
  • Eric是個非常有經驗的專案經理,了解客戶的需求,並能快速釐清卡關障礙並迅速排除、總是從專業角度分析及建議怎麼做會比較好、和客戶一起腦力激盪,如期如質將網站建置專案完成,並提供相當有用的SEO建議及訣竅。結案後的諮詢及微調修改,凱士的專業團隊也總是非常及時給予支援,維護與管理的服務也同樣令人放心!

    HEF, 2017
  • 作為材料界的國際化公司,誌陽需要的不只是內容完整,還需要情境來提供目標客戶知的權益!正由於這個堅持我們找上了CADIIS幫我們完成這些規劃。在互動的過程中可以看出他們的用心,除了提供以往經驗讓我更容易感受外,對於我們不斷提出高門檻的技術問題也能以最快的時間完成使命,如果你沒法感受我的心情,不妨進到我們網站去感受吧!www.allightec.com 好東西就是要跟好朋友分享。

    誌陽科技, 2017
網頁設計獲獎
台灣廣告主協會與動腦雜誌聯合主辦「台灣50家最佳設計公司」票選活動,CADIIS榮獲入選「傑出多媒體設計公司」。
 

 

有任何網頁設計問題?

跟我們說說您的網站構想,或是目前面臨的網站規劃問題

我們將與您聯絡、共同討論解決方案。

 

網頁設計洽詢