Project Description
I was approached by Noel Geren and Scott Johnson in August of 2008 to create a redesign of their site, zoomrank.com, a site that gathers information on search engine rankings by keyword. The redesign was to include both layout and front-end markup that they could implement into a RoR back-end system.
Initial Designs
It was decided that I would provide 3 concept layouts, from there, one would be chosen and revised. Scott and Noel specified that they were looking for a “web 2.0″ look for their redesign.
I was provided with a list of elements that needed to be included on the home page, these were:
- Logo
- Login box (probably on top right horizontal to free up screen real estate from current design)
- Top nav
- Tagline integrated with image (”Automatically Monitor Your Search Engine Rankings”)
- 3 boxes with target markets (see below) and specific features and benefits for each
- 1 news/press release box
- 1 blog box (starting an SEO Analytics blog on blogger)
- Google, Yahoo, MSN official logos (attached)
- Testimonial
- Membership logos: Web Analytics Association, Search Engine Marketing Professional Organization (SEMPO) (attached)
- Payment logo
Since there was a lot of information that needed to be presented on the home page, I decided it would be best to break the information up into chunks that would be presented using a vertical hierarchy, with the most important information at top. Thus, the content in the three designs is presented in the same hierarchy, but with different visual elements.
Concept One
Concept Two
Concept Three
Finalized Design
Of the three designs, Concept One was chosen to be revised. Well, I say that, but it’s more like a fourth concept was created by merging elements of the three designs into one, based on client feedback.
Home Page
Interior One
Interior Two
Front-End Development
The front-end development part of this project called for XHTML and CSS (no JavaScript). I turned the finalized design into valid XHTML 1.0 Transitional mark-up and CSS 2.1 styles. 14 HTML files and 2 CSS files were then passed off to the client for server-side implementation.
During the process, pages that weren’t laid out in the design phase were designed “on the fly”, basically converted straight into HTML, then reviewed, revised, and updated.
After passing off the files, I worked with Noel to correct some styling issues that were appearing during implementation across different browsers. The site went live October of 2008, so the entire process took approximately two months from contact to completion.