All posts in Design

So I’ve been playing around with grid based layouts a LOT lately. After seeing the blueprint css framework, I decided this was the perfect time to try designing with grids. For those of you who know me, I have been completely self taught as far as web design and interface design is concerned. Everything I know I learned from reading books or trial and error, so I don’t have the formal background most designers have regarding typography, style guides, etc. Anyway, back to the grids I saw on blueprint here, I decided to make my own grid template for laying out pages and wireframing them.
.
So to begin I went and created a pattern out of the background image in the grids sample above in photoshop. One thing to note with grids, they are supposed to be based on a font size as the defining unit for the sizes. Again, I’m not a graduate of any graphic design school, so my methodology might be weird. Here is how I start a design using grids (the wireframe at least).

Step 1: Create the canvas
First I usually create a document in photoshop 960px wide and 900px high (i’ve got a big screen, and usually end up making the page longer) and either a white or a transparent background. Here is a small example. Generally the grid layer I put over everything else, and make it translucent so i can see where everything is relative to the grid.

Another technique I tend to do is color code the site, so I have an idea of the content, the auxiliary material, the navigation, branding, etc. If you group the colors, it should help you get a better feel for what type of stuff you are really including in your design. Is your design looking 60% ads? Then chances are you need to rethink your site.

So with these steps in mind, you can theoretically start figuring out your layout/structure. The use of grids, especially frameworked grid layouts like Blueprint or YUI Grids will help you in regards to formatting your text, maintaining legibility, and giving your site a solid flow.

Next step will be an actual design, and then transitioning that design into a real xhtml site.

After getting stuck in vegas because of the delays associated with these storms, I realized that USair could have alleviated this problem by just creating a mobile version of their flight status page.

I could have logged on with my blackberry and been less frustrated. Now I get home, and see the following screen on usair.com. This is a perfect example of contingency design, or defensive design as the boys at 37signals would call it.  This is what happens when the design team isn’t expecting delays at EVERY airport the company services.

I would probably have made the div scrollable or once the number exceeds 4 cities, make the user click through. as is, that list is unusable.

For those of you interested in business cards and other print design, check out my new business cards on flickr.

My good bud Pete Cashmore just relaunched his site Mashable.com. Bryan Veloso of Avalonstar did the redesign. Overall its a bangup job they pulled off in a mere 2 days! Pete’s also got a new subsite MashCodes up too, it has all you need for myspace layouts and the such.

Southwest Airlines FINALLY redesigned their site after years and years of it looking the same. The new site sports ajax (or javascript for you purists), clean design, and most importantly it lacks the stodgy 1995-esque design it had been sporting since probably 1995. I have a feeling that this will probably increase their checkouts/conversions by 1-2%. Mind you I’m guessing entirely, but I suspect those who werent comfortable with the airline’s budget looking websitebefore might be more inclined to entrust their faith in the site/company.This site raises 2 questions:

1. how much do people associate your site’s design with your company’s image (southwest=cheap airline=cheap looking site?)
2. Secondly does the adage that people judge a website by its appearance in less than a second apply to corporate sites for companies like southwest?

What do you think?