The LexisNexis corporate site went through two redesigns and I was able to be part of both projects. They involved the creation of:
- HTML Mockups
- Creation and optimization of images
- Interaction design
- Browser testing
View HTML mockups/prototypes
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.
|Wireframes||Visual Design||Interaction Design||HTML + CSS||Scripting|
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 ;)
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
- A bottom
text-shadowon 'normal' state
- A top
text-shadowon 'active' state
- Repositioned the up/down arrows on 'active' state
I used Fireworks to create the designs =}
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 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