Wine & wireframes

Post on 16-Jul-2015

1.741 views 0 download

Tags:

Transcript of 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

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