Hands-on: Designing a simple poster and mobile app screen

Session: Hands-on – Designing a Simple Poster and Mobile App Screen

Lesson Overview

This practical session gives learners the opportunity to apply design principles in real-world scenarios. By creating a simple poster and a basic mobile app screen, students will practice layout design, typography, color usage, and UI fundamentals. The session bridges the gap between graphic design and UI/UX design, allowing learners to understand how design skills translate across mediums.

Learning Objectives

By the end of this session, students should be able to:

1. Apply layout, spacing, and grid systems to both print and digital designs.

2. Use typography and color theory effectively to communicate visually.

3. Create a poster design with emphasis on hierarchy, readability, and visual appeal.

4. Design a basic mobile app screen, focusing on user interface elements and simplicity.

5. Compare and contrast design principles in posters vs. app screens (static vs. interactive).

Key Concepts

1. Poster Design Principles

• Purpose of posters: communication, marketing, information delivery.

• Visual hierarchy (headline, supporting text, imagery).

• Color psychology and contrast.

• Typography for attention and readability.

• Balance and alignment.

2. Mobile App Screen Design Principles

• Importance of simplicity and clarity in UI.

• Consistency with grids and spacing.

• Designing for usability (buttons, navigation, forms).

• Mobile-first thinking (touch targets, screen size).

• Visual consistency with design systems.

3. Tools & Resources

• Figma/Canva for poster design.

• Figma/Adobe XD/Sketch for mobile app UI.

• Stock image resources and icon libraries.

Class Activities

Activity 1: Poster Design (30–40 mins)

• Task: Create a poster for an upcoming tech/design event.

• Requirements:

  • Title, date, venue (headline hierarchy).

  • One strong image or illustration.

  • Use a two-color palette and one main typeface.

• Goal: Show ability to communicate a message visually.

Activity 2: Mobile App Screen Design (40–50 mins)

• Task: Design the home screen of a to-do list app.

• Requirements:

  • App name/logo area.

  • Task list cards (with title, description, and action buttons).

  • A “+” button to add a new task.

• Goal: Demonstrate UI layout, spacing, and usability awareness.

Review & Feedback (20 mins)

• Students present their poster and app screen.

• Peer and instructor critique:

  • Poster → Is the message clear? Does hierarchy work?

  • App screen → Is it intuitive? Are UI elements spaced properly?

Assignment

• Refine poster and app screen after feedback.

• Submit final designs with a short reflection (100–150 words) on how principles of hierarchy, spacing, and consistency guided their work.