Wireframe and Design

Intro to wireframing

• Allows for the defintion and planning of the information heirarchy
• It is important to set up a diagram and make sure you know how your information will be displayed

Wireframe examples

• A wireframe can be created by hand or created by a software
  • Invision
  • Balsamiq
• For beginners it is better to start out physically drawing it out

Things to consider

• Different ways to structure:
  • Wireframe > Interactive Prototype > Visual > Design
  • Sketch > Code
  • Sketch > Wireframe > Hi-Def Wireframe > Visual > Code
  • Sketch > Wireframe > Visual > Code

Best tools

• UXPin
• InVision
• Wireframe.cc

Steps to make a wireframe

1. Research

   • Begin with industry research and understanding trends and best practices

2. Prepare

   • Organize research

3. User flow mapped out

   • Create an easy to use flow that can be navigated by customers with ease

   • Good information architecture makes sure that users can be self-sufficient

4. Draft, don't draw

   • Outlining and presenting information and features

   Worry about aesthetic later

   • Questions to ask yourself
     • How can you organize the content to support user's goals?
     • Which info should be most prominent? Where should your main message go? What should users first see?
     • What will the user expect to see on certain pages?
     • Which buttons or touch points does the user need to complete the desired actions?

5. Add detail and test

   • Start detailing page from left-to-right, and top-to-bottom
   • Think of:
     • Usability
     • Simple instructions
     • Trust building elements
     • Toolstips
   • After detailing run tests

6. Turn wireframes into prototypes

   • After basics are covered you can make your website as complex as you would like

Three key principles to make wireframe good

• Clarity
• Confidence
• Simplicity

HTML Basics

• HTML(Hyper Text Markup Language)- code that is used to structure a webpage and its content
• Needs opening and closing tags <"p></"p>
• An attribute should always have:
  • A space between it and the element name
  • the attribute name followed by an equal sign
  • the attribute value wrapped by opening and closing quotation marks
• nesting elements- put elements inside other elements
• empty elements- have no content; <"img">

Anatomy of HTML Doc

• Doctype html
• html
• head
• meta charset="utf-8
• title
• body
• ul (unorder list)
• li (list item)
• a href (link)

Semantics

Semantics- meaning of a piece of code

Semantics in JavaScript

• takes a string parameter and returns an "li" element with that string

Semantics in CSS

• Ex: Style a list of "li" elements representing fruit. Would you know what part of the DOM is being selected

Semantics in HTML

• "h1" is a semantic element

List of Semantic Elements

• article
• aside
• details
• figcaption
• figure
• footer
• header
• main
• mark
• nav
• section
• summary
• time