Visual Identity: Web

These guidelines supplement the Visual Identity Guidelines to provide guidance and best practices for the creation or redesign of a Georgetown website produced with or without the help of an external vendor.

These guidelines build on the university’s Visual Identity Guidelines, the Policy on Electronic and Information Technology Accessibility, and the Georgetown.edu Web Style Guide.

Visit Georgetown.edu, the School of Foreign Service, Georgetown Alumni, and Georgetown College for examples of sites employing these guidelines.

Without the Help of an External Vendor
For the creation or redesign of a website without the help of an external vendor, contact the Visual Identity team to inform us of your plans. We recommend contacting us at the start of your project so that a two-week review—prior to the development phase—can be added to the project timeline. This review will include meeting with members of the Visual Identity team to discuss and review mockups of the website’s visual design and propose any design changes based on our guidelines.

With the Help of an External Vendor
For the creation or redesign of a website with the help of an external vendor, please refer to the Working with External Vendors guidance on the University Information Services (UIS) site.

Georgetown websites should have accessibility foremost in mind.

Ensure all design elements and social media content follow the University’s Policy on Electronic and Information Technology Accessibility. This document establishes the expectation that all electronic and information technology used by the University must be accessible. Specific design patterns in the policy include color contrast, links and buttons, images, forms, and user messaging & interactions.

You can also refer to the “Creating Accessible Content” appendix in the Georgetown.edu style guide which details the accessible design patterns for Georgetown.edu.

Use all caps sparingly because this can decrease legibility if used in large sections.

All logos or logotypes must be approved by the Visual Identity Group. Consult the section on logos in the Visual Identity Guidelines for further information on the proper logo to use for your school, unit, or center.

The Georgetown logo or logotype must be found in the header and footer of a website.

Please note that the use of the Georgetown University seal requires adherence to the university’s Visual Identity Guidelines.

Caslon is the primary typeface and should be present in the design.

Futura is the preferred secondary typeface for digital projects. Neue Helvetica can be used as an alternative to Futura.

Georgetown uses Adobe Fonts (formerly called Typekit) to incorporate our primary and secondary typefaces into our web design work. To use our primary and secondary typefaces on your website, please contact the Visual Identity team so we can create a kit for your project.

The Visual Identity Guidelines define the primary, secondary, and tertiary Georgetown color palettes.

The color percentage breakdown for websites—as with any design project—is as follows:

• Primary color palette: 50% or more
• Secondary color palette: Less than 50%
• Tertiary color palette: 10% or less

Tints can be used and should be based on Georgetown’s color palette. Please refer to the section of the Visual Identity Guidelines that covers tint usage.

Keep in mind the following colors’ meanings when using the Georgetown color palette:

• Red (Pantone 202 and Pantone 199): This color attracts the most attention. For that reason, use it sparingly for warnings and elements that require special attention.
• Green (Pantone 369): This color can represent calming attributes. On the web, it can represent safety, success, health, and sustainability.

Refer to the color spectrum chart in the Visual Identity Guidelines for additional guidance on the moods Georgetown colors may convey to your audience.

Examples of color usage on Georgetown websites:

• Georgetown.edu (also see the colors and interface sections of the Georgetown.edu style guide)
• School of Foreign Service
• Georgetown Alumni
• Georgetown College

Our public stock library contains Visual Identity-approved images for use on Georgetown websites and other design projects.

Keep in mind the following image considerations:

• Be sensitive to the COVID-19 environment—such as social distancing and the use of personal protective equipment in public spaces. Alternatively, you can add a date to the caption so the audience knows the photo was taken pre-pandemic.
• Select images that are less busy for homepage hero images.
• Be mindful of where you want the audience’s eye to go.
• Including ambient campus foliage may be helpful in adding color to the overall design.
• Offer as much cultural diversity as possible.
• Offer a sense of place when possible by including images of highly recognizable campus buildings (Healy, Dahlgren, athletic fields, or other GU locations) or prevalent branding visible (ambient university logos on banners, student clothing, in the background, etc).

The Georgetown.edu style guide includes specific image sizes and aspect ratios. You can also refer to our Georgetown.edu art direction supplement for more guidance on selecting images.

Ambient video is generally reserved for Georgetown.edu and discouraged for other sites. Please reach out to the Visual Identity team if you have specific video needs.

Georgetown websites should have feature parity across devices (i.e., a user should be able to interact with a feature/task on a mobile or tablet device as well as a desktop) while the visual design/branding stays consistent.

1. Content should be easily readable and accessible for smaller screens.
2. Links and navigation are intuitive, easy to touch, or to focus on.
3. Practice a responsive web design strategy.

Additional recommendations:

• View Georgetown’s Sketch library which contains patterns found in the Georgetown.edu Web Style Guide and more recently created patterns that can help with creating layouts.
• Refer to the interface sections of the Georgetown.edu Web Style Guide for form design guidance.
• Use of a quick links design pattern may be useful to have in your design.
• Keep in mind that you may need a design pattern that aggregates more than one piece of content in click-through content blocks such as call-to-action patterns.

Remember your goal in including social media on your site. A website has a different audience than your social media audience.

A social media aggregator should simply be a sampling of the social media conversation or your channel in order to:

1. Drive interest in visiting your account and following you
2. Show that your school, department, or unit is active by using it to highlight the latest “happenings”
3. Showcase topical user-generated content on more niche sites across a platform, such as Hoyas 2020.

If you are incorporating posts from external sources, be extremely cautious with curation. Choose an aggregator tool that has a moderation filter so that your internal team can choose which posts make it into your feed.

When using a gallery/masonry grid layout for your social media content, keep the following in mind:

• Be mindful of aggregator length so that your audience(s) are not scrolling infinitely through your feed.
• Try not to include any web content below a social media feed. It’s unlikely someone would scroll down far enough.

It’s critical to know your audience. User research and user testing can help gain insight into your users to make informed design decisions when creating a website.

Starting points:

• https://www.nngroup.com/articles/usability-testing-101/
• https://www.uxbooth.com/articles/the-art-of-guerrilla-usability-testing/

In addition, using quantitative data such as metrics obtained via Google Analytics can help demystify user habits. UIS Web Services generally sets up and maintains Google Analytics (and Google Tag Manager) properties for all Georgetown-hosted websites; contact webservices@georgetown.edu to get set up.

• We use WebAIM Contrast Checker and The Paciello Group’s Colour Contrast Analyser to check color contrast.
• We’ve made a Georgetown icon pack available for use on Georgetown sites. The Font Awesome icon library (specifically the “light” collection) can also be used.
• Download a Georgetown favicon for use on your site.
• Refer to the appendix for details on Georgetown.edu link and button states.