如何設計和編碼制作個人網站

許多開發人員認為擅長設計是一種天生的能力，而創造力是與生俱來的。但是設計是一項可以像其他任何東西一樣學習的技能。你不必天生就可以創建一個漂亮的網站的藝術傢，這需要實踐。

在身邊的小夥伴的博客，自己的網站來看，很多人都是用瞭開源後臺的網站模板，熟不知局限太大，自己想要的內容板式也要跟著模板走，越往後看著自己的站點越不順眼，沒有一點成就感。

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

為什麼要自己設計？

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

。

●

①在人群中脫穎而出。

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

●

②練習技巧。

設計它會幫助你練習設計原則，工具，HTML和CSS。你將更容易開發用戶界面並將其引入網絡。設計出獨特且符合現代潮流的個人站點。

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

●

③更好的應用程序性能。

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

●

④發展職業技能。

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

●⑤可能會很有趣。

創造出令自己感到驕傲的東西是一種有趣的經歷。如果您花一些時間練習它，琢磨它，打造出屬於自己的頁面，豈不是更好，生活中發現美是一件很美好的事，但我覺得創造美更讓人覺得驕傲。

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

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

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

開始你的表演

●①創建線框

第一步是

創建站點的低保真線框

。創建線框有助於在添加視覺設計和內容之前建立頁面的結構。線框不必很漂亮，它應該專註於內容的佈局。您可以手工繪制它，也可以使用設計工具的基本功能。

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

●②網站結構

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

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

●③應用視覺設計

要將低保真線框轉換為設計，可以使用免費的設計工具，例如

Figma

（

下一代的設計神器

）。如果你從未使用過設計程序，你也可以用ps來實現，不過會有點慢，但在國內我還沒有找到類似 Figma 這麼好用的工具。

●④實施佈局

首先，創建一個空白畫佈以代表空白瀏覽器頁面。通過為內容創建容器，在設計工具中實現線框。我建議先從黑白開始，以便你可以專註於佈局。

優化您的佈局，以使元素大小適當，對齊並在它們之間留出空間。

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

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

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

●⑥更新版式

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

記得有傢企業，不管字體版權問題，在自傢網站使用方正字體，被告侵權，這是需要賠償的。

●⑦給它上色

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

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

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

將顏色合並到設計中後，請繼續檢查總體設計感並進行調整。

●⑧註意細節

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

看起來緊湊嗎？

增加填充和邊距。

文字難讀？

選擇更清晰的字體或增加字體大小。增加背景和前景之間的顏色對比度。

內容難識別？

添加具有較高字體粗細的標題。在標題和段落之間添加更多間距。

看起來草率或不一致？

在水平和垂直的直線上對齊元素。在設計程序中設置指南可以幫助確保元素正確對齊。調整填充和邊距，以保持垂直方向上一致的間距。通過建立標題和段落的字體和大小來使文本一致。避免文本變化太多。確保所有顏色都符合你的調色板。

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

●①創建HTML結構

Github上有個項目是

pix2code ，

它可以直接將頁面生成HTML結構並附加CSS代碼，已經開源瞭，感興趣的可以去看看，確實很吊。

國內暫時還沒有這樣的項目，

想搞拖拽開發

的老板真是不少，但沒見過誰傢真正做出來瞭，做不出來肯定不是技術不能實現，

拖拽的本質是在組件庫基礎上加瞭一層交互界面，所以組件化是拖拽開發的第一步

，剩下的其實就是"layoutit"瞭，但要真正落地，就有很多限制。

可拖拽的組件應該是封裝瞭控制層和視圖層的，原則上耦合越低越好，內聚越高越好，自己渾然一體最好，

隻對外暴露配置項，也就是說將一個組件拖拽到界面上之後，得有一個動態生成配置面板的機制，"layoutit"也有一個簡單的配置機制，但遠遠不是生產級別的，這裡可以統一約定一個規則，讓組件的配置項可以被讀取，也可以按組件枚舉，硬做到界面上，都可以，都有優缺點；

互相依賴的組件之間的數據交互會有問題，因為各組件的輸入輸出不可能完全一致

，也就做不到依賴組件之間無縫接入，常規開發中開發者會手動做一些"適配"工作，比如將A組件的輸出剪裁或修飾一下傳給B組件，但現在是搞拖拽，這個數據修飾沒法做瞭，可以修改組件做到可以互相適配，或者一步到位在拖拽系統上做一套數據修飾的中間功能，讓操作者自己適配，都可以，都有很大的缺點。

所以在這裡我們也隻好一步步的自己切頁面瞭，

盡可能是響應式的

，同時按設計稿填充的內容在HTML結構填充元素。

●②小技巧

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

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

●③後續步驟

頁面設計完成並用代碼制作瞭個人網站，接下來配置後臺和網站在服務器的部署瞭，這裡我們使用

SiteServer CMS

內容管理系統來作為我們網站的後臺。如何使用，，既然是自己設計網站，我們就不理會它裡面的免費模板瞭。

至於後期的網站速度優化，代碼優化之前我也提過瞭，寫過文章詳細說明過，大傢也可以看一下。

總結

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

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

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