如何通过从头开始设计个人网站并将其转换为代码

很多开发者认为，善于设计是一种与生俱来的能力，创造力是与生俱来的。 但设计是一种可以像其他任何东西一样学习的技能。 您不一定非要成为艺术家才能创建漂亮的网站，这需要练习。 看身边朋友的博客和自己的网站，很多人用的是开源的后台网站模板。 不知道是局限性太大，想要的内容格式必须按照模板来。 网站越不顺眼，越没有成就感。

本文将向您展示如何通过从头开始设计个人网站并将其转化为代码的过程来实践设计。

为什么要自己设计？

当您可以使用 UI 库或预制模板时，为什么要自己设计？以下是设计网站的一些好处。

●①在人群中脱颖而出。 许多开发人员博客都使用类似的模板，很容易看出它并不是自己设计的。 如果你的个人网站的目的是展示你的能力，那么使用模板可能会降低别人对你的肯定，而你自己设计的独特风格会让你的网站在众多网站中脱颖而出。

●②练习技巧。 设计它将帮助您实践设计原则、工具、HTML 和 CSS。 您可以更轻松地开发用户界面并将它们带到网络上。 设计一个独特而现代的个人网站。

以前做私活的时候，不知道怎么设计页面，搬其他站点页面的时候，修改图片和一些页面的时候不知道怎么用工具。 设计的页面是僵硬和不灵活的。 客户不满意。 ，没有给你心动的感觉。

●③ 更好的应用性能。 您的网站将是轻量级的，并且使用自定义 CSS 具有更好的性能。 如果您包含一个 UI 库或模板，它可能包含大量代码以涵盖您未使用的所有可能的自定义设置。 如果将未使用的代码发送给用户，可能会对您网站的性能产生负面影响。 网页加载慢、打开慢是很多人不能接受的。

●④ 发展职业技能。 在 Web 开发角色中，您可能不必从头开始实施完整的网站设计，但您应该能够制作出与现代设计一致的美观界面。 成为“全栈开发者”通常意味着精通后端语言或前端框架，同时熟悉设计和产品知识。 全栈开发人员应该具备一些基本的设计知识，并能够为用户提供一致的体验。 当然，我从中学到了很多技能和知识，这是毋庸置疑的。

●⑤可能会很有趣。 创造让您引以为豪的东西是一种有趣的体验。 如果你花一些时间来练习它，磨练它，创建你自己的页面，那不是很好吗，发现生活中的美是一件美丽的事情，但我认为创造美更值得骄傲。

开始设计你的网站，不要直接写页面，从代码设计页面。 很难从代码编辑器中可视化设计，我建议先使用可视化设计工具，然后将结果转换为代码。 现在有一些快速代码生成模板，我觉得小项目可以用，比如我们个人站点，大项目不适合表现。

▲制作界面原型的软件，我最喜欢的是一款手绘的轻量级软件。 我喜欢它的原因是：

开始你的表演

●①创建线框

第一步是创建网站的低保真线框。 创建线框有助于在添加视觉设计和内容之前建立页面结构。 线框不一定要漂亮，它应该专注于内容的布局。 您可以手绘，也可以使用设计工具的基本功能。

为了创建线框，我喜欢将设计视为一系列矩形。 网页上的元素是从上到下流动的矩形块。 从矩形开始不需要艺术天赋。

●②网站结构

您在线框中放置的元素由您决定。 您可以考虑添加导航栏、页眉、博客文章和页脚。 您可能不需要所有这些，可以让它们保持基本状态，稍后再添加。 确定要包含的内容并将这些部分合并到线框中。 如果您在布局方面遇到问题，请查看类似的网站，模仿该网站内容的结构，然后根据您的需要进行修改。

线框不必是完美的。 网站结构到位后，您可以继续进行视觉设计。

●③ 应用视觉设计

要将低保真线框转换为设计，您可以使用免费的设计工具，例如 Figma（下一代设计神器）。 如果你没用过设计程序，也可以用ps来实现，但是会有点慢，不过我在国内还没找到像Figma这么好用的工具。

●④实施布局

首先，创建一个空白画布来表示一个空白浏览器页面。 通过为您的内容创建容器，在您的设计工具中实现线框。 我建议先从黑白开始，这样您就可以专注于布局。

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

●⑤添加节和占位符内容

看起来像一个网站后，让它看起来更漂亮。 通过弄清楚是什么让布局看起来有吸引力，您可以模仿其他网站的外观以添加到您自己的网站中。

在此阶段，考虑形状、大小、边框和阴影。 逐渐升级基本的矩形，变成你喜欢的风格。

●⑥更新布局

排版和间距对美学有很大帮助。 如果排版正确，即使是简单的设计也可以是高质量的。 同样，您可以模仿另一个网站或搜索字体和字样资源以融入您的设计中。 但一定要注意版权。

记得曾经有一家公司不顾字体版权问题，在自己的网站上使用方正字体，被指控侵权，需要赔偿。

●⑦上色

接下来，为网站添加颜色。 通过建立您的品牌来赋予您的网站特色。 想想您希望您的网站如何吸引读者。 如果您希望它看起来干净简洁，请选择不太亮的颜色，保持渐变微妙，并选择易于阅读的字体。 如果你想让它看起来有趣，选择明亮的颜色，使用充满活力的渐变，应用背景纹理，使用圆形元素，并选择粗体。

添加颜色看起来很吓人，但您不需要知道它是如何工作的。 如果您的设计以黑白两色开始，您可以选择单色来突出元素，使设计栩栩如生。 如果你想超越这一点，我建议你选择一种或两种你喜欢的颜色，并使用该颜色的不同亮度变化。 这有助于创建一个有凝聚力的主题，而无需成为色彩专家。 选择背景色和前景色时，请通过检查颜色对比度来牢记可读性。

例如，为背景设置深蓝色，为文本设置浅蓝色。 对于白色背景颜色，您可以为标题使用中等深浅的蓝色。

将颜色融入设计后，继续检查整体设计感觉并进行调整。

●⑧注重细节

设计的时候，应该退后一步，审视整个设计，细化。 通过用简单的语言描述你所看到的来批评你的设计，然后将该陈述转化为要解决的技术问题。

它看起来紧凑吗？ 增加填充和边距。 文字阅读困难？ 选择更清晰的字体或增大字体大小。 增加背景和前景之间的颜色对比度。 内容难以识别？ 添加具有更高字体粗细的标题。 在标题和段落之间添加更多间距。 看起来草率或不一致？ 在水平和垂直线上对齐元素。 在设计器中设置参考线有助于确保元素正确对齐。 调整填充和边距以保持一致的垂直间距。 通过为标题和段落设置字体和大小使文本保持一致。 避免过多的文本更改。 确保所有颜色都适合您的调色板。

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

●①创建HTML结构

网站上有一个项目可以直接生成页面的HTML结构并添加CSS代码。 它已经开源。 如果你有兴趣，可以去看看。 真的是挂了。

中国没有这样的项目。 想搞拖拽式开发的大佬倒是不少，但没见过谁真正做到了。 如果做不到，那绝对不是技术实现不了。 拖放的本质是在组件库的基础上添加组件。 增加了一层交互界面，所以组件化是拖拽式开发的第一步，剩下的其实就是“”，但真正实现起来有很多限制。

可拖动组件应该封装控制层和视图层。 原则上耦合度越低越好，内聚度越高越好。 最好自己集成，只对外暴露配置项，也就是说，拖一个组件到界面后，要有动态生成配置面板的机制。 ""也有简单的配置机制，但离生产级别还差得很远。 这里可以约定一个规则，从而可以读取组件的配置项。 也可以通过组件枚举，也可以在界面上做，两者各有利弊；

相互依赖的组件之间的数据交互会出现问题，因为各个组件的输入输出不能完全一致，依赖组件之间无法实现无缝访问。 常规开发中，开发者会手动做一些“适配”的工作，比如对组件A的输出进行裁剪或者修饰，传递给组件B，但是现在是拖拽，这个数据修改做不了，你可以修改组件，让它们相互适配，或者在拖拽系统中一步到位 可以在网上做一套数据修改的中间函数，让操作者自己去适配，但两者都有很大的缺点。

所以这里我们要一步步切分页面，尽可能的响应式，按照设计稿填写的内容填写HTML结构中的元素。

●②小贴士

当把一个布局变成一个完整的设计时，我喜欢考虑将设计从上到下分成几个部分的水平线。 顶部的导航栏可能是第一个切片。 中间的可能是一片，最下面的可能是一片。 我会用明显的线条来区分它们，并用不同的颜色，既美观又清晰。

一般在企业工作，都是设计师给出设计稿，说出效果。 我们从头到尾跟着设计师的稿子，加上交互效果，直接把页面剪下来。

●③下一步

页面设计完成，用代码制作个人网站，然后后台配置，网站部署到服务器上。 这里我们使用CMS内容管理系统作为我们网站的后台。 使用方法，点击阅读，由于是自己设计的网站，所以忽略里面的免费模板。

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

你不知道的“前端性能优化”知识我都总结了

网站打开速度慢，这些才是重点，不要觉得不重要

总结

您将通过自己设计和编码，然后上网来学习这一点。

有朋友在自己设计和搭建自己的网站吗？ 或者觉得你们公司的设计师无非是模仿就是模仿，不管是什么设计，都是一样的？ 让我们一起交流吧。