Making Lemonade

December 28, 2011

There have always been two main families of thought when it comes to basic website layout: 1) the design stretches with the page or 2) the design is centered in the width, but doesn’t stretch itself. This page is sort of a hybrid between the two which is becoming increasingly common, much like maltipoos.

The top and bottom background areas spread to the width of the page, but the actual information stays centered within the page. This approach is nice for the developer because creating an entire site that stretches and changes size based on the page width is very time consuming, while one that just centers itself can look tiny and insignificant on these huge screens available today.

lemonstand website

LemonStand also incorporates some popular design ideas. The top area is split into a bar for the logo and a bar for the big pic. Just a sidebar about the links – They are floating in a rather unusual area in the top bar with the logo. It makes them stand out so you notice them, but it is a little weird. They pull it off because of one very important rule in design – it lines up with other elements, namely the bottom of the logo and the end of the page on the right side. [end of a kind-of-long sidebar]

One of my favorite things about this website is the area below the pic. Usually, this would start the main page area, but instead they use a nice little “rotating” javascript to highlight the specific awesome things about their software. I like everything about this; the top of the grey going out to the edges of the page; the nice shadow spotlight details; the white/grey text; the highlighting of the screen shots; and most importantly, the zoom-in of the screenshot when you click on it. (Notice the subtle humor on the screenshots).

I’ll be honest – overall, I think this might be my favorite website I’ve reviewed so far. Nicely done, LemonStand, nicely done.

Join the Discussion

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>