Theme Components
Unified Design adopts a modular approach to theming, and I elaborate more on that in our code section. From a design perspective, all Unified Design themes are constructed from a single set of components. These include common UI elements like tables and call-to-action buttons, as well as more dynamic widgets and plugins. You can explore them all from the menu on the right, but before you do, lets take a look at some of the global elements.
Header
Global Bar
At the very top of the page we have the Global Bar. 
This sits atop all university websites, and although the colors are theme specific, the elements contained within are not. Requirement gathering revealed the need for constantly displayed access to university mail (Webmail), faculty/staff portal (UCD), academic management system (Canvas), Quick Links, and Search. The challenge was to design an interface that would present constant access to all that content, but not take up too space on the page. I included the Quick Links as a mega-menu style drop down since there was a need for future additions/modifications, and like with most universities, can act as a catch-all for various politically-driven content. With a little nifty CSS animation, the search field only reveals itself when needed (:focus).
The original design concept for the global bar was larger, leaving enough room for two lines of text, one on top of the other. Once the decision was made to anchor the global bar at the top of the page when the user scrolls down, it was streamlined to one line of text to save space.
For smaller screens (mobile), much of the content in the global bar disappears and becomes anchored in a footer on the viewport. The text was reduced to icons in order to help save space. I thought this was a more elegant solution than to display the text at the top of the page as it is on wider screens. Check it out on your phone or resize the browser window to see it in action.
Aside from the background color, what makes the downtown theme global bar different from the other two themes is the need for some branded campaign imagery. The CU in the City campaign has its own mark which needed to remain visible at all times on any Downtown Theme webpage. This is nearly impossible to achieve on smaller screens from a design standpoint given the mark's location on the page. I added another version of the mark in the footer which is always visible, even when the mark in the header disappears at various viewport widths to conserve space.
Website Title
The Sitefinity CMS in which all these themes reside allows for some pretty thorough customization. One feature is the ability to display the website title on the page. Or not display it. Or change it to display any text you wish. As you can imagine this feature would fray the nerves of any information architect, but from a design standpoint it was important for me to accomodate any content situation.
When the page creator chooses not to show any text, the background space will still remain, albieit a bit smaller (36px). This buffer is needed to maintain a clean visual distinction between the Global Bar content and that of the primary navigation menu below.
'Priority Plus' Navigation
The visual styling of navigation may seem fairly straightforward until you have to consider stress-cases. In other words, what will it look like when a various department or research group decides to have, say 10+ menu items? In the past, the items may wrap to a second line. Aside from taking up too much space, this result also ruins any visual serenity the designer (yours truly) has tried to establish. This challenge is indicative of challenges on the enterprise level. You really have to consider many different scenarios and plan for the unexpected. Enter Priority Plus navigation.
Priority Plus navigation is the concept that we'll expose the most important navigation elements as often as possible, and place any superfluous items behind a 'more' link. How does this work in practice? We use Javascript to read the width of the menu space on the fly. If a menu item will not fit in the remaining space on the menu, it magically (mathmatically) gets added behind the 'more' link toggle. For example, if a menu has 10 items, perhaps only a few will display as full text on a mobile screen, with the rest easily accessible by toggle link. The desktop version may end up showing the full text of every item, depending on the text length. With the design challenge solved, it then becomes a training issue. Site owners must be trained to place their most important menu links first (left side of menu) if they wish the text to display on all screen widths.
As a rule, I hate 'hiding' things behind a 'more' link. Something about it seems to conflict with the visibility principle of UI design. In this case however, dynamically revealing important links while still being able to manage the design space of the entire University domain really was an acceptable compromise.
Go ahead and resize your browser window, then reload the page to see what menu items display, and which ones get tucked behind the 'more' toggle.
Breadcrumbs
It's not an uncommon requirement to include breadcrumbs as a navigation element on the page. The nuance here is that on mobile, showing an entire breadcrumb trail becomes more problematic the deeper down the rabbit hole one goes. To solve this, we limited the display on smaller screens to reveal only the direct parent of the page the user is currently on.
Footer
Local Footer
One of the main challenges with a local footer is that it can become a catch-all for various content. This is especially true in the higher education web space. The enterprise solution here is to allow for some customization for the end user, but to also provide uniformity in design.
Local footer content is not mandatory. However, if the user wishes to use social media links, they will dispay only a certain way, in a certain location. The same is true of a physical location or address. When researching different local footers on the UC Denver domain, the biggest variable was the number of links. We decided to provide a back-end interface for the user to include links. This gives us greater control over the design variables. The solution you see on these Downtown Theme page examples displays two columns of links. The local footer on the Medical Campus Theme example pages displays 4 columns of links. Again, this is not required, the creator of a page on any site may have as many or as few links displayed as he/she wishes. But with this programatic approach, we have more control over how the links will look, regardless of their number.
Global Footer
The content (links/text) is the same across all themes, save the 'CU in the City' campaign branding we already mentioned. A CMS login button was added at a later date, but it is not shown here. Perhaps the best part of the design of this global footer has nothing to do with visual creativity, but rather with the agreement by university administration to go with a single, identical global footer across all University websites.
