This document discusses UX design for developers, covering information architecture, prototyping apps, and prototyping the Listy app. It describes sketching, wireframing, and mockups as key steps. Sketching can be done with low-cost pens and paper. Wireframes focus on content structure over visuals and common tools include Balsamiq, Axure, and Visio. Mockups are more complete depictions that can be static or interactive. Popular mockup tools include Photoshop, Illustrator, and Sketch. The document stresses the importance of mixing design and software processes to create successful prototypes.

1. UX for developers
Juan Camilo Sacanamboy
csacanam@gmail.com csacanam+57
3146017919

2. Content
1. Information architecture
2. Prototyping apps
3. Prototyping Listy
4. Why does this matter?
5. Mixing the design and software processes

3. Information Architecture
“...the art and science of organizing and
labelling websites, intranets, online
communities and software to support usability
and findability”
Source: Wikipedia

4. Source: journafolia.org

5. Prototyping apps
A prototype is: “a simulation of the final product.
It’s like an interactive mockup that can have
any degree of fidelity. The main purpose of
building prototypes is to test whether or not the
flow of the product is smooth and consistent.”
Arijit Banerjee

6. Sketch
“The first part of any project, print or digital,
should start on paper. Sketching can be an
integral part of any design process — even if
you can’t draw.”
Source: http://designshack.net/articles/inspiration/why-you-should-be-sketching-even-if-you-cant-draw/

7. Source: http://www.smashingmagazine.com/wp-content/uploads/2013/05/uiflow_large_mini.jpg

8. Sketching Tools
● Pens < US$1
● Pencils < US$1
● Notebooks and paper < US$2
● Dry erase boards (Optional) < US$4
Source: amazon.com

9. Wireframes
Focusing on content structure rather than visual
finesse

10. Source: http://www.eyalohana.com/wp-content/uploads/2011/10/JoynTV_iphone_wireframes_comp.jpg

11. Wireframing Tools
● Balsamiq: Mac, Linux, Windows, Web |
Prices: US$79
● Axure: Mac & Windows | US$289 - US$589
● Pidoco: Web | US$9 - US$59 per month
● Visio: Windows | US$599.95 - $999
● iPlotz: Web | Free - US$79
Source: http://www.creativebloq.com/wireframes/top-wireframing-tools-11121302

12. Mockups
Are more complete depictions of a product.
They’re usually medium to high fidelity. Can be
static or clickable

13. Source: http://line25.com/wp-content/uploads/2013/mockup-psds/1.jpg

14. Mockup Tools
● Adobe Photoshop: Mac & Windows |
US$9.99 per month
● Adobe Illustrator: Mac & Windows |
US$49.99 per month
● Sketch: Mac | US$90

15. Prototyping Listy
● App to control your budget when you’re
shopping
● Shopping list → Total in real time
● Context ads

16. Wireframes
PDF

17. Mockups

18. Why does this matter?

25. Mixing the design and the software
processes
Source: http://www.softprayog.in/images/waterfall_model.png