Designing Your App

Designing Your App

Intro to app wireframing and design for Rails Girls San Francisco

755c2a9445eec2d2451804f43bc34654?s=128

jessicaspacekat

June 30, 2012
Tweet

Transcript

  1. Designing YourApp Jessica Allen

  2. None
  3. None
  4. None
  5. ZOMG. I am old.

  6. what designing an app really means

  7. User experience

  8. None
  9. None
  10. Wireframe Wireframe Wireframe

  11. None
  12. AvatarSearch

  13. Hiiiiii! Oh hey.

  14. AvatarSearch Search

  15. AvatarSearch Search

  16. AvatarSearch Search Title Here Title Here Title here Title here

    Grape Download Orange Download Greenie Download Blue Face Download
  17. Grape Download Orange Download Greenie Download Blue Face Download Page

    1 2 3 4 5 Next > Download Download Download Download
  18. Grape Download Orange Download Greenie Download Blue Face Download Page

    1 2 3 4 5 Next > Download Download Download Download
  19. AvatarSearch Search Title Here Title Here Title here Title here

    Grape Download Orange Download Greenie Download Blue Face Download Most Recent Popular
  20. AvatarSearch Search Title Here Title Here Title here Title here

    Grape Download Orange Download Greenie Download Blue Face Download Most Recent Popular
  21. Simplicity

  22. AvatarSearch Search Title Here Title Here Title here Title here

    Grape Download Orange Download Greenie Download Blue Face Download Most Recent Popular
  23. Greenie Download Greenie Hover Normal

  24. AvatarSearch Search Title Here Title Here Title here Title here

    Grape Orange Greenie Download Blue Face Most Recent Popular
  25. Interaction

  26. AvatarSearch Search Orange Greenie Frog Most Recent Popular frogs frogs

  27. AvatarSearch Search Orange Greenie Frog Most Recent Popular frogs frogs

  28. nobody likes to feel LOST

  29. AvatarSearch Search Orange Greenie Frog Most Recent Popular Frogs View

    All / Search results for “Frogs”
  30. AvatarSearch Search Orange Greenie Frog Most Recent Popular Frogs View

    All / Search results for “Frogs”
  31. AvatarSearch Search Greenie Submitted by: Username Total Downloads: 342 Keywords:

    green, frog, bored. Download View All / Search results for “Frogs” / Greenie details
  32. AvatarSearch Search Greenie Submitted by: Username Total Downloads: 342 Keywords:

    green, frog, bored. Download View All / Search results for “Frogs” / Greenie details
  33. AvatarSearch Search Greenie Submitted by: Username Total Downloads: 342 Keywords:

    green, frog, bored. Download View All / Search results for “Frogs” / Greenie details
  34. well that’s a Damn fine wireframe

  35. kippt.com/jessicaspacekat/design-resources

  36. TYPOGRAPHY

  37. Helvetica when in doubt

  38. Helvetica Arial Baskerville Times New Roman

  39. Section title goes here Subheading for a section Fusce viverra

    hendrerit suscipit. Cras ut iaculis enim. Cras lacinia vestibulum eros. Second subheading for another section Tincidunt lectus pulvinar vel. Vestibulum massa eros, gravida id pharetra et, vestibulum in turpis. Etiam vel ipsum mauris, nec convallis massa. Aenean et odio ut lorem imperdiet vehicula.
  40. google.com/webfonts

  41. typekit.com

  42. lining things up

  43. Email Password Create an account Sign up

  44. Email Password Create an account Sign up

  45. Email Password Create an account Sign up

  46. Email Password Create an account Sign up

  47. Email Create an account Sign up Password

  48. Email Create an account Sign up Password

  49. AvatarSearch Frog Most Recent Popular Frogs View All / Search

    results for “Frogs” Kermit Frogger Frog Prince
  50. Color

  51. meaningful color twitter.github.com/bootstrap

  52. colourlovers.com

  53. Decoration

  54. Decoration

  55. subtlepatterns.com

  56. PLACEHOLDERS

  57. Blah Blah Blah Title Blah By First Last Name Fusce

    viverra hendrerit suscipit. Cras ut iaculis enim. Cras lacinia vestibulum eros, ut tincidunt lectus pulvinar vel. Vestibulum massa eros, gravida id pharetra et, vestibulum in turpis. Etiam vel ipsum mauris, nec convallis massa. Aenean et odio ut lorem imperdiet vehicula. EXAMPLE
  58. placekitten.com

  59. hipsteripsum.me

  60. ICONS

  61. Settings Documentation Shopping Cart

  62. Settings Documentation Shopping Cart

  63. None
  64. somerandomdude.com/work/iconic

  65. glyphicons.com

  66. yourneighbours.de/web-design/free-retro-icon-set/

  67. thenounproject.com

  68. Inspiration

  69. dribbble.com

  70. plan it

  71. learn more

  72. Dan Roam “The Back of the Napkin” Steve Krug “Don’t

    Make Me Think” Dan Roam “The Back of the Napkin”
  73. Steve Krug “Don’t Make Me Think”

  74. Ciao ciao! @jessicaspacekat kippt.com/jessicaspacekat/design-resources