wireframes, layout, and cssclasses.dma.ucla.edu/spring18/161/assets/04_dma... · wireframes •...
TRANSCRIPT
Wireframes, Layout, and CSSNetwork Media / Class 4
Wireframes
• Describe the layout of how specific pages of a website or screens in an application might be arranged in service of user goals and tasks
• Helpful for planning a site’s structure in HTML or code: can show which items should be grouped together or what kind of information hierarchy to expect
Image from: https://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing--webdesign-7399
Image from: https://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing--webdesign-7399
Image from: https://www.mockplus.com/blog/post/basic-uiux-design-concept-difference-between-wireframe-prototype
Visual Design: Mockups
• How does it all look?
• The final website will look very close to the mockup, but may have slight variations depending on the user’s window size or browser.
Image from: http://www.volkside.com/2011/01/wirify-january-update/
Useful Tools
• http://generator.lorem-ipsum.info
• https://color.adobe.com/create/color-wheel/
• https://fonts.google.com
• http://awesome-fontstacks.com
• https://wireframe.cc
• https://www.sketchapp.com
Units and CSSPixels, percentages, and ems
Absolute: Pixels
p { font-size: 12px;
width: 400px;
}
Relative: Percentages
p { font-size: 12px;
width: 50%;
}
Relative: Em
p { font-size: 12px;
width: 5em;
}
The Box ModelEvery element on the page is a rectangular box
<html> <head> <title>Title Text</title> </head> <body> <h1>H1 Heading</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> </body> </html>
Title Text
H1 Heading
Paragraph 1
Paragraph 2
Body
Document (HTML)
Head
Every element may have width, height, padding, border, and margins.
Box Model Mozilla Developer Network
div { width: 400px; height: 100px; padding: 20px; border: 6px solid #949599; margin: 20px; }
div { width: 400px; height: 100px; padding: 20px; border: 6px solid #949599; margin: 20px; }
The box model is additive. Total element width = 400 + 2*20 + 2*6 + 2*20 = 496px
width and height declarations
p { width: 200px;
height: 400px;
}
margin and padding declarations
p { margin: 20px;
padding: 40px;
}
margin and padding declarations
/* all margins */
p { margin: 20px;
}
margin and padding declarations
/* top and bottom are both 20px
* left and right are 50px
*/
p { margin: 20px 50px;
}
margin and padding declarations
/* all four, in this order (clockwise):
* top, right, bottom, left
*/
p { margin: 20px 50px 30px 10px;
}
margin and padding declarations
p { margin-top: 20px;
margin-left: 10px;
}
Page Flowblock-level elements vs. inline
Block-level elements start on a new line and expand to fill all the available space to their left and right.
Inline elements do not expand to fill space and only fill up as much space as necessary. They do not start on a new line.
Block-level elements from Mozilla Developer Network
display property
p { display: block;
}
display property
p { display: inline;
}
display property
p { display: none;
}
Grid Systems and PositioningUsing CSS classes to create grid systems
Image from: https://github.com/joeberthelot/Less-Grid-Boilerplate
float property
p { float: right;
}
relative positioning
p { position: relative;
top: 10px;
right: 50px;
}
absolute positioning
p { position: absolute;
top: 10px;
right: 50px;
}