Design « Honu Studios LLC Blog

Archive for the ‘Design’ Category

The Windmill Winery

23 March 2010 by Bret

A few weeks ago we embarked on a site redesign for The Windmill Winery in Florence, Arizona. We wanted to try and bring the flavor of the local area to the look and feel of the new design.

Having never been to The Windmill or even Florence, Arizona we learned all we could from pictures and talking with the client. We got a good sense of the atmosphere and history of the property and the historic barn which is the visual cornerstone of the winery.

The Windmill is more than just a winery though. They host a number of events and weddings throughout the year. So the site needed to reflect that and be more than just about wine. We really wanted to give visitors to the site a sense of stepping onto the Windmill property and feeling the upscale rustic setting.

For the design we went with the idea of a wine label. We wanted the user to feel as if they there looking at a label on a bottle. It’s very important that the user understand that the Windmill is a winery which is perfect for their event or wedding. Rather than a place to have a wedding that also does some wine. There needed to be a clear message and brand established in the redesign.

This message distinction was especially important when it came to promoting and marketing for weddings. People want to have their wedding at someplace unique and special. To say, “We do so many weddings a year so you should check us out,” doesn’t exactly sell the property and features. Instead we changed the message to be about the winery and the location that is perfect to host a wedding.

Check out the new Windmill Winery site.

The “AT” Video Sketch

12 February 2010 by Brian

“Practice makes perfect” are words often uttered in locker rooms and on the sidelines of losing teams. However in our case, we’re uttering them in front of a computer screen and not because we’re losers. It’s just a really applicable phrase.

In any creative endeavor, especially creative ones that put food on the table and pay the bills, practice is essential, necessary, and always worth the time invested. I don’t think I’ll ever feel the sense of having “arrived” creatively. In many ways I hope I never do. There will always be something else to learn and conquer, always.

This is a Test

The below video named “AT” is a small side project aimed at practicing some 3D and post-production techniques. I took a list(current at the time) of our Twitter followers and used their usernames as textures and particles. I found Dave Trautz through The Wire and he graciously agreed to compose a score I could work with. Dave has a ton of talent and I hope to work more with him in the future.

Moving Forward

Stay tuned, more side projects in the works.

New Blog Uses HTML5, CSS3 and the BluePrint CSS framework

8 February 2010 by Bret

It seems like we’ve been doing a lot of blog designs the last couple of weeks. One might even dare to call it a theme or a trend. Pretty soon we’ll be in need of a jingle. Just so we don’t disappoint, we want to tell you about a new blog we just finished for ActiveWrap, Inc over at blog.activewrap.com.

The new ActiveWrap blog runs on WordPress and was coded with HTML5 and CSS3. We took the design of ActiveWrap.com which I did in 2007 and brought it up to date. The original site design used XHTML transitional while the blog uses HTML5 with many of the cool new tags like header, footer, article and aside.

The Problem

When I did the original design I set the width of the site at 900 pixels and created all the graphics to match. You would think I would have used the same structure and made it easy on myself…nope. Instead I decided I wanted to use the BluePrint CSS framework that we’ve been using for awhile. I like the BluePrint framework because it makes structure really easy, and it includes some nice typography and form styles.

The problem with switching to BluePrint was that by default BluePrint is set up at 950 pixels. Thankfully, they have a nice Ruby script that allows you to customize the width and size of the grid columns so that you can essentially make the site whatever width you want to. So after doing a little math I was able to setup BluePrint to do 24 columns, each 28 pixels wide and a 10 pixel gutter, that brought the site width to 902 pixels.

For the geeks or anyone who cares, the formula I used to figure out the perfect width was: (xy) + ((x-1)z) or where x = 24 for the number of columns, y = 28 for the width of each column, and z = 10 for the distance between each column all in pixels or simply (24 x 28) + (23 x 10) = 902

I didn’t know at first if I was going to be able to get away with being only two pixels short or not on the graphics. I should have known better. A couple pixels short might as well be a football field. So, I had to go back into the source files and extend them by 2 pixels, all that just to use BluePrint. But in the end I think it was worth it.

Finally, in addition to some rounded corners here and there, I decided to put a little drop shadow on the header and content area just to add some CSS3 interest for the kids.

Overall the design ported over pretty nicely from XHTML to HTML5 and from Joomla 1.0 to WordPress.