The Savvy Creative: Images, Design, and Ethics for the Web

When confronted with this:

It's easy to get intimidated. There are millions of colors in that little circle and finding the right one seems nigh-impossible. Choosing color shouldn't be random. We have a set of colors offered to us by marketing (some of which are good for images, some for text) and then there are colors that will work well for a given project.

There are two kinds of colors you might encounter digitally: RGB and hex. RGB stands for Red-Green-Blue and is a series of three numbers that you can enter into a color picker to get a particular color. Hex codes are 6 digit alpha-numeric codes amost always preceded by a pound sign (#). Some color pickers allow you to enter a hex code, too, but they are mostly used on the web to identify colors in the same way as RGB.

If you have an RGB or hex code and you want to turn it into the other, I really like ColorHexa.com. It will give you every type of color code under the sun, as well as alternatives, shades, and complementary colors. It will also show you what white or black text will look like on the color and how a person with color blindness would see the color. This can be remarkably helpful to ensure accessibility. 

Please find below a list of color-related resources:

Below you will find the official colors of the Butler University color palette.

Primary Brand Colors:

Butler Blue: #13294B

Bright Blue: #00A3E0

Cool Gray: #D1E0D7

Secondary Brand Colors:

Pink: #E31C79

Yellow: #ECE81A

Mint Green: #26D07C

Orange: #EAAA00

More information can be found on the Color Palette page.

Thinking of your design as a grid can help you come up with creative placement. Sometimes centering something, whether it's an image, text, or other media, will work well. Sometimes throwing something off to the side will liven up your design. 

However you arrange things, always keep white space in mind. Let things breathe as much as they can. Space between lines. Space in the margins. Try and keep these spaces uniform, taking advantage of features in Word and PowerPoint to align and distribute content evenly.

Modern design layouts often feature lots of big, bold images (usually at the top), with simple text and colors. There's also a tendency to let typography and content speak for themselves. Look at popular Wordpress and Tumblr themes: they're very simple, almost plain, but the content stands out.

PEEK.SPACE: a place for free, reusable images of space

Fonts are fun. I have a hashtag I like to use on Twitter: #fontnerd. There are many, many free fonts available online, but some are definitely higher quality than others. Just like with images, fonts also have licenses associated with them. Internal Butler uses won't qualify as commercial, but make sure you do an evaluation to ensure any external uses are in line with whatever license the font comes with.

When it comes to free fonts, popularity can often a good measure for quality. The most-popular lists on sites like Dafont and Font Squirrel are chock-full of wonderful fonts you can use for various projects. It's also worthwhile to check out paid font sites, like MyFonts, to see what freebies they have available. Oftentimes these have clear and generous licenses attached.

When it comes to fonts, fewer is always better. Readability is, of course, key, but fun, slightly less-legible fonts at large sizes can make a real statement. There are three main kinds of fonts you'll interact with on a daily basis: sans-serif (like the font you're reading right now), serif (like the font you're reading right now), and decorative (like the fonts in the red box above). Decorative fonts should be used sparingly for titles or emphasis. Serif fonts are best for large amounts of text and tend to look a little more old fashioned and official. Sans-serif fonts are excellent for titles, headings, and small amounts of text. They tend to look cleaner and more modern.

Font on the main page: Clear Sans

Fonts in the image above, top to bottom: Coneria Script Demo; Korsque; Nexa Rust Slab; Songbird; Liberator

• Think carefully about contrast. You always want your text to be legible and readable. Light grey on white is tough to read, as is red on black.
• Any time you include an image on a website, make sure you include alt-text so screenreaders can interpret it.
  • What is alt-text?
• If you're creating media content, make sure there's a transcript and/or captions associated with that content. Captions are always preferable, since transcripts cannot be read while watching a video at the same time.