Updates

Two Designs Diverged in a Purple Wood


Posted on

For the last several years, TCU sites have been shifting over to the Web Standards design system developed by the Office of Website & Social Media Management. This design system was used to build the Web Standards parent WordPress theme, as well as several child WordPress themes. We also have a flat HTML version available for sites that run on different web application servers.

As part of this redevelopment process, we are working up sample designs for two unique visual directions.

Option 1

This design stands on the shoulders of the current Web Standards system. We have taken the parts that have worked the best with the current system and applied some enhancements based off of direct feedback, user testing and changes in web design trends. This design might feel more familiar to many users.

One of the biggest changes to this design option is the primary navigation. Rather than the simple drop-down, vertically-stacked primary menu that we have now, this design uses a mega menu to display the contents of each primary section. Additionally, there is room for a featured page with thumbnail and description. Overall, it can provide some additional context to users as they browse, allowing them to get their bearings more quickly.

In addition to navigational changes, this system bundles information into bite-sized modules, similar to Microsoft’s Metro tile concept or Google’s Material Design cards.

screenshot of the Design 1 hero section and program finder

Option 2

This design is more of a clean-sheet departure from our current system. Logo usage and color swatches are the same, of course. However, we allowed ourselves more freedom to explore new layout ideas and module options. This design might feel more contemporary or trendier as a result.

One of the biggest themes of this design direction is edge-to-edge visuals. Whether static photograph or video, experiential imagery reaches from the left edge of the user’s viewport (the visible portion of the browser window) to the right. This design system is aimed at making the interface more immersive and experiential.

screenshot of Design 2 hero section and program finder

Decisions, Decisions

Each design option will cover three key pages (Home, About and Traditions) and two key screen sizes (mobile and desktop). Once we finish up the high-fidelity comps, we will share both out to the campus community via a combination of committee/stakeholder meetings and this blog. We look forward to hearing your feedback once we are ready to pick one of the two directions for the new TCU web design system.

Recent Posts

  • ,

    Blockquote

    Example Usage Omni CMS Enter the text and then select the “Blockquote” button in the toolbar WordPress Add a “Quote” block to the page Best Practice Accessibility Cornerstone Reference

  • Searching for Answers

    A key component to the overall TCU web experience is search. We are continuously tweaking and adjusting our search index to try to connect our visitors to the TCU content they are looking for as seamlessly as possible. Our Connected Campus microsite is a convenient place to go for the latest updates and information related…

  • Goodbye, Phase 1

    First of all, let me express my gratitude to all of the folks within the TCU community who contributed so much to the success of the new website! From the Web Redesign Committee to Chancellor’s Cabinet to the academic program page pilot and everything in between, your contributions made the new site possible. If you…

Archive