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.

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

Don’t lay out web pages using tables.

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.

Do: Use headings in the order they are numbered.

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

Don’t change the font or size of headings.

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”.

Do: Learn about our academics.

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

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

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

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

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

Do: See our Academic Statement section for more information.

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.

Do: Sign Up

Don’t: You can sign up here

Don’t: Are you interested?

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

Do: View Calendar

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

They must be written in title case.

Do: Join Us

Don’t: Join us.

Don’t: Join us

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

Do: Log in

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.

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.

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.

Don’t: Welcome to the Advising website.

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.

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

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.

Do: The tour starts at 9 am.

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

Don’t: The tour starts at 9am.

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.

Do: 6:15 – 9:15 am

Do: 11 am – 1 pm

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

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

Do: The movie runs until noon.

Do: 10 am – 12 noon

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.”

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

Verb: Log out when you’re finished.

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

Noun: Use the login to access your profile.

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

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

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.

Don’t: What is your name?

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.

Don’t: Name: *

Do: Name:

Do: Birthday (optional):

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.

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.

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.

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.

Don’t: Use outline icons.