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