ifoh designs - Web Design That Is Neat.

This past March 26th and 27th my boss and I attended “An Event Apart” in Boston. For those of you who are not familiar with what goes on there or what it even is, then I will let them say it best:

Gain a deeper understanding of web standards and emerging best practices. Be inspired by fresh ideas and new directions. Join the greatest minds and hottest talents in web design today.

It was a great experience being fortunate enough to hear some of the greatest minds in the Web Design community speak and present to us all. I wanted to focus however on one particular presentation that was directed by Jason Santa Maria entitled “Designing Your Way Out of a Paper Bag”, because I think that he touched on a lot of key points and helped me become better at what I do so often and I am sure most of you do as well, that being website redesigns.

If this is a redesign from your own original work, then you might be lucky and probably more up-to-speed than if you are walking into this blind with absolutely zero knowledge of the client. You might be at an advantage, if you had done your job the first time, and the job I am referring to here is client research. Now I am not saying that you need to know the complete ins and outs on everything works at your clients business, but enough to understand where the are coming from, their general audience and goals, in other words having an iterative design. When you are uninformed then you are actually adding to the problem, and that is not a good thing.

So now hopefully armed with some knowledge (and knowledge is power…) you are ready to sit down and get to work. Chomp at the bit for a minute or two. Really get those gears turning. Why not get inspired first? You need to surround yourself with inspiration on a day-to-day basis. It is imperative to your health and longevity as a designer that you keep up with the times for starters and keep that drive alive inside of you. One way to do this is the use of sketchbooks, or a collection of hand drawn designs, doodles, scribbles, anything really that you can refer to whenever you wish. Maybe sketching isn’t your thing, maybe you prefer to keep old photos, or fliers from bands, birthday cards, newspapers, bottles, cans, stamps, whatever! The point is, you need to be visually and mentally simulated before heading into the front line.

Jason also talked about gray box comps. Now what he means by this is just that, a visual representation of a page in it’s simplest form of blocked out content areas. For example:

This a rough comp that I came up with from some thumbnail sketches I first did on a pad with a pencil. I know it isn’t much to look at now, but hopefully you can still see overall layout of the site. This type of representation allows the designer to focus on the important aspects of layout without worrying or paying attention to detail. At this stage you can show this to a client to get their opinion on it and if something needs to be changed it is as easy as adding, moving or deleting a block.

Now we can take a look at what this design(in progress) might end up being:

This is when I can see if I have paid attention to margins, whitespace, and the overall visual hierarchy of the design and if in fact it has accomplished most if not some of the goals of the redesign(or design if it is brand new). I can also see how different typography, line-heights, and colors will look once in place very easily and make changes on the fly.

When it is time to turn a comp into markup I will print out the design and actually physically take a pen or different color hi-liters and color in the different blocks again from my gray block comp. This will help me keep the base of the design in sight and at its simplest form. I will then take a pen and start outlining how I will markup the design. For instance:

It might not look like much at first glance, but to me it makes perfect sense. I will just outline the major elements ie; divs, menus (ul) and start to name them so when I go to my editor I can refer back to this diagram and see what I called them. I like to have the hard copy there in front of me call me old fashioned or what have you but it works for me, so maybe it will work for you too. It doesn’t matter so much as how you do it or accomplish it, but rather that you are going through the motions and putting plenty of thought into your every decision. Obliviously anything that we put on the Web is not permanent by nature, but it can mean the difference between a return visitor and a one time stop in and scream with frustration user. First impressions are everything, and that might be shocking to some, hopefully not, but that is life.

There are many factors that play into a good design, including user testing, trouble shooting, browser tests, trending analysis, etc. and this was only to touch on the process that one might go through during a typical project.

Anything special you do during a design process? Let me know I am curious.

• Posted at 12:45 pm in web design
• Leave a comment