许多开发人员认为擅长设计是一种天生的能力，而创造力是与生俱来的。但是设计是一项可以像其他任何东西一样学习的技能。你不必天生就可以创建一个漂亮的网站的艺术家，这需要实践。在身边的小伙伴的博客，自己的网站来看，很多人都是用了开源后台的网站模板，熟不知局限太大，自己想要的内容板式也要跟着模板走，越往后看着自己的站点越不顺眼，没有一点成就感。

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

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

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

●②练习技巧。设计它会帮助你练习设计原则，工具，HTML和CSS。你将更容易开发用户界面并将其引入网络。设计出独特且符合现代潮流的个人站点。

以前接私活的时候，不会设计页面，搬运其它站点页面，导致自己修改图片和部分页面的时候，不会使用工具，设计出来的页面死板不灵活，客户不满意，自己看了也觉得很普通，没有给你心意的感觉。

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

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

●⑤可能会很有趣。创造出令自己感到骄傲的东西是一种有趣的经历。如果您花一些时间练习它，琢磨它，打造出属于自己的页面，岂不是更好，生活中发现美是一件很美好的事，但我觉得创造美更让人觉得骄傲。

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

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

• 快——它能让我以最快的速度把界面原型画出来。
• 手绘风格——用它画出来的界面是不折不扣手绘风格，很酷。
• 都是现成的——它已经内置了常用的控件和图标，基本够用了。

●①创建线框

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

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