Skip to content

Latest commit

 

History

History
38 lines (32 loc) · 1.42 KB

File metadata and controls

38 lines (32 loc) · 1.42 KB

Wireframing

  • The plan for the structure of a website
  • Focuses on feedback from user research
  • Can be drawn by hand or made using software

Wireframing Steps

  1. Identify audience
  2. Look at products similar to yours
  3. Keep research available for quick reference
  4. Map out a user flow
  5. Sketch out the design - keep it simple
  6. Add detail & test
  7. Make prototypes

3 Key principles to remember: clarity, confidence/ease of navigation, simplicity

HTML Basics

  • HTML creates the structure for a webpage
  • content is wrapped with opening and closing tags
  • Attributes - privide additional information about an element
  • <!DOCTYPE html> - defines the doc as html
  • <html> - aka "root element", wraps the entire page
  • <head></head> - wraps content not shown to user
  • <meta charset="utf-8"> - defines the character type used in the document
  • <title></title> - defines the title of the webpage
  • <body></body> - contains all content shown to user
  • <img src="image location" alt="image description">
  • <a href="address">Link Title</a>

HTML Semantics

  • refers to the purpose of code or an element
  • e.g. <h1> makes content into the top level header of the page
  • Use of semantics influences search engine rankings
  • makes it easier for visually imparied individuals to use the page
  • easier to navigate code

Here is a link to a list of HTML elements