Wine & wireframes

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


AGENDA

1. Grab (x) glasses of wine

2. Defining the purpose

3. How-To

4. Writing on walls while drinking wine!


WHAT IS THE PURPOSE OF WIREFRAMING?


COMMUNICATING IDEAS


IGNAZ SEMMELWEIS


JAMES A. GARFIELD


HOW DOES THAT TRANSLATE HERE?


SKETCH WIREFRAME PROTOTYPE


SKETCHING & WIREFRAMING

‣ Rapid visualization of high-level ideas ‣ Capturing simplest essence ‣ Designed for sharing ‣ Quick & disposable ‣ More about the activity than the artifact


TOOLS

Warm Soft


SOME ELEMENTS


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


WHAT ARE THEY?

• Wireframes brings together several things

• structure

• navigation

• information hierarchy

• interactions


HOW-TO

• No hard & fast rules

• Low-fidelity sketches

• High-fidelity digital drawings

• Understand the audience & your purpose


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


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.


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�

�

�

�


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





TIMING

DELIVERABLEWRITING ON WALLS

remaning time

1. Use your sketch as a base

2. Refine designs

3. Annotate key elements

4. ShareEXERCISE

Q&A