Skip to Main Content

GHS 211: Website Project: Design Resources

Modern Middle East and North Africa--A website project.

In-Class Examples

Image credits:

Design Tools

COLOR

Color is extremely important. On the flipside, though, if you make poor color choices, it can create something aesthetically unpleasing or even impossible for your viewers to read. 

Select your colors carefully:

Color blindness testColor contrast is an important way not only to ensure that your work is aesthetically pleasing, but that it can be viewed by any audience.

If color contrast is lacking, those standing at a distance may not be able to discern your content. If you use certain colors, those who are color blind may not be able to make it out at all. 

  • Red/green is the most common combination to avoid (How to Design for Color Blindness)
  • Traditionally, it's a good idea to use a light text on a dark background or a dark text on a light background.

Color wheels

Colors can complement or contrast. There are lots of tools to help you select colors that will work together (see below).
 
Most infographics choose a color palette with 4 or fewer colors.

 

Use your colors wisely:

Picasso's The Old Guitarist

Colors represent emotions and even actions. Think about ways that you could use this to your advantage! (Color Emotion Guide infographic)

Color can be a great way to group or delineate items in an infographic. Keeping the same 2-4 colors can also help create cohesion in your graphic.(Example of color use to group items in an infographic)

FONT

One word (fonts) repeated in multiple fonts

Fonts can convey meaning beyond the text they spell out. Think about it: what do you feel when someone texts you in all caps? If I say "scary Halloween font" does that bring up a mental image? Does the text in most of your books look the same? Why?

The biggest distinction when it comes to fonts is whether it should be used for headers or titles or body text. It's critically important that your body text be clear and easy-to-read. You have a little more freedom with your titles, but if your font is a script or is too narrow, you may have issues with color contrast between the font and the background image or color. Below there are several resources to help you select a title and body font that will work together beautifully.

The font choice goes hand-in-hand with sizing and spacing. The last resource below will be helpful for these aspects.

SPACING & LAYOUT
  • It's a balance - you don't want too much extra "white space" and you don't want your work to feel crammed. Try one of the layouts listed in the cheat sheet below.
  • Is there a path that you want your audience to follow? Make sure you give them clues (numbered sections or arrows, for example) or that you use an established pattern (top to bottom, left to right).
  • You are free to left, center, or right align your titles or headers, but generally your text will be left-aligned. Indenting is not necessary.
  • If you wish to create a list of items, consider these things:
    • Is it an ordered list? If so, use numbers.
    • Can you add enough space between items so that bullets won't be necessary?
    • If you must add bullets, try to use shapes or icons instead of hyphens or traditional bullet points.

CONTACT

Email Butler University Libraries
Irwin Library: 317-940-9227
Science Library: 317-940-9937

Like us on FacebookInstagramFollow us on Twitter