How NOT to design

Current annoyances in design. What makes your stomach churn?

hownottodesign

I just don’t get how some people with fancy bachelor degrees and/or are employed at design firms are so terrible at design 1.  All those years of study - in one ear & out the other. It’s not hard to see something and know it’s pretty ugly. As blunt as it is, design has to be superficially constructed.

None of the metaphorical artsy B.S. ever helps it. I’m not even really much of a designer (I’m an animator and Illustrator). I know I do things that are not the most fantastic looking things, even with my own design. I certainly do not have any sort of fancy piece of paper (they call them degrees) that gives me the right to tell everyone what I think, but seriously; if I could teach myself enough to make it into galleries, it’s no excuse for people who do have the qualifications. I’m sorry if I come across jaded, but it needs to be said.

But enough jabber; let’s go through some commonly reoccurring design mishaps that should induce a small amount of vomit in your mouth (don’t forget to swallow).

1. Opinions expressed are obviously subjective to my taste, but if you disagree with this you are obviously pretty bad.

Bevel and emboss

bevel-and-emboss

“Oh wow, I bet if I just made it 3d-looking and then dropped it in, it would look a million times better than without”

Pretty much the calling card of every Photoshop first-time user. The cause? The lack of attention to detail, and ignorance of settings. I’ll say this once as a pretty general rule: NEVER USE THE DEFAULT SETTINGS FOR ANY FILTER. I guess if it flukishly was set to what you require it’s ok, but never slap something on without controlling it, unless you want a kick in the throat. There really isn’t anything wrong with using the filters at all, but always make sure to adjust and detail before applying.

Splash pages

“A sweet introduction to the site would be so nice!”

Please don’t ever use these. It means a whole click and wait for the next page to load. It’s perfectly ok if it’s a holding page, but when it’s an enter page to a site - with no other option but “Enter this fantastic site because I made a button to let you do it”, you wonder why they even want you to go to their site in the first place. Splash pages are a redundant buffer. Who needs a site introduction really? If you have to introduce your site with dumb animation, or a giant button to tell people to enter it, then you are kidding yourself. Content first. Let a user see what they need to see coming to a site. Don’t give them some interactive experience bull crap, unless it will blow their mind.

Metal interfaces

brushedmetal

“Metal is so clean and shiny, so let’s use so much of it!”

Scratched metal, metallic interfaces, robotics, industrial. Ugh. Over-done and in most cases, terribly executed. Most of the time, it doesn’t even look like metal. It’s not techie and it doesn’t look modern. Trying to add the futuristic computer element to something you view on a computer? That’s about as lame as taking a holiday in your own backyard (if you have a fantastic backyard, just use mine instead).

Grunge

grunge

“Oh this is too clean, so let’s beat it up and make it look rusty and hot!

Grunge is like 1985 movie poster residue. A site that looks like the inside of a badly abused toilet is definitely one that won’t make your visitors want to stay and love. It can be done well, but don’t beat things up because of lacking ideas for a clean solution. If you do grunge, don’t do it just because it’s a quick way out.

Glow effects

glow

“Glows look so slick and futuristic”

STOP putting these on everything. Adding glows to things to make them stand out look corny. If this is the only style treatment you are aware of, you better enroll in a design life course. Like everything else, it can be used well in moderation, and in the right place; but don’t pull one out of your poop trap because your fingers are itchy. Get creative already.

No whitepace

whitespace

“Let’s conserve as much room as humanly possible”

Even my high school English teacher is guilty of this. Cramming content together to save space, just makes things much to dense to take in. Readability of type and general form is essential. Breaking up elements with whitespace defines digestible chunks of information, and establishes a visual hierarchy. Don’t go butting things right up to other elements so they kiss. It looks horrible and it’s impossible to read. Balance is the key.

Boxes

boxed

“Boxes are neat, so let’s only use them to wrap around everything!”

We really should be trying to push away from the mechanics of markup and instead hiding those clunky divs. Tight boxes stacked un-lovingly is stiff and dry. We live in a visual age, so get out those organic curves and open space and work the composition. Being restricted to boxes is so Internet Explorer 95.

Minimalism as an excuse

minimal

“If Apple can do it, so can I!”

Minimalism needs to be damn good to work. Too many people use it as an excuse for lack of creativity. 3 pieces of text and an image is boring. It’s definitely clean, but if the details are not beautiful, it’s about as great as eating flavourless porridge.

Crappy colour

colour

“These colours are playful and fun”

There’s really no excuse for horrible colour. If it looks right, it’s going to be right. If the colours look like an acid trip, don’t use them. Learn some colour theory

Debris

debris

“Look, look, look. All my unimportant flickr, twitter,last.fm,facebook…etc profiles”

Tacking on every single profile link is going to make people want to leave your site, giving traffic to the others. Read this.

Gloss

gloss

“SO WEB 2.0!!!”

Why do people still do this? Following every trend from any piece of web 2.0 design is sloppy. Gloss was never cool as a type treatment. Of course, like anything else, it can be done well, it’s just when it’s abused for every logo and piece of type… eeeh.

Gradient abuse

gradients

“Hmm, looks crap. Let’s add gradients!”

If you think you are going to make a horrible colour better and have more depth by giving it a gradient, think again. Don’t use gradients that change from one colour to a completely different colour (like white to black, or red to green). Make them subtle and smooth.

Oh, I know. I’m whining, but the internet is full of such terrible (yet recent) design. There’s so much more that I could list, but these are the ones that I see far too often.


I’m not saying to never use these stylistic treatments (as people who glance over and jump the gun are complaining about), I’m saying that if you are going to use a treatment in this medium, give it some T.L.C.


Got any bad design bones to pick? Yell them angrily.

« Alien | Ranga Yeti »

Information

Socialise

Share this around and Digg it, add it to Del.icio.us or StumbleUpon this!

The Commentary

Currently 81 responses.

  1. Gravatar

    Awesome article. I have been guilty, maybe am a bit guilty of a few of these, though I’m no designer.

    BTW, the vector’d fellow at the top of the page is dope. Love your work.

    Reply to this comment

  2. Gravatar

    @Mo Everyone has once! And thanks for the love!

    Reply to this comment

  3. Gravatar

    agreed! we’re all guilty at some point using it!
    remember darkmotion 1… and darkmotion 2… and i think 3! lol
    all these fundamentals i learnt when i started at a magazine… especially white space! but yeah… guilty as hell here for using (and from time to time (BLAME THE CLIENT - NOT ME!) still using it)… these little whatsies! :’(

    RARR!!

    Reply to this comment

  4. Gravatar

    @Michael Oh those old designs. I’m sure waybackmachine will uncover some old gems!

    Reply to this comment

  5. Gravatar

    Look what I found: http://web.archive.org/web/*/http://darkmotion.com :)

    Nice article.

    Reply to this comment

  6. Gravatar

    Doh, it broke the link. Copy/paste from the first http:// to the last .com

    Reply to this comment

  7. Gravatar

    Loving this article, definitely going to make sure it does the rounds :)

    Reply to this comment

  8. Gravatar

    This is some great work, I’d like to see the Glowing Text with some Bevel & Emboss please, then maybe add some purple blue and green gradients in the background. I’d quite like to see you drop in a picture of two people shaking hands. Then finish it off with a glossy comic sans slogan.

    Reply to this comment

  9. Gravatar

    All those things are uncool because they are outdated and poorly emulated by newcomers to design.

    Everything we do now will look just as old and lame in 3 or 4 years.

    Obviously some of the points you highlight are valid, such as poor layout/rythem/coloring, but there are others which don’t really hold water.

    Yes some grunge designs don’t look so great, but there are also some exceptional grunge designs, and those are the ones who came first. A good designer shouldn’t shy away from a certain technique just because lots of other people don’t know how to use it. As long as your designs fit with the ideology of the client or whoever the site it for, that’s what counts.

    Look at sites like http://elliotjaystocks.com/blog/
    that’s a grunge style site.

    Reply to this comment

  10. Gravatar

    Wow.. all that stuff is SO 90’s :)
    Love the article!

    Reply to this comment

  11. Gravatar

    Classic post!
    Rule 1: Always have a reason behind your design…
    and ‘it looks pretty’ isn’t a reason… ha ha ha.

    Reply to this comment

  12. Gravatar

    I still don’t get the appeal of metal.

    They key is moderation (including minimalism)… to much of anything is just plain ugly. <3

    Reply to this comment

  13. Gravatar

    Great article, thanks !

    Reply to this comment

  14. Gravatar

    I agree with you on, well, every single point here. Especially splash pages - people already decided to go to your website; they clicked a link or typed in the URL, so why do you have to make them confirm? It’s like Windows Vista.

    And, okay, I’m guilty of the gloss. I used it a couple of times. But at the same time, I was never really able to pull it off like some people…
    And gradients. I very rarely do straight gradients, color-to-color. Actually, almost every gradient I do is color-to-transparent. It’s shmexy.

    Reply to this comment

  15. Gravatar

    I think the bevel and emboss one drives me the most nuts. I want to pull my hair out seeing some of the billboards and ads done by local shops and put in *public*. I gave a double take the other day to one that had taken the time to cut out photos, and then applied bevel and emboss to those.

    Reply to this comment

  16. Gravatar

    @Harry yeah! Now you can see how fantastically I implemented all of the above

    @d3signar Thanks for reading!

    @Liam I’ll just design something fantastic with bold comic sans everywhere!

    @Dan Oh, don’t get me wrong; grunge can be executed fantastically as well as the other effects and styles listed, it’s just when it’s done tastelessly. Unfortunately it gives those styles a bad name :(

    @Mark The 90’s a timeless age… if you enjoy vomiting yesterday’s meal! :D

    @Curvball Absolutely. Design with no direction is dead in the water.

    @Liz Metal tastes funky to lick? I really don’t know why people think it’s appealing.

    @Thomas, no problemo!

    @Miiitch Maybe it’s a secret clause that sells a piece of your soul for every click.

    @Aaron Bevel and emboss is the devil.

    Reply to this comment

  17. Gravatar

    While I completely agree with the article I’m curious did you apply any of those design no nos to your character you drew at the top of the article?

    Reply to this comment

  18. Gravatar

    i see here that you have some design knowledge. i was wondering if you could give me some tips for improving my site: http://www.enchantedlearning.com/Home.html

    sincerely,
    Arthur A. Roomhouse

    Reply to this comment

  19. Gravatar

    Nice one Dude, well worth the read. I know a few people who need to read this. *forward Click*

    Reply to this comment

  20. Gravatar

    Then what do you do?

    Reply to this comment

  21. Gravatar

    Great post! Clashing colors along with really tiny or really big text bothers me the most. People won’t stay on a site that’s hard to read.

    Reply to this comment

  22. Gravatar

    Beauty is in the eye of the client.

    Reply to this comment

  23. Gravatar

    Is there anything you actually like? Seriously, I agree with many points in this article … but it’s not exactly constructive, is it?

    Reply to this comment

  24. Gravatar

    All of this is so true. However lets see a followup to this, some Do’s for all your Don’ts.

    Reply to this comment

  25. Gravatar

    I am kinda in love with you right now, although the debris point is a little humorous… considering you have a flickr widget at the bottom, and a twitter widget in your sidebar.

    Granted, they are done tastefully and unobtrusive, so it bypasses the “rule”. Either way, love the post.

    Reply to this comment

  26. Gravatar

    @Lis Nearly as awesome as medical journals

    @Juno I like a lot of things, like high fives, puppy dogs and great design! Just not those things!

    @Evan Teehee. I still think it’s OK to link to a couple of things, just not ALL of them!

    Reply to this comment

  27. Gravatar

    Well, I agree with some of these, however, I don’t with most of them.

    Web Design is a matter of industry, purpose, not much of personal preference. Form fits function.

    There is absolutely nothing wrong with grunge design, glossy text, minimalism, boxes, glow, and metal interfaces. It just depends what application it is for. Just because you don’t understand the aesthetics of grunge design, doesn’t mean its bad. Also, it is by no means a easy way out, well executed grunge style is hard to accomplish.

    Websites have almost limitless potential, so don’t limit them with these petty design tastes. They would have to be considered on a case by case basis.

    Also, I’ve seen some metal textures incorporated beautifully. Adding real life textures can increase the dimension of the website.

    According to your philosophy of “Its popular, so it sucks”, your website may soon be obsolete. Cartoon websites are on sharp rise.

    Of course, I personally don’t’ dislike your website design, I think it is wonderful.

    Reply to this comment

  28. Gravatar

    @Hyo I never said not to ever use these! Just not to use them terribly.

    Creating product vs creating something you can love. It’s always one you’ll have to battle with. :)

    And thanks for the kind words!

    Reply to this comment

  29. Gravatar

    Had to tilt my macbook screen back all the way just to read this article - white text on light blue background? Hm…

    Either way, good article. Some of these elements can look good - but most of the time they don’t. I look forward to seeing some Do’s!

    Reply to this comment

  30. Gravatar

    @Brian
    Hey thanks for confirming that! I was a bit on the fence in the beginning, setting the block colour of the body to white, but now I know that it should contrast some more (I’ll darken it out)

    and thanks for reading!

    Reply to this comment

  31. Gravatar

    […] eignet sich die Liste »How NOT to design« schon mal ein wenig. Dort sind insgesamt 12 Punkte aufgeführt, die sich der Ein oder Andere […]

    Reply to this comment

  32. Gravatar

    Great article. There is too much bad design around!

    (And honestly, I’ve probably made tons of the awful stuff myself)

    Reply to this comment

  33. Gravatar

    lol @ the lack of chunking in the whitespace one and the web2.0 glossy effect…hehe…and you know whats sad..is that some of these effects are taught to be used in our university…..

    Reply to this comment

  34. Gravatar

    Hate the game people. Don’t hate the players…

    Reply to this comment

  35. Gravatar

    This is great. I’ve always wondered the same things, I mean its obvious these sites look bad. I guess people just don’t get exposed to enough GOOD site designs to know that there is something better out there. I’ve always said stuff like this but whenever I say it people call me a douche. Haha

    Reply to this comment

  36. Gravatar

    you missed comic sans :D haha i haven’t talked to you in ages yo

    Reply to this comment

  37. Gravatar

    Well written! :)

    Nice site by the way (first time I’m here).

    Reply to this comment

  38. Gravatar

    I disagree with some of that. But yeah, I wouldn’t design my site that way.

    Grunge is not so bad when people know what they’re doing with it. For example, it’s one of the best ways to differentiate your background from standard fare - as long as it keeps with the site theme and is done in moderation.

    Reply to this comment

  39. Gravatar

    lensflare?

    Reply to this comment

  40. Gravatar

    Thanks for changing the color - look so much better!

    Reply to this comment

  41. Gravatar

    There’s nothing wrong with using the gloss effect if it’s done properly. But I do agree with everything you pointed out in this article.

    Reply to this comment

  42. Gravatar

    i stumbled upon this article and find it so useful. how do you draw bears so well? did you really work for Warner?

    Reply to this comment

  43. Gravatar

    Best article on the subject I’ve read in a long time. Aching to write a translated (and extended!) version. But I suspect that showing such piece to the clients instead of the designers would bring a greater benefit, as many clients, poorly educated in the visual arts, want to own all the design ideas. The designer becomes just a puppet to execute every one of their whimsical stupid ideas without exercising judgment in fear of losing the job.
    Sorry if I sound harsh but that it’s like. Designers’ fault has more to do with poor design choices. For a start, Brazil could happily rename itself The Country of Arial Black. I’m putting together a detailed piece on this phenomenon.

    Reply to this comment

  44. Gravatar

    <3

    Reply to this comment

  45. Gravatar

    Olvidas también que es de imbéciles hacer tutoriales de diseño sobre que se debe y no debe hacer.

    Reply to this comment

  46. Gravatar

    @lis <3 Are you really a model!?!?! :P

    @Daniel Absolutely. Clients and new designers need exposure to current styles.

    @hybrid haven’t seen you around for ages dude! Sweet to see you kickin’

    @Brian thanks for spotting!

    @Mario Thanks for reading! You should translate a version!

    Reply to this comment

  47. Gravatar

    I’m convinced this article teaches more than any local college around here. (Facepalm)

    Reply to this comment

  48. Gravatar

    HAHAHAHAHA Great!

    Reply to this comment

  49. Gravatar

    I have a Multimedia Design degree from Purdue University - and it didn’t help me at all once I got my first job. I basically had to start all over and re-learn a lot of things to make sure I wouldn’t get fired.

    I had to learn all about print industry standards and what it takes to make a quality product. I also learned about the “trends” late in the game. I myself fell prey to the often used “trends” in design - though with that experience I think that it’s helped me to define myself in the later years as a designer.

    What’s funny is a lot of the outside client work we get from designers from advertising agencies or in house designers is never set up correctly or are exactly what these trends you’ve outlined are.

    Just the other day someone called me on one of the designs I had sent in and asked me to “bevel” their logo to help it stand out.
    I about gagged.

    Great article Dark.

    Reply to this comment

  50. Gravatar

    I agree. I started web design / development a year ago and
    I’ve learned the Adobe CS3 suite, PHP, javascript, Ajax, AS3 and other stuff on my own without a degree. My first sites were pretty lame but now I think I’m doing well.

    I think WAY too much emphasis is put on that piece of paper they give you and not on talent and skills. A lot of web design is practice and hands-on experience.

    Reply to this comment

  51. Gravatar

    How NOT to design…

    How many of these are you guilty of, and which do you not agree with?…

    Reply to this comment

  52. Gravatar

    Jams no reads everyone else’s comments,

    but most of those things are fine, if used correctly.

    Like you said, no one should EVER use default settings…

    Oh well, noobs are noobs because they are noobs, you should see some of the ancient shit I made 6 or 7 years ago, holy fuck,

    Reply to this comment

  53. Gravatar

    “Grunge” is the worst thing to happen to graphic design since the 80’s.

    Reply to this comment

  54. Gravatar

    […] in der ersten Stunde, die Default-Einstellungen zu benutzen. Dasselbe verbietet Darkmotion bei der Benutzung von Filtern. Zeit für mich, auch irgendwas zu […]

    Reply to this comment

  55. Gravatar

    I really enjoyed this article, I was cracking up the whole time! Props

    Reply to this comment

  56. Gravatar

    how much longer are designers going to be using sunrays, flourishes, donuts, reflections, and child-like sketches? A new phone add comes out, it has flourishes all over it, a new designer makes a new design, fresh brand new, flourishes all over it. Then the sun rays, then the donuts, then scrap everything and bring in the drawings made with the weak hand. Can’t do that? well autotrace a stockphoto and clean it up a bit then reflect it, with the sun ray behind it, hey that’s only done a few thousand times. There are so many good designers that work on designs that look like another good designers design that looks like the last one. Talent gone down the drain.

    Reply to this comment

  57. Gravatar

    Nice article, must say i’m guilty in most cases (total amateur). But it kinda creeps me out cuz i know i’m gonna suck even more in the future… Or not.

    Reply to this comment

  58. Gravatar

    […] Nuff said.. […]

    Reply to this comment

  59. Gravatar

    […] How NOT to design | darkmotion. […]

    Reply to this comment

  60. Gravatar

    […] Visit Article […]

    Reply to this comment

  61. Gravatar

    While reading that I was having flashbacks to the old web when neon was still fashionable and frames were the hottest thing.

    Reply to this comment

  62. Gravatar

    haha. brilliant work. the hilarity….

    Reply to this comment

  63. Gravatar

    humorously true.

    it must be annoying when people comment this article arguing that ‘these things can be ok if done well’, when that is what you were stressing throughout the article. people should take time to read it if they are going to comment on it

    oh and by the way, i just wondered why the top character’s teeth are skin coloured? haha

    Reply to this comment

  64. Gravatar

    oops, shit, no, i just tilted my laptop screen and looked again. they are white. sorry for my incompetence

    Reply to this comment

  65. Gravatar

    @Joe Exactly on the money! I’ve been getting people complaining, when I am making a point that it is when it is executed sloppily. If they are offended when I say not to design badly, then something is wrong :)

    And haha, if his teeth were off-white it might have given it an even seedier effect!

    Reply to this comment

  66. Gravatar

    […] read this article by my homie darkmotion: How NOT to design | darkmotion Pretty much sums up everything you need to forget Photoshop can even do  […]

    Reply to this comment

  67. Gravatar

    Great advice. Thanks!

    Reply to this comment

  68. Gravatar

    Haha, good article! I actually have some degree in art , not in design, but hell, i’ve used tones of those grunge effects.. it’s an easy lazy way to cover imperfect blending in a photo collage, for example :D And what is worse, ‘dirty’ look was very appreciated in my school, from painting to fashion design classes. They actually taught us a big load of crap at school..
    Btw, how about swirls? Now all design seems to need those..

    Reply to this comment

  69. Gravatar

    i’m serious, why do most general popular public sites have donuts all over them? if not the donuts, the swirls. Mays well take a photo, blast the highlights, add every preset brush in some package, split it down the middle and reflect it. Donuts everywhere, i’m going to start making composite squares and seeing if they catch on.

    ..

    an illustrator used to be a person who used pencil and ink, now an illustrator is a version.

    Reply to this comment

  70. Gravatar

    […] bepalen - nog meer inspiratie - 9 css oplossingen die iedere vormgever zou moeten weten… - hoe het dus niet moet - nog wat meer css […]

    Reply to this comment

  71. Gravatar

    I love this article. Good, or at the very least competent, designers can use any one (or more) of these techniques and make a brilliant-looking design.

    Rookies with minimal PS/design experience think they can mimic them by using simple point-and-click PS techniques. This annoys me.

    Even popular PS tutorials I’ve seen over the years insult my intelligence: their final results often look like the inept, default-filter crapshoot designs you demonstrated above.

    Everything you listed, as you said, can be done well. Grunge and metal are two of the most time-consuming styles to pull off, and how anyone can consider them a “fallback” is beyond me. A good grunge design requires a lot of attention to detail and PS skill to make it look convincing.

    Reply to this comment

  72. Gravatar

    @Logan Thanks for reading!

    This is exactly what I am poking at. It’s not about current trends, it’s about the laziness of ‘designers’.

    These things can be done well!

    Reply to this comment

  73. Gravatar

    @Paul Rand’s Ghost How about you post a URL to your work here you talentless twat?

    Reply to this comment

  74. Gravatar

    @Jack don’t worry, it’s just another arthole :)

    Reply to this comment

  75. Gravatar

    Great post. Curse Web 2.0. Though I’ve also been guilty of a few of these, usually by client request though.

    Reply to this comment

  76. Gravatar

    I just love your example images, how did you do them!!

    Reply to this comment

  77. Gravatar

    Man. This is one helluva good article. I especially find the splash page bit and the clashing colours bit so true.

    (speaking of which, if you have the time, go analyse my blog and see if I made any of those design mistakes. And correct me immediately if I have.)

    Reply to this comment

  78. Gravatar

    Clean and simple is what I say.

    Reply to this comment

  79. Gravatar

    At one time or another there was a reason to use all of these techniques, the ones that were most popular became “filters” making them easy for millions of amateur designers to duplicate. I know we wouldn’t have a problem with say, glow effect, if designers still had to take the time to figure out how to accomplish the look of glowing text without a filter. In my opinion if anyone is at fault here its not the amateurs but the people at adobe for taking graphic design from something that took years of study to master, to something any housewife can dabble in in her spare time.

    Reply to this comment

  80. Gravatar

    Sometimes you can’t knock people. For one, and I’m just saying this in general to no one specific, you can’t hate on people with degrees. There’s nothing wrong with wanting a well-rounded education. You learn a lot more in uni than just what your major focuses on. As for splash pages, among other things, sometimes clients and idiots and they demand such things. You can argue with them about why they’re dumb, but they’ll win in the end when they’re the ones paying you.

    Reply to this comment

  81. Gravatar

    pretty basic rules.. I think whats hot now is probably the mtv.com look… looks pretty sweet. the whole zine look.

    Reply to this comment

Play nice!
Basic HTML enabled for style.
© Pasquale D'Silva | Feed | Going up?