Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
Training Webinar: Top front-end techniques for OutSystems
Next
Download to read offline and view in fullscreen.

5

Share

Download to read offline

Training Webinar - Wireframing made easy

Download to read offline

www.outsystems.com

"Wireframing Made Easy" is a hands-on course that will encourage you to start from simply sketching on a piece of paper, to laying out more refined structures - wireframes - and all the way up to creating interactive prototypes enabled with InVision.

Join the "Wireframing Made Easy" webinar to learn how to apply the UX process essentials to create a sample application: from the gathering of requirements to wireframes, the OutSystems way - fun and dynamic.

To hit the ground running, you will learn different techniques and how to use supporting software. This workshop will help you improve communication with teams and clients, impressing them with the visual representation of your ideas, all the while shortening development time.

Free Online training: https://www.outsystems.com/learn/courses/

Follow us on Twitter http://www.twitter.com/OutSystemsDev
Like us on Facebook http://www.Facebook.com/OutSystemsDev

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Training Webinar - Wireframing made easy

  1. 1. Wireframing Made Easy … with User Experience OutSystems Expert Margarida da Marça
  2. 2. UX Series Wireframing Made Easy Margarida da Marça User Experience Expert - OutSystems @designSTAIN @OutSystemsDev
  3. 3. TOPICS TO COVER 1. Intro 2. Process Basics 3. Sketch 4. Wireframes a. What is a Wireframe? b. Uses of a Wireframe c. Elements of a Wireframe 5. Live Exercise a. Solution b. Tips 6. Extras 7. Conclusion
  4. 4. 1. 1. Intro
  5. 5. UXPERT TOOL KIT ● Sticky-notes ● Sketch Pad ● Sharpies ● Balsamiq Mockups ● InVision (opt) ● Evernote
  6. 6. WHY ARE WE HERE?
  7. 7. From Words... To images... WHY ARE WE HERE?
  8. 8. 1. I can break the ice faster with the client 2. Communication is better with the team, client and the users 3. Make sure you develop something meaningful 1. Go from text-based requirements to something visual 2. Don’t know where to start 3. I am not comfortable using Balsamiq WIREFRAME Challenges Advantages
  9. 9. 2. Process Basics
  10. 10. SKETCH to WIREFRAME to PROTOTYPE Sketch Wireframe Prototype
  11. 11. 3. Sketch
  12. 12. Good to Start “A sketch should work as a visible expression of your thoughts and invite questions, discussions and suggestions. Sketch
  13. 13. Can you do this? So you can sketch...
  14. 14. Pictionary Get an afternoon of sponsored training! See how few lines or shapes you can use so the other player guesses the word being drawn by their partner
  15. 15. 4.Wireframes
  16. 16. Wireframe “A wireframe is a visual representation used to suggest the layout of fundamental elements of a user interface prioritizing the hierarchy of content. What is a Wireframe?
  17. 17. Entrance Living Room Room Suite Service Area Bath Room Toilet Room
  18. 18. FOCUS IN INTERACTIVITY WIREFRAMES Vs FOCUS ON STRUCTURE HiFi PROTOTYPES
  19. 19. Uses of a Wireframe
  20. 20. #1 Easy to communicate your ideas...
  21. 21. #1 Easy to communicate your ideas... Gets your client involved and allows the review of goals and priorities Set expectations, capture additional requirements Promote conversation around important elements
  22. 22. #1 Easy to communicate your ideas... Their blueprint for design Helps understand the structure and hierarchy of elements
  23. 23. #1 Easy to communicate your ideas... Gather their feedback Conduct informal tests Validate expectations Identify issues earlier
  24. 24. #1 Easy to communicate your ideas... Reduces the guesswork Faster, earlier implementation Identify implementation issues brief all team, track goals, priorities, scope Allows to start without the final designs
  25. 25. 26 BusinessAnalysis UserResearch Wireframes VisualDesign LiveStyleGuide GoLive #2 Very important deliverable
  26. 26. WIREFRAMES ARE A POWERFUL CHANGE MANAGEMENT TOOL Everyone can understand what the changes mean and where the company is headed You can defeat the unknown… make change easier!
  27. 27. Lean UX: The OutSystems way 28 Wireframes
  28. 28. And much more... Fast to create and iterate, if you fail it’s still ok! Capture initial feedback, gather feedback Reduce waste and uncertainty A clickable prototype lets you design interactions and user flow, the way to go to create early usability testing
  29. 29. And what happens if you don’t produce Wireframes?
  30. 30. ● Fail to address the end-users needs ● Not meeting client’s goals ● Not having any “visual” specifications ● Not testing and picking the best alternative ● Hard to make future changes ● Fixing issues in production Risks
  31. 31. Think! TIME, COSTS AND QUALITY IMPACT OF THIS...
  32. 32. “ Cost vs QualityThe cost of fixing an error after development is 100 times that of fixing an error before development of the project is completed. The ROI of User Experience with Dr. Susan Weinschenk https://www.youtube.com/watch?v=O94kYyzqvTc
  33. 33. Elements of a Wireframe
  34. 34. ● Focus your effort in the approval/rejection screen Ideate Think about an app that allow managers to approve or reject team holidays Use balsamiq or pen and paper Exercise
  35. 35. How shall we tackle this briefing?
  36. 36. Structure Hierarchy FunctionalityContent
  37. 37. Structure Hierarchy FunctionalityContent
  38. 38. Content
  39. 39. Hierarchy FunctionalityContent Structure
  40. 40. Structure
  41. 41. Hierarchy FunctionalityContent Structure
  42. 42. Hierarchy
  43. 43. Hierarchy
  44. 44. Hierarchy FunctionalityContent Structure
  45. 45. Functionality
  46. 46. Functionality
  47. 47. Functionality
  48. 48. Tips
  49. 49. #1 Keep wireframes simple
  50. 50. #2 Annotate your wireframes
  51. 51. #3 Encourage feedback
  52. 52. #4 Iterate your sketches until you and your teammates are confident with the solution
  53. 53. To conclude...
  54. 54. Final Takeaways Producing Wireframes to support your projects will allow you to better communicate with your peers #1 Sharing your wireframes with others is a great way to easily get feedback #2 Don’t forget about Pictionary#3
  55. 55. Extras
  56. 56. Screenshot to Lisbon shot em modal 11 Usability Rules goo.gl/mh5ZnA
  57. 57. Screenshot to Lisbon shot em modal https://goo.gl/bmhNo1 The Developer’s UX Checklist
  58. 58. https://goo.gl/1eayOo
  59. 59. http://goo.gl/4mBVMV Ricardo Luiz UX Expert and Team Leader @ OutSystems
  60. 60. goo.gl/NsIsq7 João Guerra UI Expert @ OutSystems
  61. 61. https://goo.gl/ZS0Dsp http://goo.gl/uogFma Daniel Reis Front End Expert @ OutSystems
  62. 62. Thank you!
  • JimTsipoutas

    Sep. 2, 2018
  • pp63459

    Jan. 9, 2017
  • RodrigoCatarino1

    Oct. 28, 2016
  • StuartTowers

    Oct. 26, 2016
  • MelissaCristvo1

    Sep. 23, 2016

www.outsystems.com "Wireframing Made Easy" is a hands-on course that will encourage you to start from simply sketching on a piece of paper, to laying out more refined structures - wireframes - and all the way up to creating interactive prototypes enabled with InVision. Join the "Wireframing Made Easy" webinar to learn how to apply the UX process essentials to create a sample application: from the gathering of requirements to wireframes, the OutSystems way - fun and dynamic. To hit the ground running, you will learn different techniques and how to use supporting software. This workshop will help you improve communication with teams and clients, impressing them with the visual representation of your ideas, all the while shortening development time. Free Online training: https://www.outsystems.com/learn/courses/ Follow us on Twitter http://www.twitter.com/OutSystemsDev Like us on Facebook http://www.Facebook.com/OutSystemsDev

Views

Total views

1,443

On Slideshare

0

From embeds

0

Number of embeds

8

Actions

Downloads

81

Shares

0

Comments

0

Likes

5

×