Skip Ribbon Commands
Skip to main content
Navigate Up
Sign In

UFIT Wiki

:

DesignChecklist

Last modified at 8/23/2012 1:11 PM by Manasse,Dalyns
Design Checklist

This is a guide for creating Mockups and Graphics



General Design
  • Designs can be implemented using the provost course template - Create a layout similar to existing courses (unless directed otherwise) so that pages can be created solely by changing CSS. Check with web developers for confirmation.
  • Header images should not contain any text - Header images will be used as backgrounds for course titles, so leave space for text. This makes it easy to change the text later.
  • There is enough contrast between text and background colors - Make sure that the color values are accessible for low vision and color-blind users. How to Check Color Contrast(link to WesbSite)*
  • Design for 1024x768, but be flexible - layouts should still work if the browser is significantly narrower or shorter (for laptop, netbook, and mobile device users). Also be aware that users can increase the size of the text, so don't count on a set font-size.
  • Clip art illustrations are always a bad idea - Use high-quality photos and illustrations instead. 
Mockups 
  • Mockups are created in Photoshop PSD format - Avoid using GIMP or other editors to ensure compatibility. (See the Photoshop Mockup Template**)
  • Finished mockups are saved as PNGs - Post these files to Basecamp for the instructional designer. Before posting for clients, the Instructional designer must give approval.
  • Unused mockups should be archived or deleted - Move them to the course archives folder.
Photoshop
  • Layers are named - Layers and layer comps should be named and organized appropriately so that others can use the file. (If you merge layers, make sure an unmerged version exists, etc.)
  • Delete unused or hidden layers - Be sure to clean up any approved mockups
  • PSD files are saved in the correct folder - See Provost Course Folder Structure
Stock Photos
  • No stolen photos. All photos are appropriately licensed. Google Image Search isn't a usable source. Download from the CITT accounts on Clipart.com, iStockPhoto.com, Flickr’s Creative Commons Search, client or publisher materials) The clipart account has unlimited downloads. iStockphoto account is based on credits (You must get approval before purchasing).
  • Unedited stock photos are saved in the project folder - Any downloaded or unedited photos should be saved in the correct folder Provost Course Folder Structure

Using iStockPhoto
  • Use a lightbox for each course - Lightboxes organize and group photos together in the istockphoto account. Potential photos should be filed in a lightbox named after the course (Example: AOM2520)
  • Use the watermarked comp images are until mockups are approved. Get approval from the Instructional Designer before purchasing. If you save them, give them a meaningful name and add "_comp" to the filename.
  • Download the "medium" size photos. This is large enough for images used only for the web.
  • Record purchased downloads in Basecamp in the course’s project. (Go to the To-Do tab. Click the green clock beside the iStockPhoto to-do item. For the hours: 0. For the note: image name, image #, amount of credits). See Recording Time in Basecamp**


Using Flickr Creative Commons
  • In the Advanced Search, check the box with Only search within Creative Commons-licensed content.
  • Compfight is a Flickr search tool that provides thumbnail sheets of images and lists the maximum sizes available for photos. Be sure to select the Creative Commons filter at the top right, as well as the Safe Search option.

Searching for Creative Commons Images


Back