Professional Kitchen

They say that there is an exception to every rule, and that certainly set the mood for the development of StylingFood. Often the company logo or similar type image is placed along the top left, since that is often where the eye tends to go first. In this case, a large masthead graphic was used that stretched along the top, extending down on the far right side to introduce the "by Professional Kitchen" subhead, and then lead down into the main navigation. All of this went into the overall goal, to create a feel reminiscent of a high-style magazine cover combined with an art gallery feel.

And of course, the main navigation is usually placed horizontally along the top or vertically down the left side. In this case, the main navigation is actually made to take on a more secondary role. The primary focus for the site will be within the Portfolio section and sub-sections. What would typically be considered the sub-navigation found on those pages, actually takes the position of left side vertical, the more common main navigation location.

A very subtle textural feel was given to the overall page background, which based on the recessed feel of the main content area, actually takes on more of a foreground presence. Within the center, throughout the site, one main image is given focus, itself in a framed area like a painting on a wall. A recessed feel was given to this area and the sense that the main image projects out from the framed area, giving the main image a sense of importance and a "look at me feel."

A small Flash video was used on the home page in place of the main image to give the visitor a bit of a glimpse of what is to follow, while also further emphasizing key services provided by Professional Kitchen. In case a visitor doesn't have the Flash plugin installed on their computer, the regular pears image is shown instead and the visitor experience is still a positive one.

The main Portfolio page provides a sub-navigation with descriptive titles and small icon photos. The icon photo was also used as the main image for each sub page to help the visitor navigate the sections.

The interior gallery pages of the portfolio provide visitors an array of related photos. Each thumbnail can be enlarged, replacing the center image, which itself can be further enlarged to a popup window. Different sections had varying numbers of images. In some cases, the long list of images, especially on smaller monitors, would have required the visitor to click the thumbnail, scroll back to the display window, and then scroll back down to click on the next thumbnail. Instead, a scrollable window was used to hold all images, keeping the scrolling to a minimum while also adding to the consistent size and look of the site. The main image was placed last in the thumbnails, allowing the visitor to return to the first image while also allowing more unique thumbnails to appear.

The large popup image windows actually serve a dual purpose. They obviously make the images larger to see more detail, but they also provide a view of the full image. A gallery like feel with consistent sized images were used throughout the main pages of the site. While this uniform feel added greatly to the feel of the site, it was equally important to be able to show off the full images since they illustrate the work performed by Professional Kitchen, which is of course the site objective.

A printer style sheet was also created for the site. The gallery photos would have only been visible based on what was visible on the screen, and the large header would have taken up and wasted a considerable amount of the printed page. By using a separate style sheet for printing, unnecessary elements like the header graphic and navigation could be pulled out, and all of the thumbnails could be shown. Additionally, the thumbnails now all run along the top, further utilizing the printed page space to greater efficiency.

Images often need additional work before being used in a website... perhaps a touch-up, lighten, darken, adjust color, or sometimes just shrink the file size. However, Polo Earth was a special modification for the About section on StylingFood. A prime interest of Nancy's is polo and she wanted to add a little whimsy to this section by laying in her playing polo on one of her images.