Louis Simoneau » Web Design

Webby Award Winners for Design, Flashblock Edition

louis — Mon, 10 May 2010 05:58:17 +0000

Last week the winners of the 2010 Webby awards were announced. Jennifer Farley, one of the staff bloggers at SitePoint (where I work), recently posted a breakdown of five of the winners in design-related categories, along with her impressions of the sites in question. I think that’s a great idea, so I’m going to write my own version of that post, examining the same five winning sites.

Best Homepage/Welcome page

This category was won by Male Copywriter. Here’s what that site looks like:

I like the understated aesthetic and the use of black to convey authority.

Best Structure/Navigation

The winner in this category was HBO/Imagine. Here’s a screenshot of that site:

Again, a simple, clean design that really speaks to the modern web audience. I love it.

Best Use Of Animation/Motion Graphics

The winner in this category is The Pop Shoppe. A very interesting design, shown here:

Best Use Of Photography

This category was won by The Economist: Thinking Space, with a stark design that really lets the photos speak for themselves:

The Best Visual Design – Aesthetic

Finally, this coveted category went to Nike’s Jordan: History of Flight site:

Again, a minimalist style makes this website a clear winner.

Conclusion

I think the Webby awards have done a fantastic job highlighting the best of web design in 2010, across the full range of available technologies and adhering to the open principles that give the Web its true strength.

Free Wireframe Kit for Google Drawings

louis — Mon, 19 Apr 2010 09:23:11 +0000

I’m a big fan of Mockingbird for creating quick mockups and wireframes. It’s free, it’s online, and it does just about everything you want it to do.

That said, a bit of choice never hurt anyone, so it’s interesting to see that Google Drawings, the recent addition to the Google Docs family, can be used quite effectively as a wireframing tool.

Morten Just wrote a blog post describing how he uses it for that purpose, but even more awesomely he’s shared a drawing with an extensive selection of shapes, stencils, and widgets sitting in the margin ready for use. With the help of this “wireframe kit,” Google Drawings really does stack up quite well against dedicated wireframing tools.

Just open the document, select File -> Make a copy, and you’re off to the races with a fantastic toolkit containing text input boxes, icons, check boxes, flowchart boxes, tabs, buttons, you name it.

Huge props to Morten for sharing this toolkit with the public.

Jason Fried on Why you Can’t Work at Work

louis — Fri, 05 Mar 2010 00:56:15 +0000

This video, from Jason Fried (@jasonfried) of 37signals, really hit home with me. I’m often guilty of being a little quick on the trigger to interrupt people when I have a question or want their input on something. I’m going to try to put some of this theory into application in my work at SitePoint and see if it helps both me and the rest of the publishing team to focus on getting things done.

What I take away from this, as a practical message, is the following: rely on the asynchronous nature of digital communication media to communicate with co-workers without interrupting their workflow. Simple, but it’s easy to forget when the person is working right next to you and it’s so easy to turn around and get their attention.

I Love the Internet: Simple Font Stack Tester

louis — Thu, 04 Mar 2010 00:06:28 +0000

I blogged about testing font stacks earlier this week at SitePoint, and pointed out a very early-days project on GitHub that seemed to be a first stab at developing a tool to simplify this kind of testing. Today I received an email from a reader, who apparently registered http://fontstacktester.com and set up a web-based interface for doing just that in the intervening time. The tool is an adaptation of the script I had found on GitHub, except that you can just plug your website address into a box and you’ll be transported there, except with an overlay at the top that lets you switch off every font on your site individually to see if it breaks anything.

Here’s what it looks like running against this site:

Kudos to Chris for getting this thing up and running so quickly!

New SitePoint Post: Keep Your Font Stacks from Falling Over

louis — Tue, 02 Mar 2010 12:18:52 +0000

For most web designers and developers, testing is a huge part of the job. They’ll devote a considerable amount of time ensuring that their sites appear similar, if not identical, in a wide range of browsers. One key part of site testing, however, seems to be all too frequently forgotten: font stack testing.

read the rest at sitepoint.com …