Xavier

Web UI Design | Agency: AKOS Web

A modern website for a renowned Phoenix college prep high school

Xavier was in need of an updated online experience and a modular website system that worked for viewing on all devices and building and adapting to new content into the future.

UI Design

A content preparation system was devised that helped inform the layout and UI needs. The look and feel needed to be fresh, academic and also modern. Paring clean interface modules with an old-school font palette helped achieve this.

The Header UI System

With-in the greater UI design system, a set of header layouts were created based on need. These headers ranged from simple text and rule to full hero with a sub-navigation overlay. The main navigation in desktop format resembles that of a key stone that holds the school logo and crest. The visual mega-menu was created to highlight each section of the site and use the opportunity to bring life into the site through photographs. This centered layout brings a formality to the modern site and referencing historical contexts of institutions the world-over.

UI System Sections & Components

It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.

Mobile Specific UI Systems & Components

The mobile UI portion of this design system is also robust. There were many components and section functions that needed to be thought through specifically for mobile such as the calendar display, course and staff filtering functionality, bell schedule, admissions process, and more.

UI Styles Palette

A UI system isn’t complete without a styles palette. This palette allowed developers to easily reference and build the smallest visual components of the site in a way that allowed easy building of larger components and sections of the site and maintain style consistency.

A comprehensive UI system for a more flexible build and ease of use

Overall, the purpose of this UI system was to be able to create a beautiful and highly functional digital experience for potential and current students, their parents and guardians and the school faculty and staff. From what we’ve heard from various Xavier stakeholders, this is a job well done.