Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Andere mochten auch
Ähnlich wie Design killers
Ähnlich wie Design killers (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Design killers
- 1. Design Killers How to recognize when they’re killing your project and how to bring good projects back from the brink of doom
- 2. Design Killers Ruin good projects. Sometimes, they kill off great projects. It’s a good idea to know that they’re out there, so you can spot them in a lineup.
- 3. Meet the Usual Suspects
- 4. Meet the Usual Suspects
- 8. There are words - too many of them.Crimes of Discontent If you’re adding non-nutrious content to your site, be sure it’s actually dessert.
- 10. Content How do you pick your content images?
- 11. Look at things.(Yes, I’m serious.)
- 12. 1977
- 13. 1977 (pong)
- 14. Art is Inspiration Why bother?
- 16. Meet the Usual Suspects
- 18. Overuse of grey and khaki
- 19. Can’t tell if it’s a wireframe or a siteExTERminATE! Don’t get me wrong.. Function over Form any day of the week. But if you’re playing it safe with defaults, you are headed for heartache. Actually, heartache would be preferable. You’re headed for blah.
- 20. Default Lies not in the stars, but in ourselves.
- 23. Some art is “just decorative” Some art is created to match your sofa Some art is created to make people say “oh how pretty!”
- 26. Metro
- 27. Panorama
- 29. How to solve the case: Admit it. Humans are emotional.
- 30. Meet the Usual Suspects
- 32. wincing *
- 33. animated gifs (*unless you are colorblind, which in many cases leaves you blissfully immune)
- 34. Color
- 35. Color What it is and what it’s good (and bad) for
- 36. Color
- 37. Warm
- 38. Cool
- 47. How to solve the case: Pick a limited palette that’s consistent with your brand.
- 48. Why have Design Guidelines? Myspace Customization Facebook
- 53. Meet the Usual Suspects
- 55. You are trying to do something and something is blocking youInterruption If you are interrupting someone using your product, just like in real life, you’re being rude. Be sure there is a good reason for it. Most of the time, popup interruptions will be seen as an advertisement and people will try to skip or instinctively avoid looking at it. This includes splash screens and page interruption adverts.
- 56. UX (bless you?)
- 57. How to solve the case: Remember what you set out to do, and let your customers do it as easily as possible.
- 58. Meet the Usual Suspects
- 61. Or, everything is so angular it hurts to look at it.Tends to work with her brother, “Buster” and often a crew of minions called “browser bugs”
- 62. Layout Three things to keep in mind
- 64. Lin Bolin Seeing the Invisible
- 69. Create order with grids.
- 70. Thanks, Lokesh! Check out his blog: www.lokeshdhakar.com
- 71. Thanks, Lokesh! Check out his blog: www.lokeshdhakar.com
- 76. How to solve the case: Keep the Design in Mind.
- 77. Meet the Usual Suspects
- 82. And then she saw it… And then she saw it… Oh, you get the idea. And then she saw it… And then she saw it… And then she saw it…
- 90. Killers?
- 91. Community? You’re soaking in it!
- 92. Code Camps, User Groups, Meetups, and Tweetups You’re already here. Go ahead and ask around! (Or you’re watching this online) DM me @dianeleeper
- 93. Blogs, Sites, Online Magazines SmashingMagazine Abduzedo.com visitmix.com Interaction Design: www.ixda.org
- 94. Conventions: Mix, Max, and SXSW SXSW.com 2009.max.adobe.com/online 2010.max.adobe.com/online videos.visitmix.com= MIX09 live.visitmix.com = MIX10
Hinweis der Redaktion
- Introduction
- Design Killers ruin good projects.Sometimes, they kill off great projects. People don’t understand why, but there are a lot of reasons (I’ll go over a few).It’s a good idea to know that they’re out there, so you can spot them in a lineup.
- iStockPhoto comp. Go to iStockPhoto and show them around.And, always get the right size and pay for it. If you put the comp image up on a real website, I will smack you.--- http://www.useit.com/alertbox/9605.htmlAnything That Looks Like an AdvertisementSelective attention is very powerful, and Web users have learned to stop paying attention to any ads that get in the way of their goal-driven navigation. (The main exception being text-only search-engine ads.)Unfortunately, users also ignore legitimate design elements that looklike prevalent forms of advertising. After all, when you ignoresomething, you don't study it in detail to find out what it is.Therefore, it is best to avoid any designs that look like advertisements.The exact implications of this guideline will vary with new forms of ads; currently follow these rules:
- Don’t forget copy. If you don’t need to say it, don’t.
- Look at things. Things in your world.Look at things NOT in your world. It’s actually really hard to look at things.As soon as you start looking at things, your mind starts playing tricks with you.“Oh! That’s the part when CharltonHeston screams…” wait, everyone seen this, right?If you want to design things to be used inside a culture, you have to understand it. The more you observe, the more you have stored in your creative reserves.I have a few favorite blogs for this, http://designcollector.nethttp://abduzeedo.com/
- So why should you pay attention to Art and Culture?Because of this. How many imaginations were sparked by this?How different would the world have been if Lucas had stuck to the type of technology we actually had in 1977?
- Not that Pong wasn’t fun.But it does bring us to one point Pablo Picasso and Douglas Adams agree on. More on that later.
- The reality is that form from function will only carry you so far.The Model T was an incredible design innovation and impressively functional. 16.5 million sold From 1908-1927 – that’s only 19 years. All other cars that outsell it have been sold for more than twice that long!But when money drives production, creative energy jumps from the car.
- And goes on a direction all it’s own.Finding new directions is what Art is all about.When you find those promising outliers, innovative design work is what takes them from concept to production.Finding that core is where your contents should be
- How to tell if safety is killing you: The UI looks functional Overuse of grey and khaki Can’t tell if it’s a wireframe or a siteExTERminATE !Don’t get me wrong.. Function over Form any day of the week. But if you’re playing it safe with defaults, you are headed for heartache. Actually, heartache would be preferable. You’re headed for blah.
- Don’t get me wrong.. Function over Form any day of the week. But if you’re playing it safe with defaults, you are headed for heartache. Actually, heartache would be preferable. You’re headed for blah.If you’re not getting an immediate visceral feeling of warm fuzzy, the conceptual feeling of snappy responsive and well organized had better be really strong!
- Metro design interface does this really well – the focus is on the interaction and function while the content could be anything the user selects. From http://www.signature9.com/electrotech/windows-phone-7-is-gearing-up-to-take-on-ios-and-android-heres-how
- For UX, I think the most powerful concept is the Panorama.See how things slightly overlap at the edge?That’s called teasing. People know there is more to see and try to see it.I think the images here also emphasize that people, well, like images.
- We seem to have a basic urge to draw and decorate… which leads us to one of the big killers….
- I’m not sure why, but I’ve noticed most pages which have animated gifs also have color issues. There must be a correlation. Oh, and music. (God, please make the music stop.)
- It’s easy to tell when something has gone horribly wrong. Screenshot from websitesthatsuck.com
- Quick primer on Color. Remember this from grade school?
- The warm colors are firey.
- The cool colors are calm.This is all kinda relative, though.
- There was quite a scandal when Thomas Gainsborough painted this. Blue, as a focal point? Scandal!! The reality is that warm and cool are very relative terms, and they can combine to create interesting effects.Take the idea of complimentary colors.---Wikipedia: It was often rumored that Gainsborough painted the portrait in response to rival Joshua Reynolds,[2] who had once written:"It ought, in my opinion, to be indispensably observed, that the masses of light in a picture be always of a warm, mellow colour, yellow, red, or the green colours be kept almost entirely out of these masses, and be used only to support or set off these warm colours; and for this purpose, a small proportion of cold colour will be sufficient. Let this conduct be reversed: let the light be cold, and the surrounding colour warm, as we often see in the works of the Roman and Florentine painters, and it will be out of the power of art, even in the hands of Rubens and Titian, to make a picture splendid and harmonious."[2]
- Complimentary colors are across from each other on the color wheel – Let’s take a look at blue and orange
- Complimentary colors are across from each other on the color wheel – Let’s take a look at blue and orange.
- So there’s quite a bit going on here in this print advert, but notice how the COLOR in the picture is black, blue, and orange. The droplet with the blue backglow is in the shape of Mia Hamm playing soccer. Clever, and I’m always surprised how many people say they missed that.So what does it look like in a website?
- Again, the blue and orange are working well, this time in a light background – which is a good choice for reading text. Black backgrounds are great for drama, but hard to read.
- This can be a bit tricky, which I’ll discuss in a bit
- Ok, that makes sense. Anyone remember the mess that myspace was since users were allowed to design it any way they want?One reason why facebook is so popular *cough* Consistency across multiple pages of similar information,Avoids the jarring transitions.
- http://www.useit.com/alertbox/9605.htmlbanner blindness means that users never fixate their eyes on anything that looks like a banner ad due to shape or position on the pageanimation avoidance makes users ignore areas with blinking or flashing text or other aggressive animationspop-up purges mean that users close pop-up windows before they have even fully rendered; sometimes with great viciousness (a sort of getting-back-at-GeoCities triumph).---Now, many browsers even offer this as a built in feature.
- POPUPS
- Sneaky trick #1 : What’s missing? LAYOUT
- How to tell she’s the killer:
- Interface and logical grouping.WhitespaceDetails matter.
- Consider what happens when people put things “where ever”
- Lin Bolin – even in chaos there is design. Interface and logical grouping.
- Interface and logical grouping. – Get some professional help with this and/or do your own research to find the UX patterns that will help your project.
- WhitespaceDon’t think of white space as wasted. What is the whitespace in this image? Negative/Positive; use of color.
- Whitespace – cheat with lines, slight variations in texture and color, Don’t think of white space as wasted.Next : Details matter.
- Details Matter– texture, drop shadows, subtle gradientsYou know what really makes this layout work? Good bones. Look at the strong hierarchy of the page – the visual design works with the content to make it look
- Layout tips and tricks:Create order with alignment and grids.Alignment and Proximity
- Grid – alignment… These all have equal weight and are evenly spaced.
- Grid – alignment… These all have equal weight and are evenly spaced.
- Reminds you of a tic-tak-toe board?
- The grid on this one is pretty obvious, so I didn’t draw it. But the interesting thing is that you can tell it’s there, keeping all that information on the right shelf.
- In Pivot, they’re doing the same thing
- This grid is a little funky because the middle section scrolls.But even the top URL space and bottom tool area are considered in the grid. See how wide the margins are? They’re also called gutters.Lets get rid of that to see the space.
- Sneaky trick #2 : Invisible Typography
- Meet Comic Sans, he’s a sad clown. Comic SansPhoto credit: Clown image from etsy. Some lucky fellow has this cactus planter. http://www.etsy.com/listing/12898627/sad-clown-cactus-planter
- Font tricks:Who’s handwriting is this? What do they wear, what do they drive, what music do they listen to?
- I love this poser because of this visceral drawn font.All fonts are hand drawn.
- I love this poser because of this visceral drawn font.All fonts are hand drawn.
- Typography isn’t just an “english” thing – in fact, there are some famous and beautiful examples of calligraphy in most cultures.
- Typography isn’t just an “english” thing – in fact, there are some famous and beautiful examples of calligraphy in most cultures.Book of Kells
- Whatthefont.comIlovetypography.comAlso good:Dafont.comAbstractfonts.com
- The savvy among you already noticed this. You’ve whispered it to your friends, and tweeted it, more than likely.But the truth is that most of the time, these Design Killers are fine upstanding citizens.They just get little overzealous and take over sometimes!So use them in your projects judiciously.
- More resources.
- You’re already here.So go ask some people where they get together to talk about design.(Or you’re watching this online, DM me @dianeleeper)If you find a good one, please let me know!
- You’re alreadyat a user group or community event. So go ask some people where they get together to talk about design.(Or you’re watching this online, contact me. If you find a good one, contact me with a link!)
- You’re alreadyat a user group or community event. So go ask some people where they get together to talk about design.(Or you’re watching this online, contact me. If you find a good one, contact me with a link!)
- You’re alreadyat a user group or community event. So go ask some people where they get together to talk about design.(Or you’re watching this online, contact me. If you find a good one, contact me with a link!)