Your SlideShare is downloading. ×
Copy & Paste: Prototyping in code for designers
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Copy & Paste: Prototyping in code for designers

815
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
815
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
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!