如何设计网站(如何设计和编码个人网站)很多开发者认为擅长设计是一种与生俱来的能力，创意是与生俱来的。但是设计是一种技能，像其他任何东西一样可以学习。创建一个漂亮的网站并不一定要天生就是艺术家。这需要练习。看周围朋友的博客和网站，很多人用的都是开源的后台网站模板，太局限了。他们想要的内容板要跟着模板走，越回头看自己的网站越不讨喜，没有成就感。

本文将介绍如何通过从零开始设计个人网站并将其转换为代码的过程来实践该设计。

为什么要自己设计？

当你可以使用UI库或者Bootstrap之类的预制模板的时候，为什么还要自己设计呢？以下是设计网站的一些好处。

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

● ②练习技巧。设计将帮助你实践设计原则，工具，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来设置页面样式，以完美匹配您的设计。

通过部署，把它作为一个实际的项目或者继续改进设计，把它提高到一个新的水平。

有没有正在设计和搭建自己站点的朋友？还是觉得你们公司的设计师无非是模仿或者模仿，不管设计什么都一样？大家交流一下吧。