ux bootcamp prototyping in code day 1
Post on 06-Sep-2014
1.815 Views
Preview:
DESCRIPTION
TRANSCRIPT
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>
<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
Lorem ipsum dolor sit amet.
Heading
<div> <h1>Heading</h1> <p>Lorem ipsum dolor sit amet.</p></div>
HTML
Lorem ipsum dolor sit amet.
div {background-color:pink;color:white;
}
CSS
Heading
<div> <h1>Heading</h1> <p>Lorem ipsum dolor sit amet.</p></div>
HTML
Lorem ipsum dolor sit amet.
div {background-color:pink;color:white;width:250px;
}
CSS
Heading
<div> <h1>Heading</h1> <p>Lorem ipsum dolor sit amet.</p></div>
HTML
Lorem ipsum dolor sit amet.
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/
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/
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
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.
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 group
4. 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 group
4. 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 group
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
top related