Copy&Paste Tips & Tricks for designers who want     to begin prototyping in code           UXMad - Madison, WI
Copy&Paste Tips & Tricks for designers who want     to begin prototyping in code           UXMad - Madison, WI
Copy&Paste Tips & Tricks for designers who want     to begin prototyping in code                     vercoming           U...
Hi, My name is Jon.                                 I like good beer, sauerkraut, sushi w/ too                            ...
When I was in              college ...                        My major was                        economics and           ...
When I was in              college ...                         I studied economics                         and hated it, s...
When I was in              college ...NiceUX.com   @niceux
When I was in              college ...                             Use <table> to lay                             your web...
When I was in              college ...NiceUX.com   @niceux
Tables should never ... ever ever         ever be used to control layouts.NiceUX.com   @niceux
NiceUX.com   @niceux
NiceUX.com   @niceux
NiceUX.com   @niceux
The break & rotor analogyNiceUX.com   @niceux
NiceUX.com   @niceux
You want to learn                         how to code?NiceUX.com   @niceux
You want to learn                         how to code?                                 vercome a challenge?               ...
Learn from your             surroundings, fail a lot,                  but never quit.NiceUX.com   @niceux
View source, use the browser’s               inspector, read, and copy &                      paste ... a lot!            ...
Educational Resources      Sites      •W3.org      • W3Schools.com      • Lynda.com      • TeamTreehouse.co        m      ...
The Designer/Developer’s Ecosystem             Paper &              Pencil            Photoshop             In-Browser Cod...
NiceUX.com   @niceux
NiceUX.com   @niceux
What does your process looklike?                      Research             Testing        Testing     Testing             ...
What does your process looklike?                 Brainstorming   Ideation   ConceptingNiceUX.com   @niceux
Low Fidelity IANiceUX.com   @niceux
... think of it first as a basic grid of    boxes, organized into rows and    columns.NiceUX.com   @niceux
Learn from your             surroundings, fail a lot,                  but never quit.NiceUX.com   @niceux
Thank You!
Upcoming SlideShare
Loading in …5
×

Copy & Paste: Prototyping in code for designers

1,119 views

Published on

Published in: Design, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,119
On SlideShare
0
From Embeds
0
Number of Embeds
128
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Copy & Paste: Prototyping in code for designers

    1. 1. Copy&Paste Tips & Tricks for designers who want to begin prototyping in code UXMad - Madison, WI
    2. 2. Copy&Paste Tips & Tricks for designers who want to begin prototyping in code UXMad - Madison, WI
    3. 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. 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 ChandlerNiceUX.com @niceux
    5. 5. When I was in college ... My major was economics and partying.NiceUX.com @niceux
    6. 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. 7. When I was in college ...NiceUX.com @niceux
    8. 8. When I was in college ... Use <table> to lay your website out.NiceUX.com @niceux
    9. 9. When I was in college ...NiceUX.com @niceux
    10. 10. Tables should never ... ever ever ever be used to control layouts.NiceUX.com @niceux
    11. 11. NiceUX.com @niceux
    12. 12. NiceUX.com @niceux
    13. 13. NiceUX.com @niceux
    14. 14. The break & rotor analogyNiceUX.com @niceux
    15. 15. NiceUX.com @niceux
    16. 16. You want to learn how to code?NiceUX.com @niceux
    17. 17. You want to learn how to code? vercome a challenge? ... oNiceUX.com @niceux
    18. 18. Learn from your surroundings, fail a lot, but never quit.NiceUX.com @niceux
    19. 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. 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 othersNiceUX.com @niceux
    21. 21. The Designer/Developer’s Ecosystem Paper & Pencil Photoshop In-Browser Code Inspector Development software or text editor Rapid Prototyping FrameworkNiceUX.com @niceux
    22. 22. NiceUX.com @niceux
    23. 23. NiceUX.com @niceux
    24. 24. What does your process looklike? 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 FidelityNiceUX.com @niceux
    25. 25. What does your process looklike? Brainstorming Ideation ConceptingNiceUX.com @niceux
    26. 26. Low Fidelity IANiceUX.com @niceux
    27. 27. ... think of it first as a basic grid of boxes, organized into rows and columns.NiceUX.com @niceux
    28. 28. Learn from your surroundings, fail a lot, but never quit.NiceUX.com @niceux
    29. 29. Thank You!

    ×