1. Copy&Paste
Tips & Tricks for designers who want
to begin prototyping in code
UXMad - Madison, WI

2. Copy&Paste
Tips & Tricks for designers who want
to begin prototyping in code
UXMad - Madison, WI

3. Copy&Paste
Tips & Tricks for designers who want
to begin prototyping in code
vercoming
UXMad - Madison, WI
A story of o
chological barriers to
psy
ca reer growth

4. Hi, My name is Jon.
I like good beer, sauerkraut, sushi w/ too
much wasabi, remote control helicoptors,
fooseball, and the A/C set at 66 degrees.
ZIP
w
Inner Glo
I love visual design, interaction design,
Border
observing human behavior,
Text- development ... helping people.
Shadow
Gradient
d ow
Founder & CEO of NiceUX
Drop Sha
Proximity Worked with Happy Cog, U.S. Dept. of
Similarity
Closure
Defense, US Bank, Best Buy, among
Behavioral Psychology others.
Cognitive Load
Memory
Visual Scanning Worked for Yahoo! & space150
blah, blah, blah ...
Volunteer with Boxes and Arrows
Work proudly mentioned in “A Project
Guide to UX Design” - Russ Unger &
Carolyn Chandler
NiceUX.com @niceux

5. When I was in
college ...
My major was
economics and
partying.
NiceUX.com @niceux

6. When I was in
college ...
I studied economics
and hated it, so I
partied a little too
much.
Then I studied color
theory, art, graphic
design ...
NiceUX.com @niceux

7. When I was in
college ...
NiceUX.com @niceux

8. When I was in
college ...
Use <table> to lay
your website out.
NiceUX.com @niceux

9. When I was in
college ...
NiceUX.com @niceux

10. Tables should never ... ever ever
ever be used to control layouts.
NiceUX.com @niceux

11. NiceUX.com @niceux

12. NiceUX.com @niceux

13. NiceUX.com @niceux

14. The break & rotor analogy
NiceUX.com @niceux

15. NiceUX.com @niceux

16. You want to learn
how to code?
NiceUX.com @niceux

17. You want to learn
how to code?
vercome a challenge?
... o
NiceUX.com @niceux

18. Learn from your
surroundings, fail a lot,
but never quit.
NiceUX.com @niceux

19. View source, use the browser’s
inspector, read, and copy &
paste ... a lot!
80% of coding is trial and error.
NiceUX.com @niceux

20. Educational Resources
Sites
•W3.org
• W3Schools.com
• Lynda.com
• TeamTreehouse.co
m
• CSS-tricks.com
• CSSZenGarden.com
• Many others
Books
• Designing with Web Standards
• Bulletproof Web Design
• A Book Apart Series
• Many others
NiceUX.com @niceux

21. The Designer/Developer’s Ecosystem
Paper &
Pencil Photoshop In-Browser Code
Inspector
Development
software or text
editor Rapid Prototyping
Framework
NiceUX.com @niceux

22. NiceUX.com @niceux

23. NiceUX.com @niceux

24. What does your process look
like?
Research Testing Testing Testing
Sketch (IA & IxD)
Visual Design refinements in Photoshop
Prototype (IxD & Visual Design)
Development
Understand & Define Brainstorm Potential Refine Design
Opportunities Features
Fidelity
NiceUX.com @niceux

25. What does your process look
like?
Brainstorming Ideation Concepting
NiceUX.com @niceux

26. Low Fidelity IA
NiceUX.com @niceux

27. ... think of it first as a basic grid of
boxes, organized into rows and
columns.
NiceUX.com @niceux

28. Learn from your
surroundings, fail a lot,
but never quit.
NiceUX.com @niceux

29. Thank You!