PROJECT 2:
Digital Collection Interface

Collection Requirements

Select a subject that reflects genuine personal interest - this authenticity will fuel sustained creative exploration throughout the project.

• Expresso Brewing Methods
  

• Design Movements of the 20th Century
  
• Disproved Scientific Theories
  
• Video Game Rendering Technologies
  

Phase 1: Collection Concept & Visual Exploration

Concept Development

• 3 distinct collection proposals - each exploring a different topic/theme that genuinely interests you
• Content inventory description for each proposal outlining potential for 25+ collection items
• Comparative evaluation of which collection offers the richest design exploration potential

Visual Direction Development

• Color palette exploration (3-5 colors) with mood/emotional considerations
• Typography direction showing hierarchy and character (display vs. body, serif vs. sans-serif, etc.)
• Image tone/texture/aesthetic demonstrating image style, photographic tone/texture, illustration approach, or overall graphic treatment
• Mood board or style frame combining these elements into a cohesive visual concept

Presentation Creation

• Visual presentation using combination of Illustrator, Photoshop, and/or Figma to demonstrate each direction
• Comparative analysis discussing strengths and design potential of each collection option
• (After presentation) Selected direction with rationale for your choice moving forward

Technical Specifications

• Figma file with a page titled “1 - Concept Ideation & Visual Exploration” and organized exploration sections for all three directions
• Adobe Creative Suite work integrated into Figma presentation format, Googles Slides, or presentation format of your choice
• Style explorations documented with specific rationale for color, typography, and aesthetic choices

Phase 2: Asset Development & Interface Wireframe Design Exploration

Asset Production & Iteration

• 15+ collection assets created following your selected visual system direction
• 3+ asset treatment variations exploring different approaches: can be within the 15 assets designed for Phase 2 draft
• Visual consistency experiments - how much variation can your system support?
• Quality refinement showing evolution from initial concepts to more developed assets

Asset Format Requirements (REPEATED)

• [Title] text element, maximum 30 characters, clearly identifying the collection item
• [Image/Graphic] primary visual representation that can suggest multiple versions, detail levels, or component variations
• [Description] text content, between 50-200 words, providing context, background, or detailed information
• [Tags/Category] text element, 1-2 words describing subcategory or classification within your collection
• [Supplemental Images, Optional] additional visual content showing details, variations, process, or related material

Content Organization

• Content tracking system - create a spreadsheet to manage collection details, OR organize this information visually within your Figma file
• Consistent formatting across all assets following your established template
• Content depth ensuring each item has enough material to support detailed interface views

Interface Wireframe & Layout Exploration

• Use “Sections” in Figma Design file to show different approaches
• 3+ wireframe approaches for main collection browsing experience (for example: grid, list, card layouts)
• Information architecture mapping showing how users navigate between collection views
• Screen flow diagrams demonstrating user pathways through your collection
• Low-fidelity layout testing - how do different organizational approaches affect user understanding?

Technical Specifications

• All work uploaded to your Figma file on “2 - Graphic Development & Interface WIreframes” with organized sections
• Wireframe fidelity should remain low-fi (grayscale, basic shapes) to focus on structure over aesthetics
• Separate organized asset library with clear naming conventions and systematic organization
• Content documentation either in spreadsheet form or organized visually within Figma
• Documented design decisions as Figma comments, explaining choices between iterations and organizational approaches

Visual Aid Examples for Phase 2:

• Asset templates showing consistent formatting across different collection items
• Wireframe sketches exploring different layouts (e.g grid vs. list vs. card-based, or other depending on your idea)
• Content organization spreadsheets or visual mapping in Figma
• Comparative layouts showing different approaches to the same content

Phase 3: Interactive Prototype Development

Complete Asset Collection

• 25+ collection assets finalized with consistent formatting and visual treatment
• Asset integration testing - how do your assets work together as a cohesive collection?
• Content refinement ensuring all assets meet format requirements and quality standards (high-res 300 ppi)
• Visual system consistency maintained across the complete collection

Initial Prototype Construction

• Key screen mockups translated from wireframes to high-fidelity visual design (4-5 screens)
• Basic interactive prototype with simple transitions between main screens
• Navigation structure implemented showing primary user pathways
• Asset integration demonstrating how collection items appear within interface contexts

Core Interaction Development

• Screen-to-screen transitions using Figma's basic prototyping features
• Primary user flows from overview to detailed item views
• 3+ interaction approaches testing different ways users might explore your collection
• Basic hover states on key interactive elements using Figma Components

Technical Specifications

• Figma prototyping completed on “3 - High Fidelity Prototype” page, demonstrating basic interactivity
• High-fidelity screens at standard desktop width (1440 x 1024 px OR Mac Desktop preset of your choice) with your established visual system
• Component creation for repeated interface elements (recommended for efficiency)
• Organized file structure separating wireframes, high-fi screens, and prototype versions

Visual Aid Examples for Phase 3:

• High-fidelity mockups showing your visual system applied to interface design
• Simple interactive prototypes with basic transitions
• Screen flow diagrams with actual interface screens rather than wireframes
• Asset integration examples showing collection items within interface contexts

Phase 4: Interactive Prototype Refinement

Advanced Prototype Polish

• Refined interactions with smooth transitions and appropriate animation timing
• Hover states and micro-interactions that enhance user experience without overwhelming
• Multiple pathway demonstrations showing different ways to discover and explore content

Interface Demonstration Examples

• Browsing experience showing how users explore your collection (grid, filtering examples)
• Detail view interactions demonstrating deep-dive with individual items
• Search/filter/discovery simulations (demonstration examples, not functional)

User Experience Refinement

• Usability testing with classmates or friends - does your prototype make sense to others?
• Navigation consistency across all screens and user pathways
• Visual hierarchy optimization ensuring important content stands out appropriately
• Accessibility considerations including readable text sizes, color contrast, and clear interactive elements

Essential Screen Examples (5-6 total):

1. Home/Overview: Collection introduction with clear entry points
2. Grid/Browse View: Multiple assets with different viewing/sorting examples
3. Detailed Item View: Individual asset with comprehensive information display
4. About/Context: Collection background and your curatorial perspective
5. Search/Filter Examples: Demonstration of different discovery approaches /groupings

Technical Specifications

• Figma prototyping completed on “4- Prototype Refinement” page 
• Advanced Figma prototyping (e.g. using Smart Animate for smooth transitions), overlay/scroll to/navigate to
• Interaction documentation noting trigger types, animation timing, and user feedback (in prototyping connections)
• Prototype testing notes from user feedback and iteration based on testing
• Text, Color, Effect, and/or Grid Styles In Figma to ensure consistent and efficient workflow of similar elements and design system elements
  
• Component library for consistent interface elements
• Final asset integration showing your complete collection of items within the design system of the interface

Phase 5: Final Presentation & Process Reflection

Final Deliverables

• Polished interactive prototype demonstrating your design thinking and complete visual system
• Complete collection (25+ assets) showing systematic design consistency and formatting
• Process documentation highlighting key iterations, decisions, and learning moments throughout all phases
• Visual system summary (1-slide overview of your final design principles and systematic approach)
• Presentation deck articulating your design journey and final outcomes

Presentation Focus

• Visual system demonstration through both individual assets and interface screens
• Interactive prototype walkthrough (5 minutes max) highlighting key user experiences
• Reflection on learning - what did you discover about systematic design thinking and your own creative process?

Technical Specifications

• Final Figma file organized to show final outcomes with clear page organization
• Presentation deck optimized for screen sharing and prototype demonstration (10-12 slides maximum)
• Asset collection exported and organized for potential future portfolio use

Project Timeline & Deadlines

Assessment Rubric

Extra Credit Opportunities

• +5 points for each additional 5 assets beyond the 25 minimum (30 assets = 5 points, 35 assets = 10 points)
• +2 points for innovative interaction concepts or superior final visual execution

Tips for Success!

• Embrace exploration: The goal is learning through iteration, not settling on the "right" answer immediately
• Document your process: Keep notes and versions - your design process is as important as/what will get you to the final product
• Compare alternatives: Always create multiple options before committing to one direction
• Seek feedback early: Use peer input and office hours to refine your visual judgment
• Focus on craft: Each iteration should show attention to visual details and systematic thinking
• Trust the process: Allow your design intuition to develop through hands-on making and reflection