Upload
others
View
18
Download
0
Embed Size (px)
Citation preview
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.
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
<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
Box Model Mozilla Developer Network
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
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;
}
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