Lesson 2 - Content - CIS 58.57 Efolio

LESSON 2 - CONTENT & PACKAGING

lesson objectives

lesson overview
critique portfolios
review design principles
create a storyboard

lesson overview
The conventional wisdom of web design states that "Every hour spent planning will save you 2-3 hours of revision and change". With that concept in mind, we will focus on two major concepts in this lesson.

Content - What information will you include
Packaging - How you will display that content

Both elements are essential, so balance your time and energy to allow for thorough planning and effort in each area.

This week's reading assignment introduces you to ideas for what makes an effective portfolio presentation, and what detracts from that goal. The selections present a number of principles to follow while designing your portfolio sites. Ideas include: effective and ineffective elements, what to include and what to leave out, how to organize what you do include, and how to present it.

After reading the articles, you'll examine a variety of portfolios from former students, and from numerous internet sites, looking for the principles you just read about. Then you'll select a portfolio to critique using these two guidelines:
Portfolio Guidelines, and Resume Guidelines.

Finally you'll develop a plan for the creation of your own portfolio site, create a storyboard mockup of the layout of your 5-7 pages, and write up a descriptive narrative that will help you when you begin the actual creation of it.

Here are some questions to ask yourself as your portfolio evolves:

What do I want to tell my potential employer or client?
What will be the look and feel of the site?
Which examples of my existing work will I select to display at the web site? And how will I display them?
How will I advertise my portfolio?
What are the steps for job hunting and career enhancement that are available to me via the web?
How can I package it so I can respond quickly when new opportunities present themselves, and make updates to it as my experience changes?

Tip #1: Quality is better than quantity: A small, high quality site will make a much better impression on potential clients or employers, than a large site of mediocre quality. Balance your desire for what your site might look like, with the practicality of having only several weeks to design, create, and polish it. You can always add to it after the class finishes.

Tip #2: Different Strokes for Different Folks: Different industries want and/or expect different things to be included, or left out, of Portfolios. A site created for a government agency, or a prestigious Law or Accounting firm is going to have a totally different look and feel from a site created for a cutting edge Graphic Arts and Design shop, or from a site for a Children's Toys and Games business. Keeping that in mind, you'll need to shape the look and feel of your site to be appropriate for the industry you want to work in.

So,

Decide on a job or industry that interests you. Even if you aren't ready to actually seek employment or clients yet, or haven't decided exactly which field you really want to pursue yet, for your grade in this class, you still NEED to pick a concrete Job Target so that you can focus your Portfolio site on it
Research your field by searching for and examining existing web sites for companies and/or individuals already working in that job/industry, so that you have a very clear idea of what existing web sites for businesses in this field look like.
Examine a variety of Portfolios for people already seeking work in your particular job/industry, so that you have direct knowledge of the look, feel, content, and quality of their sites...you will be competing with these folks, and working towards making your site better than theirs is a great way to give yourself an edge.
Finally, model your Portfolio after the BEST example(s) you can find!

One of the worst things you can do in your portfolio is to present two, or more, completely different sets of skills and abilities equally. The major thing this accomplishes is to confuse or dilute your Job Objective. Interviewers or potential clients need to be able to know, at the first 5 - 8 second glance, what skills and abilities your portfolio site is showcasing, so that it is totally clear, what kind of job you are looking for.

For example, if you have skills in both Web Design and Bookkeeping, these skill sets are not directly connected to each other, and don't complement each other, so don't combine them in your Portfolio ... for this class pick one and build your site towards that.

For the real world, after the class is finished, you'll probably want to make a second Portfolio site, to target the set of skills you put aside for this class.

return to top

critique portfolios
Before you re-invent the wheel, take a look at what others have done, in regard to the principles you've learned. Borrow ideas you like, and avoid mistakes you find distracting. Quite a few previous student portfolios can be found at the homework page. Access the homework page, find the critique a portfolio assignment and select the "see details" link.

Select one Portfolio to critique. this example should be useful to you in the creation of your own resume or portfolio...ask yourself the questions

'Which features from this resume or portfolio will I include or use in my own? ... or 'Which features from this resume or portfolio will I be sure to avoid in my own?'

It will be most helpful for you, when you create your own Portfolio, if you have examined the sites of people who are in your own industry, job, or field, and especially in the geographical area where you want to work...this way you'll have a much better idea of what your colleagues are doing, what sites for similar businesses, companies, and freelancers look like, as well as scoping out who you may be competing with when you begin your job search, and how your site compares to theirs when you go live.

Notes you take, about what you like and dislike about portfolios and resumes that you encounter, can be used when you select a Portfolio to critique. When you come across examples that really impress you, bookmark them, so that you can find them easily, if you want to refer to them later.

return to top

review design principles
This would be a good time to introduce the KISS acronym, which stands for

"Keep It Simple, Stupid".

Despite the implied putdown, the message is right on the money. If you ask any Human Resources person, they'll tell you that a longwinded, multi-paged resume doesn't increase the chances of a candidate getting an interview. Since the reason for having a portfolio is to get your foot in the door, you want yours to work!

With all the options of content and format that an electronic presence on the net offers, how do you keep it simple? The key here is to remember the time tested rule of web page building:

"Just because you can do something
doesn't mean you should do it."

This rule was never more true than with an electronic portfolio. Take advantage of the features of the Internet, but don't let those features overshadow your main message.

If you're seeking a programming position, including a sample of your Java script code is good--adding dozens of distracting and annoying javascripts which slow down your site and detract from the content is bad.
If you're an artist, displaying your work in thumbnail version with an option to view full-size is good--offering a real time video feed to your Mom's refrigerator door (where every piece of art you've ever created is displayed) is bad.
Linking to former employers' web sites is not often a good idea, unless you designed the entire site. Even so, if the site is graphics heavy, you might want to take a screen shot of the opening page to display as a graphic for your work examples section, and include a link to the live site, if it's appropriate.

You need to accompany each work example you include with a brief paragraph of descriptive text explaining why this particular work example has been included. Having a page of thumbnails, or links to other sites with no explanations leaves the viewer guessing ... which is not something you want to do. Describe what tools you used to create the site, the reasoning behind the program or graphic and the lessons learned in the project.

return to top

create a storyboard
To succeed when you're creating your own little corner of the web world, you must have a plan. As you progress through this class, discovering different options and seeing all the ways other people have created portfolios, you'll probably change your initial plan. But it's very important to have a concrete idea to start with, so review the storyboard guidelines.

In addition to the 'graphical' representation of your site, your storyboard web page should also include a narrative section describing what you will include on your pages, what colors, graphics, etc you'll use, and the overall "look and feel" of the site.

Your Portfolio can run the gamut from a simple, no-frills site which loads quickly, and contains detailed technical information regarding your skill sets, to one that is elegant, sophisticated, and showcases your graphics ability. Most will fall somewhere between these extremes. Start writing down ideas even if you are not entirely sure how you will implement them. In addition, feel free to modify this original storyboard and mockup as the course progresses. All good plans have enough flexibility to accommodate change as the need arises.

After reviewing this lesson you will need to complete the reading assignment listed on the homework page, review the assignments for this lesson, and scan the resources page for additional links of interest.