July 16, 2009 - 5:29 PM
Recent Work: MHN Construction Website Redesign
The following is a behind the scenes look at my process including images for my sketchbook and mockup options that were not used. The final homepage concept was completely reworked (look & feel, functionality) near the end of the project and below I explain why and show the original concept.
Project Description
Website redesign for a residential high-end remodeling and construction company with the goal of featuring larger images within an easy to navigate photo gallery.
My Role
Interface design, front-end development (css/xhtml, javascript, flash) and everything else (logo and logotype, tagline, photo processing, analytics)
Features & Technologies
- CSS/Xhtml standards-based css layout
- Valid XHTML 1.0 Transitional via W3C Markup Validation Service
- Valid CSS level 2 via W3C CSS Validation Service
- Passed Section 508 standards via HiSoftware CynthiaSays
- Javascript based homepage animation - Mootools Fx.Elements
- Flash based photo gallery - slideshowpro (flash required to view photos at the moment until a no flash/no javascript solution is created)
- Easy to update photo gallery with slideshowpro
- More accessible than previous 100% Flash based site
- More findable/search engine friendly
- Integration of Google Analytics to monitor site and adjust accordingly
SKETCHES - Initial ideas, layout, navigation, scenarios, homepage animation
MOCKUPS - look and feel options
ORIGINAL HOMEPAGE CONCEPT - The original concept was created in Flash and consisted of a preloader animation (image 1) followed by the main animation (image 2 - a grid of cropped images) where the user could hover over each portfolio section to reveal the larger image (image 3). I felt the Flash solution was too complex and bulky. When I came across the to Mootools Kwick box solution I knew the simpler functionality was a better direction and I redesigned the homepage layout to match.
View more sketches and mockup images on my Flickr page
Post Your Comments