Refresh for a Re-Branding Agency

While I was part of the web development team at FKM, I took part in the creation of their new website. For this project, I was responsible for:

• Initial design concept
• Front-end template development
  • html markup
  • css
  • javascript utilizing jQuery
• Working with Flash developer to integrate video players, slide shows, and other Flash elements
• Working with PHP developer to integrate templates into custom-built framework/CMS

More detailed description to come…

Vision Prepaid

While part of the web development team at FKM, I took part in the redesign of the Vision Premier website. My responsibilities included:

• Research form conversion best practices and make recommendations
• Front end development
  • html markup
  • css
  • javascript utilizing jQuery
• Working with Flash developer to integrate Flash components
• Working with their internal team during implementation

More detailed description to come…

Think Green – Think Waste Management

While part of the web development team at FKM, I worked on several revisions and additions to Waste Management’s ThinkGreen.com website. A few of my major responsibilities were:

• Front end development
  • html templates
  • css
  • javascript utilizing jQuery
  • html emails
• Working with Flash developer to integrate Flash components
• Light PHP development and alterations
• Working with a senior PHP developer to integrate templates into custom-built PHP framework
• Working with web analytics expert to maximize tracking data

More detailed description to come…

Every Woman, Every Baby

While a part of the web development team at FKM, I worked on the redesign and expansion of the Womans Hospital of Texas website. My chief responsibilities were:

• Front end development
  • html templates
  • css
  • implementation of jQuery plugin
• Work with outside team of developers to integrate html templates
  • document inconsistencies between our version of the site and theirs
  • work within their environment to resolve styling and behavior inconsistencies

More detailed description to come…

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.