如何从零开始设计个人网站并将其转换为代码?

无需加好友免费技术支持

许多开发人员认为，擅长设计是一种与生俱来的能力。但是设计是一可以像其他任何东西一样学习的技能。创建一个美丽的网站的艺术家需要实践，而不必天生。根据你周围朋友的博客和你自己的网站，很多人使用开源背景的网站模板。他们不知道限制太大。他们想要的内容板也应该跟随模板。他们越往后看，他们的网站就越不愉快，没有成就感。

本文将介绍如何从零开始设计个人网站并将其转换为代码。

当你能用的时候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设置页面样式，以改进与您的设计相匹配。通过部署，将其用作实践项目或继续改进设计，并将其提升到一个新的水平。有没有朋友在设计和建立自己的网站？还是觉得自己公司的设计师无非是模仿还是模仿，无论设计什么都是一样的？一起交流下。