Session Three: Wireframe!

April 19, 2017 - DePaul Entrepreneurship Center

Instructor - Kara

TAs - Asha, Eve, Jerliyah, Ryan, Nithun, Justin, Oscar

Session Goal:

To take user research, and flows and frame out the paths that need to be created, with wireframing tools, and to gain an understanding of the grid system.

Session Schedule:

Welcome:

• Confirm TA groups!
• Review: User Research
  • Discuss Personas, User Stories & Inspiration Research method used with the group
  • Q & A from Homework

Intro to Wireframing:

• Terminology
  • Screen
  • Interface
• Activity: From your user flows, sketch out some pages!
  • Use Resources to sketch wireframes
    • wireframe.cc
    • []
  • (note fields, containers, images, icons, text)

Break

Intro to HTML & The CSS Grid:

• Go through
• Activity: take your favorite app, & sketch on grid
  • Check out Wirify

Homework:

• [ ] Complete the MarkSheet HTML/CSS tutorial: - MarkSheet.io : A free HTML/CSS Tutorial
• [ ] complete HTML/CSS course on codeCademy - CodeCademy
• In a wireframe.md page:
  • [ ] Notate your wireframes with HTML tags
    • Use HTMLreference.io to learn more about tags you may use
  • [ ] Complete sketches relating to each feature of your project. Link to images!