Web Style Guide

The web style guide inherits visual identity rules from the University Style Guide. Exceptions include typography, color, writing style and accessibility, which are specific to screen media. See the University style guide for logo usage and visual brand identity guidelines. In addition to web applications, this style guide applies to official electronic university collateral, like email communication, online ads, PowerPoint presentations, etc.

Web Templates

All new web development will be done in the UW-Green Bay Content Management System, in the designated institutional templates unless deemed otherwise necessary for the project. The visual web style guidelines that follow are automatically incorporated into the designated institutional web template.

The goal is to maintain a uniform look and feel across the UW-Green Bay website. It is a priority to communicate to the audience that our University is a cohesive, intelligent and professional institution.

Typography

Headings

Heading font: 'Montserrat,' sans-serif
font-weight: bold
color: #4c4c4c
line-height: 125%

Heading 1 - font-size: 36px
Heading 2 - font-size: 36px
Heading 3 - font-size: 28px
Heading 4 - font-size: 18px

Body Text

Body text font: ‘Helvetica Neue,' Arial, Helvetica, sans-serif
font-size: 13px
line-height: 180%
color: #292f33
margin-bottom: 15px

2020 UW-Green Bay Web Colors

Colors	Hexadecimal Value	RGB Values
Brand 1 (Phoenix Green)	#0F5640	R: 15 G: 86 B: 64
Brand 2	#1ba72e	R: 27 G: 167 B: 46
Brand 3	#234e52	R: 35 G: 78 B: 82
Brand 3 Accent	#289a8f	R: 40 G: 154 B: 143
Brand 4	#ea7600	R: 234 G: 118 B: 0
Brand 1 Dark	#0c3b33	R: 12 G: 59 B: 51
Brand 2 Accent	#54e03d	R: 84 G: 224 B: 61
Background Light	#f4f5f6	R: 244 G: 245 B: 246
Background Off-white	#f8faf5	R: 248 G: 250 B: 245

2017 UW-Green Bay Web Colors

Colors	Hexadecimal Value	RGB Values
Phoenix Green	#0F5640	R: 15 G: 86 B: 64
Old, web safe green*	#006633*	R: 0 G: 102 B: 51*
Kelly Green	#137E3A	R: 19 G: 126 B: 58
Bright Accent Green	#279C43	R: 39 G: 156 B: 67
Light Accent Green	#A7C776	R: 167 G: 199 B: 118
Dark Gray	#343434	R: 52 G: 52 B: 52
Mid Gray	#4F4E4C	R: 79 G: 78 B: 76
Light Gray	#EEEEEE	R: 238 G: 238 B: 238
White	#FFFFFF	R: 255 G: 255 B: 255

*Color deprecated – usable, but regarded as obsolete and best avoided.

Logo Usage

See UW-Green Bay Graphic Style Guide for logo usage.

Web Writing Style

Writing Style

The goal is a writing style that engages readers in a conversation. Consider your audience. Speak directly, answer their questions and give information as concisely and clearly as possible. Avoid overwhelming readers with text. Web visitors are task-oriented – they skim and scan. Help web visitors find what they are looking for with clear subheadings, bulleted lists and numbered lists.

Editorial Style

Clarity, accuracy and consistency are critical for UW-Green Bay’s reputation and institutional recognition. See UW-Green Bay Identity tools. The following is a quick-reference guide for editing style consistency on the web.

Guideline	Example of what to do	Example of what not to do
Capitalize program names Lowercase disciplines	A UW-Green Bay Psychology degree… Earn your degree in psychology.	A UW-Green Bay psychology degree… Earn your degree in Psychology.
“Ph.D.” or “Professor,” not “Dr.”	Firstname Lastname, Ph.D. Firstname Lastname, Professor	Dr. Firstname Lastname (confused with medical doctor)
Omit “:00”	3 p.m.	3:00 p.m.
For each list item, use consistent punctuation and sentence structure.	One for the money Two for the show Three to get ready	One for the money The show gets two To get ready, three.
Use UW-Green Bay or University of Wisconsin-Green Bay	UW-Green Bay University of Wisconsin-Green Bay UWGB (only for limited space, social media handle, web url, email address)	UW-GB UW – Green Bay University of Wisconsin – Green Bay University of Wisconsin in Green Bay UWGB
No comma needed before the ‘and’ or ‘or’ before the last item in a series unless it provides clarification.	Red, yellow and blue are primary colors. College of Arts, Humanities and Social Sciences	Red, yellow, and blue are primary colors. College of Arts, Humanities, and Social Sciences

Other Editorial Guidelines

Check the spelling of every name and the title at www.uwgb.edu/directory.
Use single spaces after a period.
Commas and periods generally go within quotation marks.

Search Engine Optimization (SEO)

When writing for web, keep in mind that our audience is using Google and other online search engines to find information. It is important to make sure important search words are present in the text of the page. Page titles, headings and images with alternate text are important areas that are displayed in search engines. Successful SEO depends on identifying the words your customers really use when they search, not just the words you think they’re using. The bottom line is, write about what you know and consider the audience.

Make sure each page has a unique page title.
Use descriptive meta descriptions. This helps your page to get indexed and also shows in search engine results.
Choose web addresses that are short, but also easily read by people.
Be aware of link-building scams. Only link to trusted resources that enhance your content.

Accessibility

Good accessibility practices are important to make your content easier to find and your site easier to use for all users. Minimum accessibility requirements for UW-Green Bay content are listed below. For a complete list of accessibility guidelines, see the WCAG 2.0.

Use proper headings to help readers peruse your text (Heading 1, Heading 2, Heading 3…etc, rather than adjusting font size and boldness)
Use specific link text that makes the destination clear (eg. “See guidelines.” is better than “For guidelines click here.”)
Use the bulleted or numbered list tool (rather than typing the bullets/dashes and numbers. Watch for this when copying from word.)
Image alternate text – include a textual description of images
Avoid using image with text in them, and if you do, make sure equivalent text is available (text that has been converted to an image cannot be selected, searched, read through a screen reader, enlarged, etc.)
Avoid autoplay for videos, animations, audio, etc.
Each page needs a unique, descriptive title.
Make sure the reading order of your content matches the actual layout (e.g. column content reads left to right…if you stack two sets of columns to read vertically, only visual readers can see the visual correlation…search engines, mobile users, and screen readers will read right-to-left.)

User Experience (UX)

Use buttons sparingly, but strategically to make the goal of a page clear.
Do not overuse bold. If everything is bold, nothing is.
Keep site content up-to-date and relevant.
Underline is reserved for hyperlinks, do not underline web text that is not a hyperlink.
Consider the various screen sizes on which your users will access your content. Remember to check how your site displays on a mobile device.
Put time into exploring widgets to create a column layout as appropriate.
Be aware of incoming links to your site.
- Communicate URL changes to campus partners who may link to your content to prevent broken links
- Consider how users will navigate to your content. (eg. New program? Make sure it’s linked appropriately from your college site.)

Images

Use high resolution images that are saved for web. Image resolution should be 72dpi and sized appropriately (below 2000 pixels wide).
Be sure that images are not scaled disproportionately tall or wide.
Do not use images that are protected by copyright unless you are licensed to do so.
- Just because images are available on the web, doesn’t mean they’re free to use.
- The University is held liable. Each infringement can cost upwards of $10,000.
Contact the Office of Marketing and University Communication for photo needs.
Use relevant images that are representative of the programs and people at UW-Green Bay.
Choose images that are relevant and complementary to the content on the page.
Where possible, caption photos with detail and accuracy.
Remember to include alternate text for your images. Be descriptive. Imagine describing the image to someone who cannot see it.

Responsibility

Web contributors have a responsibility to uphold the quality and accuracy of information. Each web editor is a representative for their program and is required to complete training prior to working with the UW-Green Bay website. Web editors are accountable for ensuring compliance with these guidelines.

Is it quality work that represents the excellence expected at UW-Green Bay?
Did you proofread your work?
Did you consider your audience?
Does it comply with these guidelines?
Do your changes impact campus partners who may link to your site?

Web Content Quality Rubric

What is quality web content? The rubric below is a tool to help. The UW-Green Bay website aspires to a satisfactory or better standard of content that is well-written, accurate, relevant and timely. The content, where appropriate, is best paired with photos, graphics and video for a visually rich experience. The content should also be given intuitive layout and structure that supports usability.

Criteria	Exemplary	Satisfactory	Partially Satisfactory	Unsatisfactory
Relevance	The content has a unique main idea, purpose, or theme Provides useful information for the target audience.	The purpose, theme, or main idea of the website is evident Provides appropriate information for the target audience.	Vague theme or main idea, does not create a strong sense of purpose Doesn’t contain information that the target audience can use.	Lacks a clear purpose or central theme Is not useful to the target audience
Content	Information is engaging and accurate	Information is relevant and accurate	Information is incomplete	Information is inaccurate and/or has significant gaps
Photos, Graphics & Video	Interesting, relevant visuals that show action, provide insight Visual content appropriately sized and captioned All of the photos, graphics, and/or video enhance the content, create interest and support engagement	Generic/uninteresting, but accurate visuals Most of the photos, graphics, and/or video enhance the content and create interest.	A few of the photos, graphics, and/or video are inappropriate for the content and do not create interest.	Photos, graphics, and/or videos are inappropriate for the content Are distracting, irrelevant, create a busy feeling and detract from the content. Poorly-sized, skewed or pixilated
Writing Mechanics	Logical reading order Readable sentence structure Concise, skimmable No errors in grammar, capitalization, punctuation or spelling Consistent, proper voice	Rare errors in grammar, capitalization, punctuation and spelling Consistent voice	Few errors in grammar, capitalization, punctuation and spelling Inappropriate voice Too much or too little text, but still usable	Many errors in grammar, capitalization, punctuation and spelling Requires major editing and revision Inconsistent voice No textual content or far too much that it overwhelms the reader
Layout	Logical, intuitive navigation Page divided into digestible content areas Layout directs users to clear actions or frequently sought info	Functional layout, appropriate for the content	Page layout may be ‘busy’ or unimaginative	Layout of pages is confusing, or cluttered or dull Layout does not reflect ideas and content, but seems arbitrary
Usability	Descriptive headings Intuitive, descriptive link text Clear layout, obvious action items Images with alternate text	Generic or long link text Generic or inappropriate-length headings	Unclear link text Textual content in images with alternate	No interactive content Headings or paragraph breaks are not used to create hierarchies or orient reader to text Critical content in images with no alt text
Timely	Information is frequently updated so that it is fresh and current	Information is stale but accurate, updated several times per year	Information is stale, reviewed infrequently and uses dated photos, language and references.	Information is out-of-date and incorrect.

Questions?

Please send your requests through the IT Request Help.