Learn basic principles of website design.  Home Web Design Basics Design Principles Designing Portfolio Section (Exclusive Tutorial)

Designing Portfolio Section (Exclusive Tutorial)


Preparation

Don't worry about the content. Let's assume that you have already got something to show and we're now going to arrange all this fast and correctly. For myself, I chose the sexiest image of a portfolio - the shape of a notebook. You are free to create and contrive for your own pleasure though.

We also need

-A paper sketch or a clear idea of your future site - really desirable. - A set of PhotoShop brushes (retro and grunge) - Sketches of real works which we'll put into our design to understand what is what. - 10-12 hours of free time.

Creative work

Most of designers claim you need at least a week to create correct and well-thought-out portfolio design. They suspend their projects for "re-design" and give up updating them for a half a year pleading that "design takes time". This is not really true :) Let me spare 10 working hours and see what I'll get as a result.

The first two hours:
Here I've outlined the basic proportions of the page, made general layout and tried to give all the sections their place. As you can see from this picture the time didn't pass in vain - we now got a complete layout of the page instead of (and thanks to) paper sketch to the just in two hours.

We're set on this stage. Let's see what's coming next. So:



Work with the main objects. Now I'm busy working winth the basic element of the sketch - the notebook. I've drawn several fastening elements and made the pages, I've prepared and placed the main elements of navigation and started to arrange them.









This is what I've got after 7 hours from the very beginning.




Go on working with details/elements/small ornamental patterns in the same manner and don't forget to catch to the balance of the objects and the project as a whole. I also have the title of the page and another elements besides the notebook. But we won't stop here. We rather analyze the general approach, the idea. We'll thoroughly examine the details in another article:

Fine tuning

Designing such projects is always a very complicated task. As a rule people make three main mistakes:

- Everything is piled up
- Everything is too simplified.
- You've completely changed the topic.

Generally all three mistakes have the common root - instead of correct and convenient representation of content they lead to their own design, which aren't necessarily appropriate for your goals. Try to avoid such moments in your work.

The final touch


In my design, upon finishing everything, I go through all the elements one more time to distort them and make them look "older". I put abrasions here and there, add some asymmetrical elements that bring the life and diversity. You can see that all here enlarged:











Never miss this last stage - that's exactly the thing that makes your site will look vivid and interesting. Normally I spend several hours to check everything up and inspect thoroughly.

Well, the whole work was completed in 10 hours plus we've spent some time to arrange the content in the prepared design, but that's just trifles;)

You can see the final version here:

Designing Portfolio Section (Exclusive Tutorial)
Click to enlarge


About the Author:

Click to Visit Author's Website

Dustin Kein is an editor at Web Design Library. He's in charge of selecting materials for the PhotoShop and HTML sections of this site. From time to time Dustin contributes some of his tutorials to WDL in order to cover the most actual topics for WDL visitors. Besides this, he's an active forum member whose posts are always helpful, concise and timely.

Author's URL: Reiven
Learn basic principles of website design. More Design Principles Tutorials: Featured Materials | Fresh Materials | Website Templates

Reader's comments
comments daniebanes June 14, 2006 says:
You seriously shouldn't call this a tutorial!
Reply
Add comments to "Designing Portfolio Section (Exclusive Tutorial)"

Captcha