In case you haven’t noticed, I launched a brand new design for my Drupal development website recently. I felt that I wasn’t really showcasing my Drupal talents with the previous ported design that well, as it was done by someone else and was not unique. This time around, I teamed up with graphic designer Edwin Koudijzer. I know him more by his alias Eddiebouncer, which he also goes by on Twitter, although under a different spelling. It turns out there are 2 Eddiebouncers. Eddie and I have collaborated on a few projects before through a loose knit group of Drupalers from a couple years ago. The design he came up with turned out to be amazing, so I worked day and night to get the new design up as soon as I could. Without Edwin’s help with the design, this new look probably would not have happened quite yet.
The initial brainstorming sessions were quite simple and led to some great ideas. I wanted the site to have wooden elements, while still having a technical feel to it and incorporating some newer web technologies. We bounced some ideas off of each other and Eddie got to work on the homepage design. Eddie had already created me some cool logos and other branded images for my new business, so several of those elements were incorporated into the design as well.The final design incorporated a Jquery slider powered by Dynamic Display Block module which is displayed on the homepage, the use of custom template files in the theme, and the Context module to get certain blocks to display in multiple positions. I originally was going to use the Multiblock module, but opted for Context as it seems to be a better solution for what I am doing with blocks on my site.
After I got the PSDs from Eddie, I created the site in an HTML/CSS layout first. This allows me to get a good feel for how the design should be laid out prior to having to do any Drupal related code. I also find it much easier to create a theme in HTML and CSS, then “convert” it to a Drupal theme basically. I wanted my theme to be as standard compliant as possible, and be very customizable, so I decided I would make my theme a Zen subtheme. I created the Zen subtheme by getting the HTML and CSS hammered down. Then I basically imported my HTML and CSS into a new Zen subtheme I called ArborEddie. My new ArborEddie theme was up and running in about 1 day after I got all the images sliced. Once I got the HTML and CSS into a Drupal theme, I added the ArborEddie theme to my Unfuddle account as a Git repository to make future updating easy and so I knew what version of the code I was working with. At that point it was time to Git pull it down to my dev server and get to work on some of the main landing pages.
Once the homepage was completed, I needed to work on some of the customized landing pages that Eddie had in mind for the site like the Drupal services page. These pages were a bit different in design from the homepage, and have a right sidebar which has an interesting depth effect to it. That was one other main thing I asked Eddie for was to make my site look like it had depth. Eventually I will probably clean up the theme a bit more to use just a single page.tpl.php, but currently each main landing page has it’s own page.tpl.php file to get the most customization out of the theme. The homepage also has it’s own page-front.tpl.php to allow for the custom look it has.
One of the cool design ideas that Eddie had was to incorporate the use of icons for main focal points of the site. I think that they worked out great and really gives the site a Web 2.0+ feel. I still have a bit of work to do on the theme to finalize it, but it looked so much better than the design I launched Arbor Web Development with that I had to change it immediately. One main element that is missing is a mouseover color for the main navigation, but the wooden texture that Eddie used should take your mind off of that oversight for now. I will post another update about my new site design once all of the final changes have been completed so you can see the final result. It was a lot of fun to work on the new design and I put in many hours of hard work, so I hope you enjoy it. Please let me know if you see any issues with it on your particular browser. I am trying to get all of the browser inconsistencies that remain taken care of as I find them.
Eddie is also my go to guy for graphic design now, so if you need a Drupal website designed or even an HTML website to look professional and up to date contact me and we can start brainstorming sessions for an amazing new design and theme for your Drupal website. I will soon have a page up in my Drupal services section with all of the graphic design services that I can offer with Eddie's hand at work.