Your SlideShare is downloading. ×
0
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
UX Bootcamp Prototyping in Code Day 1
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

UX Bootcamp Prototyping in Code Day 1

1,651

Published on

Slides from Day 1 of UX Bootcamp Prototyping in Code …

Slides from Day 1 of UX Bootcamp Prototyping in Code
http://uxbootcamp.org

Published in: Technology, Design
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total Views
1,651
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
21
Comments
1
Likes
3
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

Transcript

  1. UX BOOTCAMP Prototyping in Code
  2. FRIDAY:• Prototyping in code tools• Recap of code fitness day• Planning exercises• Using your code editor• Building a prototype in HTML and CSS
  3. PROTOTYPING IN CODETOOLS
  4. HACKASAURUS.ORG/HACKBOOK
  5. LOREM2.COM
  6. CODA CLIPS
  7. CODA BOOKS
  8. PLACEHOLD.IT
  9. PLACEKITTEN
  10. FIREBUG
  11. FIREBUG
  12. WEB DEVELOPER TOOLBAR
  13. WEB DEVELOPER TOOLBAR
  14. MEASUREIT
  15. COLORZILLA
  16. CODE FITNESS RECAP
  17. <!DOCTYPE html><html> <head> <meta charset=“utf-8” /> <title>Site name</title> </head> <body> <p>Site Content</p> </body></html>
  18. <h1>Heading 1</h1><p>Paragraph</p><a href=”http://google.com”>Link</a><h2>Heading 2</h2><ul> <li>Unordered List</li></ul><ol> <li>Ordered List</li></ol><img src=”image.jpg” />
  19. NESTED TAGS<body> <h1>Main heading</h1> <p>Site Content</p></body> body h1 p
  20. HTML <h1>Heading</h1> Heading <p>Lorem ipsum Lorem ipsum dolor sit dolor sit amet.</p> amet.CSS h1 { Heading font-family: Georgia; Lorem ipsum dolor color: green; sit amet. } p { font-family: Georgia; color: green; }
  21. HTML <div> <h1>Heading</h1> <p>Lorem ipsum dolor sit amet.</p> </div>HeadingLorem ipsum dolor sit amet.
  22. HTML <div> <h1>Heading</h1> <p>Lorem ipsum dolor sit amet.</p> </div>CSS div { background-color:pink; color:white; }HeadingLorem ipsum dolor sit amet.
  23. HTML <div> <h1>Heading</h1> <p>Lorem ipsum dolor sit amet.</p> </div>CSS div { background-color:pink; color:white; width:250px; }HeadingLorem ipsum dolorsit amet.
  24. HTML <div> <h1>Heading</h1> <p>Lorem ipsum dolor sit amet.</p> </div>CSS div { background-color:pink; color:white; width:50%; }HeadingLorem ipsum dolor sit amet.
  25. CLASS TIPS• When using a class, think about what it is rather than how it looks• Don’t start with a numeral or symbol• You can use a class more than once, and have different styles for it depending on where it’s nested.
  26. LISTSHTML <ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul>•List item 1•List item 2•List item 3
  27. NAVIGATIONHTML <nav> <ul> <li><a href=”…”>List item 1</a></li> <li><a href=”…”>List item 2</a></li> <li><a href=”…”>List item 3</a></li> </ul> </nav>•List item 1•List item 2•List item 2
  28. PLANNING
  29. by Natalie Downe http://www.flickr.com/photos/nataliedowne/tags/planningartifact/
  30. by Natalie Downe http://www.flickr.com/photos/nataliedowne/tags/planningartifact/
  31. by Natalie Downe http://www.flickr.com/photos/nataliedowne/tags/planningartifact/
  32. by Natalie Downe http://www.flickr.com/photos/nataliedowne/tags/planningartifact/
  33. by Natalie Downe http://www.flickr.com/photos/nataliedowne/tags/planningartifact/
  34. by Natalie Downe http://www.flickr.com/photos/nataliedowne/tags/planningartifact/
  35. headercontent sidebar
  36. 100%64% 34% 2% 100%
  37. date
  38. primary story
  39. secondary stories
  40. tertiary story story listtertiary story
  41. all links are blue
  42. normal text is grey
  43. all stories have abottom border
  44. http://jsbin.com/uyicin/4/edit
  45. TASKDeconstruct the screenshots of websites• identify the blocks and label them• give the blocks widths• identify the default styles• make a list of the colors and typefaces used
  46. RECIPE SITE PROTOTYPE
  47. TASK (PLANNING)1. plan out the structure of the recipe site
  48. TASK (PLANNING)1. plan out the structure of the recipe site2. work out some rough widths (you can always tweak them later)
  49. TASK (PLANNING)1. plan out the structure of the recipe site2. work out some rough widths (you can always tweak them later)3. download starter files and open them in your code editor of choice
  50. CODE EDITORS
  51. INDENTING CODE<div> <ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul></div>h1 { font-family: Georgia; color: green; }
  52. TASK (BUILDING)1. chuck in some dummy text from lorem2
  53. TASK (BUILDING)1. chuck in some dummy text from lorem22. start with just the HTML, adding all the appropriate content you need on the page using the HTML cheatsheet as a guide.
  54. TASK (BUILDING)1. chuck in some dummy text from lorem22. start with just the HTML, adding all the appropriate content you need on the page using the HTML cheatsheet as a guide.3. add some sectioning tags in your HTML around elements you want to group
  55. TASK (BUILDING)1. chuck in some dummy text from lorem22. start with just the HTML, adding all the appropriate content you need on the page using the HTML cheatsheet as a guide.3. add some sectioning tags in your HTML around elements you want to group4. style the sectioning tags with hideous background colors
  56. TASK (BUILDING)1. chuck in some dummy text from lorem22. start with just the HTML, adding all the appropriate content you need on the page using the HTML cheatsheet as a guide.3. add some sectioning tags in your HTML around elements you want to group4. style the sectioning tags with hideous background colors5. give the sections widths and floats to put them into place on the page
  57. TASK (BUILDING)1. chuck in some dummy text from lorem22. start with just the HTML, adding all the appropriate content you need on the page using the HTML cheatsheet as a guide.3. add some sectioning tags in your HTML around elements you want to group4. style the sectioning tags with hideous background colors5. give the sections widths and floats to put them into place on the page6. start to integrate the rest of the styles

×