Skip to Main Content

Transformative Website Style Guide: Media

This guide offers practical advice on creating a transformative library website.

Terms/Definitions

Pixel - a square element in a raster image, or the smallest addressable element in an all points addressable display device; so it is the smallest controllable element of a picture represented on the screen.
Raster images - images created by pixels. (saved as JPG, PNG or GIF files)
Vector images - an image or graphic made from solid lines (saved as PDF, Ai, or EPS files)
 

 

Website Media

  • Your images should be high-quality with no grain or distortion
  • Do not enlarge photos more than they have to be (this causes pixelation)
  • Image file size should be no larger than 500kb
  • Always rename your image files before uploading to help with SEO optimization 
  • When including images of people, try to feature smiling faces
Creating a connection is key to providing a transformative experience. Users will interact more effectively with content and media they can relate to on an emotional level. Featuring smiling faces is a great way to break the digital barrier and create "touches" through your website.

Syracuse University Libraries features smiling faces on their homepage to connect with users and create human connection.

  • Icons can serve as signage for users to navigate your website
  • Calls to action are best presented with icons
  • When choosing colors for icons, take into consideration color contrast and resolution'
  • Icons are a great way to eliminate text and create visual interest
California State Library uses several icons even in the top third of their homepage to create clear points of interest for their users.

Using video in your website can add visual interest and give a fresh look at your library.  Consider adding videos of people/faces that can act as testimonials or guidance for your audience.
According to Forbes, viewers retain 95% of a message when they watch it in a video, compared to a 10% retention rate when reading text alone.
  • Your videos should be high-quality with no sound or streaming issues
  • Consider embedding your video for an interactive experience
  • Be sure you own the rights or appropriate licenses

Logos and Branding

A Note on Logos

A logo is a visual representation of an entire brand or entity.  It is important that logos retain their original shape and proportions as to not distort the image, making the brand appear less professional.
Refer to Campus Stakeholders for more information on how to find your institution's guidelines.

 

Image and Video Resolution

Understanding Pixels

Pixels are simply the building blocks of a digital image. The number of pixels in an image will determine how the image looks either on a screen or in a printed format. Image Resolution is determined by the density of these pixels and is measure in PPI (pixels per inch). 
Pixelation occurs when an image has been enlarged to a point that individual pixels are visible. 

As a best practice, it is important to use high-quality media and avoid enlarging images.  It is always better to upload a large image and have to crop or scale down.