UX Bootcamp Prototyping in Code Day 1

UX BOOTCAMPPrototyping 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 CODE TOOLS

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>

<img src=”image.jpg” />

<ol><li>Ordered List</li>

</ol>

http://google.com

http://google.com

<body>

<h1>Main heading</h1>

<p>Site Content</p>

</body>

NESTED TAGS

body

h1 p

Heading<h1>Heading</h1>

<p>Lorem ipsum dolor sit amet.</p>

HTML

h1 {font-family: Georgia;color: green;}

p {font-family: Georgia;color: green;}

CSS

Lorem ipsum dolor sit amet.

HeadingLorem ipsum dolor sit amet.

Heading

<div> <h1>Heading</h1> <p>Lorem ipsum dolor sit amet.</p></div>

HTML


Heading


HTML


div {background-color:pink;color:white;

}

CSS

Heading


HTML


div {background-color:pink;color:white;width:250px;

}

CSS

Heading


HTML


div {background-color:pink;color:white;width:50%;

}

CSS

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.

<ul><li>List item 1</li><li>List item 2</li><li>List item 3</li>

</ul>

HTML

•List item 1•List item 2•List item 3

LISTS

<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>

HTML

•List item 1•List item 2•List item 2

NAVIGATION

PLANNING

by Natalie Downe http://www.flickr.com/photos/nataliedowne/tags/planningartifact/






content sidebar

header

100%

64%

2%

34%

100%

date

primary story

secondary stories

story listtertiary story

tertiary story

all links are blue

normal text is grey

all stories have a bottom 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

<div> <ul>

<li>List item 1</li><li>List item 2</li><li>List item 3</li>

</ul></div>

INDENTING CODE

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.



3. add some sectioning tags in your HTML around elements you want to group




4. style the sectioning tags with hideous background colors




4. style the sectioning tags with hideous background colors5. give the sections widths and floats to put them into

place on the page




4. 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

Technology

UX Bootcamp Prototyping in Code Day 1