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

为什么要自己设计？

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

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

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

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

更好的应用程序性能

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

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

①创建线框

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

应用视觉设计

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

通过自己设计和代码编写，以及后期的上线，你将会学到这些。

• 自己设计网站将帮助你练习设计技巧，并让你的网站脱颖而出
• 创建线框以构造内容和功能
• 使用设计工具将线框变成视觉设计。从您喜欢的设计中获取灵感
• 对页面的HTML结构进行编码，以帮助了解需要使用哪些CSS来转换这些元素
• 使用CSS设置页面样式以完善匹配你的设计
• 通过部署，将其用作实践项目或继续改进设计，将其提升到一个新的水平

有没有正在自己设计搭建站点的小伙伴啊？或者感觉自己公司的设计师无非就是模仿还是模仿，不管设计啥都千篇一律的？一起交流下。

推荐阅读：

以上便是如何设计和编码制作个人网站（个人主页设计）相关内容，如果对你有所帮助，记得收藏本页方便下次阅读。

欢迎大家阅读评论，关注，点赞，感谢观看。