One of my favorite things to do from time to time is to go through old design projects and pull out a few unused ideas. Maybe the client picked a different direction, maybe the style was just all wrong for that project or maybe it never even got off the ground. I thought I would share a few of them since my portfolio doesn’t really show any process work.

With several new exciting projects last month, we spent a lot of time locked in the Pixel Chamber with the freshly scented dry erase markers. Here are a few photos I took before the eraser attacked.

we really do sit around saying things like “da hood”

we should probably spend a little more time on our map drawing skills

how many different ways can you really draw a widget?

With a long list of Books, Blogs, Podcasts and Conferences all dedicated to learning the skills involved in web design, not to mention all the top ten lists of tricks you might not know, and people you probably should, I began thinking about how designers learn the skills of their trade. It seems that most designers use some combination of the resources listed above, so I have come up with a brief and definitely unordered list of the books, blogs, podcasts and twitterers that I think are really bringing something to the table, similar lists related to design and markup will be coming soon. I hope you enjoy.

Web Usability Books

Designing Web Usability (Voices That Matter) – Jakob Nielsen
Dont Make Me Think – Steve Krug
Designing the Obvious: – Robert Hoekman Jr.

Web Usability Blogs

useit.com – Jakob Nielsen’s Website
rhjr.net – Robert Hoekman, Jr.’s Blog
User Interface Engineering

Web Usability on Twitter

@jmspool
@UsabilityDesign
@IATV
@dav_hamill
@skrug
@rhjr

Web Usability Podcasts

User Interface Engineering podcasts

White space is an essential element of design. Just like color, typography and photography, the composition and use of white space reflects your brand. White space creates better legibility, usability, and a more professional appearance. Clutter strains the eye, hinders the user experience and undermines the primary message.

Use white space as a design element

White space is an integral part of a page’s layout and design and is more than just vast areas of emptiness. It’s the small amount of space between letters and lines of copy, It’s the proximity of a primary action to surrounding areas of important content. Visually, it’s the element that unites individual page elements in a cohesive fashion, delivering a product that has a sum greater than its parts.

Well-used white space and clean designs create professional looking pages and cast a positive impression of your brand. It should be as important an asset to a page design as a logo, a type face, or any other typical element found in a brand style guide.

Use white space to enhance legibility

Typography that is set in a manner that allows the reader to easily flow from one line to another creates less strain on the user’s eye and will increase the chance of communicating your message. Pay careful attention to the details of line height, letter spacing, padding and margins; this will decrease the frequency of errors and misunderstandings.

Use white space to improve usability

Well-used white space should suggest relationships between page elements and clearly define groups of content. This especially pertains to actionable items. Use spacing and proximity to create a clear direction for the user to follow with few distractions and less confusion; this allows more users to follow the path that they intended to. When users can follow their intended path, understand and find the information they seek, they have a positive user experience and the perception of your brand is enhanced.

Avoid cluttered pages

Crammed, cluttered pages create a poor visual product that is hard to read and hard to understand. They undermine the primary communication goals and lead to a poor user experience, fewer conversions, and a negative brand reflection.

RCF is excited to announce the launch of the new cmom.com for the Children’’s Museum of Memphis. The Museum was looking for an improved user experience, a fresh design and a content management system. Some of the improved features are a new internal search, a new calendar and an improved process for making donations and purchasing memberships.

the design process

To kick off the redesign, I started by reviewing the current site along with the client. We defined a few things that they wanted to do better. Our main concerns were based around usability, interaction and color. We also wanted to take advantage of some of the great photography that the museum already had. Our first point to address was to sites usability. We had to make the information easier to find, so before we ever started exploring color schemes or typography styles, we set out to create a clear and easy to understand architecture for the information. The decision was made to use a top navigation and nest subcategories under one of seven navigation titles. Additionally we identified a few areas of the site that we wanted to call out on the homepage and a few areas of the site that would be needed on every page. Once the structure of the navigation, homepage and footer started to take shape, we were ready to start developing the sites look and feel.

After exploring a few different visual directions, I decided to present two designs to the museum’’s staff. The first had an open feel, vibrant colors, geometric shapes and a focus on negative space. The second design had more tightly defined spaces, more dimension, and more texture. After presenting the comps, the staff at the museum all agreed the the first design was a better fit for their brand and their audience, and I agreed 100%.

Next we started to refine the color scheme. After trying a variety of colors pallets, we found a good mixture of colors that complemented the primary colors from the logo, but also gave the site a little more of a sophisticated look and feel.

After a homepage layout and a color pallete was set, the next step was to design a few landing page templates. Studying the information that the museum wanted on these pages, I set out to design a template for pages that would primarily hold information, image heavy pages, and pages that needed to promote a primary action. With all this in hand, It was time to move into building out the HTML and CSS and implement a content management system. In my next post I will write more about why I picked Drupal, and how I am using Google Calendar, Google Maps, Flash and jQuery on the new site.

After some research, I decided that Drupal would be a good fit for the Children’s Museum of Memphis, It seemed to be powerful enough to fit the site’s needs, simply enough to implement and the community of active developers was a plus. Not to mention the cost, it was easy to fit into the budget of this privately owned non-profit.

Another priority for the site was to automate a few items that were being done manually. Some of those things were processing memberships, collecting donations, and booking birthday parties. This is another problem that was easily solved with Drupal. With the plug-ins available for Ubercart, and its easy integration with Paypal, we were able to make these transaction points all available online.

Another great set of free tools I used to mange content came straight from Google. The museum is running a google calendar, and with all of the functionality built into it like detailed event pop-ups, tabs to sort by week, month or agenda, and the ability to subscribe to the museums calendar, it seemed to be a great fit. The site also uses Google maps for directions to the property.

I had a little help on the flash portion and a few questions answered on the front end development, so many thanks to Tony of askthecssguy.com and Luis of torointeractive.net, both lent a hand.