網頁設計界面元素概念圖
在設計完成網頁的各種界面元素後，即可根據這些界面元素，使用Photoshop或Fireworks等圖像處理軟件制作網頁的概念圖。

網頁概念圖的分辨率應照顧到用戶的顯示器分辨率。針對國內的用戶的顯示器設置，大多數用戶使用的都是17英寸甚至更大的顯示器，分辨率大多爲1024×768以上。去除浏覽器的垂直滾動條後，頁面的寬度應爲1003 px。高度則網頁設計盡量不應超過屏幕高度的5倍到10倍（即620×5=3100 px到6200 px之間）。


概念圖的作用主要包括兩個方面。

一方面，設計者可以爲用戶或網站的投資者在網頁制作之前先提供一份網頁的預覽，然後根據用戶或投資者的意見，對網頁的結構進行調整和 改良。

另一方面，設計者可以根據概念圖制作切片網頁，然後再根據切片快速爲網站布局，提高網頁制作的效率。


設計界面

在紙上或電腦上繪制好網頁的結構圖之後，即可根據網站的基本風格，在計算機上使用Illustrator或CorelDRAW等矢量圖形軟件或Photoshop、Fireworks等位圖處理軟件繪制網頁的Logo、按鈕和圖標。

Logo、按鈕、圖標等都是網頁界面設計的重要組成部分。設計這些內容時需要注意整體界面的風格一致性。包括從色網頁設計調到圖形的應用、圓角矩形與普通矩形的分布等。

其中，設計Logo時，可使用一些抽象的幾何圖形進行旋轉、拼接，或將各種字母和文字進行抽象變化。例如，傾斜、切去直角、用線條切割、連接筆畫、反色等。



按鈕的設計較爲複雜。常網頁設計見的按鈕主要分爲圓角矩形、普通矩形、梯形、圓形以及不規則圖形等。

在網頁中，水平方向導航菜單的按鈕設計比較隨意，可以使用各種形狀。而垂直方向的導航菜單則多使用矩形或圓角矩形，以使各按鈕貼得更加緊密，給用戶以協調的感覺。

圖標是界面中網頁設計非常重要的組成部分，可以起到畫龍點睛的作用。在繪制圖標時，需要注意圖標必須和其代表的內容有明顯的聯系。

例如，多數網站的首頁圖標都會繪制一棟房子，而多數網站的聯系方式圖標都是電話、信紙等通信的方式，這樣的圖標會使用戶一眼看出其 作用。

而如果使用過于抽象的圖標網頁設計公司，則容易被用戶誤解，或影響用戶使用網站的功能。

l 設計字體

字體是組成網頁的最主要元素之一。合理分配的字體可以使網站更加美觀，也更便于用戶閱讀。

在設計網頁的字體時，應先對網頁進行分類 處理。

對于多數浏覽器和操作系統而言，漢字是非常複雜的文字，多數中文字體都是無法在所有字號下正常清晰顯示的。

以宋體字爲例，10px以下的宋體通常會被顯示爲一個黑點（在手持設備上這點尤爲突出）。而20px大小的宋體，則會出現明顯的鋸齒，筆畫粗細不勻。

即使是微軟設計的號台中網頁設計稱最清晰的中文字體微軟雅黑，也無法在所有的分辨率及字號下清晰地 顯示。

經過詳細的測試，中文字體在12px、14px、16px（最多不超過18px）的字號下，顯示得最爲清晰美觀。

因此，多數網站都應使用12px大小的字體作爲標准字體，而將14px的字體作爲標題字體。在設計網頁時，盡量少用18px以上的字體（輸出爲圖像的文本除外）。

在字體的選擇上，網站的文本是給用戶閱讀的。越是大量的文本，越不應該使用過于花巧的 字體。

如針對的用戶主要以使用Windows XP系統和純平顯示器爲主，則應使用宋體或新宋體等作爲主要字體。如果用戶是以使用Vista系統和液晶顯示器爲主，則應使用微軟雅黑字體，以獲得更佳的體驗。