Steamers coffeehouse & Wine Bar is a for-profit coffeehouse and wine bar in Arvada, Colorado, dedicated to hiring people with developmental disabilities.  They are expanding their facilities and operations and wanted to update their website as well.  We worked with Steamers to rethink, redesign and rebuild their website from the ground up.

Steamers Coffeehouse's previous website

We started out re-organizing the site’s information architecture.  The original site was flat — that is, the page hierarchy was only one level deep.  Since we were expanding the website and adding additional content, we couldn’t continue to use this site structure.  So we changed it to a two-level page hierarchy, with all the site sub-pages still easily accessible through drop-down menus and sidebar menus.  We consolidated the breakfast, lunch and coffee menus under a “Menu” tab, we expanded the content listed under “Services” to multiple pages, we added an “About Us” tab for content such as a staff gallery, company history, and company partners, and expanded the Location page into a “Contact Us” page, with sub-pages holding contact forms, address info and embedded Google maps.  We kept “In the News” as its own tab on the main bar.

The Steamers Coffeehouse facilities have wonderful interior design, utilizing a bright red/orange/green color scheme on the walls, natural materials for the furniture, and extensive framed pictures on the walls.  When we were building the website, we wanted to emulate the colors and textures of the coffeehouse itself.  Thus, you can see a similar bright-yet-mellow color scheme in the website’s visual design, along with extensive visual textures to add interest.  In fact, this is one of our favorite website visual designs to date.

The Steamers Coffeehouse facilities

A sample of some of the colors and textures used on the new website

Steamers Coffeehouse prominently features a “staff picture wall,” showing framed pictures of all of their employees, and they wanted to do something similar on their website as well.  So we designed a Flash-based picture slideshow to feature prominently on the website’s homepage, cycling through both formal portraits and candid shots of the coffeehouse staff.  The slideshow is powered by an RSS feed from Steamers’ Flickr Photostream, making it very easy to maintain and update.  We also designed the slideshow to look as if it were an actual picture frame hanging on the wall, to further match the visual motif of the coffeehouse facilities.

The Flickr-powered slideshow on the homepage

Finally, we built the entire website on a custom content management system.  Our content management system gives Steamers employees the ability to easily update the text and pictures on their pages, and to add, delete and re-arrange pages with a visual drag-and-drop editor.  This will give them the ability to maintain and manage their website long into the future.

It was a pleasure working with Steamers Coffeehouse throughout this project, and we’re very proud of the results.  Steamers has a great group of people, great facilities, and some of the best food and drinks around.  Working with them was a great opportunity to produce some very high-quality work, both on a visual and a technical level.  We wish Steamers the best of luck going forward in their business, hope that their newly revamped web presence serves them well.

You can find Steamers Coffeehouse’s new website at www.SteamersCoffeeShop.com.

Free Download: Website Fundamentals

Download our free e-book to learn what you need to know about building effective websites.

Download Now

We kicked off the new year with a new website launch for Chaput Rootmaster, Inc, is a Denver-based plumbing, heating and cooling company.  They’ve been in business for 65 years and are very well-respected in their community.  They had an existing website, but it was unsatisfactory for many reasons: aesthetically lacking, technologically out of date, and difficult to maintain.  Realizing this, they approached us to give their site a top-to-bottom redesign.

Chaput Rootmaster's existing website homepage

We started off by analyzing Chaput’s marketing objectives for their website. Who was their target audience? What are their needs? What should their target audience know about Chaput Rootmaster? When visitors come to the Chaput website, what is their desired action?  After discussing this with the Chaput Rootmaster employees, we analyzed and refined the site’s information architecture to align the site content with their marketing objectives. We also planned out wireframe layouts for each page, determining what content needed to be on each page, and where it would be placed.

Our wireframe for the redesigned site's homepage

After we had the site structure and page layouts determined, we worked on the site’s graphic design and look-and-feel.  We decided upon a silver, blue and orange color scheme, with extensive use of brushed-metal texture, to fit the semi-industrial image of the website’s subject matter.  We also placed prominent calls to action on every page of the site, with a prominent phone number and a link to an online appointment-scheduling form in the header of each page, and with an additional appointment-scheduling form placed on the right side of all the body pages of the site.

The website's page headers, showing the blue and brushed-metal color scheme, and the prominent calls to action

We coded the site on a custom content management system based on SilverStripe technology. This allows the Chaput Rootmaster employees to easily update and manage the site content themselves, rather than having to manipulate HTML code or outsource site maintenance elsewhere. We also coded the website to be extremely flexible, with the page menus and interface designed to handle a page hierarchy up to four levels deep.

As we coded the site, we made extensive use of jQuery functionality.  This is most immediately obvious on the homepage, where we used a heavily customized version of the jQuery cycle plugin to create the “Featured Services” slideshow at the top of the page.  We also used jQuery in more subtle ways as well, such as auto-formatting date fields and form validation on the input forms on the site.

jQuery auto-formatting for this form's date input field

jQuery form validation alerts the user if they forgot to fill out a required field on a page form

One particular challenge in development was displaying a map with an overlay showing Chaput’s service area in the Denver metro area.  We wanted to use Google Maps to accomplish this, but we were limited by their terms of service: you are allowed to display screenshots from Google maps, but are not allowed to alter that screenshot in any way.  What we ended up doing was creating the map and the service area overlay as two separate images, with the service area overlay positioned to lie on top of the Google Map screenshot.  Thus we could still visually illustrate Chaput Rootmaster’s service area without violating the Google Maps terms of service.

The Google Map screenshot and the separate overlay image layered on top of each other in the web page

We launched Chaput Rootmaster’s new website on January 5th.  Since then, both us and the client have received a lot of very positive feedback.  Several people have told us that it’s “the best-looking plumbing company’s website [they've] ever seen.”  We’re glad to hear all the positive responses to the new website and we’re happy to have the opportunity to help out this well-respected company.  We’d like to congratulate Chaput Rootmaster on their first 65 years in business, and we hope their newly-launched website will be a great asset for their business both now and into the future.

To see Chaput Rootmaster’s full website, please visit www.ChaputRootmaster.com.

Free Download: Search Engine Optimization Fundamentals

You have a website, but is it getting found? Find out what you need to know about search engine optimization in our free e-book.

Download Now

A few months back I was commissioned by Prince of Peace Lutheran Church in Virginia to do some graphics work for them. The majority of this work consisted of cleaning up the logos and branding of their various youth ministries. Most of the ministries’ logo files were low-resolution JPG‘s or GIF‘s, and they simply needed to be remade as resolution-independent vector-based images.

However, we decided that the logo for the ministry entitled “Waves” — a middle school youth group ministry — was just not up to par to begin with and needed to be completely redesigned.

The original "Waves" ministry logo

So I set about redrawing the logo from scratch. We wanted the concept to remain the same — that is, the design would still be dominated by a single crashing wave. After collecting some reference photos of various crashing waves, I started sketching out the new logo in my sketchbook.

Some of my sketches for the new logo

Most of the initial sketching was done with a non-photo blue colored pencil.  I used non-photo blue quite extensively several years ago when I did a lot of hand-drawn animation; basically it’s a specific shade of blue that the old optical cameras wouldn’t detect — this allows you to roughly sketch out whatever you’re drawing, then when you’re happy with it, you trace it in cleanly out in pen.  Then when shot on the camera, only the cleanly traced ink lines would show up.  As you can see in the picture above, modern digital scanners and cameras obviously have no problem picking up the blue pencil, but the blue is still easily knocked out in Photoshop —much easier than cleaning up extensive graphite sketching would be.

After the image was scanned and the blue sketching knocked out, I then traced the image in Adobe Illustrator, and added colors shadows, shading and text.

The finished image

The shading and rendering of the final graphic ended up requiring several layers in Illustrator, with both the water portion and the foam portion each taking up about four layers apiece. Layer one is the original scanned drawing.

The Illustrator layers palette

In addition to the nice full-color graphic, Prince of Peace Lutheran Church also needed a black-and-white version of the logo.  This presented a bit of a challenge, as a lot of the visual detail present in the full-color graphic was lost when I converted it to black-and-white. For instance, the part of the text that overlaps the water completely disappeared, and the top of the foam started to disappear against the sky.  I ended up applying a thick white stroke around the text to outline it against the water, and added a thick black stroke outlining the water and the foam against the sky.  I also applied a thick white stroke to the outside of the logo border to keep it visually separated as well.  This regained the visual legibility that had been lost when first converted to black and white.

The finished black-and-white version of the logo

And that’s it.  I hope you enjoyed seeing a little bit of the process that goes into designing a graphic like this!

Free e-Book: Website Fundamentals

Download our free e-book to learn what you need to know about building effective websites.

Download Now

Well, after a lot of work, my portfolio site’s redesign is finally complete.  Some history: my graphic design portfolio has been running on www.cstrom.com since early 2005.  From 2005 through the first half of 2008, it was running as a pure Flash site.

This had several drawbacks: the first, of course, being SEO.  Being a series of old-school Flash files, my site was literally invisible to the search engines.  (I keep hearing about Flash being more accessible to search engines nowadays, but I still feel like I never see many Flash sites show up prominently in organic search results.)  Another drawback, for me, was that it was cumbersome to update compared to XHTML.  And finally, with increasing monitor sizes nowadays, it was becoming increasingly necessary to change my layout to a 1024x768-optimized layout, rather than the 800x600-optimized layout I was currently using.

My 2005–2008 portfolio site — showing its age

With these things in mind, I decided a few months back to overhaul my site, giving it a redesign and moving it over to an XHTML format.  My plan was to first run the site in a “transition mode:” build a few XHTML pages with my résumé and a few of my most recent work pieces, but still link to my old Flash site to display the majority of my work.

The transitional portfolio site

Finally, when some time opened up between contracts, I started building out the “finished product” — the fully redesigned site.  I kept the same basic layout as the transitional site, but gutted it all under the hood: the transitional site ran completely on absolutely positioned <div> elements, so I rebuilt it using a more flexible and standardized flow-based layout. I built out a full footer section, using the wonderful footer technique from A List Apart.  I filled out the content to display a much larger selection of my portfolio, divided up by category.  I added this blog that you’re reading now.  And finally, I gave a bit of a facelift to the design, cleaning up the typography and some of the visual elements.

A comparison of the transitional site and the final site

Free Download: Website Fundamentals

Download our free e-book to learn what you need to know about building effective websites.

Download Now