许多开拓职员认为善于设计是一种天生的能力，而创造力是与生俱来的。但是设计是一项可以像其他任何东西一样学习的技能。你不必天生就可以创建一个俊秀的网站的艺术家，这须要实践。在身边的小伙伴的博客，自己的网站来看，很多人都是用了开源后台的网站模板，熟不知局限太大，自己想要的内容板式也要随着模板走，越今后看着自己的站点越不顺眼，没有一点造诣感。
本文将先容如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
当您可以利用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设置页面样式以完善匹配你的设计通过支配，将其用作实践项目或连续改进设计，将其提升到一个新的水平有没有正在自己设计搭建站点的小伙伴啊？或者觉得自己公司的设计师无非便是模拟还是模拟，不管设计啥都千篇一律的？一起互换下。
