Yale School of Art Redesign

Prototype: View on Figma
Original Site: art.yale.edu

I revisited a school project from years ago - redesigning the Yale School of Art website - and tackled it again with significantly more design experience. The original site is infamous for its chaotic layout, clashing colors, and poor readability. This redesign prioritizes hierarchy, accessibility, and user needs while respecting the school's creative identity.

Project context: Originally a high school assignment that I looked back on and realized how much I'd learned. I wanted to see how I could improve with fresh eyes and real experience.
Timeline: 1 day - researched Yale's website and other art school sites, noted key elements to include and highlight, then prototyped in Figma.

The Problem

The Yale School of Art website has become somewhat legendary in design circles for its experimental approach. While this reflects the school's avant-garde spirit, it creates significant usability barriers:

• Illegible typography: Inconsistent sizes, colors, and weights make scanning the page impossible
• Color chaos: Bright, clashing colors used without purpose or hierarchy
• Poor information architecture: Critical information buried or difficult to locate
• Accessibility failures: Insufficient contrast ratios, no clear focus states, unpredictable navigation
• Mobile unfriendly: Layout breaks on smaller screens, text becomes unreadable

Why redesign it? When I first attempted this as a high school project, I didn't have the skills to identify root causes or design systematic solutions. Returning years later, I saw an opportunity to demonstrate growth and tackle a genuinely challenging redesign.

Goals

• Redesign the Yale School of Art's chaotic website into a clean, accessible layout
• Improve readability and scannability for all user types
• Maintain creative, artistic identity without sacrificing usability

Design Process

Visual System

• Typography: Clear hierarchy with clean sans-serif for readability
• Color palette: Reduced to 4-5 intentional colors with purpose. All combinations meet contrast requirements
• Grid system: Consistent spacing and alignment across all pages

Iterations

• V1 (2022): Initial redesign from years ago. Too minimal and boring
• V2: Better redesign but design was a little too distracting from the contents of the page
• V3 (Final): Balanced, maintained visual interest while keeping up visual hierarchy

Reflection

When I first tackled this project in high school, I simply made it "prettier" without understanding why it was broken. This time, I approached it systematically - identifying problems, researching solutions, making deliberate decisions, and documenting my reasoning. That shift from taste-driven to strategy-driven design marks the biggest evolution in my work.

Images

• 
  Original Yale School of Art landing page as of December 22, 2025.
• 
  My initial redesign of Yale School of Art landing page as of 2022.
• 
  My redesign of Yale School of Art landing page.
• 
  Original Yale School of Art event calendar section as of December 22, 2025.
• 
  My redesign of Yale School of Art event calendar section.
• 
  Original Yale School of Art Community Bulletin Board section as of December 22, 2025.
• 
  My redesign of Yale School of Art Community Bulletin Board.
• 
  Original Yale School of Art Newsletter section as of December 22, 2025.
• 
  My redesign of Yale School of Art Newsletter.