Once a month or so we do lunch seminars here at Mindfly Studio. It's a chance to share our own knowldge, wisdom, and experience and learn from one another. May turned out to be my month, and while I'd much rather do the learning than the teaching I stepped up and attempted to educate my lovely co-workers on my design process. So much of what I do is intuitive, it took a bit a planning, a bit of research and a lot of hand gesturing but I did come up with something ... eventually ...
1. Discovery
Early on in our own process at Mindfly we sit down with the client and ask a bazillion questions to make sure we understand what it is they want. Our questions range from everything about their business or organization and how they plan on handling their shipping (if they need it) to what kinds of colors or textures they like. I don't always get to be a part of these meetings, which is too bad, because I've noticed lately that I really form mental impressions on potential layouts, colors, and design elements based on the client's personality as well as their goals for the site, the target audience, the subject matter, etc. There's something about that first client contact that sets the wheels in motion for me.
Ideally, I like to walk away from these meetings with a clear understanding of their site structure, call to action, and the elements they think are important to have on the home page, especially if there is going to be a feature area or some kind of rotating banner. Without these three things, I tend to flounder a bit. It's also extremely helpful to have all the content available whether that's in the form of a previous site, or text documents as content obviously influences the design. A lot.
2. Competitive Analysis
After I've gained some initial impressions from the client, and have listened to what they have to say, I sit down with their survey again to make sure there's nothing additional in there they we may have missed in the discovery meeting. I also look up their competitors that they've listed as well as doing a
random Google search for their field to see what the national or global
competition is up to. I check out sites they may have specified
that they like and try to pick out the good elements from there to some
how incorporate, or at least make a mental note of. This allows me to
see what I think is working well (especially for the competitors) and
what I think I can improve on. If I have a clear enough picture in my
mind I may sketch a little something on paper just to get it down.
Usually this does not happen however, and it ends up being more of an
outline of the
navigation and things to make sure I include on the home page along with
their weight of importance for hierarchical purposes.
3. Exploration
Now I have, or should have, a concrete understanding of all the elements involved, at least for the home page because that's where I like to start. Some projects immediately speak to me and I can jump straight to wireframing or Photoshop from here. But some projects require further inspiration for me to get going on. If this is the case, I jump over to my Delicious account and see what nuggets of creativeness I can find that I've filed away under my inspiration tag. As I'm surfing for layout inspiration, I also tuck away color options. Usually a client specifies at least one color they like and / or the logo dictates a partial color pallet, so I use that as a base and look for colors I think will go well and provide a striking contrast. Some projects I create an inspiration folder and take screenshots of layouts, photographs, icons, fonts - anything that speak to me for that particular project. This is also when I start thinking about what type of grid I want to use and put together wireframes or content blocks, whether that's pen to paper or an online wireframing application such as HotGloo. Occassionally, I will also do word lists and then do a Google image search to see what kinds of random image associations I can come up with, but that's usually only if I'm really hard up for ideas.
4. Typography
Some projects scream typography to me and others don't. It depends on the nature of the project and a lot on the logo. I recently designed a new site for Interconnect Systems and when I saw their logo, I immediately thought of Museo, so I checked the usage license, did a fist pump and installed it for use. Typography is something I want to focus on more as a design element, especially since I love minimalist designs and I think typography can really shine there. If I don't have a specific font in mind, I might surf one of the many free font sites out there, such as Font Squirrel, to see if something speaks to me and the feel of the design I'm going for. If not, I actually really like Georgia. Font is one of those things that speaks subliminally to most people but can very much influence the tone of the design. Is it playful, sophisticated, heavy, delicate, flowery, etc?I also look for unique letterforms as well (particularly "g"). Those can sway me either way.
5. And Go
Once I have the wireframes, color pallet, font, and a little content, I dive right in and get my blocks laid out in Photoshop. This is not a stage I worry about the details. My main focus is to get something on the blank canvas in which to play around with. I get the logo in, the body color, the featured area (if there is one), the call to action, the primary and secondary areas, the font colors, heading sizes, and other potential blocks of color or lines to delineate the sections.
6. It's All in the Subtle Details
Now that I am no longer staring at a blank canvas I go back to layer in the details and refine the pixels. I may search for icons to add another design dimension or some abstract art of pattern to incorporate. I may add subtle gradients and highlights or overlap elements to give it more depth, or I may step back and ask myself what I can strip out to give it a more clear direction or breathable feel. Now is also a good time to think through how it's going to code it when
the design is done. This can often dictate what you do as well. For
example, what new CSS3 styles can I incorporate? The options here are endless really.
