英文 | https://javascript.plainenglish.io/5-web-design-skills-every-developer-should-master-d4ecda8d095a
翻译 | 杨小二
一个好的网站包括两个方面，视觉设计效果和网站程序。许多开发人员（主要是自由职业者）需要同时处理这两块内容。他们自己设计网站，然后自己实现网站程序开发。
请注意，这篇文章适用于同时完成这两个部分的开发人员，或者如果你是从事设计的人，这些内容可以跳过。
在许多人看来，编程，尤其是 Web 开发是人们学到的最重要的技能之一。
每个人都想学习 JavaScript，以及 React、Angular 等最新框架。但是，学习这些框架会让你成为一名优秀的开发人员吗？
我相信要真正打造一个网站，视觉效果与使用的开发技术堆栈一样重要。用户和网站之间的沟通应该顺畅，并且，你应该能够通过你的设计将用户连接到你的网站。
以下是任何设计师或开发人员应该学习的 5 项技能，以使他们的网站脱颖而出。
1、学习视觉设计的基本规则
任何网站的基础都是其视觉效果。
它的外观如何干净、不同元素之间如何相互作用，以及网站的整体主题都是你网站引人注目的重要因素。如果网站具有视觉吸引力，你只会留在网站上。
视觉设计处理视觉元素，例如网页布局、使用的插图、照片、你选择的字体和排版，甚至是留白这些都是非常有技巧的。
人们通过视觉处理网站上的大部分信息，而不是阅读那里写的内容。当你让他们迷上了你的视觉效果后，他们就会开始关注它。
重要的是要了解设计基本要点：
- 色彩原则
- 线、点、面（形状）
- 纹理、留白和布局
- 排版和摄影
2、学习交互设计
“设计不仅仅是它的外观和感觉。设计就是它的运作方式。” — 史蒂夫·乔布斯
交互设计是交互产品和服务的设计。在交互设计中，主要关注的是设计用户如何与网站或网络应用程序交互。
在你让用户与你的视觉效果联系起来之后，你的用户应该能够轻松地与网站进行交互。该网站不应感到复杂或难以使用其一些功能。
交互设计对于让用户轻松浏览网站非常重要，以便你可以将他们引导到所需的位置（产品）。
另外，术语“交互设计”经常与“用户体验设计”混淆。用户体验设计 (UX) 涉及更多方面。交互设计是用户体验的一个子集。
3、学习原型工具
你有多少次经历过你做了一个网站而客户不喜欢它？我已经面对它的次数令人尴尬。我以为每个人都会喜欢我所做的设计。我的设计在我眼中就像糖果一样。
但这种情况并非如此。在你和你的客户对同一页面达成同一意见之前，你可能会有一千次的更改。
我为了避免重复的修改UI设计，所以，我采用了节省数十小时的最佳方法，学习使用原型设计工具。原型设计工具可以帮助你的客户直观地了解你将要交付给他们的内容。
这些工具为我们提供的最大好处就是迭代。与我们对整个网站进行编码，然后进行更改相比，我们可以更快地迭代、改进和验证。
一些免费的 Web UI 模型工具如下：
- Adobe XD：https://www.adobe.com/in/products/xd.html
- Origami Studio：https://origami.design/
- Webflow：https://webflow.com/
4、熟悉产品和用户群
任何产品设计中的重要课程之一就是了解你的用户市场。网站设计就像一个产品，只是在这里，你正在制作一个与用户交互的应用程序。
熟悉产品的用途并了解用户的兴趣，再开始设计网站作品，这点很重要。
例如，如果你正在创建一个面向 40 到 60 岁用户人群的网站，你可能希望网站更干净且易于浏览。同时，如果你的目标受众更年轻，那么，你可能会选择更具活力和吸引力的网站设计风格。
充分了解你的产品和用户人口统计数据，将始终帮助你创建符合用户兴趣的设计。
5、搜索引擎优化 (SEO)
你可以创建一个漂亮、干净且引人入胜的网站。但是，如果没有人访问你的网站，这一切都会显得特别没有意义。
SEO 是网页设计和开发过程的一个非常重要的部分。在制作整个网站后，不要将 SEO 视为事后的想法。
作为 Web 开发人员，你应该关注由 Web 架构、语义、内容和网站编码方式组成的 Onpage SEO。
页面 SEO 占网站总分的30%左右。
因此，下次你设计网站时，请考虑将 SEO 作为过程并帮助你的客户实现他们想要达到的目的。
最后，一个好的网站应该与它所提供的价值一样好，用户可以轻松浏览你的网站并对其感到舒适。
如果你喜欢这篇文章，请将他们分享给你的身边的小伙伴。
感谢你的时间。
学习更多技能请点击下方公众号
