Communication Needs
Examples of design projects that fall under 'Interactive Experiences'
Mobile App Interfaces
Website & Web Application Design
Video Game User Interfaces
Interactive Kiosks & Digital Signage
Voice User Interfaces (VUI)
Augmented Reality (AR) Experiences
Virtual Reality (VR) Environments
Smart TV & Streaming Interfaces
Wearable Device Interfaces
Interactive Installation Design
E-commerce Platforms
Educational Technology Interfaces
Dashboard & Data Visualization
Social Media Platforms
Conventions
The characteristics, methods, or structures expected of designers when creating Interactive Experiences.
User-Centered Design: All design decisions prioritize user needs, behaviors, and goals. Interfaces should be intuitive, accessible, and efficient for the intended audience.
Information Architecture: Logical organization and structuring of content and functionality. Users should easily understand where they are, what they can do, and how to navigate.
Visual Hierarchy: Clear prioritization of information through typography, color, size, and spacing. Most important elements should be immediately apparent to users.
Consistency: Maintaining uniform design patterns, interactions, and visual language throughout the experience. Users learn once and apply knowledge across the system.
Accessibility: Designing for users with diverse abilities including visual, auditory, motor, and cognitive considerations. Following WCAG guidelines and inclusive design principles.
Responsive Design: Adapting interfaces to work effectively across different screen sizes, orientations, and input methods from mobile to desktop.
Performance Optimization: Ensuring fast loading times, smooth animations, and efficient resource usage to maintain user engagement.
Platform Conventions: Understanding and respecting established patterns for iOS, Android, web browsers, and other platforms while maintaining brand identity.
Feedback Systems: Providing clear, immediate responses to user actions through visual, auditory, or haptic feedback to confirm interactions.
Error Prevention & Recovery: Designing to prevent user errors where possible, and providing clear, helpful guidance when errors occur.
Content Strategy: Ensuring content is clear, concise, and appropriately structured for digital consumption and interaction.
Privacy & Security: Transparent communication about data collection and usage, with secure interaction patterns that build user trust.
Methods
The ways that designers create and deliver designs in this field
User Research: Understanding target users through interviews, surveys, observations, and analytics to inform design decisions.
Wireframing: Creating low-fidelity structural blueprints showing layout, navigation, and content organization without visual styling.
Prototyping: Building interactive representations at various fidelity levels:
Paper prototypes for quick concept testing
Digital wireframe prototypes for flow validation
High-fidelity interactive prototypes for user testing
User Interface Design: Creating pixel-perfect visual designs including typography, color, iconography, and component specifications.
Design Systems: Developing comprehensive libraries of reusable components, patterns, and guidelines to ensure consistency across products.
User Journey Mapping: Visualizing the complete user experience across touchpoints, identifying pain points and optimization opportunities.
Information Architecture: Organizing and structuring content and functionality through card sorting, tree testing, and site mapping.
Usability Testing: Observing real users interact with prototypes or live products to identify usability issues and improvement opportunities.
A/B Testing: Comparing different design solutions with real users to make data-driven design decisions.
Interaction Design: Defining how users interact with interface elements through gestures, voice commands, or traditional inputs.
Motion Design: Creating meaningful animations and transitions that guide users and provide feedback during interactions.
Accessibility Auditing: Testing designs with assistive technologies and accessibility tools to ensure inclusive experiences.
Context
Where and how designers work in this field
Designers working in this field will work in a range of contexts. These can include:
Technology Companies: In-house design teams at software companies, social media platforms, and digital product companies developing user-facing applications.
Digital Agencies: Client service environments creating websites, apps, and digital experiences for diverse industries and business needs.
Startups: Fast-paced environments where designers often work across multiple disciplines from concept through launch.
Enterprise Software Companies: Designing complex business applications and tools for professional users with specialized workflow requirements.
Gaming Studios: Creating user interfaces and interactive experiences for video games across console, mobile, and PC platforms.
Consulting Firms: Providing UX strategy and design expertise to organizations undergoing digital transformation.
E-commerce Companies: Optimizing online shopping experiences, conversion funnels, and customer journey optimization.
Educational Technology: Designing learning platforms, educational apps, and digital tools for students and educators.
VISUALISING ARCHITECTURE
Component Libraries: Systematically organized collections of reusable interface elements including buttons, forms, navigation, and content modules.
Style Guides: Comprehensive documentation of visual standards including typography, color palettes, iconography, and spacing systems.
Pattern Libraries: Collections of interaction patterns and behavioral specifications showing how components work together.
Design Tokens: Coded design decisions (colors, fonts, spacing) that can be shared between design tools and development environments.
Low-Fidelity Wireframes: Basic structural layouts focusing on content organization and functionality without visual styling.
Site Maps: Hierarchical diagrams showing the organizational structure and relationships between pages or screens.
User Flow Diagrams: Step-by-step visualization of paths users take to complete tasks within the interface.
Card Sorting Results: Visual organization of content categories based on user mental models and expectations.
Paper Prototypes: Hand-drawn interfaces for rapid concept testing and iteration with minimal resource investment.
Digital Wireframe Prototypes: Interactive low-fidelity prototypes created in tools like Figma, Sketch, or Adobe XD.
High-Fidelity Prototypes: Pixel-perfect interactive mockups that closely simulate the final product experience.
Coded Prototypes: Functional prototypes built with HTML/CSS/JavaScript for complex interactions or technical validation.
Usability Test Plans: Structured protocols for conducting user research sessions including scenarios, tasks, and success metrics.
User Journey Maps: Comprehensive visualization of user experiences across multiple touchpoints and time periods.
Personas: Detailed user archetypes based on research data, representing target audience segments and their needs.
Analytics Dashboards: Data visualization showing user behavior, conversion rates, and performance metrics.
Tab Bars: Bottom navigation for primary sections in mobile apps
Hamburger Menus: Collapsible navigation for secondary functions
Breadcrumbs: Hierarchical navigation showing user location
Mega Menus: Comprehensive navigation for content-rich websites
Card-Based Layouts: Modular content presentation for easy scanning
List Views: Efficient display of similar content items
Grid Systems: Structured layout foundation for responsive design
Progressive Disclosure: Revealing information in manageable chunks
Form Design: Streamlined data collection with clear validation
Search Interfaces: Effective discovery and filtering mechanisms
Onboarding Flows: Guided introduction to product features
Confirmation Patterns: Clear feedback for important actions
User Interviews: In-depth conversations to understand user needs and motivations
Contextual Inquiry: Observing users in their natural environment
Diary Studies: Longitudinal research tracking user behavior over time
Focus Groups: Group discussions about user preferences and reactions
Analytics Analysis: Interpreting user behavior data from web/app analytics
A/B Testing: Statistical comparison of design alternatives
Surveys: Large-scale data collection about user preferences and satisfaction
Heat Mapping: Visual representation of user attention and interaction patterns
Moderated Testing: Guided sessions with direct user observation
Unmoderated Testing: Remote testing with recorded user sessions
Guerrilla Testing: Quick, informal testing in public spaces
First-Click Testing: Analyzing initial user navigation decisions
Figma: Collaborative interface design and prototyping
Sketch: Vector-based UI design (Mac-specific)
Adobe XD: Interface design with animation and prototyping
Framer: Advanced prototyping with code components
InVision: Prototyping and design collaboration platform
Maze: Unmoderated usability testing and research
Lookback: Live user interview and testing platform
Hotjar: User behavior analytics and heat mapping
UserTesting: Remote usability testing platform
Miro/Mural: Digital whiteboarding for workshops and mapping
Notion: Documentation and project management
Zeplin: Design handoff and developer collaboration
Abstract: Version control for design files
Color Contrast: Meeting WCAG contrast ratios for text and backgrounds
Color Independence: Not relying solely on color to convey information
Text Scaling: Supporting user preferences for larger text sizes
Focus Indicators: Clear visual indication of keyboard focus
Keyboard Navigation: Full functionality without mouse interaction
Touch Target Size: Adequate spacing for users with motor difficulties
Time Limits: Providing controls for time-sensitive content
Motion Sensitivity: Respecting user preferences for reduced motion
Clear Language: Using plain language and avoiding jargon
Consistent Patterns: Maintaining predictable interaction models
Error Prevention: Designing to minimize user mistakes
Help and Documentation: Providing accessible assistance when needed
CASE STUDIES - Designers
Created the original iconography for Apple Macintosh, establishing visual language conventions still used in digital interfaces today.
Influential researcher and educator who advanced evidence-based design practices and user-centered design methodologies.
Design leader who established mobile-first design principles and input method optimization for touch interfaces.
Former Head of Design at Airbnb and current VP of Design at Stripe, known for scaling design organizations and creating inclusive experiences.
TECHNICAL DRAWING FOR ENVIRONMENTS
Progressive Loading: Displaying content as it becomes available
Skeleton Screens: Placeholder content during loading states
Perceived Performance: Using animation and feedback to manage wait times
Critical Path Optimization: Prioritizing essential content and functionality
Design Systems: Maintaining consistency across different platforms
Responsive Frameworks: CSS frameworks for adaptive design
Native vs Web: Understanding platform capabilities and limitations
Progressive Web Apps: Web technologies with native app features
User Metrics: Measuring engagement, retention, and conversion rates
Performance Monitoring: Tracking load times and technical performance
Error Tracking: Identifying and resolving user experience issues
Conversion Optimization: Improving key user journey completion rates
ADDITIONAL RESOURCES
Interaction Design Association (IxDA)
User Experience Professionals Association (UXPA)
Design Research Society
A List Apart
Smashing Magazine
UX Magazine
Nielsen Norman Group
Apple Design Awards
Webby Awards
Red Dot Digital Design
Core77 Interaction Awards
MATERIALS RESOURCES - MODEL MAKING
Foamcore: The basics of how to cut and assemble FoamCore the right way, how not to cut the stuff and how to take craftsmanship to the next level.
FoamCore: Using digital renders and blueprints as reference, Adam recreates the four floors of the Fab House in a 1/24 scale architectural model form using trusty foam board, a craft knife, tape, and hot glue.
Balsa Wood: Quick video showing techniques and glueing for balsa wood model.
Balsa Wood: Making curves in balsa
Cardboard: Create clean curves in cardboard.
Cardboard: Card & hot glue model.
Cardboard: Architectural model of a Gothic building
Cardboard: Tips and ways of manipulating card to create fluid models with organic lines.
Cardboard: Cardboard Basics Tutorial.
Paper & Card: How to make architecture building from drawing sheet paper
3D Print & Sketchup: learn how to export, slice and 3d print your SketchUp models
Plywood & Acrylic - Laser Cutting for Architecture Model Making
Plywood & Acrylic: Designing Laser Cut Structures in Adobe