Page and Interface Style Guide

Create a consistent experience for your users across all of our digital products by following the interface style guide when you create web pages and applications.

Layout and design

The website has been designed in such a way that the Content Management System (CMS) takes care of the heavy lifting of design. Do not attempt to design around the constraints of the CMS or you could break the way your audience experiences your content, particularly people with disabilities. Avoid complex styling and layout to make things look just so, because they often break down at different screen sizes. You will make gains by focusing on the needs of your audience and the order of your content, rather than clever layouts.

Guideline

Do: Look at your page on a mobile device to ensure that it is flexible enough to work at small sizes.

Not allowed

Don’t lay out web pages using tables.

Not allowed

Don’t center-align content. Keep all content left-aligned.

Headings

Headings should generally follow the guidelines provided by GMMB. The one exception is that headlines should never be set in all-caps. It conflicts with the way screen readers interact with the content and makes the page less accessible to people who are hard of seeing. Always use sentence case instead, but omit periods, exclamation points, and colons.

Headings should start at level 2 (h2), with subheadings using the next level down, as you would create in an outline. (H1 headings are restricted for use by the web team only.) Use the default style for all text.

They should be brief, usually not a complete sentence. As a rule of thumb, they should not take up more than two lines in the full screen desktop layout.

Guideline

Do: Use headings in the order they are numbered.

Not allowed

Don’t bold or italicize headings or write them in all-caps.

Not allowed

Don’t change the font or size of headings.

Not allowed

Don’t put links in headings or use them as calls to action.

Links

Links should be clearly discernable when removed from the context of their paragraphs. Avoid making overly long spans of text into links. Never use the phrase “click here”.

Guideline

Do: Our academics are unique, and better reflect the world we live in today.

Not allowed

Don’t: Click here to learn about our academics.

Never use bare URLs in content unless it’s explicitly in a contact block.

Not allowed

Don’t: For more information: http://example.com/ugly-bare-url

Not allowed

Don’t: Email me at: bare-email-address@example.com

Guideline

Do: If you have questions, email Stephanie or call her at…

Calls to action

Calls to action must be written in the imperative mood, or in other words, as a direct command.

Guideline

Do: Sign Up

Not allowed

Don’t: You can sign up here

Not allowed

Don’t: Are you interested?

They must be written as succinctly as possible and should not be more than four words long.

Guideline

Do: View Calendar

Not allowed

Don’t: To see the up-to-date schedule, view the calendar

They must be written in title case.

Guideline

Do: Join Us

Not allowed

Don’t: Join us.

Not allowed

Don’t: Join us

They must indicate the purpose of the action, not the literal action.

Guideline

Do: Log in

Not allowed

Don’t: Click here

Avoid complicating the call to action. Separate out lead-ups, instructions, and legal text.

Avoid having more than one call to action. If you have more than three calls to action, seriously consider how your content can be broken up to provide stronger calls to action.

Intro sentences

Intro sentences should give users a brief expectation of what they can expect to find on the page. They are marketing tools, as well as wayfinding tools, so use appealing and conversational language. Don’t dryly describe every feature on the page. Never use them to welcome someone onto your site or thank them for visiting your site.

Guideline

Do: We look for students who are inspired by complexity, but that doesn’t mean applying to college should leave you scratching your head. Take your first step to becoming a Greener and to creating our ever-changing world.

Not allowed

Don’t: Here you will find ways to apply to Evergreen, as well as how to sign up for a visit or get in contact with the Department of Admissions.

Not allowed

Don’t: Welcome to the Advising website.

Not allowed

Don’t: Thank you for visiting the Costantino Recreation Center.

They should be brief, usually no more than one sentence. As a rule of thumb, they should not take up more than five lines in the full-screen desktop layout.

Use complete sentences. Do not use them to repeat headings or page titles.

Guideline

Do: Join us for an afternoon of inspiring and informative sessions led by our talented Evergreen alumni.

Not allowed

Don’t: 2017 Return to Evergreen

Times

Write times as succinctly as possible. Avoid redundancy. Lowercase the period of the day (am or pm) and offset it from the number with a space (ideally, with a non-breaking space). Use the 12-hour clock.

Guideline

Do: The tour starts at 9 am.

Not allowed

Don’t: The tour starts at 9:00 A.M.

Not allowed

Don’t: The tour starts at 9am.

Not allowed

Don’t: The tour starts at 1700.

Separate spans of time with an en dash surrounded by spaces (ideally, the first space is a non-breaking space), and consolidate the period of the day if they are the same. Don’t use a hyphen for the dash.

Guideline

Do: 6:15 – 9:15 am

Guideline

Do: 11 am – 1 pm

Not allowed

Don’t: 6:00 am-9:00 am

Use noon and midnight to disambiguate 12:00 hours where possible.

Guideline

Do: The movie runs until noon.

Guideline

Do: 10 am – 12 noon

Not allowed

Don’t: The movie runs until 12 pm.

Log in vs login

“Log in” and “log out” (two words) are verbs, whereas “login” (one word) is the noun or adjective. There is no such thing as a logout.

“You can log in with the login. You can log out with the link.”

Guideline

Verb: Log in to the console to view your bill.

Guideline

Verb: Log out when you’re finished.

Guideline

Adjective: Enter your Evergreen email address into the login form.

Guideline

Noun: Use the login to access your profile.

Not allowed

Don’t: Use the logout to ensure no one can access your information.

Guideline

Do: Log out to ensure no one can access your information.

Not allowed

Don’t: Use “log on” and “log off”, “sign in” and “sign out”, or “sign on” and “sign off”.

Forms

Reduce the data-to-ink ratio. In other words, if a label, input, border, or word doesn’t have to be there, get rid of it.

Set form labels in sentence case, capitalizing the first letter of the first word only (and proper nouns, like names, of course). Do not use punctuation except for question marks (and use question marks sparingly). End each label with a colon.

Not allowed

Don’t: What is your name?

Guideline

Do: Name:

Ask only for as much information as you need and nothing more. All form fields should be assumed to be required unless explicitly marked. This is counter to the common convention where required fields are marked with an asterisk. Do not mark required fields with asterisks; instead mark optional fields as optional.

Not allowed

Don’t: Name: *

Guideline

Do: Name:

Guideline

Do: Birthday (optional):

Guideline

Do: Size form fields to fit the expected input. For example, phone number inputs should be wide enough to display the all seven digits, but not wider. Textareas should not be wider than 75 characters on average.

Don’t use placeholder text. Instead, put clarifying information in the label or description. Never use placeholder text as a form field label. It’s incredibly inaccessible.

Placeholder text in an input field.

Placeholder text too often looks like editable text, which confuses many users and increases their time in completing a form.

Description text above a form field.

Putting formatting examples in the label or description keeps the form field open and ready for input.

Icons

Use bold, clear, flat icons. Icons should be presented in SVG format for transparency, crisp edges, and maximum scalability. (Print designs can use SVG or any other vector format.) Generally, they should be a single color, unless the color is communicating something specific.

New, custom icons should be designed on a 16×16 grid to match the existing icon set.

Guideline

Do: Differentiate between static icons that are representing a concept and interactive icons that are meant to be clickable. Color interactive icons the same color as your links.

Static icons.

Static icons are meant to communicate or reinforce a concept in shorthand and are not clickable.

Action icons.

Interactive icons are clickable and should match other interactive components. (Destructive actions, such as deleting data, should stand out, as well.)

Guideline

Do: Use the IcoMoon Ultimate icon set. The college has a license to use these icons; if you need access to them, contact the Web Team.

Not allowed

Don’t: Use outline icons.

IcoMoon icons.

IcoMoon icons are bold, clear, and flat. Choose new icons that match this style.

Linearicons, an outline-style icon set.

Some icons have an outline style. These will look out of place when mixed in with our existing icon set, so do not choose icons in this style.