The document discusses wireframing and provides guidance on the wireframing process. It defines a wireframe as a visual representation of the layout and hierarchy of interface elements before final design. The key points covered include sketching initial ideas, using wireframes to communicate with clients and gather feedback, and the basic elements of an effective wireframe, such as structure, hierarchy, functionality and content. Tips are provided like keeping wireframes simple, using annotations, and iterating sketches until the team is confident in the solution. The overall message is that wireframes are an important tool for planning interfaces and getting early input from stakeholders.

1. Wireframing Made Easy
… with User Experience OutSystems Expert Margarida da Marça

2. UX Series
Wireframing Made Easy
Margarida da Marça
User Experience Expert - OutSystems
@designSTAIN
@OutSystemsDev

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. 1. 1. Intro

5. UXPERT TOOL KIT
● Sticky-notes
● Sketch Pad
● Sharpies
● Balsamiq Mockups
● InVision (opt)
● Evernote

6. WHY ARE WE HERE?

7. From Words... To images...
WHY ARE WE HERE?

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. 2. Process Basics

10. SKETCH to WIREFRAME to PROTOTYPE
Sketch Wireframe Prototype

11. 3. Sketch

12. Good to Start
“A sketch should work as a visible expression
of your thoughts and invite questions,
discussions and suggestions.
Sketch

13. Can you do this? So you can sketch...

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. 4.Wireframes

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. Entrance
Living Room
Room Suite
Service
Area
Bath Room
Toilet
Room

19. FOCUS IN
INTERACTIVITY
WIREFRAMES Vs
FOCUS ON
STRUCTURE
HiFi PROTOTYPES

20. Uses of a Wireframe

21. #1 Easy to communicate your ideas...

22. #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

23. #1 Easy to communicate your ideas...
Their blueprint for design
Helps understand the
structure and hierarchy of
elements

24. #1 Easy to communicate your ideas...
Gather their feedback
Conduct informal tests
Validate expectations
Identify issues earlier

25. #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

26. 26
BusinessAnalysis
UserResearch
Wireframes
VisualDesign
LiveStyleGuide
GoLive
#2 Very important deliverable

27. 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!

28. Lean UX: The OutSystems way
28
Wireframes

29. 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

30. And what happens if you
don’t produce Wireframes?

31. ● 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

32. Think!
TIME, COSTS AND QUALITY
IMPACT OF THIS...

33. “ 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

34. Elements of a Wireframe

35. ● 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

36. How shall we
tackle this briefing?

37. Structure Hierarchy FunctionalityContent

38. Structure Hierarchy FunctionalityContent

39. Content

40. Hierarchy FunctionalityContent Structure

41. Structure

42. Hierarchy FunctionalityContent Structure

43. Hierarchy

44. Hierarchy

45. Hierarchy FunctionalityContent Structure

46. Functionality

48. Functionality

49. Functionality

50. Tips

51. #1 Keep wireframes simple

52. #2 Annotate your wireframes

53. #3 Encourage feedback

54. #4 Iterate your sketches until you and your
teammates are confident with the solution

55. To conclude...

56. 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

57. Extras

58. Screenshot to
Lisbon shot em
modal
11 Usability Rules
goo.gl/mh5ZnA

59. Screenshot to
Lisbon shot em
modal
https://goo.gl/bmhNo1
The Developer’s UX Checklist

60. https://goo.gl/1eayOo

61. http://goo.gl/4mBVMV Ricardo Luiz
UX Expert and Team Leader
@ OutSystems

62. goo.gl/NsIsq7 João Guerra
UI Expert
@ OutSystems

63. https://goo.gl/ZS0Dsp http://goo.gl/uogFma Daniel Reis
Front End Expert
@ OutSystems

64. Thank you!