Website Redesign 1

Custom Website Redesign #1

2013  |  Web Design & Content Loading

 CLIENT   Ronningen Design   WEB DESIGN & CONTENT LOADING   Garison Plourde   DEVELOPMENT   Steve Meisner   PROJECT OVERSIGHT   Nicholai Ronningen

CLIENT  Ronningen Design

WEB DESIGN & CONTENT LOADING  Garison Plourde

DEVELOPMENT  Steve Meisner

PROJECT OVERSIGHT  Nicholai Ronningen

Project Overview

I was the lead designer for this website redesign — responsible for front end design with client oversight. I sketched a variety of pages along with a style tile — a panel of page elements and styles that demonstrates the proposed design direction.  These were the foundation for the mockups I designed, providing direction to developers to build the site.

Once the site development was well under way I used the client's custom CMS to load 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.


Sketches

After the initial design interview with the end client, I had an extensive collection of notes and a general idea of what website styles and elements would be suitable. This gave me a foundation to sketch a main template page, and eventually all the types of pages on the site. After a few rounds of changes I refined the collection of sketches, represented in part below. In tandem with the style tile (not shown), these were presented to the end client for review.

Click any of the following images to zoom in.


From Sketches to Mockups

After the sketches were finalized I used the style tile, together with the sketches, to design corresponding mockups.

Home Page


Main Template

mainTemplate1280.jpg

From Mockups to Built Pages

After a few rounds of changes I handed off the approved mockups to the client's developers to build the site. Below are a few page examples.

Home Page


By the Numbers

I designed the main column graphics on the By the Numbers page to highlight interesting statistics.


Blog Post


Responsive Design

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.