Diagrams & Mockups

Announcements

• Coursify – a MOOC where you can run your own classes and charge for them.
• P2PU – an open source MOOC where you can beta test classes
• Hoopla – the Netflix of the Library world – perhaps you can distribute your 3D worlds and other content through it.
• Midterm Papers!
• Next week, 4/15 – Prototypes & Style Guides

Design Notebooks

Let’s take a few minutes to review some of your Design Briefs.

Diagrams

Why use diagrams?

Types of Diagrams

• sitemaps
• sequence diagrams
• flow charts
• others?

Diagraming Tools

• Draw.io
• Balsamiq

Diagraming Workshop

Organize into your your teams and consider your project. What types of diagrams would be useful for documenting the organization of your content, flow of your process, or sequence of your users’ interactions?

Pick one of the tools above and try diagraming one aspect of your project. Keep in mind that your project may have multiple sub-projects (a video sub-project and a website sub-project).

Mockups

Why use mockups?

Types of Mockups

• Wireframes
• Storyboards
• Paper Prototypes
• Models
• Walkthroughs

Mockup Tools

• Draw.io
• Storyboard That
• POP
• Sketchup

Mockup Workshop

Organize into your teams again and discuss what aspects of your project need mockups. What types of mockups would help begin to prototype your project?

Pick one aspect of your project and create a mockup for it. Keep in mind that most of your projects have multiple sub-projects. Which one most fully identifies the ‘gist’ of your project? Using one (or more) of the tools listed above, create a mockup for that one.

Assignment

Diagrams & Mockups

• Meet with your team and create appropriate diagrams and mockups for each sub-project. For instance, if one team member is creating a video, storyboard that video, if another is creating a Youtube channel, create a sitemap and wireframe of the proposed Youtube channel.
• Remember to use your User Stories as inputs into your diagrams and mockups. If there’s a hole in your content, you probably need additional User Stories.
• Come to class next week to present your diagrams & mockups.

Reading

Creating Style Guides in A List Apart

Design Notebooks

• Create a new slide in your Design Notebook and name it “Diagrams & Mockups” and today’s date. Write a two or three sentence description of the diagrams and/or mockups you created for your team.
• Include links to those diagrams/mockups (or pictures of them if they’re paper or physical models).

*Assignments are due before class begins on Thursdays. Be prepared to present your work in class for discussion.