Wednesday 19 December 2012

Online portfolio page design element questions to help you in creating a better one.

Written for learners new to online portfolio page design choices, plus their educators.

You are already familiar with writing on paper. As you begin to work onscreen as well, it is important to understand the important differences between the analog environment of paper and the screen's digital one. The key aspects to consider whilst designing your online portfolio pages are categorized below, with related questions to answer in helping you design a better portfolio:

1. Understand the terms that define your online portfolio page's layout
Your online portfolio page is constructed using a digital page template that is constructed from a database of entries. Each webpage is constructed inside your web browser and, in Carbonmade's case, has a 'header bar' (featuring the portfolio title and 'Work' and 'About' navigation buttons), a 'page title' (either the artwork project folder's or the name you chose for your about page), a 'body section' (on your homepage this includes your project artwork folders and their titles; in your project's pages an artwork with its labels and tags and in your about page, your description, profile picture and related entries) and a 'footer' (typically used for a statement protecting your artwork's copyright). In reviewing each portfolio page, have you thoroughly defined entries for your; header bar, page title, body section and footer? If not, your page is likely to appear incomplete!

2. Use a spell-checker for your profile description
Are you sure that there are no spelling mistakes in your portfolio? While you may have to rely on your memory or a dictionary when hand-writing your profile, you should write your profile up in a word processing program (like Microsoft Word or Google Documents) to ensure that its spelling is correct. Once you're done, you can 'cut' the text content and 'paste' it into your profile description.

3. Check your digitized artworks' orientation matches your screen's
Paper is commonly used in portrait format, while all screens are made in landscape format. Before uploading digitised artwork, ask yourself if it is formatted for optimal display in the new format? If not, you should experiment with rotating, rescaling and different image resolutions to achieve the desired effect.

4. Check that all the elements of your online portfolio page's structure are present and work well with each other
The designers of Carbonmade's featured portfolios tend to take advantage of all the design options it provides. In particular, their choices for each of these webpage design elements must work together to create a thoroughly-professional impression. Check yours does too, by asking:

4.1 Online browser elements

4.1.1 Does your web address reflect the identity you're aiming to create?
4.1.2 Does your website title save well as a bookmark (see browser- and social bookmarking)?

4.2 Page title elements
4.2.1 Does your portfolio's title link well to your web address and portfolio's content?
4.2.2 Do your homepage navigation buttons link to complete pages?
4.3 Page body elements
4.3.1 Does the background colour you selected for your online portfolio resonate with the overall exhibition space effect you are trying to create (i.e. if your portfolio features mostly sketches, you may want to choose a white background to suggest a sketchbook)?
4.3.2 Does your page's heading tie in well with the page body content?
4.3.3 Do the text options you chose with your font's type, size and colour enhance the page's overall look-and-feel?
4.3.4 Have you titled your artwork project folder categories appropriately and chosen cover imagery for them that best highlights their content?
4.3.5 Does the format of the thumbnails you chose (one, two or three per row) create the effect you wanted (for example, choosing one thumbnail per row creates a landscaped cinematic effect for each image)?
4.3.6 Does the labels you chose for your artwork folders look best inside the folder, below it or
should you rather design folder covers that include custom text?
4.3.7 Have you chosen an appropriate style of artwork navigation (either flipbook, flipbook with thumbnails or list) in each folder and is it beneficial to stick to a common style across all folders?
4.3.8 Have your titled your digitised artwork imagery well enough for any viewer to attribute your artwork appropriately?
4.3.9 Have you added sufficient meta-information for your artwork folders and the digitised images they include? (For example, did you enter; an artwork description, a folder description, the relevant tags and a client description?)
4.3.10 Have you linked to your other web presences that relate to your online portfolio?
4.3.11 If you have chosen that you are 'Available for freelance', have you provided appropriate contact details that still protect your privacy from undesirable audiences?

5.  Check that your copyright is protected
5.1 Have you added appropriate copyright statements in each artwork's description or your folder labels and your page footer to assert your moral rights as the artworks creator and protect them?

Hope answering these questions helps you create a better, more coherent online portfolio.

1 comment :

  1. Very interesting. i like this very much. I am building a Wordpress porty site for myself and will be using your pointers as a checklist. Very useful, thanks Travis!


This blog is moderated due to problems experienced by a few readers who could not submit unmoderated comments. Please keep your comment length under 300 words; any longer and you will struggle to submit it. Ta, Travis.

Total pageviews since 2008's launch =


> Translate posts into your preferred language


> Search

+ or search by labels (keywords)

research (55) education (43) design (22) nvivo (16) multimodal (9) visual culture (4)

+ or search blogposts by date


> Tweets

> ORCID research profile

> Web of Science

> Social bookmarks + Edublogs listing
diigo education pioneer Find this blog in the education blogs directory

> Pinterest
> Create With Pinterest