'

Introduction to Building Wireframes (with Keynote)

Понравилась презентация – покажи это...





Слайд 0

INTRODUCTION TO BUILDING WIREFRAMES Davide ‘Folletto’ Casali


Слайд 1

NIGHT.EU UX Redirector Advisor


Слайд 2

PART I WIREFRAMES


Слайд 3

THE IDEA OF WIREFRAME COMES FROM 3D MODELLING @hjmediastudios


Слайд 4

Wikipedia: “A website wireframe 
 is a visual guide 
 that represents 
 the skeletal framework 
 of a website”


Слайд 5

Nielsen/Norman Group: “Wireframing is a low-cost, rapid iterative design technique that offers one of the best methods for gaining design insight early” http://www.nngroup.com/courses/wireframing-and-prototyping/


Слайд 6

THERE ARE DIFFERENT QUALITIES OF WIREFRAMES


Слайд 7

Even if wireframes display a single interface/page they are less like photos and more like movie stills


Слайд 8

WIREFRAMES AS JOURNEYS © Ivor Beddoes @awfulshot


Слайд 9

WIREFRAMES AS STORYBOARDS FOR INTERFACES © Ivor Beddoes


Слайд 10

DIFFERENT WAYS TO TELL A STORY frame by frame, drawings key frames, textual descriptions video, spoken narrative


Слайд 11

Even if the storyboard is not visible it’s still the foundation of wireframes


Слайд 12

Wireframes are a static representation of a dynamic non-linear flow of activity


Слайд 13

Let’s build a journey. Imagine Twitter’s registration process.


Слайд 14

LOGIN PROCESS The main steps of the journey Home Reg. Form Confirmation


Слайд 15

LOGIN PROCESS How do we guide the user to the value? ? Home Reg. Form Confirmation Your Page


Слайд 16

LOGIN PROCESS An e-mail based approach Home Reg. Form Confirmation Email Your Page


Слайд 17

LOGIN PROCESS A more direct way to engage the user Home Reg. Form Confirmation Email Your Page


Слайд 18

LOGIN PROCESS Review journeys for the edge cases: errors, problems, etc ! Home Reg. Form Confirmation ! Email Your Page


Слайд 19

LOGIN PROCESS The story is even bigger in reality Tweet Third party Home Reg. Form Confirmation Email Your Page Third party


Слайд 20

The wireframe represents also the very first moment when the project team sees everything coming together.


Слайд 21

Box The minimal visual building block of a wireframe is the box.


Слайд 22

Box Boxes usually contain a uniform kind of content, not the individual elements. However, it’s important to choose the right level of breakdown to support the discussion.


Слайд 23

Logo Navigation Box Box Content Box


Слайд 24

Some examples


Слайд 25


Слайд 26

Navigation Header Image Avatar Stats Navigation Tweet Filters Profile Tweet Media Tweet


Слайд 27


Слайд 28

Navigation Invite Friends Pin Find Friends Pin Pin Pin Pin


Слайд 29

This high level box view is implicit most of the time, but it’s incredibly useful when applied on a number of pages to ensure consistency and reusability. N C N Box N Box C S Box Box Box Box Box Box S


Слайд 30

TEXT BUTTONS Lorem ipsum gaium sit amet isciquitur elit in ellam lacustre pulzella. Button Box IMAGES MORE... ···


Слайд 31

Box


Слайд 32

Thomas Talker: Lorem ipsum gaium sit amet isciquitur elit in ellam lacustre pulzella. Expand


Слайд 33

OFTEN EACH HIGH-LEVEL BOX CONTAINS A REPEATING PATTERN Thomas Talker: Lorem ipsum gaium sit amet isciquitur elit in ellam lacustre pulzella. Expand Thomas Talker: Lorem ipsum gaium sit amet isciquitur elit in ellam lacustre pulzella. Expand Thomas Talker: Lorem ipsum gaium sit amet isciquitur elit in ellam lacustre pulzella. Expand Thomas Talker: Lorem ipsum gaium sit amet isciquitur elit in ellam lacustre pulzella. Expand Thomas Talker:


Слайд 34

TRY WORKING WITH PATTERNS AS MUCH AS POSSIBLE TO SUPPORT MEMORY AND LEARNING, MAKING THE INTERFACE TRUSTWORTHY


Слайд 35

1 / Wireframes as stories 2 / From boxes to elements


Слайд 36

PART II THE PROCESS


Слайд 37

Wireframes are made to be thrown away. They are steps in the process of design. Only the final one stays... until it gets developed.


Слайд 38

In other words: they can be delivered as documentation but they are not for most of the process


Слайд 39

THE INTERMEDIATE STEPS ARE VALUABLE: THEY SUPPORT COMMUNICATION AND CONSENSUS


Слайд 40

AT EACH STEP YOU CAN · test the journey · discuss with management · discuss with technical team · share with other parties


Слайд 41

ASK YOURSELF What’s the level of detail I need to communicate effectively? HD DETAILED HIGH LEVEL PAPER SKETCH WHITEBOARDS NAPKINS


Слайд 42

observe dot LOOP do think WORK IN ITERATIONS


Слайд 43

This works from startups to big enterprises


Слайд 44

Got 4 weeks?


Слайд 45

WEEKLY ITERATION Helps with project activities scoping, clarifies expectations, supports continuos progress review. WEEKLY MEETING Sets formal progress steps to help the client keeping the pace while being in touch with the project progress


Слайд 46

Let’s see an example PREPARE The first iteration is about understanding the problem.


Слайд 47

Let’s see an example WORKSHOP First wireframes made collaboratively by the stakeholders in a workshop, in groups. WHITEBOARD


Слайд 48

Let’s see an example TEST WITH USERS Take the whiteboards and formalize them in individual proposals to be tested.


Слайд 49

Let’s see an example REVIEW ALTERNATIVES In this review propose a few alternatives refining the solutions from the workshop. PAPER SKETCH


Слайд 50

Let’s see an example TEST WITH USERS Yup, again, if it’s possible. Try a more guerrilla approach maybe.


Слайд 51

Let’s see an example REVIEW FIRST DRAFT Ask explicitly to involve developers if it didn’t happen before the review. HIGH LEVEL


Слайд 52

In this way you can build clear, large scale plans. PROJECT PLAN 2012-11-08 STRATEGY 5 29 OCT 6 DESIGN 14 5 NOV 12 NOV 23 19 NOV DEVELOPMENT 30 26 NOV 10 3 DEC 14 10 DEC 21 17 DEC 4 24 DEC 31 DEC 11 7 JAN Submission launch PREPARATION Planning and data gathering STRATEGY Planning workshops & research Concept Definition UX DESIGN Creativity and planning workshops STRATEGY Campaign and challenges details Audience Validation UX DESIGN High-level wireframes and interactions VISUAL DESIGN Different proposals for brainstorming VISUAL DESIGN Consolidation of a single choice Wireframes VISUAL DESIGN Preparation of master documents Visual layouts DEVELOPMENT Sprint 1 DEVELOPMENT Sprint 2 DEVELOPMENT Submission launch DEVELOPMENT Sprint 3 Submission page CONTENT Preparation of basic copywriting MARKETING Strategy development Campaign Strategy KPI Definition MARKETING Strategy development DEVELO Sprint 4 CONTENT Preparation of basic translations COMMUNITY Launch support MARKETING Strategy development MARKETING Strategy development MARKETING Moment 1 Channel Strategy Content Calendar COMMU Launch s


Слайд 53

Got 1 week?


Слайд 54

THE DESIGN SPRINT MONDAY UNPACK TUESDAY SKETCH WEDNESDAY DECIDE THURSDAY PROTOTYPE FRIDAY TEST


Слайд 55

Got 10 minutes?


Слайд 56

6 Up Idea Generation Technique 1 2 3 4 5 6


Слайд 57

1 ITERATION = No review NEVER.


Слайд 58


Слайд 59

3 / Choose level of detail 4 / Iterative approach


Слайд 60

PART III KEYNOTE PROTOTYPING BASICS


Слайд 61

Keynote


Слайд 62

1 Setup pages


Слайд 63


Слайд 64

Choose the size you need, desktop or mobile.


Слайд 65

2 Build your journey


Слайд 66

Add all the screens of your journey as slides


Слайд 67

2 Build your screens


Слайд 68


Слайд 69

Welcome screen


Слайд 70

Welcome to Note Taker


Слайд 71

Add note


Слайд 72

Add You have no notes Create


Слайд 73

3 Link your screens


Слайд 74

Link Format → Add Link Cmd+K


Слайд 75


Слайд 76

4 Build your animations


Слайд 77


Слайд 78

MAGIC MOVE If the same object appears on two pages, it transitions moving and scaling Slide 1 Slide 2


Слайд 79

+ Create new note


Слайд 80

| CANCEL ADD


Слайд 81


Слайд 82


Слайд 83

Menu Home Write Profile


Слайд 84

5 Test your wireframe


Слайд 85

Play


Слайд 86

6 Export your video


Слайд 87

Record Play → Record Slideshow


Слайд 88


Слайд 89

5 / Basics of Keynote prototyping 6 / Basics of Keynote animation


Слайд 90

“ To complicate is easy, to simplify is hard. To complicate, just add, everyone is able to complicate. Few are able to simplify. Bruno Munari ”


Слайд 91

Thanks. @Folletto INTENSEMINIMALISM.COM


Слайд 92


×

HTML:





Ссылка: