許多開發(fā)人員認為擅長設計是一種天生的能力，而創(chuàng)造力是與生俱來的。但是設計是一項可以像其他任何東西一樣學習的技能。你不必天生就可以創(chuàng)建一個漂亮的網站的藝術家，這需要實踐。在身邊的小伙伴的博客，自己的網站來看，很多人都是用了開源后臺的網站模板，熟不知局限太大，自己想要的內容板式也要跟著模板走，越往后看著自己的站點越不順眼，沒有一點成就感。

本文將介紹如何通過從頭開始設計個人網站并將其轉換為代碼的過程來實踐設計。

為什么要自己設計？

當您可以使用Bootstrap之類的UI庫或預制模板時，為什么要自己設計？以下是設計網站的一些好處。

●①在人群中脫穎而出。許多開發(fā)人員博客都使用類似的模板，很容易看出它不是自己設計的。如果個人網站的目的是展示你的能力，那么使用模板可能會降低別人對你的肯定，自己設計的獨特風格，讓你站點在眾多的站點中脫穎而出。

●②練習技巧。設計它會幫助你練習設計原則，工具，HTML和CSS。你將更容易開發(fā)用戶界面并將其引入網絡。設計出獨特且符合現(xiàn)代潮流的個人站點。

以前接私活的時候，不會設計頁面，搬運其它站點頁面，導致自己修改圖片和部分頁面的時候，不會使用工具，設計出來的頁面死板不靈活，客戶不滿意，自己看了也覺得很普通，沒有給你心意的感覺。

●③更好的應用程序性能。你的網站將是輕量級的，并且使用自定義CSS會具有更好的性能。如果要包括UI庫或模板，則它可能包含大量代碼，以涵蓋您未使用的各種可能的自定義。如果未使用的代碼發(fā)送給用戶，則會對你網站的性能產生負面影響。加載慢，打開網頁慢，被很多人不接受。

●④發(fā)展職業(yè)技能。在Web開發(fā)角色中，你可能不必從頭開始實現(xiàn)完整的網站設計，但是你應該能夠制作與現(xiàn)代設計一致的外觀精美的界面。成為“全棧開發(fā)人員”通常意味著精通后端語言或前端JavaScript框架，同時能夠熟悉設計，產品方面的知識。全棧開發(fā)人員應具有一些基本的設計知識，并能夠為用戶提供一致的體驗。當然從中學習到很多的技能知識，這是毋庸置疑的。

●⑤可能會很有趣。創(chuàng)造出令自己感到驕傲的東西是一種有趣的經歷。如果您花一些時間練習它，琢磨它，打造出屬于自己的頁面，豈不是更好，生活中發(fā)現(xiàn)美是一件很美好的事，但我覺得創(chuàng)造美更讓人覺得驕傲。

開始設計你的網站，不要直接寫頁面，從代碼里設計頁面。很難從代碼編輯器中可視化設計，我建議先使用可視化設計工具，然后將結果轉換為代碼。現(xiàn)在有一些快速的代碼生成模板，我覺得小項目可以用一下，就比如說我們的個人站點，大型項目追求性能，就不合適了。

▲制作界面原型的軟件，我最喜歡的是 Balsamiq Mockups，一個手繪風格的、輕量級的小軟件。我喜歡它的理由是：

快——它能讓我以最快的速度把界面原型畫出來。手繪風格——用它畫出來的界面是不折不扣手繪風格，很酷。都是現(xiàn)成的——它已經內置了常用的控件和圖標，基本夠用了。開始你的表演

●①創(chuàng)建線框

第一步是創(chuàng)建站點的低保真線框。創(chuàng)建線框有助于在添加視覺設計和內容之前建立頁面的結構。線框不必很漂亮，它應該專注于內容的布局。您可以手工繪制它，也可以使用設計工具的基本功能。

為了創(chuàng)建線框，我喜歡將設計視為一系列矩形。網頁上的元素是從上到下流動的矩形塊。從矩形開始不需要任何藝術才能。

●②網站結構

放置在線框中的元素由您決定。您可以考慮添加導航欄，頁眉，博客文章和頁腳。您可能不需要所有的這些內容，可以將其保留為基本內容，以后再添加。確定要包括的內容并將這些部分合并到線框中。如果你在布局這塊遇到問題，可以查看一個類似的網站，模仿網站內容的結構，然后對其進行修改以適合你的需求。

線框不一定是完美的。在擁有合適位置的網站結構之后，就可以轉向視覺設計。

●③應用視覺設計

要將低保真線框轉換為設計，可以使用免費的設計工具，例如 Figma（下一代的設計神器）。如果你從未使用過設計程序，你也可以用ps來實現(xiàn)，不過會有點慢，但在國內我還沒有找到類似 Figma 這么好用的工具。

●④實施布局

首先，創(chuàng)建一個空白畫布以代表空白瀏覽器頁面。通過為內容創(chuàng)建容器，在設計工具中實現(xiàn)線框。我建議先從黑白開始，以便你可以專注于布局。

優(yōu)化您的布局，以使元素大小適當，對齊并在它們之間留出空間。

●⑤添加部分和占位符內容

在看起來像一個網站之后，使其看起來更漂亮。通過弄清楚是什么使布局看起來有吸引力，可以模仿其他網站的逼格樣式來添加到自己的網站。

在此階段，請考慮形狀，大小，邊界和陰影。用你喜歡的樣式逐漸升級基本矩形。

●⑥更新版式

字體和間距的設計對美觀大有幫助。如果排版得當，即使是簡單的設計也可以是高質量的。同樣，你可以模仿另一個網站或搜索字體和字體資源，以將其納入你的設計中。但是一定要注意版權。

記得有家企業(yè)，不管字體版權問題，在自家網站使用方正字體，被告侵權，這是需要賠償?shù)摹?/p>

●⑦給它上色

接下來，為站點添加顏色。通過建立品牌來賦予網站特色?？紤]一下你希望網站如何吸引讀者。如果你希望它看起來干凈且極少，請選擇不太亮的顏色，漸變保持微妙，并選擇易于閱讀的字體。如果你希望它看起來有趣，請選擇明亮的顏色，使用鮮艷的漸變，應用背景紋理，使用圓形元素，然后選擇醒目的字體。

添加顏色似乎令人生畏，但你無需了解顏色原理即可。如果您的設計是從黑白開始的，則可以選擇一種單色來強調元素，以賦予設計生命。如果你想超越此范圍，建議您選擇一種或兩種您喜歡的顏色，然后使用該顏色的不同亮度變化。這有助于創(chuàng)建一個具有凝聚力的主題，而不必成為色彩專家。選擇背景色和前景色時，請通過檢查顏色對比來牢記可讀性。

例如，將深藍色設置為背景，然后將較淺的藍色設置為文本。對于白色背景色，可以將藍色的中等亮度用作標題。

將顏色合并到設計中后，請繼續(xù)檢查總體設計感并進行調整。

●⑧注意細節(jié)

在設計時，你應該退后一步來查看整個設計并進行完善。通過用簡單的語言描述您所看到的內容來批判你的設計，然后將該陳述轉換為需要解決的技術問題。

看起來緊湊嗎？增加填充和邊距。文字難讀？選擇更清晰的字體或增加字體大小。增加背景和前景之間的顏色對比度。內容難識別？添加具有較高字體粗細的標題。在標題和段落之間添加更多間距?？雌饋聿萋驶虿灰恢?？在水平和垂直的直線上對齊元素。在設計程序中設置指南可以幫助確保元素正確對齊。調整填充和邊距，以保持垂直方向上一致的間距。通過建立標題和段落的字體和大小來使文本一致。避免文本變化太多。確保所有顏色都符合你的調色板。

完成設計后，就可以開始將其轉換為代碼

●①創(chuàng)建HTML結構

Github上有個項目是 pix2code ，它可以直接將頁面生成HTML結構并附加CSS代碼，已經開源了，感興趣的可以去看看，確實很吊。

國內暫時還沒有這樣的項目，想搞拖拽開發(fā)的老板真是不少，但沒見過誰家真正做出來了，做不出來肯定不是技術不能實現(xiàn)，拖拽的本質是在組件庫基礎上加了一層交互界面，所以組件化是拖拽開發(fā)的第一步，剩下的其實就是"layoutit"了，但要真正落地，就有很多限制。

可拖拽的組件應該是封裝了控制層和視圖層的，原則上耦合越低越好，內聚越高越好，自己渾然一體最好，只對外暴露配置項，也就是說將一個組件拖拽到界面上之后，得有一個動態(tài)生成配置面板的機制，"layoutit"也有一個簡單的配置機制，但遠遠不是生產級別的，這里可以統(tǒng)一約定一個規(guī)則，讓組件的配置項可以被讀取，也可以按組件枚舉，硬做到界面上，都可以，都有優(yōu)缺點；

互相依賴的組件之間的數(shù)據交互會有問題，因為各組件的輸入輸出不可能完全一致，也就做不到依賴組件之間無縫接入，常規(guī)開發(fā)中開發(fā)者會手動做一些"適配"工作，比如將A組件的輸出剪裁或修飾一下傳給B組件，但現(xiàn)在是搞拖拽，這個數(shù)據修飾沒法做了，可以修改組件做到可以互相適配，或者一步到位在拖拽系統(tǒng)上做一套數(shù)據修飾的中間功能，讓操作者自己適配，都可以，都有很大的缺點。

所以在這里我們也只好一步步的自己切頁面了，盡可能是響應式的，同時按設計稿填充的內容在HTML結構填充元素。

●②小技巧

將布局變成完整的設計時，我喜歡考慮將設計從上到下劃分為多個部分的水平線。頂部的導航欄可能是第一個切片。中間的可能是一個切片，底部的是一個切片，我會將他們用明顯的線條區(qū)分開來，使用不用的顏色，美觀而又清晰。

一般在企業(yè)的工作的時候，都是設計師給設計稿，叮囑效果，我們按照設計師的稿子從頭到下附帶交互效果直接切頁面，

●③后續(xù)步驟

頁面設計完成并用代碼制作了個人網站，接下來配置后臺和網站在服務器的部署了，這里我們使用SiteServer CMS 內容管理系統(tǒng)來作為我們網站的后臺。如何使用，點擊閱讀更多，既然是自己設計網站，我們就不理會它里面的免費模板了。

至于后期的網站速度優(yōu)化，代碼優(yōu)化之前我也提過了，寫過文章詳細說明過，大家也可以看一下。

你不知道的「前端性能優(yōu)化」知識，我都給你總結好了

網站打開速度慢，這些是關鍵，不要以為不重要

總結

通過自己設計和代碼編寫，以及后期的上線，你將會學到這些。

自己設計網站將幫助你練習設計技巧，并讓你的網站脫穎而出創(chuàng)建線框以構造內容和功能使用設計工具將線框變成視覺設計。從您喜歡的設計中獲取靈感對頁面的HTML結構進行編碼，以幫助了解需要使用哪些CSS來轉換這些元素使用CSS設置頁面樣式以完善匹配你的設計通過部署，將其用作實踐項目或繼續(xù)改進設計，將其提升到一個新的水平

有沒有正在自己設計搭建站點的小伙伴啊？或者感覺自己公司的設計師無非就是模仿還是模仿，不管設計啥都千篇一律的？一起交流下。