Skip to Main Content

e-Portfolios: Portfolio Resources

Color Scheme

Choosing a Color Scheme

Your e-portfolio should have a consistent color scheme. The best color schemes are built using color harmony rules; watch the video below to learn more about color and color theory.

Use the following resources to build a color scheme:

Color Accessibility Tools

Ensure your colors are accessible by checking the contrast using one of the following tools:

Remember that color alone should not be used to convey meaning. Use size, bold, italics, and underlines in addition to color when emphasizing or drawing attention to important design elements.

Graphics & Buttons

Creating Custom Graphics, Headers, & Buttons

To personalize your e-portfolio and add visual interest, you may want to create custom visuals for your site. Use the resources below to build headers, buttons, and other graphics.

Royalty Free or Creative Commons Content

When creating custom visuals, make sure to follow copyright laws by selecting royalty-free or Creative-Commons (CC) licensed images and graphics. Any Creative Commons sources should be cited using the correct CC license.


File Types

Sleeping English bulldog puppy

JPG Images

Use JPG file types for photographs. JPG's can be compressed to a smaller file size, meaning they will load faster on your site.

Photo by Isaac Davis on Unsplash

Hexagon with

PNG Images

Use PNG file types for graphics and pictures containing text. PNGs preserve the contours of graphics, whereas compressed JPGs can make graphics and text look pixelated or blurry.

Also use PNG files for images with transparent backgrounds like the image above.

PDF Files

When embedding documents, use PDF file types. PDFs can be opened on any computer or mobile device, whereas Word (.docx) and Pages (.pages) files need special, paid software to open.

Make sure to set any PDF files to open in a new tab.

Google Docs icon

Google Docs

Ensure all Google Docs are public to anyone with the link. Restricted links should not be used on a public e-portfolio.

Google Docs can be embedded using their HTML embed code. First publish to the web, and then add the embed code to your portfolio.

Image Accessibility

Ensure all images used on your site are accessible.

For more information, see W3C's Web Accessibility Tutorials for Images.

e-Portfolio Checklist

After creating your e-portfolio, use the checklist below to double-check your work.

 All page titles have consistent capitalization
 No grammar or spelling errors (use Grammarly or copy/paste into Word)
 All unused pages are deleted
All unused template language (filler text) or sections are deleted
 Images are cropped to consistent sizes
 Any links to Google Docs are shared publicly
 All buttons are linked
 Images follow the rule of thirds
 Images are flipped so movement and eyelines point to page content and not off the page
 All quotes have been fact-checked for accuracy
 No content is plagiarized



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

Like us on FacebookInstagramFollow us on Twitter