Website Redesign 2
Custom Website Redesign #2
2013 | Web Design & Content Loading
This website redesign began with a rough draft main template, designed by Nicholai Ronningen of Ronningen Design, which defined the basic layout and design direction of a typical page on the site. I used this page as inspiration for sketching and creating mockups for all the other major pages (home, blog templates, landing pages, etc.). I also made decisions about the finer details such as body copy font and heading styles, and I took the lead on sorting and selecting photography.
As the site development progressed, I loaded content for all the main template pages (the majority of the site), formatting text and processing/placing photos. Toward the end of development, I took the lead on testing the site across major browsers and devices.
Facility Tour (Main Template Page)
In this example of a typical page, I selected and placed all the photography including the subnavigation thumbnail images. I'm particularly pleased with the intriguing photo grids.
With the main template serving as the starting point, I created sketches at predetermined breakpoints for the important templates.
Click any of the following images to zoom in.
I based the mockup design on the foundational sketches. Approved designs were then passed on to the client's developers to build the site. As development progressed, I loaded content, formatted text and placed photos. The following are examples of finished pages.
Activities Landing Page
Here's a fun idea for subnavigation. I gave each activity its own illustrated block, combining photos with other graphics and artistic typography.
The client's website looks good and works well on all screens. During the design phase I sketched and mocked up the important pages as they would appear at standard device widths (320, 768, and 1280). With this guidance, the client's developers were enabled to create a fluid, responsive site.