界面设计师和前端开发人员是不同的专家,但是他们的任务密切相关。 如此之多,以至于精明的设计师了解布局的基础知识,而程序员则了解良好设计的原理。 这有助于避免误解并获得预期的结果。 详细说,Netology的
设计和UX主管Vladimir Sinitsyn。
你好 前端开发人员需要了解设计基础的两个主要原因。
第一个原因。 前端和设计师解决一个常见问题
设计人员进行布局,前端开发人员将其转换为完整的站点界面。 当两位专家都了解彼此工作的精髓时,便可以获得高质量的产品。
- 设计人员必须了解布局和CMS的基本知识(如果他为控制系统进行布局)。 这样就可以更好地定义技术局限性,以及前端实现该构想的难度。
- 开发人员必须正确理解布局的逻辑和结构,弄清楚布局的原理和方式,动画的显示方式,页面上元素之间的交互方式。 乍一看,设计师的想法并不总是显而易见的。
设计师经常认为不寻常,并为站点的Web界面找到创新的解决方案。 对于前端开发人员而言,更容易理解设计师的逻辑,理解其思想流程。
具有布局的协作系统并不总是可以简化工作。 现在,用于创建布局的系统已经开发完成,设计人员可以将所有必要的信息传递给前端,而无需进行个人会议和讨论-只需在程序中组织联合工作即可。 一方面,这节省了团队时间。 另一方面,开发人员需要了解同事的想法,并弄清楚布局设计的工作原理。 否则,无法避免长时间的讨论和改进。
如何在设计人员和开发人员之间建立互动:基本规则
我将从个人经验中给您一些技巧,以帮助您建立合作关系并使团队合作愉快。
如果您是设计师并准备布局,请尝试简化前端开发人员的工作:
- 在网格上工作。 是的,不对称作为一种技术正变得越来越流行,但也应刻在网格中。
- 在布局中尽可能键入对象。 键入有助于并加快布局。
- 显示交互中对象的状态。
- 对图层进行排序,并以友好的名称命名。 例如,标题层是标题,按钮层是按钮。 因此,开发人员将迅速找出您的布局。
- 将所有图像,图标,字体和其他元素收集到一个位置,这样您以后就不必浪费时间从布局中导出元素。
- 在单独的页面上创建UI工具包,并显示所有状态和元素。
- 在将原型布局传递给前端供应商之前,不要太懒于对原型布局发表评论-这样,同事将可以更快地找到它。
如果您是前端供应商,请将版式转换为网站界面:
- 如果有不清楚的地方,可以随时问设计师一个问题。
- 如果您从经验中发现需要更改布局,请首先与设计师讨论。 任何更改都需要达成共识。
- 如果项目是团队项目,则在工作的第一阶段,与同事讨论您计划使用哪些工具以及如何最好地将布局转移给您进行布局。
- 不要害怕讨论设计并给出建设性意见。 如果发现无法实现,请说明原因以及可以替换的内容。
当每个团队成员了解他的同事在做什么以及如何简化他们的任务时,工作就会顺利进行。 结果是准时交付的质量接口。
第二个原因。 对于熟悉设计的开发人员来说,找到工作更容易
具有设计知识的开发人员可以成为通用专家,并立即关闭两个职位。
需要前端设计师的地方
大型公司愿意支付两名单独的专家-开发人员和设计师。 在其他市场细分市场中,情况则有所不同-公司通常更愿意聘请可以完成大量任务的通用专家。
站点构建器现在很流行,并且大多数CMS系统都可以用作构造器。 在他们的帮助下,程序员可以创建一个简单的界面,但是要创建高质量的布局,您仍然需要设计师的技能。 设计师大量使用小型公司和私人客户。 对于他们而言,雇用一名通用专家将更为有利可图,该专家将进行布局并将其转换为带有或不带有构造函数的界面。 自由职业者也有类似情况。
如果您是前端开发人员,首先要了解什么设计
我立即回想起20条基本设计原则的良好
说明 。 我建议你开始和她一起潜水。

在下一阶段,请在实践中了解界面创建工具:Figma,Adobe XD或Sketch。 阅读并查看每个评论,然后选择最接近您的评论。 最主要的不限于手册。 观看它们,并立即在工具中练习您的实践技能。
将来,我建议您了解3D:Cinema 4D和Adobe Dimension程序; 和界面动画:ProtoPie和Adobe After Effects。
在哪里学习
在大学里。 我不推荐大学,因为大学给快速入门起了太多的作用,而且培训本身也很紧张。 如果这是您的第一门教育,那么您可以为获得文凭而上大学。 那些已经受过教育的人应该考虑强度(即使在某些大学也可以学习强度)或在线课程。
独立地。 自我教育适合那些知道如何过滤和构造信息,有恒心和自律的人。 现在,在公共领域中,有太多并不总是经过验证和有用的信息,您可能会感到困惑,甚至远离必要的技能。
在线课程。 对于那些关心从教师那里获取结构化信息,说明和反馈的人来说,这是一个选择。
小费
- 学习设计的基础知识,以便更好地理解布局并将其转变为界面,而无需进行过多的讨论和改进。
- 深入研究设计以成为通用专家,不仅可以在大型公司中申请职位,还可以在数字代理商,初创企业中申请职位,并寻找自由职业者的客户。
- 熟练掌握设计人员的工具不是手动的,而是手动-打开程序并了解它。
- 如果您准备过滤信息并在Internet上找到有用的培训材料,请自己学习设计。 如果要加快过程并按照结构化的相关程序进行学习,请选择课程。
如果您准备学习Web设计的基础知识,我们邀请您参加Netology的新课程
我们开设了“
从零到中间的Web设计 ”课程,并邀请希望“从设计者的角度”掌握界面的前端开发人员。
视频培训,讲习班和家庭作业分析四个半月。 我们将理论与实践相结合,并掌握了网页设计师的主要工具。
