UX Bootcamp Prototyping in Code Day 1
Upcoming SlideShare
Loading in...5
×
 

UX Bootcamp Prototyping in Code Day 1

on

  • 1,762 views

Slides from Day 1 of UX Bootcamp Prototyping in Code

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

Statistics

Views

Total Views
1,762
Views on SlideShare
1,683
Embed Views
79

Actions

Likes
3
Downloads
17
Comments
1

4 Embeds 79

http://lanyrd.com 38
http://rodny.tumblr.com 34
http://flavors.me 6
http://www.tumblr.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    UX Bootcamp Prototyping in Code Day 1 UX Bootcamp Prototyping in Code Day 1 Presentation Transcript

    • UX BOOTCAMP Prototyping in Code
    • FRIDAY:• Prototyping in code tools• Recap of code fitness day• Planning exercises• Using your code editor• Building a prototype in HTML and CSS
    • PROTOTYPING IN CODETOOLS
    • HACKASAURUS.ORG/HACKBOOK
    • LOREM2.COM
    • CODA CLIPS
    • CODA BOOKS
    • PLACEHOLD.IT
    • PLACEKITTEN
    • FIREBUG
    • FIREBUG
    • WEB DEVELOPER TOOLBAR
    • WEB DEVELOPER TOOLBAR
    • MEASUREIT
    • COLORZILLA
    • CODE FITNESS RECAP
    • <!DOCTYPE html><html> <head> <meta charset=“utf-8” /> <title>Site name</title> </head> <body> <p>Site Content</p> </body></html>
    • <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” />
    • NESTED TAGS<body> <h1>Main heading</h1> <p>Site Content</p></body> body h1 p
    • 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; }
    • HTML <div> <h1>Heading</h1> <p>Lorem ipsum dolor sit amet.</p> </div>HeadingLorem ipsum dolor sit amet.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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
    • 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
    • PLANNING
    • by Natalie Downe http://www.flickr.com/photos/nataliedowne/tags/planningartifact/
    • by Natalie Downe http://www.flickr.com/photos/nataliedowne/tags/planningartifact/
    • by Natalie Downe http://www.flickr.com/photos/nataliedowne/tags/planningartifact/
    • by Natalie Downe http://www.flickr.com/photos/nataliedowne/tags/planningartifact/
    • by Natalie Downe http://www.flickr.com/photos/nataliedowne/tags/planningartifact/
    • by Natalie Downe http://www.flickr.com/photos/nataliedowne/tags/planningartifact/
    • headercontent sidebar
    • 100%64% 34% 2% 100%
    • date
    • primary story
    • secondary stories
    • tertiary story story listtertiary story
    • all links are blue
    • normal text is grey
    • all stories have abottom border
    • http://jsbin.com/uyicin/4/edit
    • 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
    • RECIPE SITE PROTOTYPE
    • TASK (PLANNING)1. plan out the structure of the recipe site
    • TASK (PLANNING)1. plan out the structure of the recipe site2. work out some rough widths (you can always tweak them later)
    • 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
    • CODE EDITORS
    • 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; }
    • TASK (BUILDING)1. chuck in some dummy text from lorem2
    • 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.
    • 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
    • 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
    • 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
    • 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