很多开发者认为擅长设计的是天生的能力，创意是天生的。 但是，设计是和其他什么一样可以学习的技能。 你不需要做天生漂亮的网站艺术家。 需要实践。 浏览身边的好友博客、自己的网站，很多人都在使用开源后台的网站模板。 熟人界限太大了，自己想要的内容模板也跟着模板走。 后来越看自己的网站越不喜欢，没有成就感。

本文介绍如何通过从头设计个人网站并将其转换为代码来实践设计。

为什么要自己设计？

如果可以使用UI库或预制体(如Bootstrap )，为什么要自行设计？ 以下是设计网站的一些好处。

在人群中实现差异化。 很明显，很多开发者的博客都使用类似的模板，而不是自己设计的。 如果个人网站的目的是展示你的能力，使用模板可能会降低别人的肯定感。 自己设计的独特风格使你的网站在很多网站中脱颖而出。

练习技巧。 设计有助于练习设计原则、工具、HTML和CSS。 开发用户界面，便于在网络上部署。 设计独特的、符合现代潮流的个人网站。

以前私事的时候，不能设计页面，不能搬其他网站的页面，自己修改图像和部分页面的时候，不使用工具。 设计的页面呆板，客户不满意，自己看也很普通，没有心情。

更好的APP应用性能。 您的站点将变轻，使用自定义CSS可以提高性能。 如果包含UI库和模板，则可能包含大量代码，以涵盖可能未使用的各种自定义。 如果未使用的代码发送给用户，将对站点性能产生负面影响。 加载慢，打开网页慢，很多人不能接受。

发展职业技能。 在Web开发的作用下，可能不需要从头开始实现完整的Web设计，但应该可以创建与现代设计相匹配的美丽界面。 成为“全堆栈开发人员”通常意味着您可以熟悉后端语言或前端JavaScript框架，同时熟悉设计和产品知识。 全堆栈开发人员必须具备基本的设计知识，并能够为用户提供一致的体验。 当然从那里学到了很多技能知识是不言而喻的。

可能很有趣。 制造让自己自豪的东西是一次有趣的经历。 花时间练习它，思考它，制作属于自己的网页不是更好吗？ 在生活中发现美是一件很棒的事，但我认为创造美更值得骄傲。

开始设计你的网站，不要直接写页面，而是根据代码设计页面。 因为很难从代码编辑器中可视化设计，所以建议您首先使用可视设计工具将结果转换为代码。 现在有几个快速的代码生成模板。 我觉得小项目可以用。 例如，像我们的个人网站一样，大项目如果追求性能，就不合适了。

制作界面原型的软件，我最喜欢的是Balsamiq Mockups，是手绘风格的、轻量级的小软件。 我喜欢它的理由是：

可以用最快的速度绘制——接口的原型。

手绘风格——所以画的界面是不折不扣的手绘风格，很帅。

都是现成的——，内置了常用控件和图标，差不多就足够了。

开始你的表演

制作线框

第一步是建立网站最低生活保障的线框。 创建线框有助于在添加视觉设计和内容之前构建页面结构。 线框不需要干净，而是必须集中于内容的布局。 您可以手动绘制，也可以使用设计工具的基本功能。

为了创建线框，我喜欢把设计看作一系列矩形。 网页上的元素是从上到下流动的矩形块。 从矩形来看，不需要艺术才能。

站点结构

放置在联机箱中的元素由用户决定。 请考虑添加导航栏、页眉、博客文章和页脚。 您可能不需要所有这些内容，但可以将其保留为基本内容，稍后再添加。 确定要包含的内容，并将这些部分合并到线框中。 如果布局遇到问题，可以浏览类似的网站，模仿网站内容的结构，并根据需要进行修改。

线框不一定完美。 在拥有适当位置的站点结构后，才能过渡到可视设计。

应用视觉设计

要将最低生活保障的线框转换为设计，可以使用Figma (新一代设计神器)等免费设计工具。 如果没有使用过设计程序，也可以通过ps实现，但会稍微慢一些，但是在国内还没有找到像Figma这样容易使用的工具。

实施布局

首先，创建一个表示空白浏览器页面的空白画布。 通过为内容创建容器，使用设计工具实现线框。 为了集中精力进行布局，建议先从黑白开始。

优化布局，使元素大小适当、对齐并在它们之间留有空间。

增加部分和占位符内容

让它看起来像网站，然后让它看起来更美。 通过弄清楚是什么让布局看起来很吸引人，可以模仿其他网站的强硬风格添加到自己的网站中。

在这个阶段，请考虑形状、大小、边界和阴影。 按照你喜欢的风格逐渐升级基本矩形。

布局更新

字体和间隔的设计对美观有很大的帮助。 如果排版合适，简单的设计也可以高质量。 同样，你可以模仿另一个

一个网站或搜索字体和字体资源，以将其纳入你的设计中。但是一定要注意版权。

记得有家企业，不管字体版权问题，在自家网站使用方正字体，被告侵权，这是需要赔偿的。

●⑦给它上色

接下来，为站点添加颜色。通过建立品牌来赋予网站特色。考虑一下你希望网站如何吸引读者。如果你希望它看起来干净且极少，请选择不太亮的颜色，渐变保持微妙，并选择易于阅读的字体。如果你希望它看起来有趣，请选择明亮的颜色，使用鲜艳的渐变，应用背景纹理，使用圆形元素，然后选择醒目的字体。

添加颜色似乎令人生畏，但你无需了解颜色原理即可。如果您的设计是从黑白开始的，则可以选择一种单色来强调元素，以赋予设计生命。如果你想超越此范围，建议您选择一种或两种您喜欢的颜色，然后使用该颜色的不同亮度变化。这有助于创建一个具有凝聚力的主题，而不必成为色彩专家。选择背景色和前景色时，请通过检查颜色对比来牢记可读性。

例如，将深蓝色设置为背景，然后将较浅的蓝色设置为文本。对于白色背景色，可以将蓝色的中等亮度用作标题。

将颜色合并到设计中后，请继续检查总体设计感并进行调整。

●⑧注意细节

在设计时，你应该退后一步来查看整个设计并进行完善。通过用简单的语言描述您所看到的内容来批判你的设计，然后将该陈述转换为需要解决的技术问题。

看起来紧凑吗？增加填充和边距。

文字难读？选择更清晰的字体或增加字体大小。增加背景和前景之间的颜色对比度。

内容难识别？添加具有较高字体粗细的标题。在标题和段落之间添加更多间距。

看起来草率或不一致？在水平和垂直的直线上对齐元素。在设计程序中设置指南可以帮助确保元素正确对齐。调整填充和边距，以保持垂直方向上一致的间距。通过建立标题和段落的字体和大小来使文本一致。避免文本变化太多。确保所有颜色都符合你的调色板。

完成设计后，就可以开始将其转换为代码

●①创建HTML结构

Github上有个项目是 pix2code ，它可以直接将页面生成HTML结构并附加CSS代码，已经开源了，感兴趣的可以去看看，确实很吊。

国内暂时还没有这样的项目，想搞拖拽开发的老板真是不少，但没见过谁家真正做出来了，做不出来肯定不是技术不能实现，拖拽的本质是在组件库基础上加了一层交互界面，所以组件化是拖拽开发的第一步，剩下的其实就是”layoutit”了，但要真正落地，就有很多限制。

可拖拽的组件应该是封装了控制层和视图层的，原则上耦合越低越好，内聚越高越好，自己浑然一体最好，只对外暴露配置项，也就是说将一个组件拖拽到界面上之后，得有一个动态生成配置面板的机制，”layoutit”也有一个简单的配置机制，但远远不是生产级别的，这里可以统一约定一个规则，让组件的配置项可以被读取，也可以按组件枚举，硬做到界面上，都可以，都有优缺点；

互相依赖的组件之间的数据交互会有问题，因为各组件的输入输出不可能完全一致，也就做不到依赖组件之间无缝接入，常规开发中开发者会手动做一些”适配”工作，比如将A组件的输出剪裁或修饰一下传给B组件，但现在是搞拖拽，这个数据修饰没法做了，可以修改组件做到可以互相适配，或者一步到位在拖拽系统上做一套数据修饰的中间功能，让操作者自己适配，都可以，都有很大的缺点。

所以在这里我们也只好一步步的自己切页面了，尽可能是响应式的，同时按设计稿填充的内容在HTML结构填充元素。

●②小技巧

将布局变成完整的设计时，我喜欢考虑将设计从上到下划分为多个部分的水平线。顶部的导航栏可能是第一个切片。中间的可能是一个切片，底部的是一个切片，我会将他们用明显的线条区分开来，使用不用的颜色，美观而又清晰。

一般在企业的工作的时候，都是设计师给设计稿，叮嘱效果，我们按照设计师的稿子从头到下附带交互效果直接切页面，

●③后续步骤

页面设计完成并用代码制作了个人网站，接下来配置后台和网站在服务器的部署了，这里我们使用SiteServer CMS 内容管理系统来作为我们网站的后台。如何使用，点击阅读更多，既然是自己设计网站，我们就不理会它里面的免费模板了。

至于后期的网站速度优化，代码优化之前我也提过了，写过文章详细说明过，大家也可以看一下。