ºÝºÝߣ

Editor's Notes

• #2: Introduction
• #3: 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.
• #7: 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:
• #8: Don¡¯t forget copy. If you don¡¯t need to say it, don¡¯t.
• #9: 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/
• #10: 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?
• #11: 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.
• #12: 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 ¨C 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.
• #13: 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
• #15: 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.
• #17: 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!
• #22: Metro design interface does this really well ¨C 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
• #23: 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.
• #24: We seem to have a basic urge to draw and decorate¡­ which leads us to one of the big killers¡­.
• #27: 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.)
• #28: It¡¯s easy to tell when something has gone horribly wrong. Screenshot from websitesthatsuck.com
• #30: Quick primer on Color. Remember this from grade school?
• #31: The warm colors are firey.
• #32: The cool colors are calm.This is all kinda relative, though.
• #33: 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]
• #34: Complimentary colors are across from each other on the color wheel ¨C Let¡¯s take a look at blue and orange
• #35: Complimentary colors are across from each other on the color wheel ¨C Let¡¯s take a look at blue and orange.
• #36: 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?
• #37: Again, the blue and orange are working well, this time in a light background ¨C which is a good choice for reading text. Black backgrounds are great for drama, but hard to read.
• #41: This can be a bit tricky, which I¡¯ll discuss in a bit
• #42: 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.
• #48: 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.
• #49: POPUPS
• #51: Sneaky trick #1 : What¡¯s missing? LAYOUT
• #52: How to tell she¡¯s the killer:
• #53: Interface and logical grouping.WhitespaceDetails matter.
• #54: Consider what happens when people put things ¡°where ever¡±
• #55: Lin Bolin ¨C even in chaos there is design. Interface and logical grouping.
• #56: Interface and logical grouping. ¨C Get some professional help with this and/or do your own research to find the UX patterns that will help your project.
• #57: WhitespaceDon¡¯t think of white space as wasted. What is the whitespace in this image? Negative/Positive; use of color.
• #58: Whitespace ¨C cheat with lines, slight variations in texture and color, Don¡¯t think of white space as wasted.Next : Details matter.
• #59: Details Matter¨C texture, drop shadows, subtle gradientsYou know what really makes this layout work? Good bones. Look at the strong hierarchy of the page ¨C the visual design works with the content to make it look
• #60: Layout tips and tricks:Create order with alignment and grids.Alignment and Proximity
• #61: Grid ¨C alignment¡­ These all have equal weight and are evenly spaced.
• #62: Grid ¨C alignment¡­ These all have equal weight and are evenly spaced.
• #63: Reminds you of a tic-tak-toe board?
• #64: 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.
• #65: In Pivot, they¡¯re doing the same thing
• #66: 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.
• #68: Sneaky trick #2 : Invisible Typography
• #69: 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
• #70: Font tricks:Who¡¯s handwriting is this? What do they wear, what do they drive, what music do they listen to?
• #74: I love this poser because of this visceral drawn font.All fonts are hand drawn.
• #75: I love this poser because of this visceral drawn font.All fonts are hand drawn.
• #76: Typography isn¡¯t just an ¡°english¡± thing ¨C in fact, there are some famous and beautiful examples of calligraphy in most cultures.
• #77: Typography isn¡¯t just an ¡°english¡± thing ¨C in fact, there are some famous and beautiful examples of calligraphy in most cultures.Book of Kells
• #78: Whatthefont.comIlovetypography.comAlso good:Dafont.comAbstractfonts.com
• #81: 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.
• #82: More resources.
• #83: 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!
• #84: 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!)
• #85: 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!)
• #86: 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!)