SpyreStudios

Web Design and Development Magazine

  • Design
  • Showcase
  • Inspirational
  • Tutorials
  • CSS
  • Resources
  • Tools
  • UX
  • More
    • Mobile
    • Usability
    • HTML5
    • Business
    • Freebies
    • Giveaway
    • About SpyreStudios
    • Advertise On SpyreStudios
    • Get In Touch With Us

5 Ways To Break Your Design Habits – Just For Fun

November 19, 2008 by TDH 55 Comments

Breaking Design HabitsAre 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.)

Filed Under: Article, Design

Comments

  1. Steven Snell says

    November 19, 2008 at 9:03 am

    Nice suggestions. I especially like the first one. Developing skills in working with typography, spacing and balance could certainly be enhanced this way.

  2. Thord Daniel Hedengren says

    November 19, 2008 at 9:04 am

    Thanks Steven! Will you pick up the challenge? ;)

  3. Deron Sizemore says

    November 19, 2008 at 12:03 pm

    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.

  4. Kely says

    November 19, 2008 at 4:01 pm

    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!

  5. ilBane says

    November 19, 2008 at 4:25 pm

    Really interesting the part about a no-image design…I think that amazing things can be done with just typo…

  6. Morten says

    November 19, 2008 at 8:41 pm

    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!

  7. Kendall says

    November 20, 2008 at 1:45 am

    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.

  8. Pat Arlt says

    November 20, 2008 at 2:04 am

    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.

  9. Thord Daniel Hedengren says

    November 20, 2008 at 2:11 am

    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?

  10. justin riddiough says

    November 20, 2008 at 2:39 am

    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

  11. Thord Daniel Hedengren says

    November 20, 2008 at 2:45 am

    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.

  12. dex says

    November 20, 2008 at 3:15 am

    Great post. Really Thanks!

  13. Marksson says

    November 20, 2008 at 3:29 am

    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!

  14. Thord Daniel Hedengren says

    November 20, 2008 at 3:34 am

    Thanks guys!

  15. ntopics says

    November 20, 2008 at 3:39 am

    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

  16. Mark Nutter says

    November 20, 2008 at 7:24 am

    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!

  17. davesworkout says

    November 20, 2008 at 9:21 am

    great tips here!

  18. csstinderbox says

    November 20, 2008 at 9:27 am

    Nice post with some helpful advice for anyone looking to reset their design brain stamp. Thanks for sharing.

  19. Adolf says

    November 20, 2008 at 11:13 am

    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

  20. Allison says

    November 20, 2008 at 2:44 pm

    thanks, can’t wait to try these out :)

  21. LL says

    November 20, 2008 at 6:21 pm

    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?

  22. Lee Munroe says

    November 20, 2008 at 7:39 pm

    Interesting ideas Thord, I too like the 1st and 2nd suggestions. Not so sure about the monospace :)

  23. shweta says

    November 21, 2008 at 12:19 am

    Heyy!,
    You really made me think. I really like the 1st and 5th idea. Would work on it someday :)

  24. de-sign everything says

    November 26, 2008 at 5:51 pm

    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.

  25. Morten says

    November 27, 2008 at 1:06 pm

    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.

  26. Jessica says

    December 3, 2008 at 4:39 pm

    Love this list! Great inspiration.

  27. John says

    January 16, 2009 at 5:57 pm

    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.

  28. Bart the MMA Pull up Master says

    January 20, 2009 at 4:03 pm

    Pretty decent tips. I’m all for the simplicity and anti web 2.0 stuff too. Too much clutter on the net these days!

  29. Laura Godfrey says

    June 3, 2009 at 4:15 am

    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.

  30. Lee Newell says

    June 15, 2009 at 7:25 pm

    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

  31. Raymond Selda says

    July 13, 2009 at 12:08 pm

    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.

  32. 45% says

    July 14, 2009 at 10:56 am

    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.

  33. Dominic says

    September 12, 2009 at 2:23 pm

    Very nice post.
    Thanks!!
    +1 )

  34. Dinesh says

    October 14, 2009 at 8:53 am

    Hi! These tips are really helpful to push ourself beyond “DESIGN” boundaries.
    Great article.

  35. Paul Her says

    October 15, 2009 at 10:41 am

    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

  36. Steve Spatucci says

    October 15, 2009 at 11:08 am

    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…

  37. Christie Bella says

    October 26, 2009 at 4:04 pm

    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!

  38. Param says

    November 13, 2009 at 5:29 am

    Thanks, Superb Ideas

  39. Daniele Rossi says

    June 2, 2010 at 4:51 pm

    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).

Leave a Reply

Your email address will not be published. Required fields are marked *

Please prove you're human *

Recent Posts

  • What Factors Determine the Best Digital Marketing Agency?
  • 31 Fresh Design Elements for Spring and Easter
  • 10 Templates for Music Concert Flyers
  • How to Build a Web Scraper Using Node.js
  • Best PHP Books, Courses and Tutorials in 2022

Archives

  • June 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • September 2017
  • August 2017
  • July 2017
  • June 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • September 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • February 2016
  • January 2016
  • December 2015
  • November 2015
  • October 2015
  • September 2015
  • August 2015
  • July 2015
  • June 2015
  • May 2015
  • April 2015
  • March 2015
  • February 2015
  • January 2015
  • December 2014
  • November 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • May 2014
  • April 2014
  • March 2014
  • February 2014
  • January 2014
  • December 2013
  • November 2013
  • October 2013
  • September 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • October 2012
  • September 2012
  • August 2012
  • July 2012
  • June 2012
  • May 2012
  • April 2012
  • March 2012
  • February 2012
  • January 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • August 2011
  • July 2011
  • June 2011
  • May 2011
  • April 2011
  • March 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • August 2010
  • July 2010
  • June 2010
  • May 2010
  • April 2010
  • March 2010
  • February 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • July 2009
  • June 2009
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008
  • October 2008
  • May 2008
  • April 2008

Categories

  • Accessibility
  • Android
  • Apps
  • Art
  • Article
  • Blogging
  • Books
  • Bootstrap
  • Business
  • CSS
  • Design
  • Development
  • Ecommerce
  • Fireworks
  • Flash
  • Freebies
  • Freelance
  • General
  • Giveaway
  • Graphic Design
  • HTML5
  • Icons
  • Illustrator
  • InDesign
  • Infographics
  • Inspirational
  • Interview
  • Jobs
  • jQuery
  • Learning
  • Logos
  • Matrix
  • Minimalism
  • Mobile
  • Motion Graphics
  • Music
  • News
  • Photoshop
  • PHP
  • Promoted
  • Rails
  • Resources
  • Showcase
  • Tools
  • Tutorial
  • Twitter
  • Typography
  • Uncategorized
  • Usability
  • UX
  • Wallpapers
  • Wireframing
  • WordPress
  • Work

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

SpyreStudios © 2022