Steal What Works


Published on

Published in: Design, Business
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Steal What Works

  1. 1. Steal What Works Design Roundtable
  2. 2. SuperfluousBanter <ul><li> </li></ul><ul><li>Shared by Brandy Reppy </li></ul>
  3. 3. SuperfluousBanter
  4. 4. SuperfluousBanter <ul><li>Color accents on the outside perimeter of both the main content area as well as along the left hand side of the design give it depth </li></ul>
  5. 5. SuperfluousBanter <ul><li>Important areas are pretty obvious: </li></ul><ul><ul><li>bold link colors </li></ul></ul><ul><ul><li>background colors change depending on level of importance (white for main content, a brown background in the black right rail) </li></ul></ul>
  6. 6. SuperfluousBanter <ul><li>The consistent language tone, especially in carrying the &quot;superfluous&quot; theme is great - subtle but keeps it all together. </li></ul>
  7. 7. SuperfluousBanter <ul><li>Essentially just three graphics that persist: </li></ul><ul><ul><li>SB logo </li></ul></ul><ul><ul><li>Gray pattern on the lefthand side of the main content </li></ul></ul><ul><ul><li>Star pattern behind the &quot;superfluousbanter&quot; logo </li></ul></ul><ul><li>The pattern of narrow first word - bold second word becomes a graphic treatment </li></ul>
  8. 8. Blip <ul><li> </li></ul><ul><li>Shared by Tim Thompson </li></ul>
  9. 9. Blip <ul><li>I like how when you click the Sign-up button at this site, it pops a LightBoxy overlay. No extra page load. Plus, it only asks 3 questions and you're signed up, which lowers the entry barrier. </li></ul>
  10. 10. Geni <ul><li> </li></ul>
  11. 11. Geni <ul><li>Geni avoids marketing messages, choosing to focus on the experience. </li></ul><ul><li>They tell you what they do front and center. </li></ul><ul><li>They reassure you that the site and your information is secure. </li></ul>
  12. 12. Geni <ul><li>Geni has embraced simplicity. </li></ul><ul><li>This is the first thing you see. </li></ul><ul><li>Entering the basic info needed to start using the service (who you are), also creates your account. </li></ul>
  13. 13. Skitch <ul><li> </li></ul><ul><li>Shared by Tim Thompson </li></ul>
  14. 14. Skitch <ul><li>People who haven't been blogging for a while can get confused by the concept of permalinks. </li></ul><ul><li>Most of us know it's a direct link to get back to where we were, but it could become even more user-friendly. </li></ul>
  15. 15. Skitch <ul><li>The way Skit handles permalinks is overkill for most sites, and more confusing than just one would be. But I like the &quot;copy&quot; button. </li></ul>
  16. 16. Skitch <ul><li>Here's a simpler way to do it: When clicking the help button, you see this mouseover. </li></ul>
  17. 17. Picnik <ul><li> </li></ul>
  18. 18. Picnik <ul><li>Signing up is simple and friendly. </li></ul><ul><li>The initial impression is of simplicity - you see three fields, but once you enter text into the Password or Email Address fields, their confirmations fields appear next to them. </li></ul><ul><li>The confirmation fields are grayed out until the main field has valid data. </li></ul>
  19. 19. FriendFeed <ul><li> </li></ul>
  20. 20. FriendFeed <ul><li>A small touch - the second check box let's you sign up to receive notices about comments only when you haven't logged in recently. </li></ul>
  21. 21. Tumblr <ul><li> </li></ul><ul><li>Shared by Tim Thompson </li></ul>
  22. 22. Tumblr <ul><li>It seems like every design decision was made to reduce actions to their simplest essence (as opposed to something like WordPress, which shows a lot of the gears in its interface). </li></ul><ul><li>The Tumblr blogging engine still has a lot of power and is quite sleek--a more streamlined version of what Blogger used to be. </li></ul>
  23. 23. Tumblr <ul><li>The large buttons on the top that filter the type of post by content type. </li></ul><ul><li>When you click a button to post something, the advanced options are hidden unless you click the link. </li></ul><ul><li>There are only 2 fields and 3 buttons per post page (&quot;Create post&quot; &quot;Preview&quot; &quot;Cancel&quot;) </li></ul>