Before and After – From MS Word to Pure CSS Design

A colleague and I were recently tasked with taking an MS Word document and making it “‘more interesting and readable.” Little did we know what we were in for. Here is a a sample of the Word doc (click on it to see a larger version):

My colleague, a kick-ass web designer, took this document and, using InDesign, turned it in to something amazing. See below (click on the thumbnail to see the larger image).

I have learned that you can design almost anything in InDesign…it’s the turning it in to a pure CSS design for PDF output that can be a challenge. With the exception of the Stage One row with the interrupted horizontal row (done in a table), this was done using CSS only.

Here’s the resulting page as PDF output from Flare. Again, click on the thumbnail to see the larger image.

I’d be lying if I said that it wasn’t hard. It WAS….but it pushed my skills in CSS to a new level and really proved to me that I can do pure CSS design.