Errol Stewart, Personify Design

Project Overview

This project is a website template and available online only for Microsoft Expression Web users. The purpose of this template is to provide other web designers a quick and easy method of creating an online portfolio and populating it with their work. I set out with the mindset that it needed to be both visually stunning and unique. After all, this template needs to be worthy of the most experienced designers, as well as novices and students. As such, I went with a heavily textured and detailed "work-in-progress" theme, characterizing a personal notebook rather than a traditional public portfolio.

The most interesting feature, however, is the fact that this web template uses ASP.NET controls for the content management system.

Design is form and functionality living together in harmony. In any designer’s portfolio, the focus should be on the work itself. With that in mind, I built the presentation around this idea, complimenting it. In this design, each thumbnail of every portfolio piece is extravagantly given attention.

Sketching And Concept

This is the "Work" page, or the main portfolio page, where a gallery of thumbnails representing projects is displayed. As the site owner adds new projects through the content management system, this page will be automatically updated. When visitors move their cursor over a thumbnail, a "balloon" will appear giving a brief summary of the project. Upon clicking this balloon or the thumbnail, the visitor is then taken to a more detailed page about that particular project.

This is the "Details" page a visitor sees upon clicking a project thumbnail in the main gallery as mentioned above. A comprehensive description is written on the left, while a large screenshot is displayed in the center. When visitors click the smaller thumbnails on the right side, a larger version of that thumbnail will appear in the center. Arrows at the top allow for easy navigation to the next project, without having to return to the main gallery. Again, all this functionality is automatically generated when the site owner simply adds a new project and images to the master XML file.

Design process

First, I needed to figure out which file formats were appropriate for the various elements of the layout. Due to the complexity of the textured background and the fact that I wanted the site to dynamically center, I chose to make the main content area (notebook cover) a 24-bit PNG with an alpha channel.

The background image was another tricky execution. Because it’s composed of one very large textured image and overlaid with a smaller repeating image, I needed to make sure the whole thing repeated seamlessly.

The site is 100% XHTML. Since it will always have fixed height and width, I absolutely-positioned everything inside the main relatively-positioned container.

Building the website using ASP.NET

Certainly the most interesting UI feature of this site is the Information Balloon, which provides a brief introduction to each project as a visitor rolls over their respective thumbnail.

To achieve this functionality, we used ASP.NET to reference the master XML file and pull relevant data into the balloon dynamically.

As the UI Designer and XHTML Developer of this project, I used Microsoft Expression Web to write the XHTML, then simply passed it on to the ASP.NET Developer, who used Microsoft Expression Web as well.

The contact form is also an ASP.NET control. Utilizing the power of CSS, I styled the text fields and menus of the form to match the design aesthetic.

Final Result

The result is everything we expected. We’ve managed to create a high quality web portfolio aimed specifically at the professional designer who may not have the time to create a portfolio from the ground up. Our unique content management system allows the portfolio to grow with the designer’s resume, and frees the designer to focus energy on the most important aspect of his or her career: their work.

 
원문 : http://www.microsoft.com/expression/community/spotlight.aspx?key=designportfolioproject