Skip to Main Content

Best Practices for LibGuides at UCLA

Suggestions and guidelines for using LibGuides to best effect in the UCLA Library.

Color Restrictions

class="box-in-box">

Seeing Red

There is no shade of red in UCLA's approved color palette. Red also carries lots of connotations like "warning" and "danger" that are usually best avoided in web design. However, there is a shade of pink you can use. The color code (which you can type in directly by choosing "More Colors" in the "Select Text Color" tool) is #ff00a5. The result will look like this. However, 90% of the time, simple bold letters are all you need. Only use the pink if that's literally the first thing you want people to read on the page.

So, you want to add some splashy colors to your guide to jazz it up, but most of the color editing features are blocked. Why are we being so uptight about this?

UCLA actually has a very specific palette of approved colors for use in graphic designs. Furthermore, most of them are supposed to be used only as "accent colors," which means 90% of the content is black, white, gray, and one specific shade of blue. The goal is to create a cohesive, easy-to-use graphic identity across the entire campus. It may sound like a lot of marketing b.s., but it really does work. Web sites that have a unified graphic scheme look professional. Those that don't... well, if you're lucky they look chaotic, quirky, and bohemian, which may be a style you're shooting for. But more likely they'll look like someone let a kindergarten class loose in a paint store.

Remember MySpace? Originally people flocked to MySpace because it allowed everyone to express their individuality and go crazy with the design elements. Two years later, after recovering from eyestrain, everyone over the age of ten abandoned MySpace in favor of Facebook, where every page looks just like all the others—black text on a plain white background, with a banner and accent colors in two shades of blue. Sound familiar? Take a look at any popular website (Google, Wikipedia, Amazon, IMDB) and you'll see exactly the same thing over and over: white background, black text, banners and headers in blue or black, with at most one other color used sparingly (but consistently) as an accent. Consistent formats and color schemes help people navigate and understand what they're seeing. They don't have to wonder "Where did the home page link go to?", "Why is this object a different color from that one?", "Are red words more important than bold ones? And what about italics?", or "Which things do I click on?" This especially applies to visual learners. Using lots of bright colors and fonts does not help them learn, anymore than shouting in multiple languages helps verbal learners.

Standardized style sheets and restrictive color palettes are your friends, and your readers will appreciate it if you stick to them!

Using Images

One or two images can really spruce up a page. But try not to go overboard—your guide shouldn't look like a photo album! You can use gallery boxes to put multiple images on a page without overwhelming the other content.

Before uploading an image, re-size it to the size you're going to use. (You can use Windows Paint to do this.) Our Springshare account provides a finite amount of space for images and documents. Don't waste it on a huge picture which is just going to be squeezed down to fit into a box. Proper sizing can also dramatically speed up page load times.

Also, it's a good idea to upload all of your images using the Image Manager (under Content in the gold bar). This allows you to organize your images into folders and re-use them in multiple places without uploading multiple copies.

Using FontAwesome images

FontAwesome is a library of 479 icon images in which each image is a letter in a special font. The advantage? Fonts are vector graphics, which can be re-sized to any value without loss of detail. Plus, they're small in bytes, so they load quickly.

LibGuides 2 has built-in support for FontAwesome, though you'll need to edit the source code to use them.