Module 8

Introduce | Learn | Apply


Topic 1 | Topic 2 |

Read the material below and any additional resources listed for this lesson..

Topic 1

Below, you will see an example of sketches used to create a web site:

Using these concepts, first work up a mind map using mind map sketching techniques that you already have learned to create an outline of the ideas that might be included in your web site.

Next, create a navigational chart (ALSO CALLED A SITE MAP) of your web site.

Finally, create at least 6 pages of graphic thumbnails(3 thumbnail sketches to a page) using pen and ink,markers and color pencils and similar methods to create a visual storyboard of your web site.

Use your best sketching skills that you just used on your portrait layouts, to layout and design the site as if it was for a client. Create similar layouts as done for your magazine layouts in terms of style.

Here are some examples of the beginning stages of this project using Mind Maps, lists and early thumbnails:

Here is an example of a LIST MIND MAP and some simple sketches for a design company's portfolio web site

Here is an example of a LIST MIND MAP and some simple sketches for a design company's portfolio web site


Here is another example of very early sketches used to create a web site for a area of the Metropolitan Museum of Art.

Here is another example of very early sketches used to create a web site for a area of the Metropolitan Museum of Art.


Please visit the original web site for a closer look at several images (jpegs) of the final portfolio web site using the link below.

While your there explore the their creative process and check out the other web site designs that were done by SOKOLINDESIGNS©:


Using the WWW, find other examples of portfolio web site designs to study for this assignment.

Back to top

Topic 2

Here are some simple tips on GOOD Portfolio Design by Jeffery Veen of Google: (edited from original)

Jeffrey Veen is one of the founding partners of Adaptive Path and project lead for Measure Map, the well-received web analytics tool acquired by Google in 2006. After five years with Adaptive Path, Jeff moved on to Google, where he lead the redesign of their Analytics product and managed their web apps UX team. He left Google in May, 2008, to work on personal projects.

Five steps to a better design portfolio (written by Jeffery Veen)

"If you're looking for work as a designer, the old cliche is true: a picture is worth a thousand words. That is, your portfolio is your most important calling card.

I've been involved in hiring all sorts of designers - freelance, contract, full-time, in all sorts of disciplines - visual, interaction, illustration, print. Through this process, I've seen a lot of portfolios; some good, many bad. Here's a few things I've learned while wading through them all.

1. Use best practices First of all, if you want a job doing web design, make sure your portfolio itself is an example of good web design. That doesn't just mean making it attractive and easy to use, but also following the fundamental principles of what sets the web apart. When I'm checking out a portfolio, I look at the craft and detail that went into making it. For example:

* Is it standards compliant? I'm not a stickler for validating, but I do view source and check the doctype. A quick glance at the markup will also tell me how organized this designer is.

* Is the designer trying to control typography by setting words in graphics? As a web designer, you should prove your understanding of findability over style.

* Is it presented in a self-contained box of Flash? Are you breaking the back button? I don't want to have to argue with the designer later over things like this.

These are just a few examples, but they're all issues of control. And they serve as subtle clues that the owner of the portfolio designs for users, rather than their own ego.

2. Don't innovate This may seem counterintuitive - after all, isn't a portfolio the place where a designer really should be showing their strengths? But too often, a portfolio becomes a place where designers misplace innovation. I've seen so many examples of fancy Flash or Ajax navigation that distract from the work. Or worse - they are so clever that I fail to recognize them and miss many of the examples.

3. Show your work: Your portfolio is not the place to be worried about copyright infringement. Too often, I find myself squinting at tiny images of a designers work. Use full-sized screen shots or, better yet, host the actual files on your server. (Don't rely only on a link to your clients' or former employer's implementations - they'll change them eventually.)

4. Explain what you did Yes, the screens are important. Ultimately, images are going to sell your talent. But if I'm going to work with you, I want to know the who, what, where, when and why of each example.

Tell me about the client. Where you on staff or contracting with them? What were their goals for the project? How involved where you overall? Did you have to work within their style guide? Was it a redesign, or did you start with a clean slate?

I want to know what constraints you faced and how you dealt with them. Did you try things only to be told "no" by someone in marketing or engineering? Don't burn bridges with your former clients, but be honest and talk about whether your vision for the product was ultimately implemented.

Imagine sitting across the table from a potential employer and explaining each example. What would you want them to know? Probably more than the sentence or two most designers include in their portfolio. Write it up!

5. Fill it in I often hear from young designers just getting into the business who are concerned that their portfolios only contain school work. Is that good enough? In a word: no.

These days, there's no excuse for not creating your own real-world work, with or without clients. Better yet, find a community organization and volunteer your skills by offering to redesign their site. This has the added benefit of building your client relationship skills and your ability to work within constraints of audience, technology, budget, and schedule."

You can visit Jeffery's web site by clicking on the link below:

Jeffery Veen

There are hundreds if not millions of GOOGLE links to other resources for located at this link: Graphic Design Portfolio's

Here are some more resources for design portfolios:

Tips on creating your own portfolio web site

Portfolios and Gallery links

You'll need to do some research for this assignment.

Download the linked PDF file to see how one student completed the visual portion of this assignment:

Portfolio Layout and Sketches

Here is a PDF downloadable version of a web site created for a travel company for comparison

Travel Company Web Design Layout

Back to top


What Next?

Go to the Apply section of this lesson by clicking on the Next button below or by clicking on Apply at the top of this page. In that section, you will apply what you've learned so far in this lesson.


Back | Next