RTA963

Prototyping for the Web

Documenting the process is more important than final product.

UI

The User-Interface

What Makes a Great UI?

  • Usable vs useful
  • Design patterns
  • Logical
  • Whitespace
  • Power-users vs newbies
  • Adaptable?

Source www.xtnd.it

Step 1: Mockups

Mockups

  1. List the requirements
  2. Sketch the interface (2+ times)
  3. Annotate
  4. Get feedback

Inspiration

  • Branding
  • Layouts (other sites)
  • Competition

Wireframes

  • Low fidelity
  • Placeholders
  • UI hints

Step 2: Prototype

Source: SamuelATX

Prototype

  • Static: Photoshop, Illustrator, InDesign, Sketch
  • Dynamic: Moqup, Balsamiq, PoP, InVision
  • Lots of templates out there for UI elements
  • Choose a tool and create with it

Step 3: Create

Conversion

  • Create all elements in HTML/CSS/JS
  • Frameworks
  • Testing
  • Upcoming weeks...

Placeholder Content