Visual Style

The DoIT Communications department can help you place images neatly into your content area.

• Make sure you have copyright permissions, and source images properly when needed.
• Images, graphics and video should always fit these terms:
  • Consistent placement
  • Always use alt tags on all images for accessibility

Images

Sizing conventions for it.wisc.edu

• 900px x 400px @ 72dpi: standard news image
• 900 px is the minimum width, height can be adjusted
• Format: .jpg with a high resolution

Backgrounds

• When creating images for it.wisc.edu we try to make sure the backgrounds aren't 100% white. It results in floating images on the pages. If using a white background you could either add a vignette so the edges are a bit darker or make the "white" background slightly off-white. 90-95% white perhaps.

Alt text

• Be brief, one sentence.
• Describe the image in relation to the story.
• Don’t be redundant or provide the same information as text within the context of the image.
• Don’t use the phrases "image of ..." or "graphic of ..." to describe the image. It’s redundant.

Video

Unless there is a specific application, video on the IT Website will be uploaded to the DoIT Communications YouTube or Vimeo channel and embedded into the corresponding page.

• DoIT Communications can aid in placing related video on pages.
• We will highlight copyright permissions, and properly source images when needed.
• All videos must be properly captioned.
• Each caption frame should hold 1 to 3 lines of text on screen at a time, viewable for a duration of 3 to 7 seconds. Each line should not exceed 32 characters.
• All caption frames should be precisely time-synced to the audio.
• A caption frame should be re-positioned if it obscures onscreen text or other essential visual elements.
• When multiple speakers are present, it's helpful to identify who is speaking.
• Non-speech sounds like [MUSIC] or [LAUGHTER] should be added in square brackets.

Links

• Function
  • Links to pages on the site will open in the current window
  • Links to pages off the site will open in a new window.
• Don’t say things like “Click here!” or “Click for more information” or “Read this.” Write the sentence as you normally would, and link relevant keywords.
• Don’t include preceding articles (a, an, the, our) when you link text.
• Navigational links will match the design of the navigation, with underlines.
• Do not underline text.  Underline = link. Giving a sentence an underline for emphasis is misleading.
• Do not place full URLs into your copy
• 
  
  • Do this: Read this news article.
  • Not this: Read this news article: http://www.news.com

404 pages

Regardless of what we do, 404 pages will always be a factor, especially for mobile users mistyping a URL.

• Keep the messaging positive. Voice and tone are important on these pages.
• Make them look the same as the rest of the site.
• Provide another call to action: like a search bar to retry.

Buttons

Buttons should always contain actions.

• Use descriptive text that uses a call to action and wording unique to the page.
  • Do this: Log in, Sign up, Email us, Join our group
  • Not this: Learn more

Forms

Titles should clearly and quickly explain the purpose of the form.

• Use title case for form titles and sentence case for form fields.
• Keep forms as short as possible.
• Only request information that we need and intend to use. We don’t ask for information that could be considered private or personal, including gender.