JianiLuWebAnalysis

Francesco Bertelli: http://www.francescobertelli.com/

The website features Francesco Bertelli, an Interactive Director's, portfolio. Pieces range from websites, interactive web pieces, mobile interfaces, and logo designs. His pieces are presented in a calendar like format, organizing each piece chronologically within his career timeline starting from 2001. The goal of the site is simply showcasing his work and variety of approaches to different client’s needs. As well as an overall grasp of the improvements made over the many years. The website is based on a solid grid divided into squares. Each square acting as a link to each series of his work. The colour pallet of the website is thoroughly unified, using a pale grey, white and a couple of shades of aqua. With the limited colours, the aqua stands out and is effective in highlighting certain elements on the site. For instance, each square that has been clicked on will diffrentiate itself from the rest with a thin “X” marked across it, similar to how you would mark the days on a calendar. The typography used is a thin courier face that is used in limited manners, indicating only the title and numeration of each link. While a short block of text accompanies each project, the emphasis is clearly placed on the visuals and portfolio pieces. Together the colours, type and composition all work together to create an interesting visual experience, while still being able to fade out when the emphasis is on the portfolio work. The content is structured through a very defined grid, but offers a very effortless flow from one element to the next. For instance, when selecting a square/link on the main page, the page will automatically opens a slideshow that positions itself to fit the entire page. It makes good use of the “fold” and blocks out any other distracting elements that may take away the experience from the slideshow. From here, the navigation is very simple with a “prev” and “next” link that guides you through the series of work and even the entire portfolio. A solid blue divider divides the slideshow from one project to the next. What works really well here is that the slideshow is placed in between the squares and therefore allows you to scroll up or down from it to quickly access the other links and pick and choose which pieces you’d like to view. Overall, the website is highly interactive for a portfolio that simply showcases work. It allows the user to access the content through many entry points and does so with a nice flow.

Wing Cheng: http://www.wingcheng.com/

This website features Wing Cheng's personal portfolio, displayed in a playful accordion fold out of her sketchbook. It uses coherent visuals, all hand-drawn like sketches that. Each page documents a quick sketch of what the project was and a short blurb on the details. Clicking on the sketches brings up a lightbox that allows you to browse through the details in each series of work. The typography is well incorporated in the design, a hand written like feel that matches that of the sketches. What works really well is the navigation on the right that divides the different categories the artist has worked in. Clicking on them auto-scrolls to the specific part of the sketchbook that highlights work under that category. It's great that the contact section wraps up the entire portfolio and is the last page of the sketchbook. The contact form allows you to type in live text within the sketchbook-like visuals. Overall, the integration of photographic elements and hand-drawn elements work really well and give off a sort of intimate feel about the site that provides a really personal experience of viewing the artist's work.