Buy Now AED 274.99 + VAT

Monthly Subscription Starting at AED 99 + VAT

Visual Elements of User Interface Design
  • Level Foundation
  • Duration 16 hours
  • Course by California Institute of the Arts
  • Offered by

About

This design-centric course examines the broad question of what an interface is and what role a designer plays in creating a user interface. Learning how to design and articulate meaning using color, type, and imagery is essential to making interfaces function clearly and seamlessly. Through a series of lectures and visual exercises, you will focus on the many individual elements and components that make up the skillset of an interface designer. By the end of this course, you will be able to describe the key formal elements of clear, consistent, and intuitive UI design, and apply your learned skills to the design of a static screen-based interface. This is the first course in the UI/UX Design Specialization, which brings a design-centric approach to user interface (UI) and user experience (UX) design, and offers practical, skill-based instruction centered around a visual communications perspective, rather than on one focused on marketing or programming alone. These courses are ideal for anyone with some experience in graphic or visual design and who would like to build their skill set in UI or UX for app and web design. It would also be ideal for anyone with experience in front- or back-end web development or human-computer interaction and want to sharpen their visual design and analysis skills for UI or UX.

Modules

Overview

    • 3 Videos
    • 5 Readings
Show info about module content

3 Videos

  • Welcome to the UI/UX Design Specialization
  • Course Introduction
  • Introducing an Additional Instructor

5 Readings

  • About this course
  • About the assignments
  • Academic Integrity
  • Required Tools
  • About CalArts and the Program in Graphic Design

How Peer Review Works

    • 3 Videos
    • 1 Readings
Show info about module content

3 Videos

  • Why Peer Review?
  • Peer Review Tips
  • How to apply feedback

1 Readings

  • What is peer review?

Course Communication Policies

    • 3 Readings
Show info about module content

3 Readings

  • Instructor Presence and Staff Support
  • Forum Guidelines
  • Requesting Peer Reviews

Introduction to User Interface Design

    • 4 Videos
    • 1 Discussion
Show info about module content

1 Discussions

  • Setting Goals

4 Videos

  • Introduction to Week 1
  • What is a User Interface?
  • The Relationship Between UI and UX
  • Roles in UI/UX

Interface Conventions

    • 3 Videos
    • 1 Readings
    • 1 Assignment
Show info about module content

1 Assignment

  • Knowledge Check

3 Videos

  • A Brief Historical Overview of Interface Design
  • Interface Conventions: Theory
  • Interface Conventions: Application

1 Readings

  • Interface Conventions: Review

Approaches to Screen-based UI

    • 2 Videos
    • 1 Assignment
Show info about module content

1 Assignment

  • User Interface Design Foundations

2 Videos

  • Template vs Content
  • Aesthetics & Functionality

Introduction and Project Brief

    • 2 Videos
    • 1 Readings
Show info about module content

2 Videos

  • Introduction to Week 2
  • Design Before Design

1 Readings

  • Project Brief

Formal Elements of an Interface

    • 6 Videos
Show info about module content

6 Videos

  • Look and Feel
  • Language as a design tool
  • Color and Shape
  • Imagery
  • Typography
  • Icons

Define the Look and Feel

    • 1 PeerReview
    • 1 Assignment
Show info about module content

1 Assignment

  • Formal Elements of UI Design

1 Peer Review

  • Defining the Look and Feel of Your Project

Static to Active

    • 3 Videos
    • 1 Readings
Show info about module content

3 Videos

  • Introduction to Week 3
  • Static to Active
  • Functionality

1 Readings

  • Try it Yourself: Define the Interaction

Composing Interaction

    • 2 Videos
    • 1 Readings
Show info about module content

2 Videos

  • Speed and Style
  • Composition and Structure

1 Readings

  • Pattern Libraries

Points of Interaction

    • 3 Videos
    • 2 Readings
    • 1 Assignment
Show info about module content

1 Assignment

  • Active UI Design Elements

3 Videos

  • Buttons
  • Not Buttons
  • States and Changes

2 Readings

  • Designing Better Buttons
  • Try it Yourself: Examine an interface

Create a Sample Pattern Library

    • 1 PeerReview
Show info about module content

1 Peer Review

  • Create a Sample Pattern Library

Introduction to Week 4

    • 2 Videos
Show info about module content

2 Videos

  • Introduction to Week 4
  • Invisible Complexity: Making a Whole from Many Parts

Hierarchy and Composition

    • 4 Videos
    • 1 Readings
Show info about module content

4 Videos

  • Hierarchy of Content
  • Conventions and Expectations
  • Structure and Grids
  • Platforms and Screen Sizes

1 Readings

  • Try it yourself: UI Inventory

Putting it all together

    • 2 Videos
    • 1 PeerReview
    • 1 Assignment
Show info about module content

1 Assignment

  • Composing UI Design

1 Peer Review

  • Sketch Your Static Interface

2 Videos

  • Putting it All Together: Slice 'n' Dice
  • Design Critique: Review of Example Submissions

Next Steps

    • 1 Readings
Show info about module content

1 Readings

  • Next Steps

Auto Summary

"Visual Elements of User Interface Design" is a design-centric course offered by Coursera, focusing on the key aspects of UI/UX design within the Arts & Humanities domain. Taught by experienced instructors, the course delves into the use of color, type, and imagery to create clear, consistent, and intuitive interfaces. Ideal for individuals with some graphic design or web development experience, this foundational course spans 960 minutes and is available through Starter, Professional, and Paid subscription options. Enhance your skills in designing static screen-based interfaces and elevate your UI/UX design expertise.

Michael Worthington
Instructor

Michael Worthington