Designing an ePortfolio
Mark Alexander, instructional technology consultant
Center for Teaching and Learning
Lynn Ward, Principal Systems Analyst Instructional Technology
Systems and Services UITS
Session Objectives
After participating in today’s session, you will be able to:
• gain an understanding of basic web design principles
and resources that can be used to enhance the final
appearance of an academic ePortfolio.
• become familiar with Presentation Maker’s custom
design template.
What Makes Good Web Design?
http://www.youtube.com/watch?v=UHpyES6Jbx0/
Available Tools
Planning
Web Design for Professional Portfolios
Penny Thompson Youtube channel: http://www.youtube.com/user/PennyAtMSU?blend=21&ob=5
Layout
Consistent template
Modest banner
Good balance of text, section headers, and images
(Thompson, P. 2011)
Be Intentional with Your Layout
Structured Layout
Color Choice
Appealing to many viewers
Colors based on nature are safest and very appealing
Cool colors can also be safe
Bright colors should be used thoughtfully
Color blindness is very common
(Thompson, P. 2011)
Examples
Stay Away from Dark Colors
Cool Colors Are Easy To Look At
Colors Based on Nature are Soothing
Attention Grabbing Color Choice
Color Tools
Adobe Kuler - Creates color combinations based on the standard color
scheme configuration. It will also generate a palette from an uploaded
image. If logged in with an Adobe ID it also allows viewing palettes
created by other users. http://kuler.adobe.com/
Color Scheme Designer 3 - This TML tools uses the traditional red,
yellow and blue color wheel to help generate color schemes.
http://colorschemedesigner.com/
COLOURlovers – This is a popular color generator tool and also a
sharing site. There are color palettes with many categories as well as a
popularity rating. http://www.colourlovers.com/
Pictaculous – Allows you to upload an image and then creates a fivecolor palette based upon the image. http://pictaculous.com/
Text Alignment
Use web development environments
Choose one-column layout
Avoid hard code line breaks
Avoid formatted text
(Thompson, P. 2011)
Print on Paper vs. Print on Screen
Improper use of text alignment is one of the most common and overlooked mistakes of web
design. Yet the impact that it has on online readability simply cannot be overlooked.
Surprisingly, very few people talk about it or understand its significance.
From the birth of the Internet, people have been taking the rules of text alignment for print and
applying them to the screen. But onscreen reading is up to 25% slower and causes more eye
strain than reading something in print. Therefore, the text alignment guidelines that work
beautifully for print almost always cause readability issues when used online.
Viki Nygaard
http://www.learntodoitright.com/2009/01/14/how-text-alignment-affects-online-readability/
Nielsen Norman Group – Eyetracking Study
Heatmaps from user eyetracking studies of three websites. The areas where users looked the
most are colored red; the yellow areas indicate fewer views, followed by the least-viewed blue
areas. Gray areas didn't attract any fixations.
http://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/
Royal National Institute of Blind People
First a quick explanation. Heading mark up, H1 to H6, is wrapped around headings
in a page to give the page structure. So without further ado here are our top tips:
All visual headings in web pages must have a heading structure applied using H1
to H6.
Headings must be used to describe a page’s structure and not used for visual
effects.
Pages should only have one main heading, H1, which is the main title of the page
and should be positioned at the start of unique page content.
Headings are like a contents overview of a page. Sub headings of the H1 must be
coded as H2 and subheadings of an H2 must be coded as H3.
Heading levels can’t be skipped i.e. you can’t jump from H1 to H3.
Heading structure should be consistent throughout the site.
Add in headings to break up large chunks of text.
Keep headings short and succinct and therefore easy to scan and understand.
http://webarchive.nationalarchives.gov.uk/20100418065544/http://www.rnib.org.uk/wacblog/headings/quick-tips-for-accessible-headings/
Text Consistency and the FCK Editor
Image Size
http://www.prdaily.com/Main/Articles/13807.aspx
Text Readability
Serif vs. sans serif
Avoid script style fonts and special effects
Text to background contrast
Consistency
(Thompson, P. 2011)
Serif vs. Sans Serif
http://alexpoole.info/blog/which-are-more-legible-serif-or-sans-serif-typefaces/
OWL Purdue Online Writing Lab
http://owl.english.purdue.edu/owl/resource/705/02/
Typetester
http://www.typetester.org
PX to EM.com
Don’t Use Cursive Fonts
Choose font colors that provide contrast
Contrast Rebellion
Contrast Rebellion is a site created to combat low contrast hard to read fonts: http://contrastrebellion.com/
More Font Resources
W3schools is a great site to reference. Here they reference commonly used Serif and SansSerif fonts: http://www.w3schools.com/cssref/css_websafe_fonts.asp
I Love Typography is a site dedicated to typography and can help provide examples to see
the impact that typography can have: http://ilovetypography.com/2007/09/19/15-excellentexamples-of-web-typography/
Typetester is an online application for comparison of different fonts:
http://www.typetester.org/
1stwebdesigner published an article by Jameel Khan which gives examples of 45 sites that
demonstrates effective use of typography in their design:
http://www.1stwebdesigner.com/inspiration/45-creative-uses-of-typography/
Lifehacker’s article A Non-designer’s Guide to Typefaces & Layout by Adan Dachis,
http://lifehacker.com/5899904/a-non+designers-guide-to-typefaces-and-layout
Examples
Good Text Readability and Alignment
Professional Presentation
User experience
Sound
Images and graphics
Personal information
(Thompson, P. 2011)
Copyright and Accessibility
Multimedia
Accessibility
Quotes
(Thompson, P. 2011)
Accessibility Resources
Reference Materials for creating accessible websites:
W3C Recommendations: http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505/
Quick tips from the W3C: http://www.w3.org/WAI/WCAG20/glance/
Accessibility Tools
Colour Contrast Check – the colour contrast check tool allows a user to specify a foreground and a
background color to determine if they provide enough contrast
http://snook.ca/technical/colour_contrast/colour.html
HiSoftware CynthiaSays portal is a site that can identify errors in content related to Section 508
standards and or the WCAG guidelines: http://www.cynthiasays.com/
EvalAccess 2.0 is another service that evaluates the accessibility of web pages using the WCAG
guidelines: http://sipt07.si.ehu.es/evalaccess2/index.html
WebAIM Color Contrast Checker by Web Accessibility in Mind, This tool allow setting the
background and foreground colors through hexadecimal format of a color picker to determine if it
meets accessibility standards: http://webaim.org/resources/contrastchecker/
Copyright Resources
UC Davis Office of Research Copyright Web Resources:
http://research.ucdavis.edu/pgc/ipm/copyright/cwr
Fair Use Evaluator: http://librarycopyright.net/resources/fairuse/
IU Copyright resources: http://copyright.iu.edu/resources
Columbia University Copyright Advisory Office:
http://copyright.columbia.edu/copyright/copyright-in-general/law-resources/
Noel Studio ePortfolio Rubric
http://www.theijep.com/pdf/IJEP66.pdf
ePortfolio Galleries
Bowling Green State University:
http://www.bgsu.edu/offices/studentsuccess/page31296.html
Clemson University:
http://www.clemson.edu/academics/programs/eportfolio/
IUPUI Personal Development Plan:
http://pdp.uc.iupui.edu/Home.aspx/
LaGuardia Community College ePortfolio:
http://www.eportfolio.lagcc.cuny.edu/
Portland State University:
http://sites.google.com/site/eportfolioresources/Home/ePortfolio-Showcase
San Francisco State University:
http://eportfolio.sfsu.edu/
University of Michigan:
http://mportfolio.umich.edu/index.html
Virginia Polytechnic Institute and State University:
http://eportfolio.vt.edu/
Questions