作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.
苏珊娜·奥伯特的头像

Susanne《

苏珊娜是一名产品设计师,专注于精益用户体验、互动媒体和前端开发. 她在人工智能领域与客户合作有着丰富的经验, 航空, 并担任Lantum的产品设计顾问, 这是国家卫生服务使用的劳动力管理平台.

工作经验

6

分享

成功的设计师通常 upskill 并重新培训以加强跨工具、项目和规程使用的基础知识. 然而,在工作日找到额外的学习时间并不容易. 幸运的是,网络游戏是一种 既有趣又有教育意义UI / UX的设计师 提高他们的技能并获得新的技能. 通过互动和沉浸式(通常是免费的)在线游戏体验, 你可以磨练技术技能,比如 对齐, 排版, color 理论.

除了学习新的 设计技术, 我发现玩网络游戏能让我心情轻松, 激发我的创造力, 并帮助我更好地利用核心 设计原则. 每当我有空闲时间或我面对一个顽固 设计问题我玩了其中一款游戏,并获得了全新的视角.

增强你的一致性

对齐是指导视觉构图和支撑的基本设计原则 可用性和可读性.

这是 集中 那。 对训练你的对齐感和帮助你快速发现间距错误很有帮助吗. 目标是确定一个点是否在一个形状的中心. 这是一个简单的概念, 但这款游戏具有挑战性,因为这些点通常被放置在离中心很近的地方. 游戏通过强迫你考虑几何形状并在重叠和相邻的形状中找到参考点来构建构图意识.

《It's centric 那。》的开头,这是一款面向设计师的在线游戏. 屏幕中间有一个蓝色的大叉, 左边是一个笑脸符号, 右边是一个悲伤的表情.
这是通过让玩家判断一个点是否在中心来测试他们的对齐感.

扩展你的字体设计知识

理解 字体的细微差别 可以帮助设计师建立 视觉层次结构,确保文字清晰可辨,更好地沟通 拷贝的含义.

这个游戏 我拍了衬线字体 测试你的识别速度 衬线字体. 开始, 你面前有两封信, 其中之一是衬线字体, 并且需要在时间用完之前点击它来“拍摄衬线”. 随着你的进步, 你会同时看到越来越多的字母, 这使得寻找和拍摄不同的衬线字体变得更加困难.

这个游戏会让你保持警觉! 我每周都打,我总是惊讶于几轮之后的挑战.

一开始我拍的是衬线,一款专为设计师设计的网络游戏. 十二个白色衬线字体和无衬线字体的字母在黑暗的背景.
我拍摄衬线字体挑战玩家识别和“拍摄”不同衬线字体的速度.

Typewar 是另一个字体培训师,一个挑战你识别能力的人吗 不同的字体. 在每一轮中,你会得到a 字形 并且必须从一对选项中选择正确的字体名称. 你 得失分 看你如何回答这个问题, 最后获得的分数取决于有多少其他玩家正确回答了同样的问题. 即时反馈, 实时统计, 接触鲜为人知的字体会激励你继续学习.

为设计师设计的网络游戏typewar的诞生. 屏幕中央有一个大写字母“D”,下面有两个字体选项.
Typewar可以帮助玩家提高识别不同字体的能力.

提高你的视觉识别能力

提高数字文本可读性的一种方法是保证有效的字距, 或者字符之间的间距. 字距通常不受设计师的关注,因为它是在每种字体的字体文件中预定义的. 但是,当字符之间的关系似乎不一致时,知道如何调整字距是有帮助的, 或者如果你需要创建一个定制的标志或 客户端字体t.

Kern类型 通过测试您在单词中正确空格字母的能力,帮助您微调您的字距技能. 你说的每一个字, 你会得到100分的分数,并且可以选择在三个视图之间切换:你的间距, 最佳间距, 以及两者的结合来进行比较.

我一直在玩这个游戏,因为很难得100分, 它提醒我,总有进步的空间.

《Kern类型》的开始,这是一款面向设计师的在线游戏. “等待”这个词在屏幕中央.
Kern类型测试玩家优化字母间距的能力.

升级你的色彩游戏

By 提升你的色彩技巧, 您可以在一系列设计项目和学科中做出更明智、更有意义的决策. Color 这是一款挑战你识别色彩和饱和度的游戏吗, 同时也是互补的, 类似的, 三元, 四色搭配. 界面显示交互式 色轮 中间有一个高亮的颜色. 您必须在10秒或更短的时间内确定色轮内的颜色, 当您尝试为三色和四色方案匹配颜色时,难度会增加的任务.

Color的开始,这是一款专为设计师设计的在线游戏. 显示互补色的色轮和位于中心的内部计时器.
通过挑战玩家识别特定的色调,颜色可以帮助他们提高颜色匹配技能, 饱和, 还有调色板.

完善矢量技术

基于矢量的工具,如 Figma, 草图, 和Adobe Illustrator允许设计师创建数字图形,而不损失质量-不像像素图像, 尺寸越大分辨率越低. 但是绘制和操作矢量形状和曲线可能是一个棘手的过程.

布尔游戏 教你们 布尔操作 ,用于快速构建和修改2D形状 矢量设计工具. 在游戏中,你会看到一个需要复制的形状. 几秒钟后,形状转变为轮廓. 屏幕左侧有几个形状,您可以将它们拖到轮廓中以重现最终形状. 在屏幕的底部是四个布尔运算:并、减、相交和差. 单击Continue按钮会触发一个分步动画,向您展示如何使用所选布尔操作合并形状. 当选择了不正确的操作时,这个动画可以帮助您将错误可视化.

布尔的开始,一个为设计师设计的在线游戏. 左边是导航菜单. 中间是形状轮廓的选择,右边是白色形状的选择.
布尔游戏教玩家如何在矢量图形中使用布尔运算.

形状类型 是另一款矢量游戏吗. 在这, 玩家将看到一个字母,需要通过拖动不同的锚点将其重新塑造成正确的形式,并给出100分的相似度分数. 与Kern类型类似,您也可以在三个视图之间切换,以便将结果与原始形状进行比较. 除了提炼你的矢量绘图能力, 形状类型是获得近距离观察的好方法 解剖因素 不同的字体.

《形状类型》的开始,这是一款面向设计师的在线游戏. 在屏幕中央, 有一个大大的字母“B”,“有一个百分比分数, 三个切换选项, 右边是“下一步”按钮.
形状类型挑战玩家练习重塑矢量字体.

最后一个游戏,将帮助你提高你的矢量技能是 bsamzier游戏,它可以帮助您使用钢笔工具创建更精确的图形. 介绍教程解释如何使用控件, 如Alt和shift, 来定位锚点和操纵bsamzier手柄. 这个游戏教你如何画简单的几何形状以及更复杂的形状, 如一颗心和一辆车, 锚点也很少, 或节点, 尽可能。. 为了让事情更有趣, 每个关卡都有一定数量的节点, 游戏会记录你不使用的节点.

我喜欢这个游戏,因为它帮助我可视化锚点放置和贝塞尔手柄角度之间的关系, 使线条和曲线更平滑.

《的 bsamzier Game》的开始,这是一款面向设计师的在线游戏. 带有锚点的心的轮廓位于屏幕的中心.
bsamzier游戏帮助玩家完善重要的用笔技巧, 例如放置锚点和拖动贝塞尔手柄.

温习基础编码

无论是职业发展还是与开发者合作, 理解HTML和CSS的基础知识 使设计师成为多学科团队的重要资产. 此外, 前端编程知识 帮助设计师用现实参数调整他们的想法.

Flexbox不好的 分解编码的基础一步一步. 它教导 CSS flexbox, a CSS3网页布局模型 通过启用对齐控制使UI组件定位更容易, 间距, 用一两行代码包装网页上的元素.

在游戏中, 你可以通过编写几行CSS代码来帮助一只淘气的青蛙和它的伙伴们在屏幕上跳跃. 在每个级别上,代码编辑器上方的迷你教程描述了可以使用的不同命令. 当您在屏幕左侧编写代码时,相应的更改将在右侧发生. 如果青蛙到达了莲叶,代码是正确的.

Flexbox不好的的开始,这是一款专为设计师设计的在线游戏. 左边是一个代码编辑器和说明. 在右边,四个不同颜色的青蛙动画.
Flexbox不好的教玩家如何编写基本的CSS Flexbox代码.

提升你的UI/UX知识

在线游戏还可以帮助设计师提高他们的UI/UX知识,创造无摩擦的体验 提高转换率和投资回报率.

不能Unsee 通过测试你的设计概念知识来丰富你的整体UI/UX能力, 比如等级制度, 对比, 对齐, 排版, 以及组件样式. 屏幕显示两个设计组件,并要求您选择对用户更友好的选项. 部件在未经训练的人看来可能是一样的,但是 专业的设计师 应该能够通过注意元素之间的微小差异来区分它们吗, 例如未对齐的文本或不均匀的填充.

《不能Unsee》的开头,这是一款专为设计师设计的在线游戏. 游戏中有两个聊天框,在它们的下方有玩家的指示. 进度指示条出现在屏幕底部.
《Unsee》要求玩家在两种设计中选择更友好的一种.

充分利用在线设计游戏

我经常惊讶于设计行业的发展之快. 有时, 跟上新工具和新技术的步伐的压力会让我感到势不可挡,扼杀了我的创造力. 当我以一种童心来处理问题时,我的设计工作做得最好, 这就是为什么我如此喜欢这些游戏:它们让我在保持游戏感和好奇的同时学习和练习.

你是否想重新学习技能, upskill, 或者学习新的UI/UX技术, 在线设计游戏可以帮助你测试和提高你的艺术和技术能力. 就像毕加索曾经说过的, “我总是在做我做不到的事, 这样我才能学会如何做这件事.”

聘请Toptal这方面的专家.
现在雇佣
苏珊娜·奥伯特的头像
Susanne《

位于 葡萄牙里斯本

成员自 2022年3月21日

作者简介

苏珊娜是一名产品设计师,专注于精益用户体验、互动媒体和前端开发. 她在人工智能领域与客户合作有着丰富的经验, 航空, 并担任Lantum的产品设计顾问, 这是国家卫生服务使用的劳动力管理平台.

Toptal作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.

工作经验

6

世界级的文章,每周发一次.

<为m aria-label="Sticky subscribe 为m" class="-Ulx1zbi P7bQLARO _2ABsLCza">

订阅意味着同意我们的 隐私政策

世界级的文章,每周发一次.

<为m aria-label="Bottom subscribe 为m" class="-Ulx1zbi P7bQLARO _2ABsLCza">

订阅意味着同意我们的 隐私政策

Toptal设计师

加入总冠军® 社区.