Creative Interface Design

Overview

Subject: Art and Design
Level: Year 12
Curriculum Area: Digital Media, Graphic Design

Learning Objectives

• Understand the basics of Figma for interface design.
• Create a simple user interface (UI) prototype.
• Evaluate the usability of their designs.

Materials

• Laptops or tablets with internet access
• Figma accounts (free version)
• Projector and screen for demonstration
• Printed handouts with Figma keyboard shortcuts
• Samples of good UI designs for reference

Lesson Structure (40 minutes)

1. Introduction (5 minutes)

Activity: Brief Discussion and Objectives

• Teacher’s Input:

  • Introduce the lesson objectives and outline the importance of digital design and user interfaces in today’s world.
  • Briefly discuss what Figma is: a powerful online tool for designing user interfaces and creating prototypes.

• Student’s Activity:

  • Engage in a brief discussion about their experience with design tools and what they wish to learn.

2. Teacher Demonstration (10 minutes)

Activity: Interactive Figma Walkthrough

• Teacher’s Input:

  • Project Figma on the screen, demonstrating account setup, navigating the interface, and basic tools (e.g., frames, shapes, text tools, layers).
  • Showcase a pre-designed simple interface to highlight Figma’s potential.

• Student’s Activity:

  • Follow along the demonstration on their own devices, setting up their accounts and familiarising themselves with the basic tools.

3. Guided Practice (15 minutes)

Activity: Creating a Simple UI Prototype

• Teacher’s Input:

  • Provide a step-by-step guide to design a basic mobile app UI, focusing on:
    • Creating a frame for a mobile device.
    • Adding basic UI elements (header, buttons, text fields).
    • Using layers and grouping elements.
    • Brief introduction to prototyping (linking buttons to frames).

• Student’s Activity:

  • Work individually or in pairs to create their own simple mobile app UI following the teacher’s instructions.
  • Provide support and move around the class to assist students as needed.

4. Evaluation and Feedback (7 minutes)

Activity: Peer Review and Presentation

• Teacher’s Input:

  • Introduce a quick peer review activity where students show their designs to a peer and provide constructive feedback using the 'Two Stars and a Wish' method (two positive points and one area for improvement).

• Student’s Activity:

  • Present their UI designs to their peers and engage in the feedback process.
  • Make minor adjustments to their designs based on the feedback received.

5. Plenary (3 minutes)

Activity: Recap and Next Steps

• Teacher’s Input:

  • Summarise the key learning points of the lesson.
  • Explain the importance of user experience and continuous iteration in design.
  • Introduce next lesson topics or homework (e.g., further exploration in Figma, bringing in their favourite app designs for analysis).

• Student’s Activity:

  • Reflect on what they’ve learned and write down one new thing they found surprising or valuable.

Assessment

• Formative: Observations during class, participation in discussions and activities, peer feedback.
• Summative: Evaluate the final UI designs based on criteria provided earlier (e.g. usability, creativity, basic use of tools).

Differentiation

• For Struggling Students:
  • Provide additional support and simplified tasks (e.g., starting with a very basic UI design).
• For Advanced Students:
  • Encourage additional elements and complexity (e.g., incorporating advanced prototyping features).

Homework

• Ask students to create a more detailed prototype over the week, applying more advanced tools and elements they explored today.

---

Catering to a variety of learning styles and ensuring the session is dynamic and engaging is key for a successful lesson. This plan combines visual, auditory, and kinesthetic activities, and incorporates collaborative and individual work to maintain student interest and maximise learning outcomes.