Experimental UI Design Course

Day 27 of 30

Day 27: Portfolio Curation

Study (10 min): Analyze standout design portfolios, presentation strategies
Practice (20 min): Curate your experimental work
Create: Portfolio structure showcasing your journey

Curating Chaos

Experimental work needs thoughtful presentation. Don't just dump projects - craft a narrative. Show evolution, not just endpoints. Include failures that led to breakthroughs. Document process alongside polish. Your portfolio should feel like a guided tour through your creative mind, with rest stops at your best work.

Context is Everything

Experimental design without context is just weird design. Explain your thinking. Share inspiration sources. Describe problems you were solving (or creating). Use case studies that reveal process. Include sketches, dead ends, happy accidents. Show how chaos became controlled, how experiments became experiences.

Portfolio Architecture:

// Dynamic portfolio presentation
class ExperimentalPortfolio {
  constructor() {
    this.projects = [];
    this.currentView = 'chronological';
    this.initPortfolio();
  }
  
  initPortfolio() {
    this.loadProjects();
    this.setupFilters();
    this.enableStoryMode();
  }
  
  setupFilters() {
    // Multiple ways to explore work
    const filters = {
      chronological: () => this.sortByDate(),
      experimental: () => this.sortByExperimentLevel(),
      impact: () => this.sortByImpact(),
      process: () => this.showProcessOnly(),
      random: () => this.shuffleProjects()
    };
    
    document.querySelectorAll('.filter-btn').forEach(btn => {
      btn.addEventListener('click', (e) => {
        const filterType = e.target.dataset.filter;
        filters[filterType]();
        this.render();
      });
    });
  }
  
  enableStoryMode() {
    // Narrative presentation option
    document.querySelector('.story-mode').addEventListener('click', () => {
      this.projectsToStory();
    });
  }
  
  projectsToStory() {
    // Transform portfolio into narrative journey
    const story = this.projects.map((project, index) => ({
      chapter: index + 1,
      title: project.name,
      lesson: project.learning,
      evolution: this.findConnections(project, this.projects[index + 1])
    }));
    
    this.renderStory(story);
  }
  
  renderProject(project) {
    return `
      
${project.experimental ? '' : ''} ${project.name}

${project.name}

${project.concept}

`; } }

Live Portfolio Experiences

Your portfolio shouldn't just document experimental design - it should BE experimental design. Create portfolios that react to viewers. Generative backgrounds based on scroll position. Typography that evolves as users explore. Make the portfolio itself a demonstration of your capabilities. First impressions should feel like experiences.

Selective Revelation

Not every experiment needs equal weight. Create hierarchy through interaction. Best work expands on hover. Detailed case studies unlock progressively. Use password-protected sections for work-in-progress. Guide viewers through your work like a museum curator - some pieces deserve pedestals, others belong in context.

Key Takeaways