prototype_darkprototype

I tried a couple of different gradients for the background as one can see in the above screenshots. I wasn’t too happy with the blackish on the left, but I’m not sure the new gradient has enough contrast between text and background on the far right. =/

While a much of my mock-up is more-or-less self-descriptive I wanted to try to highlight some aspects of the layout and other design elements.

The layout is fairly simple and on observation one should see a header with navigation, content area , and footer.   The content area is further subsidivded into lefthand and righthand sides. I envisioned the LHS containing a featured client, product, or service carousel such as seen here while the righthand side is intended to showcase a specific current product or service. The logo, navigation, and RHS of the content area are all aligned at the right edge. There is a fair size gutter, perhaps even a bit too big, between the LHS & RHS of the content area. I was having difficulty finding a balance between text, simulated padding, and simulated margins.

I’m a bit of a fan of rounded rectangles and such an effect can easily be achieved in HTML 5 with a little love from CSS3. While it is a bit difficult to see immediately, the containers in the content area actually use a translucent background.

On typography, I stuck with san-serif fonts as they tend to are widely cited as being easier to read in electronic documents and they tend to look fairly professional. I used a bit of increased spacing in the menu to draw it out a bit and make it less crowded. Typography was actually one of the more difficult things to simulate accurately given my editor of choice’s limited support for text relative to, say, Illustrator.

All in all it was easy to get an idea of what I wanted to do though I’m certain I’d tweak it a lot more before I was happy with the outcome on the web. I was a bit hesitant to pursue too much detail given the difficulties of translating a mock-up to a working page though some say I’m obsessed with details so that may not be a bad thing. I got what I think is a decent layout put together in a fraction of the time it would have taken to actually code, which I think is true to the spirit of prototyping. =D

Leave a Reply