Microsoft Windows XP defined an era in personal computing. It remains iconic in the PC timeline. I think its desktop wallpapers are iconic by themselves. How many millions (billions?) of people looked at one of these 20 images every day?

1. Ascent

I don’t know what mountain this is, though it’s probably a famous one. The photography is nice & the scale of the moon is impressive, but I just don’t love this one.

As a background image, the photo is effective. It has muted colors & low-contrast and viewing desktop icons atop this image is perfectly easy.

2. Autumn

I love this photo. I grew up in New England, so scenes like this always make me smile. This view might as well have been down the road from my parents’ house.

As a desktop background, however, this image is a pain. The color contrast is so high that desktop icons are lost easily. The image’s saving grace is the dark tree trunk at left which housed most people’s left-side-oriented icons.

3. Azul

This is a very happy photo. I can’t help but visualize myself swimming in the perfect blue water (do islands like that really exist?)

As a wallpaper, this image does fairly well. The all-blue scenery makes for a mostly-consistent work area where icons & windows appear well.

4. Bliss

This scene might be the most iconic of all XP wallpapers. If memory serves, this image was the default wallpaper. And it’s aptly named; “bliss” sounds just about right. (However, have you ever seen a sky that blue? Easy on the retouching, Redmond).

I’m probably biased, but I think this might be the perfect desktop background. It has enough color & contrast to be beautiful, but enough consistency to make browsing a pleasure.

5. Crystal

This wallpaper must have been the activated background on every high school & college PC lab machine I ever saw. And I like it.

As a desktop, it’s perfect. Shades of blue that stay out of your way but don’t bore you.

6. Follow

Enter: college freshman girls. I think every single girl in my dorm had this as their background. But isn’t that the same small fish, pasted in 6 times?

It’s a good wallpaper. Mostly-blue backgrounds are becoming a theme. But its splashes of orange are a little much contrast for me.

7. Friend

My wife loves this one. And who could blame her? An adorable dog & rustic scene, shot in pantone. It’s a winning combination.

As a desktop background, it’s perfect. It has color, but still a black & white feel, making the colored icons a perfect contrast.

8. Home

Boring. Blah. That’s all I have to say. I hate this one.

9. Moon flower

Anyone who could keep this as their desktop wallpaper for more than a few minutes is blind or crazy. It almost hurts to look at.

Were it not for the overpowering color & contrast in the whole image, this background would be ok. But it’s just too much.

10. Peace

This is the best wallpaper Windows has ever had. It’s simple, elegant, and classic. I have always found this image very inspiring. I even tweeted about it a few weeks ago.

You can’t mess with perfection. All the detail of this image is away from the left-side icon stack that most users had. It’s perfectly quiet & beautiful.

11. Power

Ouch. Please keep scrolling.

12. Purple flower

I don’t remember seeing this one, but there it was in my old XP machine’s display preferences. I guess it’s ok. No major complaints from me.

13. Radiance

I like this one too. I don’t think I ever used it as my background, but it’s a nice photo. I’m a fan of darker desktops, so this one is right up my alley.

Like Autumn above, this one places its dark shadow strip strategically in the left-side icon stack area. The light moon areas a bit high-contrast, but overall this one works for me.

14. Red moon desert

I can’t help but see this wallpaper as an opposite to Bliss. The red tint of the sand is a bit much for me, but it’s a really nice photo.

I’m sensing a theme of keeping the images’ left sides darker, to provide better contrast for icons. This one does a decent job at that.

15. Ripples

See: Crystal.

16. Stonehenge

I find Stonehenge fascinating, so I’ve always loved this photo (did you know there are other henges?). It’s a good compliment to Bliss, though the colors aren’t quite as happy.

Like Bliss, this wallpaper has great color & contrast. A very good desktop background.

17. Tulips

Another college freshman girl favorite. If Follow didn’t win the battle for the pink & green dorm rooms, Tulips usually did. But I must admit, it’s a beautiful photo.

This wallpaper is tough, though. It has too many colors in the main icon stack area for me. I’d prefer if the last tulip or two were removed.

18. Vortec space

This one feels like a throwback to Windows 95/98′s shooting star screensaver. I can’t help but look into its center.

Other than the obviously distracting center, this wallpaper holds up well. It has good color & contrast and a dark left-side icon stack area.

19. Wind

Microsoft seems to love hills. This photo is a little boring, but it’s pretty.

This desktop works well too. The left-side icon stack is almost all orange/tan. Great color & contrast where it counts.

20. Windows XP

No one used this background except boring IT departments. I’m convinced of it.

Did I miss any? What are your favorites?

Do you agree that Peace is the greatest desktop wallpaper Windows has ever had? Or are you more of an Autumn/Follow/Tulips kind of person?

No related posts.

A responsive work in progress

I designed this site following @beep’s principles of responsive web design. I’m just not finished yet. So, if you scale your browser down, you’ll notice that the site responds to you, just not very well.

The idea is to have a version that fits well for users on a full-sized monitor, an iPad, and a mobile phone. You’ll notice I said “iPad” and not “tablet.” That’s because I’m brand new to designing for the mobile market and this is my first crack at anything other than “web” and “mobile.” More on that to come.

Removing clutter

It took me a long as a designer time to learn to let go of “features.” They look so shiny and attractive. But most of the time, they’re clutter. This iteration of my website’s design is aimed at minimizing clutter. Colors are sparse, mostly reserved for links. Images are few, giving the existing ones more visual impact. Bells and whistles are all but gone, save for two social sharing buttons and Twitter’s @Anywhere functionality.

I hope this design isn’t boring. I’m trying to strike a balance between simple and empty. I hope that some subtle grays and soft gradients add just enough to the design to make it simple and effective.

Embracing modern technology

With this iteration, I’m upgrading my site from 2008-ish standards to 2011+. I’m using HTML5 & CSS3, Google Web Fonts, and several modern code standards.

HTML5

I’m finally using elements like <header>, <nav>, <section>, <article>, <footer>, etc. I started with Paul Irish’s HTML5 Boilerplate, and customized it to fit my needs.

Kudos to @adarowski and @jayroh for their HTML5 Boilerplate WordPress theme. I’m not actually using it here, but it helped me fine-tune my theme.

Web Fonts

I’m using Google Web Fonts to break out of the world of Georgia. I would have preferred Typekit, but I found their site confusing & unusable. I’m probably just missing something.

The two main fonts I’m using are Merriweather for headlines and Neuton for most other text content.

Object-oriented CSS

Since I attended An Event Apart 2010 and saw Nicole Sullivan speak about OOCSS, I have been writing my CSS with her teaching in mind. The basic principle is, “Write less. Reuse more.” My interpretation of it is very unsemantic. VERY unsemantic. But I’ve accepted that unsemantic-ness in the name of simple, fast, easy-to-use, and easy-to-reuse CSS code.

To see what I mean, check out the CSS that styles my website. Toward the bottom, you’ll see a bunch of “helpers,” things like .float_left{}, .width_100{}, .overflow_visible{}, etc.

A note on semantics

The unsemantic nature of my helper classes is worth diving into. I accept it because I think it helps me design better and write code better. That is, write CSS code better. I’m starting to figure out that I care more about my CSS than my HTML. I’m ok with adding <div class="float_left width_100 green"> to my HTML if it means that I only have to define .float_left { float: left; } once in my CSS.

This is a total 180 for me on the semantics debate. And I still hear a little voice telling me it’s wrong. But writing this way has cut my lines of CSS nearly in half, and it’s forced me to plan and organize better. Therefore, I think it has done more good than harm for me and my development.

What do you think?

All in all, I’m very happy with this design and code. What do you think? Did I reach a good balance between simplicity and style? Did I hit the mark on responsive design and OOCSS? Where do you stand on the semantics debate? Please tell me in the comments below or tweet at me: @tjkelly.

Related posts:

1. On the Latest Redesign
2. On HTML5
3. On Back-End Beauty

Why I made it

After posting some strong criticism of UMass’ alumni association, I was contacted by the association’s Associate Director for Alumni Communications & Technology, thanking me for notifying them of the display issue.

After a gracious exchange, he asked if I would review the association’s current website. The result was an 18-page PDF and this demo website.

Proof of concept

The goal of designing this demo site was to show the association how a modern design can apply to their website and help meet their needs. Their existing site is functional, but not very usable or enjoyable. Hopefully this demo site inspires them.

View live redesign demo Visit UMass Alumni site

Screenshot

Related posts:

1. I’m a Featured UMass Alumni Blogger
2. Evolution of UMass Amherst Website
3. My Design Won “Best Website”

Web Strategy is Content Strategy

Kristina Halvorson is founder and CEO of Brain Traffic, “one of the world’s only consultancies dedicated to content strategy and services.” In December of 2008, Ms. Halvorson wrote a brilliant article for A List Apart called The Discipline of Content Strategy, in which she defines Content Strategy as “[planning] for the creation, publication, and governance of useful, usable content.”

The key there is useful. As I stated above, people don’t visit your website because it looks nice. You have something they want. Your job is to give it to them. Get out of your own way and deliver useful content in a clear, useful way.

Clear Information is Useful Information

Clarity is important. If your content is confusing or hidden, it won’t reach your audience. Steve Woodruff wrote a post for MarketingProfs in January that I think fits well with Brain Traffic’s message. He wrote,

When writing marketing copy, it’s always a temptation to assume that the target audience: 1) knows everything you know; and 2) can absorb a whole bunch more. That’s not the case. Make it your goal to express one critical point very well, within the first 10 seconds. Because nobody is going to want to work hard to figure out what you do.

Design can & should have clarity too. Design should be built around your content, delivering it and presenting it to your audience. As Jeffrey Zeldman tweeted, “Content precedes design. Design in the absence of content is not design, it’s decoration.” Content comes first.

Lorem Ipsum is Killing Your Designs

A talented designer named Kyle Fielder wrote an outstanding article called just that. Alluding to the old saying “content is king,” Kyle wrote, “by adding Lorem Ipsum to the design you are essentially dressing your king before you know his size.” You should read Kyle Fielder’s article. It’s brilliant and it generated quite a bit of conversation & dispute.

Ok, Now What?

1. Plan. Plan. Plan some more — Create content, and draft a plan for creating more content
2. Stop using Photoshop — Design in a browser, starting with plain text and growing from there
3. Stop using Lorem Ipsum (unless absolutely necessary) — Because you already have all that content you created in Step 1. Right?

Related posts:

1. Design Demo: UMass Alumni
2. Web Design Portfolio
3. Web Design Résumé

I’m not really a fan of Google’s latest design changes. Increasing the size of the text-input seems fine, but the new buttons are atrocious. The biggest difference is the font-size on the buttons. But, with Firefox 3.5 on Mac OS X, the default crystal-themed buttons can only get so big. After the font stretches past their limits, they revert back to boxes with gradients.

Don’t get me wrong, Firefox’s buttons aren’t ugly. They’re actually quite nice. They’re just not Google. And I’m surprised that Google would let that happen.

Related posts:

1. Evolution of UMass Amherst Website
2. UMass Athletics Website Critique
3. "TJ Kelly" – My Google Identity

Pretty much all of that is out the window now.

But, I do appreciate the time-saving aspect of a WP-driven site. After all, it’s pretty much a one-click install. And, the flexibility it affords me is excellent. I can always go into my current theme and edit a few lines here or there.

That’s exactly what I’ve done here. I’m using a slightly modified version of Typebased by WooThemes. I added my own logo, and dressed up the background a little bit. The guys at WooThemes have a really great thing going and I’m happy to be a testimonial on their behalf.

Related posts:

1. Fulltime Freelance
2. A WordPress Theme from Scratch

Now if we could just get the corporate world to listen for once.

Related posts:

1. On Bad Designers (aka Managers)
2. On Googling Flash
3. The Paradox of Content

From a design perspective, this has one giant implication: understand your website’s purpose and design for it.

Drawing up a website that has a “cool design” is great and all, but if your cool design is completely counterintuitive to users, you’ve just created a poor user experience, and hindered your website’s purpose. The idea sounds simple, but can become a challenge, especially for designers who get caught up in their own creativity and never step back from the canvas.

A lot of times, there are smaller examples of this philosophy, hidden in the grand scheme. For example, let’s consider an online magazine website. The designer knows that the website has to display lots of written stories in an organized, digestible manner. He/she knows that the site has to be flexible with content, dimensions, and, to some extent, layout. But woe is the designer who forgets to incorporate advertisements into his/her photoshop sketch.

Too often, designers out there seem to care more about their own beautiful artwork than the ultimate reason for their creation and the necessary planning & critique that go along with it.

Related posts:

1. Designing Spring Break
2. On Creativity
3. On Bad Designers (aka Managers)

Instead, what they did teach you, was to identify your team’s skill set, encourage them to use it, and to—at all cost—avoid micromanaging. Please. Please, sales/management/business people. Take the advice of your designers. We have the title "designer" for a reason. You do not share that title. You have your skill set and we have ours. We don’t tell you how to balance your spreadsheets or track your sales. Please stop thinking that you know better
than we do when it comes to your website or print material.

You don’t.

Related posts:

1. On Designing with a Purpose
2. On "Harsh Truths" and Excellent Advice
3. An Event Apart Roundup – Part 2

I believe that this creative hurdle is the one thing that stands between me and a huge amount of potential in the creative field. But I’ve also been rather successful at identifying and capitalizing on a niche that I’m uniquely qualified for. The world of developers (coders and programmers… the number-crunchers) and that of designers (photoshop and illustrator junkies… the pixel-pushers) often have very different priorities, standards, and practices. I have found that I have a unique ability to combine and reconcile these two worlds. I can bridge the gap between the nerds and the artists, bringing the two camps closer together overall.

Now, I realize that my skill doesn’t sound like much. Couldn’t anybody in this industry do a decent job applying styles to a functional framework? Probably, yes. But I’m good at it. Very good at it. I can do it quickly, efficiently, and intelligently, all while adhering to strict web standards and "web 2.0" best practices. I guess you could think of me as a… pixel-cruncher. Kind of sounds like an obscure comic book superhero…

Related posts:

1. On CSS Tables

This version combines a few techniques that are new to me, such as mod-rewrite rules, jQuery javascript library, and third-party plugins for things like Twitter and Flickr. Overall, I’m very pleased with it. Please take a minute to let me know what you think.

Related posts:

1. Another Year, Another Redesign

Let me explain that… As a designer, I do believe that the latest wave of design trends has evolved into a new, separate entity from its humble roots. In that sense, one might consider it "version 2.0." However, that term is utterly meaningless. It has basically come to be a term that business personnel use either to sound like they know what their IT guy is talking about or, more commonly, to sell something.

So, this design is inspired by the latest design conventions that I find functional and aesthetic. That is, tabbed navigation, 3d-effects, and full-width backgrounds. No more boxes or full-height drop-shadows.

So, as always, I would love some feedback on the design. Please let me know what you think.

Related posts:

1. On Creativity

I, for one, still prefer accessible, source-outputting, server-side languages. I also believe that code, in any format, can be as beautiful as the interface it powers. In my experience in this industry, I’ve done far more work as a designer than a developer. Yet, in the development experience that I do have, I have structured the server-side code to output well-formed, beautiful client-side code. Plainly put, I have an insatiable need to style my code.

Below, I’ve provided two versions of the code behind this site. Compare the two for yourself. I believe you’ll see what I mean.

Un-Styled Code

<div id="notebook"><h1>Notebook</h1><p
id="box">The thoughts and ideas of one ambitious, inqusitive,
observant, verbose web designer.</p><div class="entry"><h2>
On Back-End Beauty</h2><p>In a "web 2.0" age, anyone
who knows what to look for in a well-functioning website
will give a subject site the ol' once-over, and just as
quickly, hit a few familiar keystrokes and peruse the
site's source code. Of course, with Ajax-based web
apps gaining in popularity, "source scoping" is becoming
a futile effort.</p></div></div>

Styled Code

<div id="notebook">
   <h1>Notebook</h1>
   <p id="box">The thoughts and ideas of one ambitious,
      inqusitive, observant, verbose web designer.
   </p>
   <div class="entry">
      <h2>On Back-End Beauty</h2>
      <p>In a "web 2.0" age, anyone who knows what
         to look for in a well-functioning website will
         give a subject site the ol' once-over, and just
         as quickly, hit a few familiar keystrokes and
         peruse the site's source code. Of course, with
         Ajax-based web apps gaining in popularity,
         "source scoping" is becoming a futile
         effort.
      </p>
   </div>
</div>

Is it just me? Or can the back-end be beautiful too?

The idea behind a styled interface is simple. We want whatever is public to look good. Well, I submit that source code has become public, and therefore, deserves just as much care and style as the interface.

Related posts:

1. On Designing with a Purpose
2. On the Latest Redesign
3. The Catch-22 of Relevance