Web UI Asset Creation - Listing Page Full Implementation

Using the provided Adobe Illustrator high resolution designs, create web assets for three (3) pages in a unified scheme and iterate with us.

Application Overview

We provide a web application for doctors to manage workers' compensation cases. We are doing a UI update -- we have a set of designs from a graphic designer in Adobe Illustrator. We will provide a set of existing static HTML pages / CSS / JS from our application and the Adobe Illustrator mockups as starting points.

Deliverables

Image assets - extracted from the AI files, arranged in directories, spliced as needed into components, optimized for type (png/gif/jpg) with transparency set as needed.

Static HTML files with well-structured DOM elements utilizing classes / ids for good CSS selectors for rendering. DOM should be valid and render in the current versions of Firefox, Chrome, IE and Safari. Highlight any changes to the DOM that are needed in our current DOM to facilitate good clean rendering.

Master CSS file for all pages to share based on classes / DOM structure / ids in HTML. Weigh more heavily on specifying by class and attributes and less on explicit images where possible. We prefer to have the CSS based on a framework (bootstrap, foundation, etc.) - please recommend and use one or explain why it’s better not to.

JavaScript file[s] for interactivity within the pages. Interactions desired are explained in the AI documents and include things like show / hide, hover, menus and submenus, popups. We prefer to have the JS based on a framework (currently using raw jQuery) - please recommend and use some or explain why it’s better not to.