Skip to Main Content
It looks like you're using Internet Explorer 11 or older. This website works best with modern browsers such as the latest versions of Chrome, Firefox, Safari, and Edge. If you continue with this browser, you may see unexpected results.

Ambulatory Care: Web Design Resources

Edit or Create your Own Images

Umbrellas forming a ceilingWith a regular research paper, all you can provide is text. 

The text is still important - but the website medium of this project gives you the ability to do so much more.

You can link to other places in your website - or other sites entirely. Your source lists can direct people straight to these resources. 

You can add photos or videos. You can CREATE photos or videos. You can create infographics, so the image itself tells a story. You can embed slideshows or maps or timelines. The possibilities are endless!

Take full advantage of the website medium - make your project interactive and visual!

Image: Umbrella Night Sky Park by drunker. Public Domain.

TIMELINES

WORD CLOUDS

MAPS

WEB APPS

SOFTWARE

How to use piktochart

SlideShare is like the YouTube for PowerPoints and slideshows. You can easily create a gallery of images in PowerPoint or Keynote, upload it to SlideShare, and embed it in Weebly with nice buttons to flip through the images. Don't forget to attribute your images either at the bottom of each slide or at the end of the show.

You will need to create an account with SlideShare in order to use this service. Once you have an account, click the orange "Upload" button to the right of the search box at the top of the page.

SlideShare supports PowerPoint files (.ppt, .pptx, etc.) as well as PDFs and OpenOffice Presentation Document (.opd) files. If you are using Keynote, make sure you export your presentation as a PDF file.(File → Export To → PDF; Image Quality: Best). 

Once you've uploaded your slideshow, click "View Presentation" at the bottom of the upload confirmation screen.

Copy the URL from the address bar in your browser. Paste the URL into the WordPress editor where you would like it to appear.

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.

Image credit: Fonts by Franny Gaede. Public Domain.

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.

Ask a Librarian!

Profile Photo
Brittany Heer
she/her/hers
Contact:
Heer Evaluation

Science Library
HB200B1
317-940-8550

CONTACT

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

Like us on FacebookInstagramFollow us on Twitter