Ricardo Zea. Web Designer in Dayton, Ohio

LexisNexis

http://www.lexisnexis.com

The LexisNexis corporate site went through two redesigns and I was able to be part of both projects. They involved the creation of:

  • Wireframes
  • Designs
  • HTML Mockups
  • Scripting
  • CSS
  • Creation and optimization of images
  • Interaction design
  • Browser testing
  • SEO

View HTML mockups/prototypes

Other projects

  • LexisNexis Resdesigns
  • LexisNexis Solutions Page Design
  • LexisNexis Search Results Wireframe
  • LexisNexis Megamenus Designs
  • LexisNexis Category Page User Flows
  • LexisNexis Leadership Page Wireframes
  • LexisNexis Preference Manager Wireframe & Design
  • LexisNexis Preference Manager HTML Page

Workflow

It involved working together with off-shore developers, where once a piece was finished (designed and implemented in HTML+CSS) it was then handed off to the Web Leads (Project Managers) and they would engage the developer(s) for programming and .NET implementation.

Responsibilities

Wireframes Visual Design Interaction Design HTML + CSS Scripting
80% 80% 100% 90% 90%

Wireframes

The initial wireframes were created by the ad agency BBDO, but once they handed off the project to our team, I was responsible for the creation of any remaining/needed wireframes.

Wireframes were created with Fireworks. Yeah, Fireworks ;)

Visual Design

As with the wireframes, after BBDO handed off the project I took over the design work. I made many improvements to their designs.

For example, the 'active' state of the items in the top nav bar were plain red boxes with white font. I added:

  • A thin and very light white line via box-shadow:inset…;
  • A bottom text-shadow on 'normal' state
  • A top text-shadow on 'active' state
  • Repositioned the up/down arrows on 'active' state

I used Fireworks to create the designs =}

Interaction Design

Every interaction on lexisnexis.com was created by me, from the dropdowns in the header and megamenus, to the initial scripting of the Product Finder page, to the Historical Milestones widget on the About Us page, to the Tabs and Accordions in the Contact Us page.

HTML + CSS

I created about 20+ HTML static mockups that the developers used for implementation of the pages on TeamSite (the CMS lexisnexis.com is built in). The HTML mockups were created in HTML5.

I used Dreamweaver for the markup, CSS and JavaScript.

Scripting

I used jQuery for this project.

The vast majority of the scripting related to UI was created by me. However, envetually the off-shore developers took over any scripting and all updates/edits/new scripts were handled by them.

You can see the custom-scripts.js JavaScript file here.