Nobles Website Design

Bringing hierarchy and logical groupings to the site’s navigation provides intuitive access points for prospective parents and students. The tailored navigation experience reduces the users’ cognitive load by minimizing the number of choices they face when navigating the site (hat tip, Hick’s Law). At the same time, the accordion structure allows users to deep dive into the specific content they are looking for. Through animation, interaction, and imagery, the navigation adds vitality to the design without detracting from its usefulness.

Taking cues from their editorial design and quarterly magazine, the website design uses similar web-safe typefaces that pay homage to the print publications while ensuring readability on screen. The secondary color palette expands upon the primary Nobles blue palette by adding hues of gold for a prestigious yet warm aesthetic, inspired by the warm tones found in the stones of the main castle and the wood paneling of the school’s interior. For a truly accessible experience, I tested all text and button colors to ensure they pass AA Web Contrast Accessibility Guidelines.

Prospective families are not the only users to account for in a website redesign, especially when it comes to educational institutions. The Nobles staff that will be maintaining and updating the site needed a structure that would eliminate duplicate data entry and free them up to focus on more meaningful work: educating students. I designed both the event calendar and faculty directory to meet the specifications for an API integration with Veracross, their school platform. Though more task-oriented and data heavy, these page templates still embody the Nobles brand while providing easy access to upcoming events and faculty members.