AZEC Home Page Design

It has been an interesting week this week for my work on the AZEC09 design. Those of you that have followed via twitter or flickr are fairly up to speed on the progress. I will attempt to explain the progression in between the pictures. If there’s something specific you are wondering about, feel free to ask and I’ll be more than happy to respond. Be sure to check the post comments and responses on flickr. The discussions there are record of the realtime events that transpired to contribute to this design. We’ve got several more pages to layout but here’s the breakdown so far:

A couple weeks ago, I started out with a little design hunting for inspiration. I didn’t have much to go with in the form of design direction so the process was kind of grueling. I browsed through countless CSS galleries and sites suggested by those of you in the chat room during the live stream session. Honestly after the session, I felt pretty discouraged and had nothing going on in the brainstorm department. I dug in and started wireframing and building some sort of layout structure in hopes that some sort of inspiration would hit. It didn’t. I was spit-balling and it sucked. I did this through about 3 designs and nearly gave up. I managed to find one of them on my Dropbox restore to show just how bad I was spitballing. This is it:

I know it’s a wireframe, but it was just killing me. I started the header and just hated it. So I grabbed my iPod and took a walk. When I returned, I still had nothing but I was recharged enough to dig into the process again. Before I knew it, I was getting more and more excited about the design that was evolving. I was trying to mix web 2.0 feel with an Arizona slant as well as serve the purposes of getting the information out. There was a lot of info to present on the home page and it turned out that was the issue for me. Once I slowed down and tackled one info element at a time and worked my way down the page, placing in what seemed relevant, things started to take shape. I got all my thoughts on the screen and posted the first design for critique.

I was greatly inspired by the comments and the responses I got on twitter and it really got me excited to dig in and finish the design. Within a few hours, I had another design up on flickr for critique.

Before I got too deep into styling the modules, I decided to get some feedback on placement and layout. Knowing I had some more elements to add in, I was looking for some feedback on the functionality and layout as well as the delivery of the overall message. I got some good comments and they sparked some ideas, so I dig in again for v3.

v3 Brought in some image experimentation to see how they would play on the page in the modules. Again some more good feedback from the crew resulted in some more experimentation. This time I was getting close but again, got some great comments from friends of things I hadn’t thought of. So I tweaked the layout once again.

With this design, the layout was complete. There were just a couple lingering issues that had to be dealt with before it was sent off for slicing and coding. This layout allowed for just about everything we were thinking that would be added in the content phase (or at least I hope so anyway). I finished up the little list of things and shipped off the design.

Keep an eye out for the design as it is implemented. Like I stated in the beginning of this (long) post, I have some more pages to layout and will have some specific graphics to add as the site evolves, but I think we’re off to a good start. One thing I will be adding is a couple quick screencasts about some of the elements in this design and how they were made so keep your eye out for them as well. I’d love to hear your feedback/critique/ideas/suggestions or questions. Use the comments below. I can’t wait to hear what you think so far.

Brent