You may be trying to access this site from a secured browser on the server. Please enable scripts and reload this page.
Turn on more accessible mode
Turn off more accessible mode
Skip Ribbon Commands
Skip to main content
This page location is:
Top Link Bar
Tutorials & Instructions
All Site Content
Last modified at 8/23/2012 1:11 PM by Manasse,Dalyns
This is a guide for creating Mockups and Graphics
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 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
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
Provost Course Folder Structure
No stolen photos. All photos are appropriately licensed. Google Image Search isn't a usable source. Download from the CITT accounts on
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
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
, check the box with
Only search within Creative Commons-licensed content.
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.
No categories were selected