Interactive Design

Prototype Overview:

The purpose of this assignment was to transform the existing Yale School of Art website (art.yale.edu) into a functional prototype that maintains its artistic character while improving clarity, structure, and usability. I developed a clickable prototype using Figma, focusing on simplifying the information layout and strengthening visual hierarchy so that users can navigate the site more easily. The prototype consists of four core pages: Home, Programs / Study Areas, About the School, and Visit / Contact. Each page demonstrates how the redesigned interface supports clearer communication, more intuitive navigation, and a more accessible user experience, while still reflecting the experimental identity of an art school.

Main Features of the Prototype:

(1) Home Page:

The home page is the user’s entry point, so its design focuses on delivering a strong, organised first impression. The layout replaces the original dense, text-heavy presentation with a clearer structure and modular sections. A fixed top navigation bar allows users to access key areas such as About, Programs, Admissions, Exhibitions, and News. Below, a hero section introduces the school with a concise statement and primary call-to-action buttons (for example, to view programs or admissions information). Further down, content is grouped into card-based sections for news, exhibitions, and events, each showing essential information at a glance. This structure helps users quickly understand what is happening at the school without feeling overwhelmed.

(2) Programs / Study Areas Page:

The Programs / Study Areas page acts as the core content page, showcasing the main fields of study rather than commercial products. It presents disciplines such as Graphic Design, Painting/Printmaking, Photography, and Sculpture using a card-style design. Each card includes a representative image, brief description, and a clear entry point to more detailed information. This approach replaces long, continuous text with visually separated blocks, improving scanability and helping prospective students quickly find relevant programs. The layout uses consistent spacing, headings, and alignment so users can easily compare different study areas and understand the overall academic structure.

(3) About the School Page:

The About page focuses on presenting the school’s mission, history, and community in a structured and readable way. Long text from the original website is reorganised into clear sections with headings and short paragraphs, making it easier for users to follow the narrative. Supporting images—such as campus views, studios, and student work—are introduced to break up text and visually communicate the atmosphere of the Yale School of Art. The design emphasises readable typography, logical content grouping, and adequate white space, ensuring that the page feels like a curated overview rather than a crowded information dump.

(4) Visit / Contact Page:

The Visit / Contact page demonstrates how users can access practical information and initiate direct communication with the school. The layout is divided into two main parts: visiting information and a contact form. The visiting section clearly displays the address, basic directions, and information about visiting or attending events. The contact section uses a clean form interface with labelled fields (name, email, enquiry type, and message). Clear feedback, such as button states and input focus, supports the form-filling process and makes the interaction feel more reliable. This page shows how the prototype supports real user tasks, such as planning a visit or asking questions about programs or admissions.

Key Design Decisions:

Visual Style:

The prototype adopts a contemporary art-school visual style that balances experimentation with clarity. A clean base layout is combined with bold headings, accent colour blocks, and selected imagery to create a strong artistic identity without sacrificing legibility. The design reduces the visual noise of the original site by using a consistent grid and controlled colour palette, allowing artworks and key messages to stand out more effectively.

Typography and Layout:

Modern sans-serif typefaces are used across the prototype to ensure readability. Text hierarchy is defined through changes in size, weight, and spacing, distinguishing page titles, section headings, and body text. Long content is broken into smaller sections, supported by consistent margins and white space. This layout strategy makes dense academic or institutional information easier to process and reduces cognitive load for first-time visitors.

Navigation Structure:

A simplified top navigation bar provides access to the main sections, replacing the fragmented link structure of the original website. Related content is grouped logically (for example, About, Programs, Admissions, Exhibitions, News, Events), helping users build a mental map of the site. Consistent placement of navigation, titles, and content areas across all pages ensures that users always know where they are and how to move to other key sections.

Interactive Elements:

Micro-interactions, such as hover states on cards and buttons, visual feedback on active navigation items, and focus states on form fields, are used to make the prototype feel more responsive and informative. These subtle behaviours guide users as they explore the interface, indicating what is clickable and confirming that their actions have been recognised. This reinforces confidence and makes the experience feel closer to a real, fully developed website.

How the Prototype Achieves the Redesign Goals:

The prototype successfully demonstrates how the redesigned Yale School of Art website can become more user-friendly while preserving its artistic identity.

Improved usability: Clear navigation, modular card layouts, and readable typography make it easier for users to find programs, events, and institutional information.
Stronger visual identity: A structured yet expressive visual style keeps the artistic character of the school while reducing visual clutter.
Better content hierarchy: Information is grouped into logical sections with clear headings and spacing, allowing users to scan rather than decode dense content.
Enhanced interactivity: Consistent interactive states and feedback make the prototype feel intuitive and reliable to use.

Overall, the Figma prototype fulfills the assignment’s requirements by presenting a coherent, functional, and visually refined redesign of the Yale School of Art website that better supports real user needs.

搜索此博客

Yang Shumeng(0378848)

Interactive Design - Project 2

TABLE OF CONTENTS

1. Instructions
2. Process Work
3. Reflection

1. Instructions：

2. Process Work：

3.Reflection

评论

发表评论

此博客中的热门博文

Typography | Task 1: Exercises

Illustration and Visual Narrative—task1

DIGITAL PHOTOGRAPHY AND IMAGINE