For a web-designer, the portfolio website is not only a portfolio but also an example of their designs. The subtle balance between putting the focus on the portfolio elements or putting it on the website design, is very difficult to achieve. There are some tricks to the trade, as displayed by the following grab-bag of portfolio sites. These websites are selected to demonstrate specific points, they’re all great and have some fantastic design techniques and in each portfolio have some shining quality.
Grzegorz Kozak
With the single column portfolio being halfway down a very, very long website, the designer has used a curiosity device to keep you scrolling down. Very clever.
Kyle Meyer
An example of clean grid design with a bit of typography. Perhaps a little too clean. The large spacing on the title pushes the portfolio elements below the fold on a 768px display.
Nico Hagenburger
Clean design using a carousel above the fold. Portfolio contents then continue vertically. The dynamic element of the carousel adds to the interest of the website. An initial cycle of the carousel on load makes its purpose clear.
Justin Wanstall
A little bit of a dynamic banner, plus some color catch the eye. The portfolio is in a four column grid format using crop-shots rather than screenshots.
Cozette Lehman
Simple stylized design without clutter. The designer’s own style lends itself to an uncomplicated, even stark, website. The first row of the portfolio contents is above the fold.
Sam Taylor
Using some typography and a gentle texture, this uncluttered website maintains the user’s curiosity. The first row of a three column portfolio matrix is above the fold. The designer also attempts to use humor to maintain interest.
Tres Interactive
An example of the simplest form of portfolio, where the samples speak for themselves and the designer has minimized all other aspects of the website. Focus is left on a 4×2 grid of screenshots.
Dom Design
Another simple portfolio. Here the designer has used a mouse-over highlight, but until the mouse-over occurs the website has a washed out look.
Monk Design
A portfolio for a graphic designer rather than a web designer. The web design takes back seat to the portfolio elements.
Jeremy Mitchell
Choosing a dark, gently textured background, the designer has given over the site to a vertical gallery style portfolio. Minimal website to set off the portfolio contents.
Shloka Pics
With a significant banner and introduction, the first elements of a one column portfolio grid just make it in above the fold. With a single column the designer is able to include additional information, aside from the graphic.
Design 977
An impact site, using a bold color and sacrificing half the screen. Combined with a little typographic design of the logo this design makes big claims. The four column portfolio grid offers little detail, but you feel obliged to click through.
Ousmane Ndiaye
Textures and breakouts lend interest and help direct the flow of the website. A huge single-element carousel forms the portfolio. Simple arrows on either side control the navigation, maintaining focus, but thumbnails might make it clearer there is more on either side.
Giorgio Molinaro
Bold typography grabs and holds you. A click through is required to the portfolio, which uses a large vertical accordion. The accordion is so large the next elements are not visible above the fold and navigation is not immediately clear.
Eric Steuten
With crop-shots rather than screen-shots, forming the portfolio grid elements, they stand out clearly. This allows the designer to be more creative in the web design, without detracting from the portfolio.
Deren
Perhaps more functional than pretty, this website uses a highlight mouse-over, which only fades the other portfolio elements when the mouse-over occurs. Better than #8 where everything is faded until mouse-over occurs.
Jonahl
A dark background website. An example of simple grid design.
Vandelay Design
A design shop portfolio, this website uses a textured background for a little depth but otherwise does not detract from a big two column portfolio grid. The elements being double height screenshots.
Lelia Thomas
As exemplars, the designer has used textures, typography and grid design. A single column portfolio grid leaves room for a large tag cloud and navigation on the right. Note the column width ratio.
Kyle Haskins
With textures that do not detract from portfolio, the designer has given over the full width to a single column portfolio grid with each element being a large screen shot, title, a little information and links.
Gummisig
Large margins give a good framing to a two column portfolio grid, but also caters for smaller window browsers. A header graphic guides the eye and creates a contrast to an otherwise minimal design.
0 komentar:
Posting Komentar