Motion Design with Figma: Animations, Motion Graphics, UX/UI

Motion Design with Figma: Animations, Motion Graphics, UX/UI

Figma 像专业人士!使用顶级设计师使用的现代实践+构建项目来学习移动和网络上的运动设计!

你将会学到的

  • 像专业人士一样使用 Figma,并在用户界面设计、用户体验设计 (UX/UI)、网页设计或移动应用程序设计方面找到工作
  • 学习使用 Figma 构建动态设计原型并将动画和动态图形添加到您的项目中
  • 在课程结束时定制并专业完成令人惊叹的设计作品集(我们为您提供!)
  • 构建这些项目:1. Photo Inspiration App, 2. Nat Geo Carousel, 5. Smart Home Mobile App, 6. Home Reno Web Landing Page and Form + 更多!
  • 学习在 Figma 中使用 Smart Animate
  • 学习使用行业最新趋势的 UI/UX 最佳实践
  • 了解运动设计的原理、运动设计过程、最佳实践以及为您的客户和客户制作项目原型

要求

  • 没有要求。我们教你,从头开始向你展示一切!从零到精通
  • 我们使用 Figma,这是一个免费的基于网络的应用程序。这意味着世界上任何拥有计算机的人都可以学习本课程(Mac/Linux/Windows)

说明

刚刚推出了所有现代运动设计原则和 2022 年的最佳实践!这是一门基于项目的课程,我们将通过构建许多设计项目来共同添加到您的投资组合中来学习!加入由超过 600,000 名学生组成的实时在线社区,以及由在硅谷和多伦多为顶级公司实际工作过的行业专家教授的课程。 Andrei 课程的毕业生现在在谷歌、特斯拉、亚马逊、苹果、IBM、摩根大通、Facebook 等顶级科技公司工作。

本课程使用动态设计以及用户界面和用户体验设计 (UI/UX) 中的最新最佳实践,重点是有效地教您如何为您未来的所有 Web 和移动应用程序项目构建交互、动画和动态图形。我们将使用Figma实现了这一点,它现在是现代设计师使用的#1 工具,并且正在取代过去所有过时的设计工具。

我们将为您提供本课程中的所有 Figma 文件、高级设计模板和资产,以便您在与所有未来客户合作时保留和使用它们!我们向您保证,这是关于运动设计、微交互、动画和创建精美 UX/UI 的最全面的在线资源!

当我们引导您从头到尾作为运动设计师工作时,课程将非常实用……

课程涵盖的主题是:

  1. 为什么运动很重要?- 了解运动如何在构建可用产品中发挥重要作用,以及它如何帮助创建叙事和强化心智模型。
    1. 运动设计的常见误解
    2. 运动有助于创造可用性
    3. 叙事和心理模型
  2. Figma 简介 – 了解 Figma 的不同部分以及入门所需的内容。我们深入研究重要细节,让您启动并运行,因此不会造成混淆。
    1. Figma 入门
    2. 介绍 Figma
    3. Figma 仪表板
    4. Figma 工具
    5. 图层和页面
    6. 顶栏
    7. 设计属性
    8. 使用 Figma 进行原型设计
    9. 练习:创建响应式布局
  3. 智能动画简介– Figma 的智能动画改变了游戏规则。您将学习如何修改它支持的所有不同属性,然后在我们构建和解释一些简单原型时使用这些知识。
    1. 规模
    2. 位置
    3. 不透明度
    4. 回转
    5. 充满
    6. 练习:创建一个简单的交互
    7. 练习:动画导航项
    8. 练习:创建更大的原型
  4. 项目:照片灵感应用程序 – 我们将以一声巨响开始课程!您将进入您的第一个项目,在该项目中您可以利用给定的资源和您之前学到的知识将您自己的照片灵感移动应用程序原型链接在一起。
    1. 设计资产
    2. 通过类别过滤
    3. 屏幕转换和拖动交互
    4. 简单的微交互
  5. 运动设计原则 – 您还将学习运动设计的原则以及使它们成为任何设计成功不可或缺的因素。
    1. 介绍
    2. 缓和
    3. 偏移和延迟
    4. 育儿
    5. 转型
    6. 价值变化
    7. 掩蔽
    8. 覆盖
    9. 克隆
    10. 遮蔽
    11. 视差
    12. 维度
    13. 多莉和变焦
  6. 在 Figma 中创建运动 – 将您学到的理论和实践知识直接跳回 Figma 以构建一些较小的原型。使用给定的设计资源,您可以跟随或观看 Daniel 如何解释如何创建各种交互。
    1. 练习:导航转换(导航设计)
    2. 练习:导航转换(心)
    3. 练习:导航转换(购物车)
    4. 练习:导航转换(主页)
    5. 练习:滚动(登陆页面)
    6. 练习:滚动(锚链接)
    7. 练习:滚动(视差)
    8. 练习:分页(简单的轮播点)
    9. 练习:分页(轮播动画)
    10. 练习:拖动(列表卡)
    11. 练习:拖动(图像拖动)
    12. 练习:拖动(拖动内容)
    13. 练习:拖动(拖放)
    14. 练习:微交互(文件上传器第 1 部分)
    15. 练习:微交互(文件上传器第 2 部分)
    16. 练习:微交互(暂停和播放)
    17. 练习:微交互(Like 按钮)
    18. 练习:微交互(如动画)
    19. 练习:喜悦(成功模式)
    20. 练习:喜悦(五彩纸屑流行音乐)
    21. 练习:喜悦(清单第 1 部分)
    22. 练习:喜悦(检查清单第 2 部分)
    23. 练习:喜悦(购物车按钮第 1 部分)
    24. 练习:喜悦(购物车按钮第 2 部分)
  7. 运动设计过程 – 运动设计如何融入“正常设计过程”?别担心,我们为您提供保障。Daniel 将解释他确定满足用户需求的正确运动解决方案的过程。
    1. 发现与研究第 1 部分
    2. 发现与研究第 2 部分
    3. 设计和故事板
    4. 原型
    5. 测试
    6. 有用的提示
  8. 项目:国家地理轮播 – 了解如何在 Figma 中创建简单和复杂版本的轮播效果。
    1. SimpleLanding 页面轮播
    2. 复杂视差和 3D 图像效果
  9. 微交互——深入挖掘为什么微交互如此重要。然后,您将直接进入 Figma,使用 Figmotion 插件与 Daniel 创建您自己的动画。
    1. 什么是微交互?
    2. 为什么微交互很重要
    3. Figmotion:第 1 部分
    4. Figmotion:第 2 部分
  10. 项目:智能家居移动应用 – 智能家居应用正变得越来越流行。了解如何设计一个简单的主屏幕,然后使用 Figma 对其进行动画处理。跟随 Daniel 解释他如何创建复杂的温度调节交互。
    1. 设计移动主屏幕
    2. 创建切换交互
    3. 温度调节相互作用
  11. 反馈 – 了解为您的设计提供便利和收集建设性反馈的正确方法。
    1. 为什么反馈很重要?
    2. 建设性的反馈意见
  12. 项目:家居装修登陆页面 – 曾经想设计一个带有动画元素的大型登陆页面?不用担心,跟随 Daniel 的脚步,他将带您完成将登录页面分解为多个原型的过程。
    1. 设计登陆页面
    2. 为着陆页制作原型
    3. 视差效果:第 1 部分
    4. 旋转木马
    5. 视差效果:第 2 部分
    6. 画廊
  13. 项目:家庭装修装修表格 – 人们经常忘记表格,但使用动作帮助您的用户完成一项非常重要的任务是关键。Daniel 将教您如何将一些微妙的动画应用到您的表单交互中,这将帮助您创建更多可用的产品。
    1. 表单元素中的运动
    2. 表格进度
    3. 动画表单内容
    4. 输入和按钮:第 1 部分
    5. 输入和按钮:第 2 部分
    6. 输入和按钮:第 3 部分
    7. 输入和按钮:第 4 部分
    8. 工具提示
    9. 轮播输入
  14. 项目:送餐移动应用程序 – 学习如何使用屏蔽技术创建一些华丽的交互,然后跟随 Daniel 解释如何创建复杂的订单进度原型。
    1. 介绍
    2. 使用视差来吸引注意力
    3. 列出转换
    4. 替代叠加
    5. 掩蔽和叠加
    6. 微交互和浮动操作按钮
    7. 订单进度:第 1 部分
    8. 订单进度:第 2 部分
  15. 展示你的原型——你拥有所有这些原型,但你如何在你的作品集中展示它们?我们将向您介绍如何记录您的原型并将其导出为您喜欢的格式的多个 Mac 和 Windows 选项。
    1. Mac 披风
    2. 如何使用卡普
    3. 在 Figma 中使用你的 Kap GIF
    4. Chrome 和 Windows 的屏幕显示
    5. 如何使用筛选
    6. 在 Figma 中使用 Screenity GIF

我们将教您一些技能,让您可以为您的时间收取大量费用。不要在一些随机的自由职业者网站上为每小时几美元而竞争。我们的目标是为您提供顶级设计师的技能,并且在此过程中,我们将设计多种产品和项目,您将能够将它们添加到您的投资组合中。

课程内见!

授课人:

Andrei 是Udemy 上评价最高的开发课程的讲师,也是发展最快的课程之一。他的毕业生转而为苹果、谷歌、特斯拉、亚马逊、摩根大通、IBM、优衣库等世界上一些最大的科技公司工作……他一直在硅谷和多伦多担任高级软件开发人员多年来,现在他正在利用他所学到的一切来教授编程技能并帮助您发现作为开发人员在生活中所带来的惊人职业机会。

作为一名自学成才的程序员,他明白有大量的在线课程、教程和书籍过于冗长且不足以教授适当的技能。大多数人在学习复杂的主题时会感到麻痹,不知道从哪里开始,或者更糟糕的是,大多数人没有 20,000 美元可用于编码训练营。编程技能应该是负担得起的并对所有人开放。教育材料应该教授当前的现实生活技能,并且不应该浪费学生的宝贵时间。从为财富 500 强公司、科技初创公司工作,甚至创办自己的企业,他学到了重要的经验教训,现在他将 100% 的时间用于教授他人宝贵的软件开发技能,以便在令人兴奋的环境中掌控他们的生活和工作。无限可能的行业。

Andrei 向您保证,没有其他课程可以如此全面和解释清楚。他认为,要学习任何有价值的东西,就需要从基础开始,发展树根。只有从那里,您才能学习与基础相关的概念和特定技能(叶子)。当以这种方式组织时,学习变得指数级。

凭借他在教育心理学和编码方面的经验,Andrei 的课程将带您了解您从未想过可能实现的复杂主题。

——–

Daniel 是技术领域的设计领导者,在帮助初创公司构建和迭代产品方面拥有丰富的经验。Daniel 热衷于教授和赋予设计师权力,并与其他学科合作以构建满足用户和业务目标的有目的的产品。

他的设计方法总是深思熟虑和迭代。Daniel 经常发现自己与他的团队合作,无论是草拟概念和流程,还是与团队领导和外部利益相关者一起领导设计策略。

Daniel 是一位多面手的设计师,他的专长跨越多个设计学科。这包括用户体验视觉设计用户研究产品策略精益和敏捷设计方法等等。他的工作帮助为住房、区块链和健康等各种行业制定了不同的解决方案。

当他不构建产品时,Daniel 在不同的聚会和活动中发言和指导。他的目标是回馈他所学习并继续从中学到很多东西的设计社区。Daniel 的目标是在他们的职业生涯中始终帮助、教授和支持其他设计师

课程内见!

此课程面向哪些人:

  • 任何对 Motion Design 感兴趣并想了解更多关于 Figma 的强大功能以及您可以使用这个惊人的工具创造什么的人
  • 任何想以自由职业者的身份开始 Web 或移动设计业务或在公司担任设计师的人
  • Web 开发人员和移动开发人员希望在他们的工具带中添加另一项有价值的技能
  • 任何想被聘为网页设计师、移动设计师、UI/UX 设计师的人
  • 任何想了解最新运动设计实践以构建现代和漂亮应用程序的人
声明:本站所有资源、素材等全部来源于互联网,赞助VIP仅用于对IT资源服务器带宽等费用支出做支持,从本站下载资源,说明你已同意本条款。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
TheItzy资源站 » Motion Design with Figma: Animations, Motion Graphics, UX/UI