New Blog Site for Identity Kitchen

Over the last year or so, I have worked on some great projects with designer Ellen Petty, founder and head designer of Identity Kitchen. I was proud to most recently work on the actual Identity Kitchen site itself, which got a major overhaul for the new year. Identity Kitchen provides branding and identity design as well as custom blog and website design and I get to help turn some of those designs into  working WordPress sites. I recently posted some examples of our collaborations.

The new Identity Kitchen site was not just a face-lift or simple redesign but a complete rethinking of everything. By combining the formerly separate portfolio site and blog all into one WordPress installation, the content and structure of the site was improved, the search engine optimization was improved, and the backend became one place to add and edit all the content.

We were also able to use some new image gallery techniques to ensure everything on the site is HTML and CSS based. This means no Flash, even for the image galleries, providing a seamless user experience for those without the ability to view Flash, most importantly iPhone (and now iPad) users. Not using Flash also improves the SEO, by using keywords in the image’s ‘ALT’ attribute.

Home Page

The most complex page on the site, the home page pulls the latest post from the blog, has links to social marketing sites, a newsletter signup, a section highlighting some products from the store (Identity Cafe) and features a fading slideshow of images.

click for full size view

Case Studies

The first style of image gallery is shown on the Case Studies pages. The images are attached using custom fields in the backend, thanks to the WordPress plugin Flutter. Usually each page has a simple text area, where images can be inserted. But by adding some custom areas we were able to upload extra images and then display them in any way we want. In this case, by displaying them in a gallery, with thumbnail previews along the bottom. A second custom area was used to add a series of ‘services’ as the pink text at the bottom of the right-hand column.

click for full size view

Work Pages

Similar to the Case Studies pages were the Work pages, which were more specific looks at a single website, a single brand, and one page with 30+ examples of logos. The backend for these pages worked almost identically to the Case Studies pages, but we displayed the info in different ways. The descriptions, list of services and link to the live websites needed to display under the images so that we could have a menu on the right hand-column. To make room for that we needed a second image gallery design, using smaller thumbnails and new navigation buttons. The gallery is actually the same exact HTML markup. But thanks to a few changes in the CSS, they display differently.

click for full size view

Questionnaire and Contact Forms

Some aspects of a site can only be appreciated by the owner of that site. One of those things on this site would be the Questionnaire page. I used the ‘Contact Form 7‘ plugin for all the contact forms on this site. This is my favorite contact form plugin because it is easy to use, even for a non-programmer and it allows complete control over all the fields and customization of the look. By adding a Questionnaire page, it will now be easy to send new clients a simple link where they can fill out all the needed info online and hit send. Pro-active clients could even find it on the site and take the initiative to fill it out themselves. Everything is sent in an email seconds later. Compare this to a written form that is left with a client or snail-mailed, or even the process of needing to send a .pdf file to someone, possibly forgetting and hoping they will print it out and send it back.

click for full size view

Blog

Last but not least is the blog section, otherwise known on this site as ‘Fresh’. While it matches the main site’s design, it has its own thing going on, practically a reverse of the look, with a mainly white page and dark text, compared to the dark background and white text of the main pages. As far as programming, this was the most straight-forward of the whole site, just a matter of scaling back to the built-in blog platform that WordPress is made for.

click for full size view