即使他们可能在同一个项目和产品上工作, 开发人员和设计师经常在各自的孤岛中工作. 开发人员通常认为设计是次要的, 与产品的功能相比，它并不重要.

这种想法对开发者和设计师之间的关系是有害的. 没有基本的设计知识会阻碍开发者的职业发展, 或者仅仅因为他们没有设计师就阻止他们进行项目.

开发者为何要学习设计

虽然设计和开发通常被认为是独立的学科, 有些人两者都精通. 即使有人只对成为设计师感兴趣 or 开发人员——不是两者都学——至少学习其他学科的基础知识是有价值的.

开发者想要学习设计有几个原因, 或者至少培养一个基本的设计知识基础.

首先，小团队可能没有专门的设计师. 进一步, 有些开发者想要完全依靠自己的力量去处理项目, 谁雇不起设计师(或想把钱花在其他地方). 学会设计自己的产品，至少能过得去，直到 设计师 能否被聘用是一种无价的资源.

开发者学习设计的另一个重要原因是他们可以更有效地与设计师合作. 对于设计师来说，交出一个网站或应用程序的完整设计文件是非常令人沮丧的，他们希望最终产品的像素完美无缺, 结果却发现他们的设计已经被开发人员编码了.

如果开发人员不理解 设计基础 他们可能会忽略那些使UI特别友好的小细节，无意中破坏了项目的用户体验. 当设计师发回大量的修改, 这会使开发者和设计师之间的关系变得紧张, 更不用说拖慢项目的完成速度了.

为了改善跨学科团队之间的关系和团队合作, 开发人员学会从“设计师的角度”看待设计，而不是单纯从开发的角度来看待设计，这对他们自己是有好处的——掌握这一技能将极大地改善他们的项目.

塑造设计思维

太频繁, 学习设计的开发人员过于关注他们喜欢和想要模仿的设计的美学, 而不是支持这些设计的基本原则. 他们看到的是按钮的颜色和大小, 一个特定的字体, 或者在不了解原因的情况下使用边界的方式 后面 这些选择.

他们开始在墙上喷漆，装饰空间，却不了解他们装饰空间的目的(甚至没有确保管道和电气等工作已经完成)。, 可以这么说.

理解和尊重设计师做出决定背后的原则是很重要的. 任何一个刚接触设计的人都需要牢牢掌握构成一个好的设计的原则和理论 完形原则 和基本的 视觉层次结构——然后他们就会一头扎进去，开始到处喷漆.

也就是说，这对新人来说也很常见 设计师无论他们是否有开发背景，都不会陷入理论上的困境. 他们花了太多的时间学习和思考，以至于他们从来没有真正应用他们所学到的东西.

设计师和开发者都是完美主义者. 但是在设计被 完美的 (因为他们可能永远不会)对这个过程很重要. 尤其是新设计师, 需要克服他们的不安全感, 把他们的工作放在那里, 并从他们收到的反馈中学习.

真正学习设计的最好方法之一就是尝试 重现设计 别人的. 把有用的和没用的区分开来, 弄清楚为什么特定的设计具有吸引力是新设计师或开发人员可以学习的最有价值的技能之一. 在现有的设计上加入独特的元素在行业中是很常见的 Dribbble“反弹”功能).

在浏览器中设计

许多设计师拒绝直接设计 在浏览器中因为这通常意味着他们至少需要熟练编写基本的HTML和CSS代码. 这就是为什么它通常非常适合开发人员进入设计领域的确切原因——他们已经习惯了编写代码.

有一些工具可以帮助你 在浏览器中设计 并且可以使设计师和开发人员的生活更轻松. 简单的 浏览器插件 从选择调色板到浏览另一个站点的CSS和HTML代码，都可以使用.

还有更复杂的工具，比如 Figma 这就像浏览器中一个功能齐全的设计工具. Figma 允许设计师协作, 将资产发送给涉众(甚至允许他们更改设计的内容和副本), 并且让开发人员能够实时访问实际设计. 对于想要创建可随时间扩展的设计和设计系统的开发设计师来说，这是一个很好的选择.

Webflow 在浏览器中进行设计的另一种选择是开发人员可能喜欢的吗. 而设计界面是可视化的, 导出的代码是干净的, 开发者会欣赏的语义CSS和HTML(不是所有的视觉设计工具都输出干净的代码). Webflow包括设计和布局工具, 以及内置的CMS和电子商务工具, 以及托管选项.

使用颜色、排版和布局

在深入了解颜色的视觉原理之前, 排版, 和布局, 谈论基本的可用性是很重要的. 最 美观的设计 在这个世界上 无用的 如果它不能使用.

最重要的可用性原则之一是一致性或可预测性. 设计应该具有足够的可预测性，使用户能够直观地理解如何使用它们. 例如, 蓝色下划线文本为可点击的链接, 导航菜单完整且标记良好, 等. 元素之间的间距、排版和配色方案也应该保持一致.

在每个设计项目中应该考虑的其他可用性原则包括错误预防(以及在发生错误时提供信息错误消息)。, 熟悉的语言(使用人们习惯的语言), 而不是“可爱”或有创意的替代品。), 灵活性和效率, 并且很容易获得帮助. 尼尔森诺曼集团有额外的 可用性启发式 这一点也应该牢记在心.

可用性评估应该贯穿整个设计和开发过程，以确保产品的功能符合设计和开发团队的预期, 用户不会感到困惑. 启发式评估 包括将产品应该遵循的预定义设计原则列表与实际产品进行比较，以查看出现偏差的地方(然后修复这些偏差)。.

一旦可用性与手头产品的关系被彻底理解, 设计师-开发人员可以转向设计的更多视觉方面.

基本色彩理论

色彩理论是视觉设计中最复杂的方面之一. 稍微改变色调可以完全改变一种颜色的视觉冲击和情感效果. 这是众多原因之一 设计师 在这个行业工作多年的人还在为颜色而挣扎吗.

虽然很多书都写过 色彩理论，这里有一些非常基本的原则可供设计师和开发人员学习. 将这些与任何可用的众多颜色设计工具相结合, 一个令人愉悦的调色板可以相当容易地创建.

首先，暖色、冷色和中性色的区别. 暖色包括红色、橙色和黄色. 暖色通常是充满活力和活力的. 冷色包括绿色、蓝色和紫色. 这些颜色通常是平静和放松的.

中性色包括白色、黑色、灰色、棕色和米色. 在暖色或冷色中加入白色、黑色或灰色会改变它们的意义和影响. 白色会使颜色变亮，通常会使它们的效果不那么强烈或更积极(例如, 紫色被认为是神秘的, 帝王的颜色, 而丁香常与春天和幸福联系在一起。. 灰色会使颜色变得柔和，减少它们的影响. 黑色会使颜色变暗，使它们看起来更保守(想想一种颜色的不同影响，比如亮蓝色和藏蓝)。.

一旦设计师对颜色的含义有了基本的了解，他们就可以使用像 Coolors, 设计的种子, or Colormind 为他们的设计想出一个最终的，协调的调色板.

使用HSL颜色

当设计师考虑网页颜色时，他们通常会考虑十六进制值. 虽然这已经成为网页颜色的行业标准, 开发人员可能会发现使用HSL颜色值更有意义.

对于大多数人(包括设计师)来说，十六进制值似乎彼此之间没有相关性. 看起来非常相似的两种颜色可能具有完全不同的十六进制值. 例如, #68B4D4和#92C8E0是非常相似的蓝色色调(一个只是比另一个亮一点和浅一点)，但它们的十六进制值没有明显的相关性.

他们的HSL值, 然而, #68B4D4变成HSL (198), 58%, 62%)， #92C8E0变成HSL (198), 56%, 73%). 序列中的第一个数字(在本例中为198)表示特定的色调. 第二个数字是饱和度百分比(颜色的亮度或活力). 第三个数字是颜色的明度(或增加的白色)百分比.

因为颜色值之间的相关性在HSL和十六进制中很容易看到, 开发人员经常发现使用HSL代码操作颜色要容易得多.

字体设计原则

排版是另一个即使是经验丰富的设计师也会犯错的领域. 但就像色彩理论一样，有一些很棒的工具可以提供帮助.

排版的层次结构 设计师兼开发人员首先应该学习的是什么. 设计中不同类型元素之间的关系对于提高设计的可用性至关重要.

至少, 设计应该有三个层次的排版层次:标题, 字幕, 和主体字体. 标题应该是视觉上最突出的, 接下来是字幕, 然后是主体字体, 哪个应该是高可读性的.

许多新设计师在创建层次结构时过于关注字体大小，而对字体关注不够 style. 有时, 而不是让标题明显大于副标题, 例如, 标题可以加粗或大写, 而副标题则保留标题大小写和正常重量. 颜色也可以用来区分副标题和标题, 在这些元素和正文之间.

组合不同字体 这也会让许多设计师感到困惑，但这是一种创建视觉层次结构的常用方法. 它们包括选择互补字体(异性相吸), 但在某种程度上, 字体组合的好坏取决于经过时间磨练的直觉。), 选择合适的字体(不要在法律文件上使用Comic Sans字体), 例如, (或者为在较小尺寸下不清晰的主体类型使用显示字体), 创建字体之间的对比(不要使用两种非常相似的字体).

另一种组合字体的简单方法是从大字体族中挑选字体. 甚至有些家庭也有展示, 衬线, 和无衬线字体的版本可以很好地协同工作(比如Mrs Eaves和Mr Eaves), 水, 或Museo及Museo Sans). 这可能是开始真正尝试组合字体的最简单方法，因为它们被设计成看起来很好.

当使用较大的排版层次结构时(例如添加H1、H2、H3、H4等).)，在排版尺度上遵循某种原因是很重要的. 斐波那契数列是一种可能的开始尺度，尽管也有其他确定的尺度 排版尺度.

在两种排版(通常在设计布局中)中使用的一个常见比例是4, 8, 16, 24, 36, 48, 72, 108, 等. 这些图形可以以各种方式组合在一起，创造出具有令人愉悦的视觉比例的设计, 24像素的字体加上36像素的线高).

基本布局原则

自从web诞生以来，就有一些特定的布局模式作为“标准”出现.示例包括顶部的主要导航, 带有附加信息或导航选项的左侧或右侧工具栏, 正文内容占据了剩余的空间.

虽然有明显的偏离这个基本布局(不是顶部导航), 没有侧边栏, 两个侧栏, 等.)，在创建新布局时，这通常是一个相当安全的选择. 对这个基本模式的偏离应该是有目的的, 特别是对于新手和没有经验的设计师/开发者.

创造一个设计 可预测的-这通常意味着 一致的-对产品的可用性有很大的帮助. 只有当可用性收益大于损失时，才应该偏离用户在使用产品时所期望看到的内容.

对于同一类型的内容，最好不要在一个页面上使用72像素的粗体蓝色标题，然后在另一个页面上使用36像素的红色标题，因为布局一致性是关键. 类似的, 标题和正文之间的间距(填充)在一个部分是36像素，然后在另一个部分是32像素，这会造成视觉上的不一致. 虽然一个人可能不会立即理解为什么这种差异是不和谐的，但他们会感觉到.

类似于上面提到的排版尺度, 以4为尺度的间隔元素, 8, 16, 24, 36, 48, 72, 或者108像素将创建一个视觉上令人愉悦的设计. 这是个好主意 足够的 元素间空间, give them room to breathe; newer 设计师 often avoid white space and can end up with designs that look cluttered and overwhelming.

有些人可能会质疑为什么天平的间距是这样的. 为什么前两个数字之间只有4个像素的差异, 但前两幅相差了36像素? 原因很简单:在小范围内, 4像素的增加很容易识别(8像素是4像素的两倍), 这很容易辨别). 但是对于更大的数字，72像素和76像素之间的区别就不容易看出来了. 随着尺寸的增加，更大的差异更容易看到.

一致的间距是基于网格的设计方法变得如此流行的原因之一. 从一个网格(通常是12列、16列或24列)开始 设计师 一个框架，在其中工作，将保持一切一致. 列之间内置的排水沟也有助于确保不同的设计元素和其中的内容有一些喘息的空间.

结论

设计师和开发人员都应该专注于扩展自己的技能，以进一步发展自己的职业生涯. 开发人员花在学习的时间 设计的基本原则 将来他们与设计师合作或创造自己的产品时，会节省时间吗.

对设计可用性基本原则的理解, 色彩理论, 排版, 布局, 和ux -也将使开发人员更擅长 发展. 当他们明白设计师为什么会做出这样的选择时, 开发者可以更好地与设计师合作，创造出真正一流的产品.