Download as PDF, PPTX
Uploaded byErin Casali
Introduction to Building Wireframes (with Keynote)
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. -
More Related Content
Similar to Introduction to Building Wireframes (with Keynote)
Introduction to Building Wireframes (with Keynote)
- 1. INTRODUCTION TO BUILDING WIREFRAMES Davide‘Folletto’ Casali
- 2.
- 3.
- 4. @hjmediastudios THE IDEA OF WIREFRAMECOMES FROM 3D MODELLING
- 5. “A website wireframe is a visual guide that represents the skeletal framework of a website” Wikipedia:
- 6. “Wireframing is alow-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 OFWIREFRAMES
- 8. Even if wireframesdisplay a single interface/page they are less like photos and more like movie stills
- 9. WIREFRAMES AS JOURNEYS © IvorBeddoes@awfulshot
- 10. WIREFRAMES AS STORYBOARDS FOR INTERFACES ©Ivor Beddoes
- 11. DIFFERENT WAYS TOTELL A STORY frame by frame, drawings key frames, textual descriptions video, spoken narrative
- 12. Even if thestoryboard is not visible it’s still the foundation of wireframes
- 13. Wireframes are astatic representation of a dynamic non-linear flow of activity
- 14. Let’s build ajourney. ImagineTwitter’s registration process.
- 15. Home Reg. FormConfirmation LOGIN PROCESS The main steps of the journey
- 16. Home Reg. FormConfirmation Your Page LOGIN PROCESS How do we guide the user to the value? ?
- 17. Home Reg. FormConfirmation Email Your Page LOGIN PROCESS An e-mail based approach
- 18. Home Reg. FormConfirmation Email Your Page LOGIN PROCESS A more direct way to engage the user
- 19. Home Reg. FormConfirmation Email Your Page LOGIN PROCESS Review journeys for the edge cases: errors, problems, etc ! !
- 20. LOGIN PROCESS The storyis even bigger in reality Home Reg. Form Confirmation Email Your Page Tweet Third party Third party
- 21. The wireframe representsalso the very first moment when the project team sees everything coming together.
- 22. The minimal visualbuilding block of a wireframe is the box. Box
- 23. Boxes usually containa uniform kind of content, not the individual elements. However, it’s important to choose the right level of breakdown to support the discussion. Box
- 24.
- 25.
- 27.
- 29. Invite Friends Find Friends Navigation PinPin Pin Pin Pin
- 30. N N N CC 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 gaiumsit amet isciquitur elit in ellam lacustre pulzella. TEXT BUTTONS IMAGES ···MORE...
- 32.
- 33. Thomas Talker: Lorem ipsumgaium sit amet isciquitur elit in ellam lacustre pulzella. Expand
- 34. Thomas Talker: Lorem ipsumgaium 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 WITHPATTERNS AS MUCH AS POSSIBLE TO SUPPORT MEMORY AND LEARNING, MAKING THE INTERFACE TRUSTWORTHY
- 36. 1 / Wireframesas stories 2 / From boxes to elements
- 37.
- 38. Wireframes are madeto be thrown away. They are steps in the process of design. Only the final one stays... until it gets developed.
- 39. In other words: theycan be delivered as documentation but they are not for most of the process
- 40. THE INTERMEDIATE STEPS AREVALUABLE: THEY SUPPORT COMMUNICATION AND CONSENSUS
- 41. AT EACH STEPYOU 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’sthe level of detail I need to communicate effectively? PAPER SKETCH
- 43.
- 44. This works from startupsto big enterprises
- 45.
- 46. WEEKLY ITERATION Helps withproject 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 anexample PREPARE The first iteration is about understanding the problem.
- 48. Let’s see anexample WORKSHOP First wireframes made collaboratively by the stakeholders in a workshop, in groups. WHITEBOARD
- 49. Let’s see anexample TEST WITH USERS Take the whiteboards and formalize them in individual proposals to be tested.
- 50. Let’s see anexample REVIEW ALTERNATIVES In this review propose a few alternatives refining the solutions from the workshop. PAPER SKETCH
- 51. Let’s see anexample TEST WITH USERS Yup, again, if it’s possible. Try a more guerrilla approach maybe.
- 52. Let’s see anexample REVIEW FIRST DRAFT Ask explicitly to involve developers if it didn’t happen before the review. HIGH LEVEL
- 53. PROJECT PLAN 2012-11-08 29OCT 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.
- 55.
- 56.
- 57. 6 Up IdeaGeneration Technique 1 2 3 4 5 6
- 58. 1 ITERATION =No review NEVER.
- 60. 3 / Chooselevel of detail 4 / Iterative approach
- 61.
- 62.
- 63.
- 65. Choose the size youneed, desktop or mobile.
- 66.
- 67. Add all the screensof your journey as slides
- 68.
- 70.
- 71.
- 72.
- 73. Add You have nonotes Create
- 74.
- 75. Link Format → AddLink Cmd+K
- 77.
- 79. MAGIC MOVE Slide 1Slide 2 If the same object appears on two pages, it transitions moving and scaling
- 80.
- 81.
- 84.
- 85.
- 86.
- 87.
- 88. Record Play → RecordSlideshow
- 90. 5 / Basicsof Keynote prototyping 6 / Basics of Keynote animation
- 91. “ ” Bruno Munari To complicateis easy, to simplify is hard. To complicate, just add, everyone is able to complicate. Few are able to simplify.
- 92.