VINCE BASKERVILLE SR. UX-ER, @SALESFORCE
WINE & WIREFRAMES: INTRO TO UX
vince baskerville | @whoisvince#galaunchweek
LEARNING OBJECTIVES
‣ Practice sketching techniques in order to illustrate and communicate the elements and structure of user interfaces
‣Articulate the value of wireframe documents, what they represent, and when they are useful
‣Go over best practices for wireframing
vince baskerville | @whoisvince#galaunchweek
AGENDA
1. Grab (x) glasses of wine
2. Defining the purpose
3. How-To
4. Writing on walls while drinking wine!
vince baskerville | @whoisvince#galaunchweek
WHAT IS THE PURPOSE OF WIREFRAMING?
vince baskerville | @whoisvince#galaunchweek
COMMUNICATING IDEAS
vince baskerville | @whoisvince#galaunchweek
IGNAZ SEMMELWEIS
vince baskerville | @whoisvince#galaunchweek
JAMES A. GARFIELD
vince baskerville | @whoisvince#galaunchweek
HOW DOES THAT TRANSLATE HERE?
vince baskerville | @whoisvince#galaunchweek
SKETCH WIREFRAME PROTOTYPE
vince baskerville | @whoisvince#galaunchweek
SKETCHING & WIREFRAMING
‣ Rapid visualization of high-level ideas ‣ Capturing simplest essence ‣ Designed for sharing ‣ Quick & disposable ‣ More about the activity than the artifact
vince baskerville | @whoisvince#galaunchweek
TOOLS
Warm Soft
vince baskerville | @whoisvince#galaunchweek
SOME ELEMENTS
vince baskerville | @whoisvince#galaunchweek
YOUR SKETCH IS YOUR FIRST MINIMUM VIABLE
PRODUCT (MVP)
TIMING
DELIVERABLEWRITING ON WALLS
5 mins
15 mins
10 mins
1.Pick an app on your phone
2.Pick 3 screens & sketch them
3.ShareEXERCISE
LETS TALK WIREFRAMES
vince baskerville | @whoisvince#galaunchweek
WHAT ARE THEY?
• Wireframes brings together several things
• structure
• navigation
• information hierarchy
• interactions
vince baskerville | @whoisvince#galaunchweek
HOW-TO
• No hard & fast rules
• Low-fidelity sketches
• High-fidelity digital drawings
• Understand the audience & your purpose
vince baskerville | @whoisvince#galaunchweek
KEY CONCEPTS• Be clear about your objective before you start
• Functional over pretty*
• Use Color to convey meaning
• Be consistent in the details
• Justify every element’s existence
vince baskerville | @whoisvince#galaunchweek
BLOCK DIAGRAMS
p16 Confidential | Prepared for Citi by Moment
Initial findings Organize around tasks Organize the application around the core concept of the “project” to aggregate and support the key tasks the data steward must enact to work toward data quality issue resolution.
1. Create a data quality issue “project” Abilty to create new project entity (which will create a project page on the portal). Attributes include:
1. Text description of the data quality issue (i.e. only 42% of account openings in Vietnam contain GFCID)
2. Chart, graph or other visualization illustrating the issue in comparison to some established standard or relevant metric.
3. “Tags” to associate project with policies, region, responsible parties, business or organizational unit, issue type, etc.
vince baskerville | @whoisvince#galaunchweek
HIGH LEVEL DIGITAL
!>/:>3/?*9:D�&=2J6C�:D�2�>:?:>2=�G:6H�@7�E96�&=2J6C�A:4EFC65�:?�E96��F5:@42DED�D64E:@?�@7�E9:D�5@4F>6?E��-9:=6�2F5:@42DED�92G6�7F==�4@?EC@=D��77��C6H:?5��6E4����E9:D�:?DE2?46�@7�E96�&=2J6C�@?=J�92D�&=2J�2?5�&2FD6�7F?4E:@?2=:EJ��
��"5+A,+-4�F5:@�D9@F=5�A=2J�2FE@>2E:42==J���7�FD6C�DE@AD�A=2J324<��FD6C�42??@E�C6DF>6�A=2J324<�
&=2J6C�:D�A:4EFC65�:?�2�)E@AA65�DE2E6���7�2F5:@�:D�A=2J:?8��DJDE6>�D9@F=5�C6A=246�&=2J�:4@?�0�L��1�H:E9�2�)E@A�:4@?�0�01�1���D66�8C2A9:4�56D:8?�DA64�7@C�>@C6�56E2:=D�
���%-2/.=5/�7�FD6C�4=:4<D�@?�)4965F=6�:4@?��DJDE6>�D9@F=5�8@�E@�)4965F=6�
����6+35�*96�FD6C�>2J�6>2:=�:?E@�=:G6�D9@HD�3J�E2AA:?8�E96�6>2:=�:4@?�
���+>8:3</�*96�FD6C�>2J�255�E96�4FCC6?E=J�A=2J:?8�D9@H�E@�E96:C��2G@C:E6D�
���%=995/6/7<+:A��:+923-;�8:��38;��@C�@G6CG:6H�2?5�7F?4E:@?2=:EJ��A=62D6�D66�E96��F5:@42DE�L�&=2J6C�D64E:@?�@7�E9:D�5@4F>6?E�
����8:/��=<<87�-96?�E2AA65��E96�2C62�36EH66?�E96�D9@H�E:E=6�2?5�E96�4@?EC@=D�D6A2C2E6D�E@�6IA@D6�2�56D4C:AE:@?��*96�36=@H�4@?E6?E�:D�AFD965�5@H?��*2AA:?8�E96�3FEE@?�282:?�4=@D6D�E96�A=2J6C�324<�E@�:ED�5672F=E�DE2E6���D66��C2A9:4��6D:8?�DA64�7@C�G:DF2=�56E2:=D�
$=J9�@CCA69F;�CB�H<9��7CBCAM
K=H<�,CA�#99B9
$GKL,CA�#99B9
�57?�57?�)=FM
+HC7?�,=7?9F�����������������������������@CCA69F;
��)+.!
�
��2�":G6��C@2542DE��A=2J6C�
�
�
�
vince baskerville | @whoisvince#galaunchweek
DETAILED
�������*(4:*6< �*7(6.58.43
065:E1�64,6*77
�*77&,*7
�����@>A=6E6
�&707
'C@;64ED��������!��)64@G6CJ
�*86.(7
���� $@C6>�:ADF>�46*2��5792�F:D�G6DE:3F=F>�;FDE@�24�;FDE@��FC23:EFC�6F:D>@5�96?5C6C:E�=@C6>�%@C3:�?:D:��@?64�4@?D64E6EF6C�?6BF6�:5�6C2E��C2D�6F�E6==FD�BF:D�>28?2�>@==:D�4@?D6BF2E�
065:E1
�*77&,*7��������&707��������.1*7843*7�������(8.:.8<�������.1*7���:*6:.*;
�9.7�:*78.����������������� �������� �"2?� �����
�9.7�:*78.����������� ������� �������� �"2?� �����
�9.7�:*78.���������������� �������� �"2?�������
�9.7�:*78.���������������� �������� �"2?�������
�9.7�:*78.����������������� �������� �"2?�������
�9.7�:*78.����� ������������ �������� �"2?�������
*F446DD��/@F�92G6�42?46==65�2�A6?5:?8�:?G:E6 ,?5@
*E2EFD�� �4198.43��493)
�3@FE�K��@?E24E�,D�K�*6EE:?8D�K�'C@7:=6�K� 6=A *62C49�All
�&8&��4:*63&3(*��468&1
�41.(.*7 �&8&��.(8.43&6< �.7(977.437 5)&8*7 �*451*�&8&��9&1.8<�42* �)2.3�64/*(87�.,3��98
�*77&,*7��������&707��������.1*7843*7�������(8.:.8<�������.1*7���:*6:.*;
�)2.3�.,3��98 �64/*(87
vince baskerville | @whoisvince#galaunchweek
vince baskerville | @whoisvince#galaunchweek
vince baskerville | @whoisvince#galaunchweek
vince baskerville | @whoisvince#galaunchweek
TIMING
DELIVERABLEWRITING ON WALLS
remaning time
1. Use your sketch as a base
2. Refine designs
3. Annotate key elements
4. ShareEXERCISE
Q&A
Recommended