2022-12-13 分類: 網(wǎng)站建設(shè)
一、自學(xué)網(wǎng)頁設(shè)計(jì)之前,你需要知道的事。
自學(xué)網(wǎng)頁設(shè)計(jì),你首先得了解網(wǎng)站的制作流程。在有了全局的概覽后,你才能對接下來所要學(xué)習(xí)的知識,做到了然于胸。然后再做有針對性的學(xué)習(xí)和訓(xùn)練,方能夠更高效率的入門網(wǎng)頁設(shè)計(jì)。當(dāng)然條條大路通羅馬,方法并非唯一,以下就結(jié)合自己的學(xué)習(xí)和工作經(jīng)歷做個(gè)總結(jié),希望能對初學(xué)者有所幫助!
▽圖例:優(yōu)秀的網(wǎng)頁設(shè)計(jì)作品。來源:Behance1、網(wǎng)頁設(shè)計(jì)的制作流程通常情況下,任何一網(wǎng)站的建立,都會經(jīng)過“分析策劃—交互設(shè)計(jì)—視覺設(shè)計(jì)—前端制作—后端制作—測試上線”6個(gè)環(huán)節(jié)。我們平常所說的【網(wǎng)頁設(shè)計(jì)】與「網(wǎng)頁制作」則分別對應(yīng)著6個(gè)環(huán)節(jié)中的【視覺設(shè)計(jì)】與「前端制作」,在實(shí)際的工作崗位中,其分別由“網(wǎng)頁設(shè)計(jì)師”與“前端工程師”去執(zhí)行完成。
很多初學(xué)網(wǎng)頁設(shè)計(jì)的朋友,對這兩者的關(guān)系往往是傻傻分不清楚的狀態(tài),對自己的專業(yè)定位沒有清晰的認(rèn)識。這就導(dǎo)致學(xué)設(shè)計(jì)的同學(xué),后來干到了“前端工程師”的崗位,學(xué)前端的孩子開始猛補(bǔ)“設(shè)計(jì)知識”。
▽圖例:優(yōu)秀的網(wǎng)頁設(shè)計(jì)作品。來源:Behance在這分工協(xié)作越來越明確的年代里,唯有專精自己所在的領(lǐng)域,才能脫穎而出,泛泛而學(xué),只會變得平庸!如果想要成為多面手,那也得先精通一門核心技能!
2、網(wǎng)頁設(shè)計(jì),是以視覺設(shè)計(jì)為主工作。自學(xué)網(wǎng)頁設(shè)計(jì)的核心任務(wù)是學(xué)習(xí)“視覺設(shè)計(jì)”相關(guān)的知識點(diǎn)。 如何更加高效的傳達(dá)版面信息?如何規(guī)劃頁面路徑?用什么樣的排版,或者富有創(chuàng)意的表現(xiàn)形式?用什么樣的顏色,以及多大的字號?這是新手學(xué)習(xí)網(wǎng)頁設(shè)計(jì)應(yīng)該畫下的重點(diǎn)。
一個(gè)網(wǎng)頁被設(shè)計(jì)出來,是給人用,給人看的。 要好看(簡潔)、要好用(高效)這才是一個(gè)設(shè)計(jì)師需要反復(fù)考慮的。視覺+交互,是網(wǎng)頁設(shè)計(jì)師的核心競爭力。
▽圖例:優(yōu)秀的網(wǎng)頁、平面視覺設(shè)計(jì)作品。來源: http://irradie.com其中“視覺設(shè)計(jì)”的依據(jù),源于前面的策劃和交互設(shè)計(jì)。最后出具的“視覺設(shè)計(jì)稿”得符合品牌定位,滿足生產(chǎn)運(yùn)營、以及用戶需求,這是網(wǎng)頁設(shè)計(jì)師必修的基本功!
3、網(wǎng)頁制作,是以前端代碼為主。網(wǎng)頁制作在流程上,是在設(shè)計(jì)之后。這部分工作通常是由WEB前端工程師來完成的,工程師通常會運(yùn)用到HTML、CSS、以及JavaScript、jQuery等前端代碼,來還原網(wǎng)頁設(shè)計(jì)師的“視覺設(shè)計(jì)稿”,以及交互動(dòng)畫等。
“前端工程師”除了要配合網(wǎng)頁設(shè)計(jì)師外,還要配合做后端工程師,做好網(wǎng)頁端的數(shù)據(jù)收集處理等工作。如果你要?jiǎng)?lì)志成為一個(gè)優(yōu)秀的網(wǎng)頁設(shè)計(jì)師,請牢記自己的崗位職責(zé)和學(xué)習(xí)重點(diǎn),在沒有認(rèn)清“視覺設(shè)計(jì)”前,要當(dāng)心自己是不是越位到Web前端開發(fā)這個(gè)坑里去了。
再比如優(yōu)化網(wǎng)站所需的SEO、Ajax等技術(shù),雖無需你動(dòng)手實(shí)踐,但能做到了解一二,也是不錯(cuò)的加分項(xiàng)。在設(shè)計(jì)的時(shí)候,也可充分利用這些規(guī)則和技術(shù)來規(guī)劃你的版面,使其更加的專業(yè)友好。
4、那么問題來了,新手學(xué)習(xí)網(wǎng)頁設(shè)計(jì)要學(xué)些什么?▽圖例:優(yōu)秀的網(wǎng)頁設(shè)計(jì)作品。來源:Behance(1).首先要精通設(shè)計(jì)軟件,把Photoshop玩轉(zhuǎn),這是網(wǎng)頁設(shè)計(jì)的主力工具!
(2).深入學(xué)習(xí)排版設(shè)計(jì)、色彩構(gòu)成,掌握視覺基礎(chǔ)規(guī)律(構(gòu)成、透視、光影)
(3).掌握網(wǎng)頁設(shè)計(jì)規(guī)范,了解常見的網(wǎng)頁布局形式,學(xué)習(xí)交互設(shè)計(jì)等基礎(chǔ)知識。
(4).了解前端代碼HTML、CSS、JS、JQuery的運(yùn)用,學(xué)一款代碼編輯軟件(如:Dreamweaver)
(5).了解你設(shè)計(jì)網(wǎng)站的公司及產(chǎn)品,熟悉這個(gè)公司及其產(chǎn)品面向的人群!
(6).拓展學(xué)習(xí)網(wǎng)站優(yōu)化、開發(fā)、后臺數(shù)據(jù)處理常識(加分項(xiàng)目!)
前四個(gè)是基本功,后面的是加分項(xiàng)。越靠前越重要!
二、關(guān)于網(wǎng)頁設(shè)計(jì)行業(yè),以及自學(xué)資源分享。5.關(guān)于網(wǎng)頁設(shè)計(jì)行業(yè)概述:常見的網(wǎng)頁設(shè)計(jì)類型有企業(yè)站(如:某某公司的網(wǎng)站)、門戶站(如新浪)、專題活動(dòng)頁面(如每年的天貓雙11活動(dòng)頁面)。這三類是我們平日里最常見的網(wǎng)頁形式,以下網(wǎng)頁設(shè)計(jì)教程也就是圍繞這幾類展開視覺設(shè)計(jì)。
行情:高級網(wǎng)頁設(shè)計(jì)師,平均工資8180,這個(gè)水平通常是3~5年的一個(gè)薪資待遇,而1~3年的新手則常停留在5k上下。隨著電商的興起,市場對網(wǎng)頁設(shè)計(jì)的需求量巨大,其中蘊(yùn)含著無窮商機(jī)!新公司企業(yè)建站、淘寶商品的介紹頁面、店鋪裝修、促銷專題頁面、括移動(dòng)端頁面等等,著都需要網(wǎng)頁設(shè)計(jì)這個(gè)崗位。
6、系統(tǒng)學(xué)習(xí)網(wǎng)頁設(shè)計(jì)——視頻教程教程匯總:由騰訊、阿里網(wǎng)頁設(shè)計(jì)師錄制的視頻教程 (http://www.xxriji.cn/career/7.html)
上述網(wǎng)頁設(shè)計(jì)教程分為四個(gè)部分,從視覺理論基礎(chǔ),到網(wǎng)頁設(shè)計(jì)軟件技法,再逐步深入到視覺設(shè)計(jì)提高及思維訓(xùn)練,最后再是拓展HTML、CSS等前端基礎(chǔ)知識。相信大家能從中系統(tǒng)的掌握網(wǎng)頁設(shè)計(jì)這門技能,其中的幾個(gè)核心教程如下。
(1). 網(wǎng)頁設(shè)計(jì)基礎(chǔ)教程:網(wǎng)頁美工設(shè)計(jì)入門詳解,視頻地址:http://t.cn/R5pKsW1
講解作為一個(gè)網(wǎng)站美工所必備的基礎(chǔ)知識和技能,讓學(xué)生從單一軟件的學(xué)習(xí)中走出來,轉(zhuǎn)化為多元化的實(shí)際應(yīng)用。選取的案例均是當(dāng)前網(wǎng)頁美工領(lǐng)域?qū)嵱玫陌咐?,穿插講解相關(guān)理論。(2). 網(wǎng)頁設(shè)計(jì)代碼:網(wǎng)頁設(shè)計(jì)Dreamweaver零基礎(chǔ)入門教程,視頻地址:http://t.cn/R5pVcC6
適用于網(wǎng)頁設(shè)計(jì)零基礎(chǔ)學(xué)員,需要會基本的Photoshop操作,幫助大家全面理解掌握DW的使用,以及HTML/CSS樣式/JavaScript/jQuery以及網(wǎng)頁交互效果的添加。(3). 【力薦】騰訊高級設(shè)計(jì)師主講:網(wǎng)頁設(shè)計(jì)高級教程(上),視頻地址:http://t.cn/R5pKsVA
騰訊游戲TGideas 高級設(shè)計(jì)師Gordan傾情打造,授課邏輯嚴(yán)謹(jǐn),思路清晰,課程內(nèi)容擁有強(qiáng)大的理論支撐,讓大家知其然,也知其所以然。屬于高級課程內(nèi)容,適合對Photoshop軟件操作有一些使用經(jīng)驗(yàn)的學(xué)員。(4). 【力薦】騰訊高級設(shè)計(jì)師主講:網(wǎng)頁設(shè)計(jì)高級教程(下),視頻地址:http://t.cn/R5pKFHV
本套課程全案例講解,總共分為十章,適合Photoshop掌握比較熟練的學(xué)員。豐富的實(shí)例讓上篇中的理論落到實(shí)處,更深層次梳理創(chuàng)作思路,學(xué)完定能收獲頗豐,擁有獨(dú)立完成網(wǎng)頁設(shè)計(jì)任務(wù)的能力。(5). 【力薦】高大上的網(wǎng)頁設(shè)計(jì)教程:汽車互動(dòng)網(wǎng)頁設(shè)計(jì)教程,視頻地址:http://t.cn/R5qjT2v
本教程講解了一個(gè)汽車互動(dòng)網(wǎng)站從命題到思考到設(shè)計(jì)制作等全系列過程。課程共分為荒野篇、賽場篇以及雪地篇三個(gè)篇章,教到大家面對需求時(shí),如何從不同的方向思考,并打造出三種不同場景恢弘大氣的互動(dòng)稿。(6). 【電商】淘寶天貓店鋪裝修設(shè)計(jì)教程:電商視覺設(shè)計(jì)實(shí)戰(zhàn)教程 ,視頻地址:http://t.cn/RIjgj6e
以電商廣告設(shè)計(jì)為立足點(diǎn),以Photoshop為軟件工具,結(jié)合豐富的設(shè)計(jì)理論知識和大量的精美案例,幫助大家快速、系統(tǒng)快速的掌握淘寶天貓電商設(shè)計(jì)的流程與方法。 7、系統(tǒng)學(xué)習(xí)網(wǎng)頁設(shè)計(jì)——書籍推薦(1).網(wǎng)頁設(shè)計(jì)實(shí)踐暢銷:《界面設(shè)計(jì)模式(第2版)》
在第一版中文版在推出后“技壓群芳”而大獲好評,一路暢銷。本書新增了社交媒體,移動(dòng)設(shè)計(jì)方面的內(nèi)容,切實(shí)地符合了當(dāng)下的技術(shù)發(fā)展潮流,作者多年觀察、實(shí)踐與智慧的升華。(2).設(shè)計(jì)入門啟蒙書籍:《寫給大家看的設(shè)計(jì)書(第4版)》
這是一門影響了一代設(shè)計(jì)師的經(jīng)典巨著,無論是UI設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)、平面設(shè)計(jì)領(lǐng)域,都被廣大設(shè)計(jì)師所推崇,是入門設(shè)計(jì)行業(yè)的必備書籍!(3).色彩搭配實(shí)踐書籍:《互聯(lián)網(wǎng)產(chǎn)品(Web/移動(dòng)Web/APP)視覺設(shè)計(jì)·配色篇》
本書旨在介紹網(wǎng)站及移動(dòng)網(wǎng)站/APP等互聯(lián)網(wǎng)產(chǎn)品界面色彩搭配的知識與方法。內(nèi)容既涉及色彩屬性等基礎(chǔ)知識,也包括了有關(guān)互聯(lián)網(wǎng)產(chǎn)品界面色彩設(shè)計(jì)的系統(tǒng)完整的實(shí)用技巧。(4).網(wǎng)頁交互設(shè)計(jì)經(jīng)典:《簡約至上:交互式設(shè)計(jì)四策略》
書中闡釋了合理刪除、分層組織、適時(shí)隱藏和巧妙轉(zhuǎn)移這四個(gè)令交互式設(shè)計(jì)成果大程度簡單易用的策略。(5).如何制作響應(yīng)式網(wǎng)頁:《響應(yīng)式Web設(shè)計(jì)實(shí)踐》
面對不斷涌現(xiàn)的設(shè)備尺寸,Web設(shè)計(jì)的適應(yīng)性已經(jīng)成為設(shè)計(jì)師們所面臨的最為艱巨的挑戰(zhàn)。這本《響應(yīng)式Web設(shè)計(jì)實(shí)踐》書籍當(dāng)中,給出了一系列完善的解決方案。(6).打造網(wǎng)頁形式感:《形式感+:網(wǎng)頁視覺設(shè)計(jì)創(chuàng)意拓展與快速表現(xiàn)》
這是國內(nèi)網(wǎng)頁設(shè)計(jì)書籍中,賣地最好的書籍之一。本書可以幫助有一定基礎(chǔ)的網(wǎng)頁設(shè)計(jì)初學(xué)者或在職者,在遇到設(shè)計(jì)創(chuàng)意瓶頸時(shí),能夠在較短的時(shí)間內(nèi)解決設(shè)計(jì)上的創(chuàng)意和視覺形式感的問題。上面給出的視頻教程和書籍,均是非常適合期望系統(tǒng)自學(xué)網(wǎng)頁設(shè)計(jì)的朋友,涉及到的內(nèi)容知識點(diǎn)很少有重合,開卷有益,希望大家學(xué)有所成!
真誠推薦,望以對初學(xué)者有所啟發(fā)!
(完)
未經(jīng)許可禁止轉(zhuǎn)載,侵權(quán)必究!
網(wǎng)站欄目:怎么自學(xué)網(wǎng)頁設(shè)計(jì)?
鏈接地址:http://m.rwnh.cn/news20/222320.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站內(nèi)鏈、電子商務(wù)、網(wǎng)站設(shè)計(jì)公司、用戶體驗(yàn)、網(wǎng)站排名、面包屑導(dǎo)航
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容