Mindfly Website Design Studio

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.

I was recently assigned a project for a client who needed a very low-budget, no frills, *simple website that had little content. Not used to having a practically non-existent budget, I decided to view this project as a great opportunity to try out some new CSS3 goodness. Granted, most people viewing this site are probably not going to see the majority of the work I put into it, but I know it's there and so do Webkit-based users (Safari & Chrome), and, to some extent, so do Mozilla users. And everyone else, well, who cares. Onward and upward, I say.

We've been using some CSS3 styles here at Mindfly for awhile now, such as border radius and box/text shadows etc. But the new ones for me on this particular project were transitions and transforms, which I applied to the main navigation as seen in the image below. It took a bit of research and a bit of trial and error to get the styles in the right combinations on the right element to achieve what I was going for, but success I did have.

The Tilt

My first goal was to rotate the list items so the appeared to be randomly tilted. Safari 4 and Firefox 3.5+ both have support for the :nth-child pseudo-selector. With this you can systematically target sibling elements that are even, odd, or much more. 

/* By default, I tilted all list items by -8 degrees */
.nav li {
transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
-webkit-transform: rotate(-8deg); }

/* Rotate all even images 6 degrees */
.nav li:nth-child(even) {
transform: rotate(6deg);
-moz-transform: rotate(6deg);
-webkit-transform: rotate(6deg); }

/* Rotate every third item by -2 degrees */
.nav li:nth-child(3n) {
transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-webkit-transform: rotate(-2deg); }

/* Rotate every fourth item by 10 degrees */
.nav li:nth-child(4n) {
transform: rotate(10deg);
-moz-transform: rotate(10deg);
-webkit-transform: rotate(10deg); }

You can read more about :nth-child psuedo selectors here.

The Hover

For the hover effect, I wanted the tabs to slide out and away from the main content area. For that I once again used the transform property I used above to translate the elements 10px on the x-axis.

/* Pops the list item out to the right by 10px on hover */
.nav li a:hover {
transform: translateX(10px);
-webkit-transform: translateX(10px);
-moz-transform: translateX(10px); }

And finally, to add a little sexy-smoothness to the hover style as it slides out, I added a transition. This only works in Webkit browsers for now, but is supposed to be making an appearance in Firefox 3.7 and maybe the next version major version of Opera, as well, but who really knows with them sometimes.

/* Smooths out the transition (Webkit only) */
.nav li a {
transition: all 0.25s ease-out;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out; }

As you can see, I planned ahead for the changes to Opera and Firefox 3.7, by adding browser-specific lingo in, so once those browser support this property, I don't have to remember to go back and add it in.

The Final Details

/* Rounds the right-hand corners and adds a drop shadow */
.nav li a {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6); }

And with this little bit of CSS3 magic, I have a sexy, sweet menu and an otherwise plain-jane site.

View the demo here. Obviously, for the full effect it should be viewed in either Safari or Chrome. However, each browser has it's own unique experience, so it's worth looking at in Firefox, Opera, and even Internet Explorer 8!

*The word 'simple' is generally not allowed here at Mindfly and will earn you from 1 - 10 pushups because nothing is ever as simple as people claim it will be.