e-Portfolios: Design

A few months ago, Hack Library School posted about e-portfolios and their benefits. Ever since, I’ve been working on creating my very own e-portfolio and thought that I would share some of the things that I’ve learned. I’m working on a 4 part series that describes the different things I’ve been thinking about while designing and creating my e-portfolio including content, design, publishing, and mobile.

There are a lot of decisions you need to make when you design your e-portfolio. Here is my advice (not that you have to follow it, but I do you hope you keep it in mind!):

1. Keep it simple!

The biggest concept I keep in mind is to keep everything simple. Keep the information presented simple; keep the page format simple; keep the number of pages and display of menus simple.

Don’t just keep the information simple, but also keep the design simple. For example, I used a busy background image, so I made sure to use opaque white as the background for the text. The background image is interesting and attracts the eye, but the white background makes things easy to read.

2. Accessibility

If you’re reading this, you’re probably in the library field or a library student. As such, you should value the ability for everyone and anyone to view your site. Here are some simple accessibility tips you should follow when designing your site:

Contrasting Colors: When you are choosing colors for your font and the background behind the font, keep in mind that the contrast between the colors is important! Some people with vision impairments (like color blindness) can’t read text that is displayed improperly. 45 Berera St has a post that explains this better than me and includes 10 color contrast checking tools that you can use to make sure your site is accessible to everyone!

Font Styles: While it’s good to make your site personalized, it’s not good to use obnoxious colors and fonts. First off, it’s annoying. Second off, both the color and the font can make it hard for people to read (as mentioned above). Try to use a font that’s easy to read. I prefer sans-serif fonts for their no-frill attitude for just that reason. Other people disagree and say serif fonts are the way to go. It doesn’t really matter as long as your text is easy to read.

Images and Alt-Tags:Images are always a good way to display content without using words. Make sure to always include an alt-tag when you use an image, though. Screen readers will read this instead of the file name, which is immensely more descriptive for those who need to use a screen reader. It also means that if the connection is slow and the image isn’t loading, your users can still get an idea of what you are trying to portray.

3. Pages

kzawodny.info work samples screenshot

Screenshot of the work samples page of my e-portfolio

Remember, you don’t need to create a ton of pages to tell everything about yourself. You don’t need a separate page for contact information (I say this because it took me forever to come to grips with this), you don’t need a separate page for each online profile you want to share, and you don’t need a different page for each sample you want to share.

That being said, you don’t want to inundate your reader with a text heavy site. If you are using Wix to create your portfolio, use images and links. Since I designed my own site, I was able to come up with my own solution to how to display examples all on one page.

kzawodny.info/work samples screenshot

Screenshot of work samples page with Tutorials selected

First, I organized my examples by skill. Then I found a way to use JavaScript to hide and display text when the user clicks a word. This way, I could show the list of skills and the user could see my examples if they wanted to. The page isn’t text heavy and is easy to read and navigate. Here’s the JavaScript I used to achieve this.

4. Files

Linking to files is great! But make sure you link to file types that are pretty widespread or can be viewed in the browser. For example, I try to always use PDFs for word documents. While .doc and .docx are pretty common file types, some people may not have Word or another program that can open them. PDF readers are much more common and can be viewed within your browser (for most browsers and most of the time, anyways). A PDF file will also protect the layout of your document much more than a .doc or .docx file.

I also stick to mp4 formats for videos instead of .wmv or .avi. When you host an mp4 video in Google Drive it will also play within the browser.

If you are using a file type that is not common or will not open within the browser, make sure to provide instructions on how to access it. Never, ever leave your user hanging.

The end?

This post has gotten a little unwieldy, so it is time to stop talking about design, especially since others have already done a much better job talking about it than me!


One thought on “e-Portfolios: Design

  1. Pingback: e-Portfolios: Design « Baranduda Blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s