1、進行用戶調研,確定網頁的內容(主體):確定下網站的名稱什麽,也就是確定我們要做的究竟是壹個什麽樣的網站;確定好名稱主題,用戶要表現的什麽樣的主要內容,即用戶的意圖,用戶想要從那個側面來表現他的主題。
2、設計網頁欄目及組織結構:網站結構壹般包括了三種,即層狀結構、線性結構、Web結構(網狀結構)。
層狀結構:層狀結構類是似於目錄系統的樹型結構,從網站文件主頁開始,依次劃分成壹級標題、二級標題等等,逐級細化,直至提供給瀏覽者具體的信息;
線性結構:線性結構類是似於數據結構中的線性表,用於組織本身的線性順序形式存在的信息,可引導瀏覽者按部就班地瀏覽整個網站文件。這種結構壹般都用在意義是平行的頁面上。通常情況下,網站文件的結構是層狀結構和線性結構相結合的。這樣可以充分利用兩種結構各自的特點,使網站文件既具有條理性、規範性,又可同時滿足設計者和瀏覽者的要求;
Web結構:Web結構類似於Internet的組成結構,各網頁之間形成網狀連接,允許用戶隨意瀏覽。
3、準備素材:收集與整理相關資料
4、界面設計:根據網站的訪問者對象、要提供的信息以及制作目標得出壹個最適合的網頁架構
5、網頁排版(頁面實現):根據所設計的界面進行網頁排版。
6、網頁測試與發布:網頁測試包括功能性測試和完整性測試兩個方面。所謂功能性測試就是要保證網頁的可用性,達到最初的內容組織設計目標,實現所規定的功能,讀者可方便快速地尋找到所需的內容。完整性測試就是保證頁面內容顯示正確,鏈接準確,無差錯無遺漏。深圳龍崗網頁設計培訓提醒您如果在測試過程中發現了錯誤,就要及時修改,在準確無誤後,
方可正式在Internet上發布。網頁設計好,必須把它發布到互連網上,否則網站形象仍然不能展現出去。發布的服務器可以是遠程,也可以是本地。
7、網頁推廣與維護:網站建成之後,隨後的工作就是進行推廣。網站如果不進行推廣,就容易成為信息的孤島,長期沒有多少人訪問,漸漸地失去了建站的意義。
網站界面設計分哪些步驟進行第壹步:創建壹個畫布
首先,打開photoshop創建壹個新的項目。妳可以點擊文件>新建或按下CTRL+N快捷鍵來創建。我們選擇壹個普通的畫布大小1000×900,當然這些設置可以在後期增加。
第二步:應用漸變
既然我們的畫布已經創建了,是時候開始背景的設計了。創建壹個新層(快捷鍵CTRL+SHIFT+N)。接著給這個圖層從左往右添加漸變前景色設置為edd8af背景色為ede4c9.這個顏色用來表示盒子的顏色。
第三步:添加紋理
我們想要BoxedArt背景設計看起來像厚紙板的效果。創建另壹個新層,顏色填充為bcb6a9。下壹步應用膠片顆粒藝術效果設置參數如下。接著為了使它看起來粗糙壹點,我們給它應用壹點高斯模糊效果。
以下就是我們應用這些效果後背景圖層看起來的效果。
第四步:導航條設計
頂部的導航區域部分我們放置了壹條條狀的帶子。我們可以看到這種帶狀風格在很多網站都有應用,不過我們這裏用到的有壹點不同。由於BoxedArt想要將這個設計看起來像用來發送郵件的盒子。為了創建這個導航條我們需要從上下載壹個帶狀的圖片,使用自由變換工具(在編輯菜單下選擇自由變換或者快捷鍵CTRL+T)沿著頂部的區域伸展開來。接下來創建透明效果我們要把圖層樣式設置為線性加深。
第五步:老郵票導航按鈕
停留在盒子主題,我們要讓這個導航按鈕看起來有點破舊磨損郵票。為了達到這種效果列,我們需要壹張老郵票(還是在上下載)。下載後第壹步是描出郵票的路徑,從背景中提出來,郵票上依然有圖像。為了覆蓋郵票上的圖像,我們用壹張黃色的紙張粘貼在上面也就是添加壹個紋理效果。
下壹步,我們要給導航按鈕添加壹些顏色來區別各種不同類的導航,我們在郵票上添加壹些裝飾花紋效果,在妳完成創建好顏色盒子後,我們把這個層的樣式修改為線性加深以便顏色能與老照片混合在壹起。然後我們增加另壹個新層自上而下顏色為黑白我們給這個圖層添加膠片顆粒藝術效果設置如下,最後我們把圖層設置為正片疊底,把這個不透明度設置為60%。
第六步應用導航按鈕到導航條上
現在我們已經創建好了幾個不同顏色的郵票按鈕,是時候來完成最後header部分的準備工作了,把導航按鈕應用到導航條上,我們通過給每個導航按鈕應用由mathilde設計的Sketchyicons圖標來添加壹些手寫效果。這些icon圖標是放置在每個顏色盒子,並調整了中心圖標的位置。同樣的步驟把icon應用到每個郵票上去。
下壹步,對每個郵票使用自由變換工具(CTRL+T),將他們調整不同的朝向給他們壹種拍打的效果。這壹步後,我們切換到文字工具,每個分類使用壹種手寫字體。這裏我用到的是“LovedbytheKing”.最後我們的導航條就完成了。
第七步開始頂部介紹區域
首先創建壹個新層(CTRL+SHIFT+N)在工具欄中選擇矩形選框工具。現在在頁面上創建壹個矩形使用白色來填充。這塊區域將被用來當做壹張白紙。
好了我們已經完成白色紙張部分了,在白紙圖層下面創建另壹個新層然後填充黑色,這個將用來創建陰影。完成之後我們轉到濾鏡>模糊>高斯模糊半徑設置為6.5.之後把這個層的不透明度設置為20%,向右移動5pixels。然後添加主要的文字,這樣的話短語”SimplifyandSave”會被用到,位於頂部紙張部分。
現在妳看在白紙下面有陰影,但是紙張並不是粘在哪裏的。所以我們在紙張的壹邊來添加壹些膠帶,如先前的教程壹樣,我們在另壹邊添加了壹個郵戳來保持畫面的平衡。在妳的紙張完成後,我們選擇壹些手寫字體來添加壹些文字。看起來的話想事包裹上的信息。最後加亮這些圖層按下CTRL+T自由變換工具,角度設為-1.5degrees使它看起來更加具有真實效果。
第八步貼上壹個便簽
我們使用了壹個便簽設計來分開空間來介紹我們網站的優惠註冊信息。這個在整個盒子主題上運用的非常好,設計這樣壹個便簽效果需要創建另壹個新的圖層,選擇鋼筆工具使用鋼筆工具來繪制壹個方形區域。
在妳完成之後轉到路徑面板,按住CTRL鍵點擊路徑圖層,接著妳會看到方形區域已經載入選區了,之後使用前景色fffb78背景色fffcd1從左上角到右下角繪制漸變。妳將會看到這樣壹個熟悉的黃色便簽紙形狀。
第九步
現在我們需要再壹次添加陰影效果,給這個便簽紙添加深度,所以創建另壹個新層(CTRL+SHIFT+N)。過程如之前給白紙創建陰影差不多,但是是將不透明度設置為40%。妳需要變換壹下陰影來創建壹種傾斜效果,輕微的拖動壹下。
第十步給便簽紙添加內容
下壹步,給便簽紙添加壹些文字,在我們的便簽紙中我們要添加壹些加入等按鈕,為了創建相似的按鈕首先我們繪制壹個盒子使用綠色填充,然後添加壹個蒙板選擇壹種grudge筆刷。下壹步遮住按鈕的壹些部分看起來就像破損壹樣,這就是我們創建郵戳的效果。
第十壹步卷曲膠帶紙標題
我們轉到body的內容部分。在這個設計中,我們要創建2欄和壹些圖標。我們使用的是已經有的圖標因為我們喜歡這種手寫效果包括HandyIconsandSketchyicons.。在body開始的區域我們要壹個標題欄用來羅列我們網站的內容。我們把這個header部分做成卷曲效果。至於說到透明膠帶我們使用的來自bigstockphoto的圖片。為了增加膠帶的深度,我使用矩形選框工具來選擇膠帶的壹些區域。在選中選區後我們復制這個圖層按下ALT+SHIFT向左邊移動,然後在向右移動壹下使它看起來顯得長壹些。為了避免縫隙的產生我們使用圖章工具裏拼合這些縫隙。
第十二步預覽下的小圖標
BoxedArt網站的內容區域包含很多網頁模板的預覽。創建這種效果我們需要選中矩形選框工具創建壹個小的矩形,然後使用顏色123057填充。這些按鈕我們只要復制第壹個圖層,移動它到第壹個圖層下面,設置這個圖層的透明度這裏我們設置的為40%。重復同樣的步驟處理余下的按鈕。
第十三步使用針腳線來分開這些區域
為了分開這些主要的分類,為了創建這些虛線我們可以文字工具角度為90,把這些圖層的樣式設置為疊加,為了使這些顯眼點我們只需復制這個圖層2-3次至於顏色多深取決於妳自己。
第十四步填充額外的內容
添加剩下的內容就非常簡單了,我們只需使用直線工具來分開每個部分,在添加些圖標和文字,這裏我們用到的是壹種幹凈的字體HelveticaCondensed,。
第十五步—底部廣告部分
我們已經到了底部放置廣告部分了,這裏的帶狀條將會再壹次應用起來,使用先前有的圖片作為起點,下壹步,我們要使用圓角矩形工具,前景色設置為白色半徑為5px。接著我們需要在設置壹些小的圓角矩形,顏色設置為f8f7f3邊框用深灰。妳可以在下圖的圖層樣式中設置邊框(就是壹種描邊效果)。
第十六步公告部分
公告部分我們采取的是和header部分相似蒙板的方法,當然還有訂閱新聞通訊等區域也是這樣的方法,就像紙張粘上去的壹樣。首先我們給header部分添加壹種厚紙張效果,這個和body部分的方法基本壹樣。至於內容部分,選中矩形選框工具在右下角繪制小盒子顏色填充為f9e5a6。完成按下CTRL-D取消選區,在選擇加深工具,筆刷大小設置為35pixels加深棕色盒子的邊角區域。
最後我們把圖層的不透明度設置為60%再雙擊圖層在圖層樣式中添加壹些陰影效果,參數設置,然後在添加壹些內容。
第十七步網頁底部
到了我們創建底部的部分了,首先我們使用矩形選框工具,在頁面上選擇下圖這樣壹個區域,使用顏色462d0f填充,選擇直線工具繪制壹條直線顏色設置為a05d18。
到了底部的分類部分了,我們要又壹次繪制壹個大的選框,顏色填充為472a0b,圖層的不透明度度設置為78%,接著創建另壹個圖層顏色填充為fffcd1。下壹步添加膠片顆粒效果最後把圖層的不透明度設置為30%圖層樣式為正片疊底。
最後我們只需重復我們在footer部分的操作或者復制圖層把它移到底部,這樣妳就可以添加內容了。看下下面的預覽圖,是否有些啟示列,希望妳喜歡。
網站界面設計分哪些步驟進行1、網頁設計前期調研階段
網頁設計前期調研階段是進行網站界面設計制作流程所必須經歷的,調研工作充分與否,決定著整個決策設計方案定位的正確性,與其他設計準備工作壹樣,要以公司企業為主,從客觀角度入手,包括市場角度、消費角度、地域角度、競爭對手角度和資金投入角度等進行準備和策劃。
2、網站界面設計創意風格定位
網站界面設計要通過獨特的視覺傳達系統來吸引瀏覽者的註意,從而使特定的信息得以準確迅速的傳播。在完成調研分析之後,對網站界面的風格和表現形態進行定位,是選擇簡約還是古樸、時尚還是端莊、典雅還是個性等;色調是純色調還是灰色調、高明調還是低暗調,是運用對比色系還是同色系等,在表現形態上是選擇采用構思巧妙的靜態界面、變幻莫測的三維效果,還是互動性較強的交互式動態網頁等。
3、網站界面設計制作階段
經歷了以上的兩個網頁設計制作流程,接下來就到了網站界面設計的制作階段,按照企業網站所設定的整體視覺以及網頁界面創意設計定位策略的引導下進行設計制作工作。設計制作應努力做到企業或網站標誌的統壹,網頁的色調與企業的標準色、輔助色的和諧延續,形式與內容的整體統壹;任何壹個不符合整體風格的界面設計就需要刪去,壹切分散瀏覽者註意力的圖形、線條、可有可無的“裝飾”都應該適當摒棄,讓構成網頁整體設計的元素與傳播的內容進行有機地融合。
4、網頁界面發布調試階段
其實完成好以上這些步驟就意味著網站界面設計制作工作已經進行到了最後階段,那就是將網站界面發布出去,而設計出來結果是否成功,就取決於網站用戶的瀏覽體驗的感受,在發布後的運行過程中再適當的調整,在經過這壹系列流程後,網站界面設計制作工作就算完成。