Visual Style

DoIT Communications suggestions for visual styling of digital documents

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

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.





Keywords:buttons forms errors images background colors alt text video links   Doc ID:97977
Owner:ERIK G.Group:DoIT Communications KB
Created:2020-02-14 14:51 CSTUpdated:2020-06-01 07:08 CST
Sites:DoIT Communications KB, DoIT Help Desk
Feedback:  0   0