给开发者的设计

注意:正如您将在下面看到的,本模块目前仅为课程大纲/教学大纲。在时间允许的情况下,我们计划将来将其转换为完整的课程。

本模块的目的是(重新)向开发人员介绍设计思维。他们可能不想成为设计师,但拥有一些基本的**用户体验**和设计理论对所有参与构建网站的人都有好处,无论他们的角色是什么。至少,即使是最技术性的、“非设计师”开发者也应该理解设计简报,了解事物的设计原因,并能够进入用户的思维模式。这将帮助他们让自己的作品集看起来更好。

此外,前端开发人员经常负责项目中各种设计方面的工作。客户和雇主经常认为他们可以做到这一点,因为他们参与了网站的视觉元素。历史上,“Web 开发者”曾经比现在更像是一个混合了设计师/开发者的角色。

预备知识

在开始本模块之前,您应该熟悉 HTMLCSS

注意:如果你正在使用的电脑、平板电脑或其他设备无法创建文件,你可以尝试在在线编辑器中运行代码,例如CodePenJSFiddle

课程

基础设计理论

学习成果

  • UI 设计基础
    • 对比度。
    • 排版。
    • 视觉层次。
    • 比例。
    • 对齐。
    • 空白的使用。
  • 色彩理论。
  • 图像的使用。

资源

以用户为中心的设计

学习成果

  • 理解我们所做的一切都是为了用户。
  • 用户研究/测试入门,以及用户需求。
  • 为可访问性而设计 — 考虑目标受众以及他们可能有的额外需求。从一开始就为他们进行设计。
  • 理解设计模式是什么,以及 Web 上常用的模式,例如
    • 暗黑模式。
    • 面包屑导航。
    • 卡片。
    • 延迟/惰性注册。
    • 无限滚动。
    • 模态对话框。
    • 渐进式披露。
    • 表单/注册/设置中的进度指示。
    • 购物车。

资源

设计简报

学习成果

  • 使用设计语言,与设计师沟通。
  • 解读设计简报要求以实现一个项目。
  • 设计师用来向开发人员传达信息的典型工具(例如 Figma)。

另见