Designing Your App

Intro to app wireframing and design for Rails Girls San Francisco

Transcript

1. Designing YourApp Jessica Allen
5. ZOMG. I am old.
6. what designing an app really means
7. User experience
10. Wireframe Wireframe Wireframe
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
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