University of Texas

Front-End Development, In-Browser Art Direction  | 

As an art director and front-end developer for a ongoing relationship with the University of Texas at Austin, I collaborated with a small team of content strategists and one back-end developer to design and develop over 20 responsive layout themes and 5 responsive homepages for a highly customized Drupal CMS. All design work was done in-browser.

Designing for Accessibility

While designing for UT, meeting 508 accessibility standards for front-end code and design was a requirement. This proved challenging even on the visual design front, where color contrast and font-size guidelines must be strictly adhered to.

A homepage template demonstrating mock content from the College of Liberal Arts. (Click to expand). This homepage is current in usage for the Office of the Vice President and Provost.

Working entirely without Photoshop and only from lo-fi, yet carefully considered wireframes was difficult at times, but the benefits and ease of designing mobile first in the browser greatly outweighed any disadvantages. Creating a dynamically updated styleguide early on in the project kept code consistent and meant making a quick design tweak to 20+ pages was speedier than ever.

A Modular Approach

As the sole designer and front-end developer creating templates for our Drupal build, I was responsible for building a maintainable front-end while adhering to the evolving visual style. Every CMS-created content entity needed to be completely self-contained so they could be rearranged on different templates and pages. Sass made separating styles into Drupal-centric directories for Regions, Blocks, and Nodes of the page a breeze and also ensured that unnecessary styles were not being imported to a page that didn't need them.

Multiple manifest files helped to separate global partials like mixins, variables, typography, colors, and general layout from styles that were specific to only a certain homepage or template.

The News homepage and second level templates used base.scss to import global partials, and news.scss to import partials specific to UT News. (Click to expand)

Unique Content Challenges

The multi-layer nature of university departments created several unique content problems that needed to be solved for mobile devices. In the case of a second-level department like the Department of History, users are provided a link back to the parent department's homepage, The College of Liberal Arts, through the logo on the top right. One can also return to the UT core homepage through the logo in the top left.

On desktop, it is easy to view your department system status and navigate to a parent department. (Click to expand)

When presented with a difficult mobile solve, I'd take a step back from the screen to ideate through sketches or collaborate with others on the whiteboard. I was initially worried that a solve may lead to clunky visual design or poor mobile experience, but was eventually able to find a surprisingly simple solution that solved our problems of department hierarchy on mobile.

Recent Work

Thanks for viewing my recent client work. If you have any questions or would like to see more of my work, please contact me or return home.