Design Tips for Promoting Eresources: Best Practices for Visual Design

• Sizing down isn't a problem but sizing UP is a problem -- it will cause the image to become pixelated
• Create image files in fairly large sizes unless deliberately designing for small format (e.g. swag, bookmarks, etc.)
  • When you're saving or sending a file, you might be prompted to select a file size. Always opt for "large" or "original size" instead of "small".
• Saving as .SVG makes the file size adaptable -- which is great for mobile!
  • Files can be saved as SVG from Adobe Illustrator and Google Draw

In order to keep content adaptable -- for future edits, or to share with colleagues -- keep the following in mind:

• Don't overlap the text on top of the image whenever possible
  • Add text in a separate space so it can easily be edited, removed, etc.
• Leave ample space to swap logos in and out
• Be conscious of links to your proxy server versus CUNY-wide proxy server
  • Consider using a link shortening service
• Keep the original file format.
  • For example: if you've worked in Word, PowerPoint, Photoshop, or Google Draw and have exported as PDF, keep the original file type AND the final file type. You can share the original file with colleagues, and they can adapt content to their needs.

Is Your Design Mobile Ready?

• If designing for the web, always consider if the site is adaptive or not
• Huge images may not work for mobile
• Avoid too much continuous text: bullet-pointed lists are often easier to read in mobile

Is your content accessible to visually impaired (and other) users?

When offered an option to provide descriptions for images or <alt> tags in html, do use descriptive text so visually impaired users and others using adaptive technologies can best understand your content.

• Use lowest common denominator file formats including MSWord and PowerPoint for final shareable files
• If the art was originally created in Photoshop, sharing original .PSD files is helpful (to those who have Photoshop)
• Don't have Photoshop? Try Google Draw, and export to .SVG format for responsive images
• Use .EPS for print production
• .PNG images DO NOT display in Firefox and are probably not good for web in general

Image resolution

• When saving for the web, keep your file at 72 dpi (dpi = dots per inch)
• When saving for print, keep your file at around 300 dpi

How do I know the resolution (dpi) of my file?

• When viewing your image, in the toolbar select the following:
  • Image > Properties. Here you can double check and make small edits to the resolution.