Are you addicted to gradients, big fonts, a typical set of icons to explain that there’s 39 comments on your great post? It’s very easy to get stuck in the same old look and feel, even though your designs are very different from each other. We tackle this in different ways (although some people doesn’t need to tackle it, and others do but just don’t).
Me, for example, can CSS galleries, look at photos, listens to music, glance to magazines, look at games and movies, and take long walks. There’s always something to get the mind thinking of new ways to do this or that.
We need to question our design style sometimes, even if we end up in the same place that we started from. It’s a matter of taking something and turning it around so we can grasp what it is all about.
You’re probably already doing that, but if you’re not, here’s a few fun ideas where you, as the savvy web-designer that you are, will have to think outside the box. Or at least peak over the edge.
1. No images!
That’s right, design a site with no images whatsoever. The type is your only graphical element, and background colors of course. That means no cool logos, smashing menu graphics, or gradients in the background. Some sites do this so well today, so it’s not really that far off from the current buzz and whatnot, but it’s a challenge all the same.
2. Do a [insert least favorite color here] design
I’d like to say that it would mean that I’d be forced to do something in pink, but that would be lying. I like pink. Purple, on the other hand, feels tacky and meh to me, so that would mean that I’d have to do a design where purple is the dominating color. It is oh so easy to get stuck with those clean blues and greys, oranges, or whatever’s your poison. Speaking of which, I wish there were more green sites. I like green.
3. Monospace only
This one might be a bit tricky. All the main text should be monospace only, which means fonts like Courier and Lucida Console. Personally, I’m a sucker for monospace, but it usually isn’t user friendly enough. That’s something you need to tackle if you want to succeed here. Granted, this is more fun and cool, than actually useful.
4. Hardcore anti web 2.0
I’m not really sure what this means, but think dark rather than light, small pixel fonts, things like that. Mirroring logos is a no-no. The idea here is to really question all the things that are common today. The end result will probably be a bit much, but taking a little of the best from yesterday, and doing it by today’s standards (usability came second in the 90s and early 00s), might not only be interesting, it might even end up quite nice.
5. 640×480 pixels
I’ve got three high resolution screens on my desktop. My first computer didn’t. In fact, I believe it had a resolution of 640×480 pixels, which, well, that’s almost an ad format today… But what can you do if you’re pressed for space? Let’s cram a full fledged site into a small box and see how we solve things like navigation and such. If nothing else, it’s a good exercise if you should design a site for the iPhone or other mobile handsets.
I do things like these every now and then, for two reasons. One is because I really do think that we need to push ourselves a bit, and find new ways to do things. The other is because it reminds me why I got interested in the actual design: It’s fun. (And pays the bills too.)
Author: TDH
Thord Daniel Hedengren is a Swedish freelance designer and often hired blogger, as well as a web consultant. Visit his blog for more: tdhedengren.com
Nice suggestions. I especially like the first one. Developing skills in working with typography, spacing and balance could certainly be enhanced this way.
Thanks Steven! Will you pick up the challenge? ;)
I’m with ya on the anti Web 2.0 stuff. There’s only so much a person can take! ;)
Very nice post. Dugg and Stumbled for ya.
Great post. It’s so easy to get stuck in the 2.0 rut – I love designing 640×480 sites too – everything is so compact!
Really interesting the part about a no-image design…I think that amazing things can be done with just typo…
Interesting. I just started redesigning my company site last night and I decided I’d use only typography as design elements. #1, check. Don’t know about #2 – there’s usually a reason why you don’t use certain colours… Ever tried designing a site with only bright yellow and hot pink? Finally I agree 100% with #4: Web 2.0 is so over it’s not even funny. I’ve come to detest mirrored logos and pastel coloured sites. Total lack of imagination if you ask me. “Uuuuu… let’s make everything look like we’re out of work Apple designers”. Yeah, great. NEXT!
640×480 is a good challenge, but makes a horrible iPhone web site. The iPhone browser is at it’s best when navigating around a large space that you can quickly zoom into areas of.
That’s not to say there are not other aspects where you could productively alter a site for iPhone optimization, but size should not be one of them.
This is a great bunch of advice. We get a lot of challenges like this at school where design is taught more as art. Things like “model a 3d object with paper and only illustrator.”
One I would add is make a design in just black and white. but other then that great list of challenges.
Thanks all.
@Morten,
Yeah, that color combination wouldn’t work, but I did write that you’d go with your least favorite color, ie just one. ;) So hot pink as your main color for your next design then?
640×480 pixels? If you’re going to go that route, you might as well add more constraints and explore developing interfaces for cell phones. Something like 320×400 (not sure)
That would certainly provide a designer a chance to look at new design techniques
That’s true, Justin, but it’s also so far from web design that it becomes mobile design. But yeah, that’s a great challenge as well. And great fun, constraints can be good for creativity.
Great post. Really Thanks!
This is just what I needed! The first line of your post caught me right away: “addicted to gradients.” Time for me to show the people at the office here that I can do so much more! The unfortunate thing is that these excercises are not very likely to become real (commercial) websites. Guess we have to start looking for some more artistic customers!
Thanks for the great post!
Thanks guys!
Working with text is always fun, but I always like to change the size of the fonts adding some color too.
Lots of text can be used to improve search engine optimization. Low-resolution is easier on the eyes,
but just a notch finer is more commonly used.
thanks from Tony
I think these are some great exercises to try out. It’s very easy to get caught in a design rut, churning out the same stuff over and over with only slight modifications. I find myself doing this quite often these days. I’m going to be developing a new app soon and I actually think it would benefit from some of these ideas you have, so I’m gonna give it a go. Great article!
great tips here!
Nice post with some helpful advice for anyone looking to reset their design brain stamp. Thanks for sharing.
This sounds like a good excercise. Lately I’m starting to feel every site I make is the same, even though they “look” different. I’m stuck with black, gray, white and blue. I guess I’ll try your suggestions :P I’ll start working on a brown site… God, I HATE brown!
Thanks, it’s a great article!
Adolf
thanks, can’t wait to try these out :)
These are one-time fixes, but if you’re really stuck in a rut it is always a good idea to visit design exhibitions, read books on the creative process, and have regular, solid discussions with designers from different fields.
But everyone here does this already, right?
Interesting ideas Thord, I too like the 1st and 2nd suggestions. Not so sure about the monospace :)
Heyy!,
You really made me think. I really like the 1st and 5th idea. Would work on it someday :)
I admire your suggestions. I think they would all be good practices for designers who are looking to stop repeating themselves. I do think some of them are a bit too “quick-capsule” however. Like suggestion 1, CSS cuts out so much typographic designing effort for people i nearly think the opposite would be more interesting. Ditch type, go all image, icons only for menus, logos without type, text as part of image as little type as possible. With what one can do with CSS nowadays there is a tendency for alot of design to repeat itself, whereas good images and good use of images is in a little bit of a decline. Both ideas would be interesting as they would challenge the designer to not make things too busy or plain while testing communication skills. I also think dominant but efficient image usage would compliment suggestion 4 better. Suggestion 2 is a great idea that designers should practice constantly, you never know what colour scheme a client might suggest. Suggestion 3, like 1 is a little narrow, monospace does alot of the work for you. Technically, they are a tad overused – packaging, books, album covers etc. What about scripts? Good usage of scripts is rare but possible. I think suggestion 5 is great, almost more like what you’d want to achieve with suggestion 1, i.e. efficient and pleasant use of space under enormous limitation. Good suggestions though, i’d like more of these.
I took a cue from your article when designing my new WordPress theme Typograph. I usually rely heavily on images in my designs so this one is pure CSS with no images:
http://blog.pinkandyellow.com/css/typography-new-wordpress-theme-20081127/
Thanks for the suggestion. It was a nice challenge.
Love this list! Great inspiration.
Good post, break the monotony. It’s easy to get in design ruts I think. I use reflections and gradients to “punch things up” all the time. They’re overused on the web, but they work so that is probably why they’re overused. Good to consider alternatives.
Thanks.
Pretty decent tips. I’m all for the simplicity and anti web 2.0 stuff too. Too much clutter on the net these days!
Trying to move away from your usual pattern of designing a site, can be quite challenging. Using the methods as mentioned above will give you a good basis to completely restructure your design, keeping it simple and to the point. Point one states that using no imagery can be just as effective. I am not convinced by this at all – unless the imagery itself is made up of various typefaces. I think it is important to use features like this to appeal to the user and keep them entertained. Some good points made here but I think you need to expand on more topics such as: typography, animation and the general functionality of a website.
We all need to get out of our comort zone once in a while. These things helps us to be creative by getting back to basics
This article is very refreshing. Lots of creative ideas especially designing with no images. I really need to improve my typography among any other things. I also like number 2 idea because I’m a sucker for clean business designs. hahaa. Thanks for sharing this Thord.
i decided to code a new web design, just for fun and i was halfway trough with it when i just read your post. it’s amazing how my experimenting resembles your suggestions. it’s like #1 – check, #2 – okay i wanted to use colors i like so no check here, #3 at fist i used courier but then i changed it, #4 check and #5 check too.
Very nice post.
Thanks!!
+1 )
Hi! These tips are really helpful to push ourself beyond “DESIGN” boundaries.
Great article.
Nice list of exercise to start thinking and designing out of the box or your normal comfort level. It’s hard but all it takes it one step, one unusual color, etc and the ball is already rolling.
Paul
Cool stuff – I can’t stand turquoise, but I found that if I darken and/or desaturate it, I can work with it. Maybe the next step for me is to design a nice light, saturated turquoise logo… shuddering…
I love your ideas- my art teachers are/were great at doing this- but once you graduate you sort of forget to give yourself the creative excercises you need to not only refresh, or break out of, your artistic routines or habits, but to also, even more importantly I think, expand your creative/artisitc palette so that you can grow as an artist- which is exactly what your excercises offer.
I think what one or two commenters are missing about this is that, although you sometimes will, the point is not so much to have a perfect, final piece at the end- actually, to the contrary, you may finish with something that isn’t even usable. The final output, in terms of usability, should be more of a subtle guide, & shouldn’t be the main priorty of each excercise*- It’s more about pushing yourself as an artist past the boundaries that you have inadvertantly confined yourself to- the focus should be on the action, the creative process, as a means to an end, and not just the end itself.
*this isn’t to say that you shouldn’t make it creative, or aesthetically appealing, nor do I mean to completely ignore or abandon everything you know, or have learned, about the elements of good design – chances are, being that you are, afterall, an artist, that it would be difficult for you to ignore all of that anyway, as it most definitely is already a part of you – when it comes down to it, the excercises give you a set of constraints and then challenge you to work within them to see if you are still able to create a beautiful design- action first, (ie experiment & play), THEN focus on the refining & polishing as an afterthought- you want to be able to experiment & play without worrying “will this look good” or “will I end up using this”
This was a great reminder for me- thank you for that!
Thanks, Superb Ideas
I actually tried #3 on one of my personal/experimental sites last year (http://superspud.com). Wondered if courior font could actually look nice :) Plus, also tried a yellow background. Didn’t come out too bad (though I have to do some adjustments for Safari).