Below are the user interface elements and their placement for all DePaul websites. In order to keep the focus of a website project, and those aspects of your project that are unique, on brand, a number of key features are available out of the box on every project. The diagram below shows a standard content page of a DePaul website. Each of the areas called out come standard with every new site.
- Logo – The Shield/DePaul University logo for academic entities, or the Shield/DePaul short logo for administrative entities, will always sit in this region of the page. It links back to depaul.edu. After the vertical pipe “|” symbol is the name of the site you’re currently on. This name links you back to the home page of the current site, in this case the School of Music’s home page. The logo color may change to better harmonize with the overall color scheme. For more information on logo guidelines, please see our Brand Resources page.
- Primary navigation / drop-down menu – The primary navigation runs along the top of every page on a site and represents the main sections of your site. In the interest of keeping your site looking professional, there is a limit to how many and how long these main section names can be, although much care has been taken to provide lots of room to fit in those long academic names. The dropdown menus are an additional option for sites to surface deeper site links from the primary navigation.
- Secondary navigation – The secondary navigation appears once you’ve chosen to dive in to one of the primary navigation sections. As you go deeper into the site, the various subsections expand and highlight to show where you are within the site architecture. The overall look and feel of the secondary navigation is set up to match the overall site style.
- Shortcuts – The DePaul Shortcuts button and drawer live in this area of the page. The shortcuts feature, which expands when you click it, will appear on the top of every site. This menu gives quick access to commonly used links on various DPU websites. The color scheme of the button and drawer should be designed to match the overall color scheme of the site.
- Search – Search lives to the right of the shortcuts button and is setup to be a global search of all DePaul websites.
- Drop-downs - can be one- or two-column. The primary navigation and drop-down menu are designed to match the overall color scheme of your site.
- Breadcrumbs – Breadcrumbs enhance the site navigation experience by showing you where you currently are within a site’s architecture. The typeface and link color match the overall site design.
- Footer – Sitemap and minimal versions of the footer exist depending on the needs of your site; they’re present on all sites.