網(wǎng)頁設(shè)計!教你如何設(shè)計網(wǎng)頁

來源:站酷 作者:yxw520 學習:9123人次

首先,大家要先知道,什么是網(wǎng)頁設(shè)計,很多人會說,網(wǎng)頁設(shè)計不就是文字和圖片的組合嗎?沒錯,網(wǎng)頁中包括文字、圖片、視頻等元素,但是僅僅把這些元素排在一起就是網(wǎng)頁了嘛,顯然不是。

網(wǎng)頁設(shè)計其實是一個感性思考與理性分析相結(jié)合的過程,對設(shè)計師自身的美感以及對版面的把握都有較高的要求。經(jīng)過這幾年網(wǎng)頁設(shè)計的經(jīng)驗,總結(jié)了以下幾點,供大家參考。

網(wǎng)頁設(shè)計的尺寸

網(wǎng)頁設(shè)計的版面尺寸沒有固定的標準,和顯示器的大小以及分辨率有關(guān),設(shè)計的時候要考慮多種分辨率的情況,一般將寬度設(shè)置在768像素以內(nèi),就不會出現(xiàn)水平滾動條,高度則視版面和內(nèi)容而定。例如,在分辨率為1440*768像素情況下,將網(wǎng)頁內(nèi)容保持在1002像素以內(nèi)的話,高度在612-615像素之間,就不會出現(xiàn)滾動條和垂直滾動條了。

網(wǎng)頁設(shè)計!教你如何設(shè)計網(wǎng)頁

2. 網(wǎng)頁設(shè)計的程序

很多小伙伴們一拿到產(chǎn)品經(jīng)理的原型之后,就開始百度各種設(shè)計素材,開始拼素材之旅,照著原型開始設(shè)計界面,也許你能夠拼湊出領(lǐng)導滿意的界面,但是你永遠都不會進步,永遠都只是個美工,而成為不了真正的UI設(shè)計師。拼素材,首先不說版權(quán)問題,就看各類網(wǎng)站千篇一律的素材,你即使再怎么努力排版設(shè)計,都設(shè)計不出真正“高大上”的界面。素材問題后面的設(shè)計文章會另外跟大家分享自己素材創(chuàng)作的經(jīng)驗。

今天要跟大家說的是網(wǎng)頁設(shè)計的程序,沒有程序,你的設(shè)計將會雜亂無章,無從下手

第一:分析定位

這一階段根據(jù)網(wǎng)站的性質(zhì)來確定設(shè)計風格,確定設(shè)計思路,比如你要設(shè)計的是汽車網(wǎng)站,汽車給人的感覺是動感,時尚,而你設(shè)計成可愛風格,對不起 ,那你就準備定加班餐吧- -

網(wǎng)頁設(shè)計!教你如何設(shè)計網(wǎng)頁

第二:設(shè)計構(gòu)思

這一階段根據(jù)客戶所提供的圖片,文字、視頻等內(nèi)容進行大致位置規(guī)劃,也就是設(shè)計布局;绢愋陀袧M版型、分割性、曲線形、對稱性等,可以根據(jù)不同網(wǎng)站的行業(yè)屬性、進行選擇(PS:網(wǎng)站的版式布局后續(xù)會跟大家一起分享)

第三:方案設(shè)計階段

這一階段,往往會暴露出很多問題,要逐一分析解決,結(jié)合版面色彩,構(gòu)圖等元素綜合考慮,制作出稿件,供客戶審核。

為了保證整個網(wǎng)站風格的統(tǒng)一,需要盡可能將logo放在每個頁面上最突出的位置,要突出你的標注顏色,要有一句反映主題的宣傳口號,相同類型的圖片要做統(tǒng)一的效果處理,例如在網(wǎng)站出現(xiàn)的標題都有描邊投影效果,其他頁面都應(yīng)該是一致的。

色彩搭配方面,為了使版面統(tǒng)一在一種色彩上,通過調(diào)整明度,純度,以形成豐富的層次感;或者選擇兩個具有對比效果的顏色,形成視覺沖擊?傊,要使整個網(wǎng)站保持統(tǒng)一的色彩感覺。

學習 · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學就能學:ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
暫無評論,交個作業(yè)支持一下吧~

關(guān)注大神微博加入>>

網(wǎng)友求助,請回答!