Archive for design

New Minimalism in Web Design

Have you ever read a book and once it was finished you thought “that book would have been so much better if it was 100 pages shorter”?

Some authors like to “hear their own voice” as it were and don’t know when to stop. There are a lot of web designers/developers who do the same thing. I definitely have fallen into that trap from time to time. You just get so excited by what you are working on that you add a little thing here, another piece of flair over there…before you know it, the point of the design gets lost under a pile of textures.

In recent months you have probably noticed a new trend…the minimalist look. Now when some people hear that term they think “boring”. In some cases they are spot on. If you go too far with it, it can be boring, but it doesn’t have to be. Take a look at A List Apart to see minimalism done right. Its clean, but not boring. Basically instead of using colors and textures to add interest, you make the layout do the heavy lifting of catching the user’s eye. Whitespace can be beautiful when done right.

Design Meltdown calls sites that follow this trend “super clean”. They have a four page showcase of sites built with this technique if you want to see some examples. Some are better than others obviously, but there are some great sites on that list (Protolize, mkdynamic, spacemaker).

I have found myself jumping on that train with some of the things I am building. To me it is just a completely different way of building a site. Instead of thinking of what textures, effects, and dohickies I can add to make the site stand out, I go through a mental process of stripping out everything that takes away from the core of the design. Its like cutting out those unnecessary 150 pages in a novel. Once they are gone, the narrative is crisp and flows the way it is supposed to.

In the design/development world, the final product gives the user a clear, easy way to understand and use the application. In my experience, I have found that it takes a good bit longer than I thought it would. Initially it seems easy and that having a lot of whitespace is enough, but when you take out gradients, shiny-effects, and whatnot, all you are left with is the content. How you make that interesting is what separates the proverbial “men from the boys”.

Rainfall Daffison is a “strategic design consultancy” based in Europe. Their thing is to design sites with a minimalist design and feel. They are quite passionate about it and think you should be too. They have an article that runs through 24 “moments” of minimalism” over the last decade. Its a great article that shows examples of some of the best minimalist sites out there today.

If you are thinking of how to wrap your head around minimalism, its not a bad place to start because you can see how some of the best in the business make it work.

What do you think? Have you jumped on the bandwagon, or do you think it is gonna go the way of the dodo? Did you find it easier or harder to create a super clean site?

Overcoming clients with bad taste…

I learned early on in my freelance days that it is always good to get a feel for what the client likes when it comes to web design. So whenever I get a new client I always ask them to send me some example sites that they find “cool” or “beautiful”. Over the years I have found that this is a good way to get a feel for their style. Conservative or artsy? Bright and bold or cool and subdued? You get the idea.

So what do you do when the client sends you to some sites that are just painfully ugly? Something with some 1998 animated gifs, or (God forbid) a site with some of those sparkly letters you see on myspace so much.

Do you swallow hard and build them a site that suits their taste even if it offends your own sense of style? Go go gadget sparkle!

Do you throw out all of their ideas and substitute them for your own?

Or do you try to somehow blend the two? Glassy effects and sparkles!!

Here is an extreme case. I built a site several years ago; it was basically a company that provided services for the elderly. The original design was meant to be cheerful, bright, and colorful. The first time I showed it to the owner he absolutely hated it. He demanded that I rework the site so the primary colors were black and violet. What is even worse, is he wanted his company’s logo to be a picture of an elderly couple floating in the clouds. Fortunately he understood that old people + clouds = dead people…not exactly the image you want to portray to your customers. In the end, the site was black, violet, and was (in my opinion) completely inappropriate for its target audience. Now that isn’t to say black and violet can’t work in some sites, just not this one.

With a client like that you don’t have a whole lotta choice except never to show the final result in your portfolio (that one never did make the cut by the way). In the end, the client always wins…

But lets take the scenario that you have a client who has…ahem…difficulties with their choices of style, but who has an open mind. In this case, I typically show them progress much more often than I would normally. This way you can build what you think looks good (you are the professional after all), but they can give their input before you wander too far down the rabbit hole. The end result is usually a nice, happy medium that looks good.

Another option is to try to get into their head and find out why he/she likes the sparkling animated American flag so much. You might find that what they really like is the concept behind the ugly pic rather than the pic itself. In this case the client may just want to show patriotism as a major theme. Work with them…talk with them…and find out the “whys”.

As with all of the issues around dealing with a client, in the end it all comes down to the relationship. With new clients it is important to show that you know what you are doing and are not some fly-by-night. Once that relationship is built, then you will be able to direct them in terms of style much easier than before.

So have any of you ever run into this problem? How did you deal with it? What advice would you give new designers/freelancers when it comes to clients with strong design opinions?

CSS Standards and Frameworks: Tripoli and Blueprint

Picture this…

Its 1:45 am. You have the shakes from too much coffee, but you are smiling because you have just finishing putting the final touches on your tableless, buzz-word compliant magnum opus. Just before you crash you decide to see how it looks in the new Safari for Windows you just downloaded. Suddenly, your masterpiece looks like some other kinda piece and you begin to weep.

We have all been there, and I am pretty sure that I have invented a few new four letter words over the years because of it. CSS is great, but it can be a bear to get working across the various browsers.

Enter the concept of CSS standards and framework libraries…

These are basically CSS files designed to make the browsers treat CSS elements the same way. Today I am gonna take a look at a couple of them (Blueprint and Tripoli) and give you peek into what is possible with each.

Read the rest of this entry »

35 Links and Resources to Maximize the User Experience

User Experience (aka UX) is the backbone for everything we as designers and developers do. Whether you are building the next google, or accounting software, how the user interacts with the application is paramount.

Officially (at least according to Wikipedia) UX “is a subset of the field of experience design which pertains to the creation of the architecture and interaction models which impact a user’s perception of a device or system. The scope of the field is directed at affecting all aspects of the user’s interaction with the product: how it is perceived, learned, and used.”

What I find interesting is most people who design applications don’t seem to take the user experience very seriously at all. “Does it look cool?” is typically the only question asked. I say that because it is the only explanation for a website that hides the navigation in some way or an application that is incoherent and difficult to use (but it looks cool). Now, if that is the point of the app, then more power to you…but most sites and applications are meant to be used by people who aren’t all that computer savvy. To make those applications successful, focusing on the user should be a top priority.

So to get all the designers, and developers (or anyone else who is thinking about creating some software) up to speed here is a list of articles, interviews, books, blogs, and podcasts about the rich world of UX.

Read the rest of this entry »

Niceforms and Uni-Form: Making forms pretty

So I was wandering around the web today and I found a couple of cool little scripts that make the daunting process of making web based forms pretty a little less so.

Now, if you don’t want to develop forms at all (but still want something pretty), you can always use something like Wufoo, Icebrrg, or Jotform.

However, if you want to get your dev on, making a form can be quite a challenge, but nowadays it doesn’t have to be. These two libraries aren’t new, but they are new to me so I thought I would share.

Read the rest of this entry »

Best of the Reboots (2007)

So if you read my article yesterday you might be a bit confused about this one. Why would someone who doesn’t get the whole reboot thing, have a post about the best reboot sites?

Well, I am glad you asked. Jon responded to my request for someone to explain the whole reboot thing. Here was his comment:

it’s a great way to get a lot of free advertisment if you do a good job. like a trade show, people show up because they know they’ll have access to a lot of people that are tooling about, specifically looking for something to get excited about.

internet foot trafic :)

That is a great answer, and made me realize that the reboot is kinda like a contest, where the prize is getting traffic to your site because of your new design. So I figured today that I would do my part for the community and give a little traffic to those sites that I liked for one reason or another.

So here we go, after looking through the vast majority of the sites from the two reboot sites, here are the ones that I liked the most (in no particular order).

Read the rest of this entry »

Design Breakdown - OpenDesigns.org

So today I am starting a new section of the site. Its called simply “Design Breakdown”. As the name implies, I will be taking a site and breaking it down and critiquing it. For the most part I will be breaking down sites that I have found trolling the web and like for one reason or another. The goal of this is not to bash a site, but rather see what works about it and what could be made better.

It is important to note that, unless specifically noted, I am not affiliated with any of these sites in any way, shape, or form. In other words, these aren’t sites that I designed and wanted to pimp them out.

On a related note, if you have a site that you own and would like it to go through the breakdown, email me and tell me about the site, what its purpose is, and why you would like the community to review it.

So with that…lets begin! Read the rest of this entry »

The future of UI

When you think of the user interface, what comes to mind? Graphics, design, flow, ease of use? More concretely, when you think about developing a UI things like CSS, Forms, Javascript, Xaml, etc. are the terms you hear.

But step back for a moment…what is UI? User Interface…how a user “hooks in” and uses some form of device. This device can be a car, a computer, heck even furniture. For the computer, the actual interface is a mouse, keyboard, and monitor.

In the future…there might be something like this.
Read the rest of this entry »

Spiffy Corners

I don’t know about you, but I love me some rounded corners. They just give off a more casual feel than the standard “hard” corners.

I have built several sites that do the whole rounded thing, but I have always done it the hard way by using a bunch of images and such. Why? I have never found a non-image way that gave nearly as clean of a look as an image. At least not until now.

Today I found spiffy corners. Its not a new site (its actually on its second version) so many of you may have already found this little guy, but he is new to me.

For those of you who don’t know about this site, it is a CSS and HTML generator that creates really nice rounded corners that don’t have all the “jaggies” that are so common. The resulting code isn’t too shabby either (which is a feat in and of itself). I tested it on Firefox 2.0.0.3 and IE 6 today and the examples looked great in both.

So if you are creating a site and need some nice looking rounded corners, give this guy a try and send me a link of your site!

Desigining from scratch - Steps and Resources

So the other day I got a new project. Nothing all that fancy, but the trick was, the company does not have a presence at all…no logo, no previous designs…nothin’. A clean slate.

A lot of designers love this situation. It allows them to be completely creative with no strings attached. Others have a mental coronary and have no idea where to begin. I fall right about in the middle myself. I enjoy the challenge, but that first step is always a doozy.

In this case, the challenge inspired me to keep track of the steps I went through to take a blank slate to a finished design. This article is aimed at beginners, but it will contain a lot of links that may be useful to the hardened vets out there as well.
Read the rest of this entry »