Copy & Paste: Prototyping in code for designers

  • 791 views
Uploaded on

 

More in: Design , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
791
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
10
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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

Transcript

  • 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 ChandlerNiceUX.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 analogyNiceUX.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? ... oNiceUX.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 othersNiceUX.com @niceux
  • 21. The Designer/Developer’s Ecosystem Paper & Pencil Photoshop In-Browser Code Inspector Development software or text editor Rapid Prototyping FrameworkNiceUX.com @niceux
  • 22. NiceUX.com @niceux
  • 23. NiceUX.com @niceux
  • 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. What does your process looklike? Brainstorming Ideation ConceptingNiceUX.com @niceux
  • 26. Low Fidelity IANiceUX.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!