如何設(shè)計(jì)和編碼制作個(gè)人網(wǎng)站？

許多開發(fā)人員認(rèn)為擅長設(shè)計(jì)是一種天生的能力，而創(chuàng)造力是與生俱來的。但是設(shè)計(jì)是一項(xiàng)可以像其他任何東西一樣學(xué)習(xí)的技能。你不必天生就可以創(chuàng)建一個(gè)漂亮的網(wǎng)站的藝術(shù)家，這需要實(shí)踐。

在身邊的小伙伴的博客，自己的網(wǎng)站來看，很多人都是用了開源后臺(tái)的網(wǎng)站模板，熟不知局限太大，自己想要的內(nèi)容板式也要跟著模板走，越往后看著自己的站點(diǎn)越不順眼，沒有一點(diǎn)成就感。本文將介紹如何通過從頭開始設(shè)計(jì)個(gè)人網(wǎng)站并將其轉(zhuǎn)換為代碼的過程來實(shí)踐設(shè)計(jì)。

為什么要自己設(shè)計(jì)？

當(dāng)您可以使用Bootstrap之類的UI庫或預(yù)制模板時(shí)，為什么要自己設(shè)計(jì)？以下是設(shè)計(jì)網(wǎng)站的一些好處。

●

①在人群中脫穎而出。

許多開發(fā)人員博客都使用類似的模板，很容易看出它不是自己設(shè)計(jì)的。如果個(gè)人網(wǎng)站的目的是展示你的能力，那么使用模板可能會(huì)降低別人對(duì)你的肯定，自己設(shè)計(jì)的獨(dú)特風(fēng)格，讓你站點(diǎn)在眾多的站點(diǎn)中脫穎而出。

●

②練習(xí)技巧。

設(shè)計(jì)它會(huì)幫助你練習(xí)設(shè)計(jì)原則，工具，HTML和CSS。你將更容易開發(fā)用戶界面并將其引入網(wǎng)絡(luò)。設(shè)計(jì)出獨(dú)特且符合現(xiàn)代潮流的個(gè)人站點(diǎn)。以前接私活的時(shí)候，不會(huì)設(shè)計(jì)頁面，搬運(yùn)其它站點(diǎn)頁面，導(dǎo)致自己修改圖片和部分頁面的時(shí)候，不會(huì)使用工具，設(shè)計(jì)出來的頁面死板不靈活，客戶不滿意，自己看了也覺得很普通，沒有給你心意的感覺。

●

③更好的應(yīng)用程序性能。

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

●

④發(fā)展職業(yè)技能。

在Web開發(fā)角色中，你可能不必從頭開始實(shí)現(xiàn)完整的網(wǎng)站設(shè)計(jì)，但是你應(yīng)該能夠制作與現(xiàn)代設(shè)計(jì)一致的外觀精美的界面。成為“全棧開發(fā)人員”通常意味著精通后端語言或前端JavaScript框架，同時(shí)能夠熟悉設(shè)計(jì)，產(chǎn)品方面的知識(shí)。全棧開發(fā)人員應(yīng)具有一些基本的設(shè)計(jì)知識(shí)，并能夠?yàn)橛脩籼峁┮恢碌捏w驗(yàn)。當(dāng)然從中學(xué)習(xí)到很多的技能知識(shí)，這是毋庸置疑的。

●⑤可能會(huì)很有趣。

創(chuàng)造出令自己感到驕傲的東西是一種有趣的經(jīng)歷。如果您花一些時(shí)間練習(xí)它，琢磨它，打造出屬于自己的頁面，豈不是更好，生活中發(fā)現(xiàn)美是一件很美好的事，但我覺得創(chuàng)造美更讓人覺得驕傲。開始設(shè)計(jì)你的網(wǎng)站，不要直接寫頁面，從代碼里設(shè)計(jì)頁面。很難從代碼編輯器中可視化設(shè)計(jì)，我建議先使用可視化設(shè)計(jì)工具，然后將結(jié)果轉(zhuǎn)換為代碼?，F(xiàn)在有一些快速的代碼生成模板，我覺得小項(xiàng)目可以用一下，就比如說我們的個(gè)人站點(diǎn)，大型項(xiàng)目追求性能，就不合適了。

▲制作界面原型的軟件，我最喜歡的是 Balsamiq Mockups，一個(gè)手繪風(fēng)格的、輕量級(jí)的小軟件。我喜歡它的理由是：

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

●①創(chuàng)建線框

第一步是

創(chuàng)建站點(diǎn)的低保真線框。創(chuàng)建線框有助于在添加視覺設(shè)計(jì)和內(nèi)容之前建立頁面的結(jié)構(gòu)。線框不必很漂亮，它應(yīng)該專注于內(nèi)容的布局。您可以手工繪制它，也可以使用設(shè)計(jì)工具的基本功能。為了創(chuàng)建線框，我喜歡將設(shè)計(jì)視為一系列矩形。網(wǎng)頁上的元素是從上到下流動(dòng)的矩形塊。從矩形開始不需要任何藝術(shù)才能。

●②網(wǎng)站結(jié)構(gòu)

放置在線框中的元素由您決定。您可以考慮添加導(dǎo)航欄，頁眉，博客文章和頁腳。您可能不需要所有的這些內(nèi)容，可以將其保留為基本內(nèi)容，以后再添加。確定要包括的內(nèi)容并將這些部分合并到線框中。如果你在布局這塊遇到問題，可以查看一個(gè)類似的網(wǎng)站，模仿網(wǎng)站內(nèi)容的結(jié)構(gòu)，然后對(duì)其進(jìn)行修改以適合你的需求。線框不一定是好的。在擁有合適位置的網(wǎng)站結(jié)構(gòu)之后，就可以轉(zhuǎn)向視覺設(shè)計(jì)。

●③應(yīng)用視覺設(shè)計(jì)

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

●④實(shí)施布局

首先，創(chuàng)建一個(gè)空白畫布以代表空白瀏覽器頁面。通過為內(nèi)容創(chuàng)建容器，在設(shè)計(jì)工具中實(shí)現(xiàn)線框。我建議先從黑白開始，以便你可以專注于布局。優(yōu)化您的布局，以使元素大小適當(dāng)，對(duì)齊并在它們之間留出空間。

●⑤添加部分和占位符內(nèi)容

在看起來像一個(gè)網(wǎng)站之后，使其看起來更漂亮。通過弄清楚是什么使布局看起來有吸引力，可以模仿其他網(wǎng)站的逼格樣式來添加到自己的網(wǎng)站。在此階段，請(qǐng)考慮形狀，大小，邊界和陰影。用你喜歡的樣式逐漸升級(jí)基本矩形。

●⑥更新版式

字體和間距的設(shè)計(jì)對(duì)美觀大有幫助。如果排版得當(dāng)，即使是簡單的設(shè)計(jì)也可以是高質(zhì)量的。同樣，你可以模仿另一個(gè)網(wǎng)站或搜索字體和字體資源，以將其納入你的設(shè)計(jì)中。但是一定要注意版權(quán)。記得有家企業(yè)，不管字體版權(quán)問題，在自家網(wǎng)站使用方正字體，被告侵權(quán)，這是需要賠償?shù)摹?/p>

●⑦給它上色

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

添加顏色似乎令人生畏，但你無需了解顏色原理即可。如果您的設(shè)計(jì)是從黑白開始的，則可以選擇一種單色來強(qiáng)調(diào)元素，以賦予設(shè)計(jì)生命。如果你想超越此范圍，建議您選擇一種或兩種您喜歡的顏色，然后使用該顏色的不同亮度變化。這有助于創(chuàng)建一個(gè)具有凝聚力的主題，而不必成為色彩專家。選擇背景色和前景色時(shí)，請(qǐng)通過檢查顏色對(duì)比來牢記可讀性。例如，將深藍(lán)色設(shè)置為背景，然后將較淺的藍(lán)色設(shè)置為文本。對(duì)于白色背景色，可以將藍(lán)色的中等亮度用作標(biāo)題。將顏色合并到設(shè)計(jì)中后，請(qǐng)繼續(xù)檢查總體設(shè)計(jì)感并進(jìn)行調(diào)整。

●⑧注意細(xì)節(jié)

在設(shè)計(jì)時(shí)，你應(yīng)該退后一步來查看整個(gè)設(shè)計(jì)并進(jìn)行完善。通過用簡單的語言描述您所看到的內(nèi)容來批判你的設(shè)計(jì)，然后將該陳述轉(zhuǎn)換為需要解決的技術(shù)問題。

看起來緊湊嗎？增加填充和邊距。文字難讀？選擇更清晰的字體或增加字體大小。增加背景和前景之間的顏色對(duì)比度。

內(nèi)容難識(shí)別？添加具有較高字體粗細(xì)的標(biāo)題。在標(biāo)題和段落之間添加更多間距?？雌饋聿萋驶虿灰恢?？

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

完成設(shè)計(jì)后，就可以開始將其轉(zhuǎn)換為代碼

●①創(chuàng)建HTML結(jié)構(gòu)

Github上有個(gè)項(xiàng)目是pix2code ，它可以直接將頁面生成HTML結(jié)構(gòu)并附加CSS代碼，已經(jīng)開源了，感興趣的可以去看看，確實(shí)很吊。國內(nèi)暫時(shí)還沒有這樣的項(xiàng)目，想搞拖拽開發(fā)的老板真是不少，但沒見過誰家真正做出來了，做不出來肯定不是技術(shù)不能實(shí)現(xiàn)，拖拽的本質(zhì)是在組件庫基礎(chǔ)上加了一層交互界面，所以組件化是拖拽開發(fā)的第一步，剩下的其實(shí)就是"layoutit"了，但要真正落地，就有很多限制。

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

互相依賴的組件之間的數(shù)據(jù)交互會(huì)有問題，因?yàn)楦鹘M件的輸入輸出不可能完全一致，也就做不到依賴組件之間無縫接入，常規(guī)開發(fā)中開發(fā)者會(huì)手動(dòng)做一些"適配"工作，比如將A組件的輸出剪裁或修飾一下傳給B組件，但現(xiàn)在是搞拖拽，這個(gè)數(shù)據(jù)修飾沒法做了，可以修改組件做到可以互相適配，或者一步到位在拖拽系統(tǒng)上做一套數(shù)據(jù)修飾的中間功能，讓操作者自己適配，都可以，都有很大的缺點(diǎn)。所以在這里我們也只好一步步的自己切頁面了，盡可能是響應(yīng)式的，同時(shí)按設(shè)計(jì)稿填充的內(nèi)容在HTML結(jié)構(gòu)填充元素。

●②小技巧

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

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

●③后續(xù)步驟

頁面設(shè)計(jì)完成并用代碼制作了個(gè)人網(wǎng)站，接下來配置后臺(tái)和網(wǎng)站在服務(wù)器的部署了，這里我們使用

SiteServer CMS

內(nèi)容管理系統(tǒng)來作為我們網(wǎng)站的后臺(tái)。如何使用，，既然是自己設(shè)計(jì)網(wǎng)站，我們就不理會(huì)它里面的免費(fèi)模板了。

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

總結(jié)

通過自己設(shè)計(jì)和代碼編寫，以及后期的上線，你將會(huì)學(xué)到這些。自己設(shè)計(jì)網(wǎng)站將幫助你練習(xí)設(shè)計(jì)技巧，并讓你的網(wǎng)站脫穎而出創(chuàng)建線框以構(gòu)造內(nèi)容和功能使用設(shè)計(jì)工具將線框變成視覺設(shè)計(jì)。從您喜歡的設(shè)計(jì)中獲取靈感對(duì)頁面的HTML結(jié)構(gòu)進(jìn)行編碼，以幫助了解需要使用哪些CSS來轉(zhuǎn)換這些元素，使用CSS設(shè)置頁面樣式以完善匹配你的設(shè)計(jì)通過部署，將其用作實(shí)踐項(xiàng)目或繼續(xù)改進(jìn)設(shè)計(jì)，將其提升到一個(gè)新的水平，有沒有正在自己設(shè)計(jì)搭建站點(diǎn)的小伙伴??？或者感覺自己公司的設(shè)計(jì)師無非就是模仿還是模仿，不管設(shè)計(jì)啥都千篇一律的？一起交流下。

網(wǎng)站欄目：如何設(shè)計(jì)和編碼制作個(gè)人網(wǎng)站？
URL標(biāo)題：http://muchs.cn/news/226321.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、網(wǎng)頁設(shè)計(jì)公司、Google、品牌網(wǎng)站設(shè)計(jì)、小程序開發(fā)、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)