DeGagne Hyundai

Our team recently launched the DeGagne Hyundai website and I wanted to share one of the design features I think looks pretty cool. 

First, here’s a peek above the fold if you didn’t click the link.

In one word, I find this site visually striking. The diamond shape (SVG, and almost CSS clip paths) has only recently become possible as we dropped IE8 support. It feels fresh and unique, I really love it.

Working with franchises is fun because the photography available makes it easy to create compelling designs. A challenge comes from the opposite however; sometimes the user provided inventory photography can sometimes make the front page featured inventory feel a bit out of place among pristine designer tweaked lucious shots. That’s how it was feeling with this client site; the rectangle photos felt out of place among so many diamonds.

My solution for screens larger than 1200px (for positioning reasons) was to add a couple shapes to augment this. First, I added a diamond behind the image. Not bad:

Screen Shot 2015-09-25 at 14.36.22

Things started getting exciting when I overlayed a box in the bottom corner though! Here it is with an out of place red:

Screen Shot 2015-09-25 at 14.36.34

When made white it takes on a completely different feel:

Screen Shot 2015-09-25 at 14.36.45

Check that out! Some kind of illusion kicks in for me that makes this standard user generated photo pop. The white square is no longer its own element, but connects the background square in a way that makes it look like some blending mode it happening. My brain sort of wrestles to figure it all out in a way that’s pretty fun.

Leave a Reply

Your email address will not be published. Required fields are marked *

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>