剛剛談好了一個新的客戶（yay！）肥照，你正在為他們建立一個網(wǎng)站，但是一旦你的框架完成后勤众，你從哪里開始舆绎？
思考新鮮原創(chuàng)和前衛(wèi)的設(shè)計可能是艱難的。創(chuàng)造一個全新的東西是一個非常大的挑戰(zhàn) – 特別是如果你沒有正規(guī)系統(tǒng)的學(xué)習(xí)過設(shè)計们颜。
使用主題模板可以幫助我們省掉很多力氣吕朵，但是如果你是想把建站作為職業(yè)的話猎醇，模板不能制滿足我們需求的，我們不可能到處找模板或者學(xué)習(xí)新的主題還幫別人建站努溃，我們也需要二次創(chuàng)作硫嘶，如果您從頭開始構(gòu)建，則需要使用一系列設(shè)計元素（包括布局梧税，顏色沦疾，排版等），所有這些工作都需要與您的客戶的品牌標(biāo)識和溝通目標(biāo)相一致第队，并需要創(chuàng)造性地翻譯為他們確定的目標(biāo)受眾哮塞。
為了幫助這個過程，我從網(wǎng)上收集了我最喜歡和常用的設(shè)計資源集合斥铺。
顏色
為web構(gòu)建選擇一個強(qiáng)大好用的調(diào)色板是一種藝術(shù)彻桃。 無論你是想使用互補(bǔ)或?qū)Ρ鹊呐渖桨福蛘咄媾行?單色調(diào)色板晾蜘，突出一種高亮色，請查看下面的資源以獲得一些靈感眠屎。
可能最簡單和最有趣的調(diào)色板生成器是Coolors（桌面免費剔交，應(yīng)用程序付費）。 只需按空格鍵改衩，您就可以瀏覽多個調(diào)色板岖常，然后通過一系列調(diào)整控件來細(xì)化顏色選擇。 完成后葫督，您可以導(dǎo)出自己的調(diào)色板（如果您正在創(chuàng)建客戶端心情板竭鞍，真的很漂亮），或?qū)⑵浔４娴侥膫€人資料中以備將來使用橄镜。 酷派還允許您瀏覽一些已經(jīng)創(chuàng)建的用戶調(diào)色板偎快，也有漂亮的附件，以與您的Adobe應(yīng)用程序集成洽胶。
我用它做的最多的就是參考優(yōu)秀的色彩搭配晒夹，調(diào)節(jié)出我最喜歡的顏色。
Material Palette允許您選擇兩種主要顏色姊氓，并為您自動生成一個非常廣泛的調(diào)色板丐怯。 調(diào)色板可以調(diào)整以適應(yīng)您的設(shè)計風(fēng)格，并且具有非常漂亮的預(yù)覽功能翔横，如何使用您的網(wǎng)站中的顏色呢读跷？一旦您對顏色選擇感到滿意，您就可以將調(diào)色板導(dǎo)出為一系列格式禾唁，包括css文件效览，單擊即可復(fù)制顏色代碼些膨，您可以將其快速復(fù)制到樣式表中。
當(dāng)你對某兩個顏色感興趣時钦铺，可以使用這個工具订雾，找到兩個顏色之間非常好看的顏色
在網(wǎng)站設(shè)計中，配色是一個十分關(guān)鍵又十分頭疼的問題矛洞，很多情況下洼哎，我們會參照目標(biāo)網(wǎng)站或者著名網(wǎng)站的色彩風(fēng)格來選擇配色，Web Colour Data這款工具就是為此而生沼本，它可以讓你快速找出當(dāng)前網(wǎng)頁所用的顏色噩峦。
Colorhexa:顏色轉(zhuǎn)換工具是一個免費的顏色工具抽兆，提供與任何顏色相關(guān)的信息，只需在搜索框輸入任意顏色值凭涂，就能返回一個詳細(xì)的描述，并會自動將其轉(zhuǎn)換成對應(yīng)的十六進(jìn)制切油、二進(jìn)制等名惩。
Colorhexa的用法很簡單只需在搜索框輸入任意顏色值（查看完整列表），ColorHexa就能給你返回一個詳細(xì)的描述娩鹉，并會自動將其轉(zhuǎn)換成對應(yīng)的十六進(jìn)制、二進(jìn)制弯予、RGB戚宦、CMYK、HSL熙涤、HSV阁苞、 CIE-Lab、Hunter-Lab祠挫、CIE-Luv那槽、CIE-LCH、XYZ等舔、xyY值骚灸。
ColorHexa也能自動生成與顏色對應(yīng)的配色方案，比如互補(bǔ)/對比色（complementary）慌植、分散的互補(bǔ)色（split complementary）甚牲、相似色（analogous）义郑、三色（triadic）、四色（tetradic）丈钙、單色（monochromatic）等非驮。這樣你就能知道什么樣的顏色才是最合適的選擇。它也能將多種顏色混合雏赦，或在它們之間創(chuàng)建一個漸變劫笙。
只需要簡單地搜索某種顏色，你就能得到一個百科全書式的反饋頁面星岗。從相近的顏色填大、配色方案，到自動生成的HTML元素和相關(guān)的陰影等都有顯示俏橘。
非常強(qiáng)大的用于查看一系列互補(bǔ)的顏色并排在一起（所謂互補(bǔ)色是指在色環(huán)上相對的兩個顏色允华，常見的有橙色對藍(lán)色、黃色對紫色以及紅色對綠色寥掐。無論在繪畫還是攝影靴寂，只要在其中加入中互補(bǔ)色對比就會產(chǎn)生非常吸睛的畫面效果。如果你是一個電影曹仗、美劇愛好者怎茫，也會發(fā)現(xiàn)其中大量運用了黃轨蛤、藍(lán)色調(diào)對比）祥山，平板UI顏色選擇器顯示一個選擇鮮艷的顏色。 由于用戶只能查看顏色斧散，無法編輯自己定制的調(diào)色板栈暇。需要一點想象力源祈。 有了這個Flat UI顏色選擇器可能適合那些不想太多分心太多選項或小調(diào)整和自定義的人。 目前手销，F(xiàn)lat UI顏色選擇器不提供簡單的導(dǎo)出方式锋拖，因此需要記錄顏色代碼
使用的理由很簡單，當(dāng)然是找到合適的互補(bǔ)色了讲仰，例如CTA按鈕和背景的顏色
字體
隨著大量隨時可用的字體可供選擇痪蝇，以數(shù)千種不同的組合（無襯線/無襯線趁矾，襯線/襯線给僵，襯線/無襯線）帝际，選擇一個網(wǎng)站的字體組真的是一門科學(xué)斑粱。 排版對網(wǎng)站的整體美感有如此強(qiáng)烈的影響脯爪，并且具有巨大的力量來表達(dá)品牌或企業(yè)的語調(diào)尚揣。 有了這個惑艇，看看下面的類型資源和工具滨巴。
網(wǎng)頁設(shè)計中使用什么字體是比較麻煩的事情恭取，特別是英文站點蜈垮，每次更換字體然后刷新網(wǎng)頁總是很麻煩的事情调塌，所以如果能夠在線實時通過幾次點擊就能更換網(wǎng)站的字體羔砾，并且立刻能看到效果是非常棒的一件事情姜凄，而TypeWonder就是這樣的一個免費的 Web 應(yīng)用态秧，可以實時在線測試你網(wǎng)站在不同字體下的樣子申鱼。
TypeWonder 使用非常簡單润讥，只需要輸入你要測試網(wǎng)站的地址撮慨，然后選擇你要測試的字體（目前僅支持 Google Fonts），然后測試站點就能展示出在新字體下的樣子影涉。
幾個月前，Google發(fā)布了其Google字體目錄的更新版本。 使用其全新的UI肌厨，選擇和檢查字體比以往任何時候都更容易柑爸，看到用戶能夠搜索大量的免費使用的字體表鳍，并通過無數(shù)的調(diào)整控件精選其選擇。 檢查單個字體將顯示一系列詳細(xì)信息雄坪，包括有關(guān)字體設(shè)計師或設(shè)計公司盯漂，可用字符和樣式的信息就缆，以及一個方便的交互式字體配對指南和將字體嵌入到您的樣式表竭宰。
Typespiration提供了一些精美的設(shè)計與完美配對的字體，您可以瀏覽廓旬。 一個交叉資源孕豹，Typespiration還包括一個相關(guān)的調(diào)色板（用十六進(jìn)制代碼）為每個設(shè)計，這真的幫助你可視化你的設(shè)計和類型可能是什么樣子叶眉。 Typespiration的一個偉大的功能是快速使用衅疙。 這不僅會拉出嵌入每個字體到您的網(wǎng)站的頭部所需的確切代碼炼蛤，而且它還包括CSS絮识，你可以簡單地復(fù)制和粘貼到您的樣式表嗽上。 這里兽愤，H1和p標(biāo)簽都將被定義 – 包括顏色 – 從get-go浅萧，以及您的或鏈接標(biāo)簽的正常和活動狀態(tài)樣式洼畅。
最令人難以置信的排版資源之一是Typecast。 通過Typecast残揉，用戶可以通過選擇字體集合并對其進(jìn)行測試來創(chuàng)建其設(shè)計的原型抱环。 Typecast包括大量用于測試各種類型樣式的選項，包括視覺和與HTML元素結(jié)合使用，包括大小裆站，重量，裝飾效果和顏色肩袍，僅舉幾例杭棵。 一旦完成，原型可以保存氛赐，共享魂爪，編譯成樣式指南（如果您向客戶端呈現(xiàn)情緒板，那么很好）艰管，或者代碼可以簡單地復(fù)制到樣式表中滓侍。 Typecast是免費的，但用戶需要注冊才能使用牲芋。
圖標(biāo)
圖標(biāo)已經(jīng)成為一個非常受歡迎的視覺元素添加到Web構(gòu)建撩笆。除了吸引觀眾的注意，圖標(biāo)是偉大的傳達(dá)核心品牌概念在一個快速，有效和引人注目的方式篙悯。圖標(biāo)可以使用Adobe Illustrator等設(shè)計應(yīng)用程序從頭開始創(chuàng)建定血，但這真的很耗時茫虽。通過將相關(guān)代碼嵌入到樣式表中婴氮，將圖標(biāo)用作字體組是確保站點速度不受圖像的數(shù)據(jù)庫調(diào)用影響的一種很好的方法旨怠。在這方面，字形搜索在流行的圖標(biāo)數(shù)據(jù)庫（包括Font Awesome，Octicons请毛，Glyphicons此洲，IcoMoon匣掸，Foundation，Ionicons和Material Icons）中整理成一個可搜索的庫球匕。對于那些想要更多的活力的矢量風(fēng)格的圖標(biāo)，可以下載為.png瞬痘，.svg和其他可行的格式，看看下面的資源。
Flat Icon提供了廣泛的免費和高級圖標(biāo)集，可以在整個web構(gòu)建中使用。 圖標(biāo)可以作為單獨的元素或包中搜索红符，后者證明更有用于提供統(tǒng)一的外觀和感覺。 根據(jù)許可協(xié)議邪驮，免費圖標(biāo)需要使用版權(quán)毅访，而高級圖標(biāo)（通過每月訂閱支付）不需要版權(quán)。
Noun Project由各種藝術(shù)家創(chuàng)建和提交的成千上萬的圖標(biāo)虏杰。 通過不同設(shè)計風(fēng)格的裝載，用戶可以將圖標(biāo)下載為.png或.svg格式。
阿里媽媽MUX傾力打造的矢量圖標(biāo)管理最蕾、交流平臺淀弹。
設(shè)計師將圖標(biāo)上傳到Iconfont平臺刁愿，用戶可以自定義下載多種格式的icon件缸，平臺也可將圖標(biāo)轉(zhuǎn)換為字體，便于前端工程師自由調(diào)整與調(diào)用叔遂。
圖形資源
使用各種圖形資源可以真正幫助創(chuàng)建一個具有真正獨特的外觀和感覺的網(wǎng)站他炊，但是從頭開始創(chuàng)建這些網(wǎng)站可能需要幾個小時。 有許多網(wǎng)站提供各種格式的免費和高級（付費）圖形資產(chǎn)已艰，包括字體痊末，圖標(biāo)，.psd文件哩掺，向量凿叠，背景，模擬嚼吞，紋理盒件，模式等更廣泛的收藏。 如：
DBF (Dribble & Behance Freebies)
設(shè)計靈感
查看美麗設(shè)計的集合真的可以幫助獲得創(chuàng)意舱禽，以下網(wǎng)站是設(shè)計師炒刁，開發(fā)人員和集體展示原型或完成的網(wǎng)絡(luò)構(gòu)建和/或其他平面設(shè)計項目的偉大空間。參考以下網(wǎng)站的靈感誊稚，并在適用情況下翔始，考慮根據(jù)客戶的業(yè)務(wù)或服務(wù)類別優(yōu)化搜索，以找出常見的視覺傳播趨勢和模式片吊。
在線課程教學(xué)視頻
最后绽昏，如果你想學(xué)習(xí)一些新的技能，添加到你的網(wǎng)頁設(shè)計和開發(fā)劇目俏脊，請查看以下網(wǎng)站的教程或課程全谤。 一些網(wǎng)站提供廣泛的課程，有些是專門在網(wǎng)絡(luò)相關(guān)的指導(dǎo)爷贫。 有些課程是免費的认然，有些是付費的，有些是認(rèn)證的漫萄。 如果您正在尋找一個課程卷员，一定要研究所有可用的選項，以選擇最適合您的需求的課程腾务。
希望這篇文章能給你帶來幫助毕骡，也歡迎大家有好的工具補(bǔ)充。
