Prototype, Hybrid HTML/CSS/Photoshop, Web app, advanced search

A prototype/mockup/"screenshot" that I was designing.


A hybrid HTML/CSS and Photoshop prototype. I created most of this page in HTML/CSS, but, some alignment aspects of this screen were taking too long to troubleshoot in HTML/CSS. So I took screenshots of them and used Photoshop to create the alignment that I wanted.

Creating the header, most of the contents, the table, and even the search form components using HTML/CSS was pretty straightforward, but getting all those search form components into columns and lined up correctly with their gutters, etc. was a challenge, with some strange interactions between the floating DIVs that we were using in our design pattern library.

So, rather than wrestle with them any longer, I went to Photoshop to compose the search form components into the columns and alignments that I wanted, then just edited them into an image to be included into the HTML for the rest of the page.

I have tried to remove or replace information in the actual prototype that might serve to identify too readily the company and product for which this work was done.

Comments are closed