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.
So a distant relative of mine, Jorge Arango, in Panama (the country, not the party town in Florida) just posted info about their first usability/IA workshop in the area. UXCamp Panama was probably the first of its kind in all of central america, just don’t quote me on that.
Its great to see growth in the communities of web developers all over the world. Now if only we could get the UXCamp to come here to Miami too…
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.
- how much do people associate your site’s design with your company’s image (southwest=cheap airline=cheap looking site?)
- 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?
Its been a while since my last post here, and for that I apologize. Been working on various design projects, and my own webapps i mentioned earlier. With that aside, one of the issues I’ve been pondering lately has been that of the search engine start page/main page. There are various degrees of this, you have your Google, your ask.com, your yahoo, all with different takes on what the default domain should show.With Seekum, I decided that we needed to reach a blend, a cross so to speak between the two. On one hand we want to retain the maximum speed we could, but on the other, I felt it would be neat to see that the search engine is a living organism. So with that in mind I decided to take a page from technorati which lists their top searches on the front page, and also play off the tag cloud phenomenon. My thinking was, that these two bunches of information would provide that little extra that maybe 10-20% of the users would appreciate (remember at this point our vast majority of users are techies who hear of us from blogs), but wouldn’t interfere with the rest of the users interactions.The fact that we’re doing this to intrigue this small percentage of people might surprise some of you, but when you think about it, it shouldn’t. If you follow Umair Hague, and more recently Bradley Horowitz’ piece on the content creation pyramid you’d understand that most content is produced by the minority, but enjoyed by the majority. The examples they reference are all what I would refer to as easily identifiable content, whereas with Seekum, it is more of an intangible content this same group is contributing to. It is this whole user defined search that I’m talking about, the simple actions of voting things up and down are in fact a participatory content that the group is contributing to. The other way to look at it is that the search results are the content, and the users are contributing to it and helping create/recreate it.So now that I’ve bored you with the content facet of the search model, I have to get back to the reason you are all here: the design aspect. If you take a look at one of the protoype screens for Seekum’s new results page, you’ll notice how we’ve decided to lay out the content. Right now it doesn’t look that spectacular, but I’m hoping that it is exactly that which gets people accustomed to it. Although there is alot of stuff going on in the search results (tagging, voting, and such), we are trying to make sure that it doesn’t interfere with the actual search results, what you came looking for in the first place. This might strike you as just some run of the mill html, but it takes alot of thought to structure everything in such a way that you get exactly what you are looking for, and not alot of what you aren’t.In case you were wondering, or read this far down, the new seekum design should be rolling out this week. So stay tuned