High Fidelity Frames

Digital Interaction Design _ Advance Advertisement

Design

PID-403(d) - Advertisement Design (print media) (elective)

Lecturer: Miss. Aiman Amjad

Lecture Outcome Week 11
• Design system
• Google Design System
• Popular design system
• Material Design system – in a nutshell
• Design Sticker Sheets
• Gesture
• Motion
• Trigger
 design systems are a series of reusable elements and guidelines that
allow teams to design and develop a product, following predetermined
standards. As a UX designer, you’ll always utilize design systems to improve your
work speed and consistency. Especially when you’re new to the field, design
systems can help you better understand best design practices and drastically
improve the quality of your design work.
sticker sheet, also known as a design kit,
• Components: Reusable UI components such as buttons, menus, and
cards.
• Typography: Typographic elements, including fonts and font
families.
• Color: Color choices, including an overall palette and specific
component colors.
• Iconography: Icons representing recurring actions or navigation
choices a user might interact with.
• This five-part video series will help you understand how to set up a design system in Figma:
• Video 1 - Foundations (55 minutes) which will help you kick off designing a design system from scratch, including
typography and colors.
• Video 2 - Components (55 minutes) where you’ll add to your design system by building foundational components and
organize them using pages, frames, names, and descriptions.
• Video 3 - Components continued (55 minutes) which will introduce more complex components like cards, media
objects, dialogues, navigations, and forms, to include in your design system.
• Video 4 - Testing (57 minutes) where you’ll check if your component library is robust enough in real-world scenarios.
• Video 5 - Documentation (61 minutes) which shares best practices for documenting your design system using Figma
and other tools.
• These videos are long, but the things you learn will be well worth the time investment!

Underline Titles are Clickable

Popular Design Systems
• Google’s Material Design
• Shopify’s Design System Polaris
• Apple Human Interface Guidelines
• Microsoft Fluent Design System
• AirBnb's Design System
• U.S. Web Design System, a design system for the U.S. federal government

• Underline Titles are Clickable