Introduction to Building Wireframes (with Keynote)
•
209 gostaram•61,498 visualizações
This document provides an introduction to building wireframes. It discusses what wireframes are, different levels of detail in wireframes, and how to approach the wireframing process iteratively. Key points covered include: - A wireframe is a visual guide that represents the skeletal framework of a website. They allow for rapid, low-cost design iterations. - Wireframes can vary in level of detail from high-level box structures to individual page elements. The appropriate level depends on communication needs. - An iterative approach to wireframing involves testing designs with users at each step and refining solutions collaboratively over multiple iterations. Both long-term project planning and short sprint cycles can employ this iterative process. -
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Semelhante a Introduction to Building Wireframes (with Keynote)
Semelhante a Introduction to Building Wireframes (with Keynote) (20)
Mais de Erin 'Folletto' Casali
Mais de Erin 'Folletto' Casali (20)
Último
Último (20)
Introduction to Building Wireframes (with Keynote)
- 1. INTRODUCTION TO BUILDING WIREFRAMES Davide ‘Folletto’ Casali
- 4. @hjmediastudios THE IDEA OF WIREFRAME COMES FROM 3D MODELLING
- 5. “A website wireframe is a visual guide that represents the skeletal framework of a website” Wikipedia:
- 6. “Wireframing is a low-cost, rapid iterative design technique that offers one of the best methods for gaining design insight early” Nielsen/Norman Group: http://www.nngroup.com/courses/wireframing-and-prototyping/
- 7. THERE ARE DIFFERENT QUALITIES OF WIREFRAMES
- 8. Even if wireframes display a single interface/page they are less like photos and more like movie stills
- 9. WIREFRAMES AS JOURNEYS © Ivor Beddoes@awfulshot
- 10. WIREFRAMES AS STORYBOARDS FOR INTERFACES © Ivor Beddoes
- 11. DIFFERENT WAYS TO TELL A STORY frame by frame, drawings key frames, textual descriptions video, spoken narrative
- 12. Even if the storyboard is not visible it’s still the foundation of wireframes
- 13. Wireframes are a static representation of a dynamic non-linear flow of activity
- 14. Let’s build a journey. ImagineTwitter’s registration process.
- 15. Home Reg. Form Confirmation LOGIN PROCESS The main steps of the journey
- 16. Home Reg. Form Confirmation Your Page LOGIN PROCESS How do we guide the user to the value? ?
- 17. Home Reg. Form Confirmation Email Your Page LOGIN PROCESS An e-mail based approach
- 18. Home Reg. Form Confirmation Email Your Page LOGIN PROCESS A more direct way to engage the user
- 19. Home Reg. Form Confirmation Email Your Page LOGIN PROCESS Review journeys for the edge cases: errors, problems, etc ! !
- 20. LOGIN PROCESS The story is even bigger in reality Home Reg. Form Confirmation Email Your Page Tweet Third party Third party
- 21. The wireframe represents also the very first moment when the project team sees everything coming together.
- 22. The minimal visual building block of a wireframe is the box. Box
- 23. 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. Box
- 25. Some examples
- 29. Invite Friends Find Friends Navigation Pin Pin Pin Pin Pin
- 30. N N N C C S S Box Box Box Box Box Box Box Box 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.
- 31. Button Box Lorem ipsum gaium sit amet isciquitur elit in ellam lacustre pulzella. TEXT BUTTONS IMAGES ···MORE...
- 32. Box
- 33. Thomas Talker: Lorem ipsum gaium sit amet isciquitur elit in ellam lacustre pulzella. Expand
- 34. 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: OFTEN EACH HIGH-LEVEL BOX CONTAINS A REPEATING PATTERN
- 35. TRY WORKING WITH PATTERNS AS MUCH AS POSSIBLE TO SUPPORT MEMORY AND LEARNING, MAKING THE INTERFACE TRUSTWORTHY
- 36. 1 / Wireframes as stories 2 / From boxes to elements
- 38. Wireframes are made to be thrown away. They are steps in the process of design. Only the final one stays... until it gets developed.
- 39. In other words: they can be delivered as documentation but they are not for most of the process
- 40. THE INTERMEDIATE STEPS ARE VALUABLE: THEY SUPPORT COMMUNICATION AND CONSENSUS
- 41. AT EACH STEP YOU CAN · test the journey · discuss with management · discuss with technical team · share with other parties
- 42. NAPKINS WHITEBOARDS HIGH LEVEL DETAILED HD ASK YOURSELF What’s the level of detail I need to communicate effectively? PAPER SKETCH
- 43. WORK IN ITERATIONS do observe think dotL O O P
- 44. This works from startups to big enterprises
- 45. Got 4 weeks?
- 46. 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
- 47. Let’s see an example PREPARE The first iteration is about understanding the problem.
- 48. Let’s see an example WORKSHOP First wireframes made collaboratively by the stakeholders in a workshop, in groups. WHITEBOARD
- 49. Let’s see an example TEST WITH USERS Take the whiteboards and formalize them in individual proposals to be tested.
- 50. Let’s see an example REVIEW ALTERNATIVES In this review propose a few alternatives refining the solutions from the workshop. PAPER SKETCH
- 51. Let’s see an example TEST WITH USERS Yup, again, if it’s possible. Try a more guerrilla approach maybe.
- 52. Let’s see an example REVIEW FIRST DRAFT Ask explicitly to involve developers if it didn’t happen before the review. HIGH LEVEL
- 53. PROJECT PLAN 2012-11-08 29 OCT 5 NOV 6 12 NOV 14 26 NOV 30 3 DEC 10 DEC 10 14 17 DEC 21 24 DEC 31 DEC 4 7 JAN 11 STRATEGY PREPARATION Planning and data gathering STRATEGY Planning workshops & research STRATEGY Campaign and challenges details 19 NOV 23 UX DESIGN Creativity and planning workshops UX DESIGN High-level wireframes and interactions DESIGN VISUAL DESIGN Different proposals for brainstorming VISUAL DESIGN Consolidation of a single choice VISUAL DESIGN Preparation of master documents Wireframes Visual layouts DEVELOPMENT Sprint 1 CONTENT Preparation of basic copywriting DEVELOPMENT Sprint 2 CONTENT Preparation of basic translations DEVELOPMENT Submission launch DEVELOPMENT Sprint 3 DEVELOPMENT DEVELO Sprint 4 Submission page COMMUNITY Launch support COMMU Launch s Submission launch MARKETING Moment 1 MARKETING Strategy development MARKETING Strategy development MARKETING Strategy development MARKETING Strategy development 5 Concept Definition Campaign Strategy Channel Strategy Content Calendar KPI Definition Audience Validation In this way you can build clear, large scale plans.
- 54. Got 1 week?
- 56. Got 10 minutes?
- 57. 6 Up Idea Generation Technique 1 2 3 4 5 6
- 58. 1 ITERATION = No review NEVER.
- 60. 3 / Choose level of detail 4 / Iterative approach
- 62. Keynote
- 63. 1 Setup pages
- 65. Choose the size you need, desktop or mobile.
- 67. Add all the screens of your journey as slides
- 70. Welcome screen
- 72. Add note
- 73. Add You have no notes Create
- 75. Link Format → Add Link Cmd+K
- 79. MAGIC MOVE Slide 1 Slide 2 If the same object appears on two pages, it transitions moving and scaling
- 80. Create new note+
- 81. | ADDCANCEL
- 86. Play
- 88. Record Play → Record Slideshow
- 90. 5 / Basics of Keynote prototyping 6 / Basics of Keynote animation
- 91. “ ” Bruno Munari To complicate is easy, to simplify is hard. To complicate, just add, everyone is able to complicate. Few are able to simplify.