SlideShare a Scribd company logo

Communication with Flexible Documentation - IxDA Miami 2014

Jon Hadden, profile picture
Jon Hadden

The document discusses effective communication and workflow strategies for web designers, emphasizing the need for flexibility and efficiency in design processes. It highlights the importance of contextual information, collaboration, and participatory design techniques, including a method called the 6-8-5 sketch workshop. Additionally, the text addresses the role of content strategists and the concept of information architecture as essential components for successful design.

Design
Related topics:
Responsive Design Insights • User Experience Design
1 of 116
Download to read offline
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
Communication with Flexible Documentation Jon Hadden @niceux niceux.com Effective communication and efficient workflow for today’s web designers
33 years ago…
Birth of A Legend designed by Jakub Gruber (Buy this t-shirt) 33 years ago…
Birth of A Legend designed by Jakub Gruber (Buy this t-shirt)
Communication with Flexible Documentation - IxDA Miami 2014
I love strategy, information architecture, observing human behavior, front-end development and helping people enjoy the web. Hi, my name is Jon. NiceUX
I love strategy, information architecture, observing human behavior, front-end development and helping people enjoy the web. Hi, my name is Jon. NiceUX
Communication with Flexible Documentation - IxDA Miami 2014
Communication with Flexible Documentation - IxDA Miami 2014
Communication with Flexible Documentation - IxDA Miami 2014
Communication with Flexible Documentation - IxDA Miami 2014
Communication with Flexible Documentation - IxDA Miami 2014
Communication with Flexible Documentation - IxDA Miami 2014
Communication with Flexible Documentation - IxDA Miami 2014
Communication with Flexible Documentation - IxDA Miami 2014
=
Photo Credits: http://toparkornottopark.com/
Photo Credits: http://www.smashingmagazine.com/wp-content/uploads/2011/12/7.jpg Pay attention to contextual information. Be efficient. Remain flexible and adapt to surroundings. Find the best way to effectively communicate to your audience.
Photo Credits: http://www.smashingmagazine.com/wp-content/uploads/2011/12/7.jpg Pay attention to contextual information. Be efficient. Remain flexible and adapt to surroundings. Find the best way to effectively communicate to your audience.
Photo Credits: http://www.smashingmagazine.com/wp-content/uploads/2011/12/7.jpg Pay attention to contextual information. Be efficient. Remain flexible and adapt to surroundings. Find the best way to effectively communicate to your audience.
Photo Credits: http://www.smashingmagazine.com/wp-content/uploads/2011/12/7.jpg Pay attention to contextual information. Be efficient. Remain flexible and adapt to surroundings. Find the best way to effectively communicate to your audience.
The approach and manner in which you tell a story, influences an audience’s perception of that story’s value. Photo Credits: http://www.bbc.co.uk/blogs/legacy/bbcinternet/2012/06/bbc_tv_channel_homepages_redes.html @niceux
Story time
Approve an invoice • Performed multiple times per day, every day. • User’s end of the year bonus depended upon number of non-error approvals. • Used by 40-60 year olds who don’t use their computers besides to check in over email or Facebook with their college aged kids. • Primarily used at a desktop PC, using IE7 • Originally built as desktop application, and 10 yr old code was “dropped” into a web version.
4 things needed to approve an invoice without error 1. Invoice Amount 2. Bill Amount 3. Route Details 4. Associated Notes
4 things needed to approve an invoice without error 1. Invoice Amount 2. Bill Amount 3. Route Details 4. Associated Notes Invoice List
4 things needed to approve an invoice without error 1. Invoice Amount 2. Bill Amount 3. Route Details 4. Associated Notes Invoice List Invoice Amount 3-5 seconds
4 things needed to approve an invoice without error 1. Invoice Amount 2. Bill Amount 3. Route Details 4. Associated Notes Invoice List Invoice Amount 3-5 seconds
4 things needed to approve an invoice without error 1. Invoice Amount 2. Bill Amount 3. Route Details 4. Associated Notes Invoice List Invoice Amount 3-5 seconds Bill Amount
4 things needed to approve an invoice without error 1. Invoice Amount 2. Bill Amount 3. Route Details 4. Associated Notes Invoice List Invoice Amount 3-5 seconds Bill Amount
4 things needed to approve an invoice without error 1. Invoice Amount 2. Bill Amount 3. Route Details 4. Associated Notes Invoice List Invoice Amount 3-5 seconds Bill Amount Route Details
4 things needed to approve an invoice without error 1. Invoice Amount 2. Bill Amount 3. Route Details 4. Associated Notes Invoice List Invoice Amount 3-5 seconds Bill Amount Route Details
4 things needed to approve an invoice without error 1. Invoice Amount 2. Bill Amount 3. Route Details 4. Associated Notes Transactions ~ 6 seconds Notes
4 things needed to approve an invoice without error 1. Invoice Amount 2. Bill Amount 3. Route Details 4. Associated Notes Transactions 3-5 seconds Notes Invoice Notes
4 things needed to approve an invoice without error 1. Invoice Amount 2. Bill Amount 3. Route Details 4. Associated Notes Transactions 3-5 seconds Notes Invoice Notes
4 things needed to approve an invoice without error 1. Invoice Amount 2. Bill Amount 3. Route Details 4. Associated Notes Transactions Notes Invoice Notes ~ 6 seconds
4 things needed to approve an invoice without error 1. Invoice Amount 2. Bill Amount 3. Route Details 4. Associated Notes Transactions Notes Invoice Notes ~ 5 minutes per approved invoice
Communication with Flexible Documentation - IxDA Miami 2014
Communication with Flexible Documentation - IxDA Miami 2014
Communication with Flexible Documentation - IxDA Miami 2014
Photo Credits: Dennis Kardys http://www.wsol.com/a-more-flexible-workflow/
Concept Direction 1 30 Wireframes Concept Direction 2 Concept Direction 3 20 PSDs Large 20 Wireframes 10 PSDs Medium 30 Wireframes 5 PSDs Small 20 Wireframes 5 PSDs X-Small 30 Wireframes 20 PSDs 20 Wireframes 10 PSDs 30 Wireframes 5 PSDs 20 Wireframes 5 PSDs 30 Wireframes 20 PSDs 20 Wireframes 10 PSDs 30 Wireframes 5 PSDs 20 Wireframes 5 PSDs
Concept Direction 1 30 Wireframes Concept Direction 2 Concept Direction 3 20 PSDs Large 20 Wireframes 10 PSDs Medium 30 Wireframes 5 PSDs Small 20 Wireframes 5 PSDs X-Small 30 Wireframes 20 PSDs 20 Wireframes 10 PSDs 30 Wireframes 5 PSDs 20 Wireframes 5 PSDs 30 Wireframes 20 PSDs 20 Wireframes 10 PSDs 30 Wireframes 5 PSDs 20 Wireframes 5 PSDs
Concept Direction 1 30 Wireframes Concept Direction 2 Concept Direction 3 20 PSDs Large 20 Wireframes 10 PSDs Medium 30 Wireframes 5 PSDs Small 20 Wireframes 5 PSDs X-Small 30 Wireframes 20 PSDs 20 Wireframes 10 PSDs 30 Wireframes 5 PSDs 20 Wireframes 5 PSDs 30 Wireframes 20 PSDs 20 Wireframes 10 PSDs 30 Wireframes 5 PSDs 20 Wireframes 5 PSDs
Concept Direction 1 30 Wireframes Concept Direction 2 Concept Direction 3 20 PSDs Large 20 Wireframes 10 PSDs Medium 30 Wireframes 5 PSDs Small 20 Wireframes 5 PSDs X-Small 30 Wireframes 20 PSDs 20 Wireframes 10 PSDs 30 Wireframes 5 PSDs 20 Wireframes 5 PSDs 30 Wireframes 20 PSDs 20 Wireframes 10 PSDs 30 Wireframes 5 PSDs 20 Wireframes 5 PSDs
Concept Direction 1 30 Wireframes Concept Direction 2 Concept Direction 3 20 PSDs Large 20 Wireframes 10 PSDs Medium 30 Wireframes 5 PSDs Small 20 Wireframes 5 PSDs X-Small 30 Wireframes 20 PSDs 20 Wireframes 10 PSDs 30 Wireframes 5 PSDs 20 Wireframes 5 PSDs 30 Wireframes 20 PSDs 20 Wireframes 10 PSDs 30 Wireframes 5 PSDs 20 Wireframes 5 PSDs
Concept Direction 1 30 Wireframes Concept Direction 2 Concept Direction 3 20 PSDs Large 20 Wireframes 10 PSDs Medium 30 Wireframes 5 PSDs Small 20 Wireframes 5 PSDs X-Small 30 Wireframes 20 PSDs 20 Wireframes 10 PSDs 30 Wireframes 5 PSDs 20 Wireframes 5 PSDs 30 Wireframes 20 PSDs 20 Wireframes 10 PSDs 30 Wireframes 5 PSDs 20 Wireframes 5 PSDs
Concept Direction 1 30 Wireframes Concept Direction 2 Concept Direction 3 20 PSDs Large 20 Wireframes 10 PSDs Medium 30 Wireframes 5 PSDs Small 20 Wireframes 5 PSDs X-Small 30 Wireframes 20 PSDs 20 Wireframes 10 PSDs 30 Wireframes 5 PSDs 20 Wireframes 5 PSDs 30 Wireframes 20 PSDs 20 Wireframes 10 PSDs 30 Wireframes 5 PSDs 20 Wireframes 5 PSDs
Concept Direction 1 30 Wireframes Concept Direction 2 Concept Direction 3 20 PSDs Large 20 Wireframes 10 PSDs Medium 30 Wireframes 5 PSDs Small 20 Wireframes 5 PSDs X-Small 30 Wireframes 20 PSDs 20 Wireframes 10 PSDs 30 Wireframes 5 PSDs 20 Wireframes 5 PSDs 30 Wireframes 20 PSDs 20 Wireframes 10 PSDs 30 Wireframes 5 PSDs 20 Wireframes 5 PSDs
Concept Direction 1 30 Wireframes Concept Direction 2 Concept Direction 3 20 PSDs Large 20 Wireframes 10 PSDs Medium 30 Wireframes 5 PSDs Small 20 Wireframes 5 PSDs X-Small 30 Wireframes 20 PSDs 20 Wireframes 10 PSDs 30 Wireframes 5 PSDs 20 Wireframes 5 PSDs 30 Wireframes 20 PSDs 20 Wireframes 10 PSDs 30 Wireframes 5 PSDs 20 Wireframes 5 PSDs
Communication with Flexible Documentation - IxDA Miami 2014
Concept Direction 1 30 Wireframes Concept Direction 2 Concept Direction 3 20 PSDs Large 20 Wireframes 10 PSDs Medium 30 Wireframes 5 PSDs Small 20 Wireframes 5 PSDs X-Small 30 Wireframes 20 PSDs 20 Wireframes 10 PSDs 30 Wireframes 5 PSDs 20 Wireframes 5 PSDs 30 Wireframes 20 PSDs 20 Wireframes 10 PSDs 30 Wireframes 5 PSDs 20 Wireframes 5 PSDs 1. Nights and weekends.
Concept Direction 1 30 Wireframes Concept Direction 2 Concept Direction 3 20 PSDs Large 20 Wireframes 10 PSDs Medium 30 Wireframes 5 PSDs Small 20 Wireframes 5 PSDs X-Small 30 Wireframes 20 PSDs 20 Wireframes 10 PSDs 30 Wireframes 5 PSDs 20 Wireframes 5 PSDs 30 Wireframes 20 PSDs 20 Wireframes 10 PSDs 30 Wireframes 5 PSDs 20 Wireframes 5 PSDs 1. Nights and weekends. 2. Changing the same thing a billion times … just because.
Concept Direction 1 30 Wireframes Concept Direction 2 Concept Direction 3 20 PSDs Large 20 Wireframes 10 PSDs Medium 30 Wireframes 5 PSDs Small 20 Wireframes 5 PSDs X-Small 30 Wireframes 20 PSDs 20 Wireframes 10 PSDs 30 Wireframes 5 PSDs 20 Wireframes 5 PSDs 30 Wireframes 20 PSDs 20 Wireframes 10 PSDs 30 Wireframes 5 PSDs 20 Wireframes 5 PSDs 1. Nights and weekends. 2. Changing the same thing a billion times … just because. 3. File names like: 
 204_OH_PortalRedesign_wireframes_FINAL_DRAFT_FINAL.graffle
Concept Direction 1 30 Wireframes Concept Direction 2 Concept Direction 3 20 PSDs Large 20 Wireframes 10 PSDs Medium 30 Wireframes 5 PSDs Small 20 Wireframes 5 PSDs X-Small 30 Wireframes 20 PSDs 20 Wireframes 10 PSDs 30 Wireframes 5 PSDs 20 Wireframes 5 PSDs 30 Wireframes 20 PSDs 20 Wireframes 10 PSDs 30 Wireframes 5 PSDs 20 Wireframes 5 PSDs 1. Nights and weekends. 2. Changing the same thing a billion times … just because. 3. File names like: 
 204_OH_PortalRedesign_wireframes_FINAL_DRAFT_FINAL.graffle 4. Sucking at life.
NOPE Photo Credits: http://catswallpaperhd.us/cat/grumpy-cat-clipart-hd/attachment/grumpy-cat-clipart-hd-download-new-grumpy-cat-cartoon-free-wallpaper-x-full-hd-pictures/
1. Where are opportunities to reduce misinterpretation when viewing a design? Considering the variables:
1. Where are opportunities to reduce misinterpretation when viewing a design? 2. How can I make my process more efficient, or reduce the amount of work I need to do in order to get everyone from point A to B? Considering the variables:
1. Where are opportunities to reduce misinterpretation when viewing a design? 2. How can I make my process more efficient, or reduce the amount of work I need to do in order to get everyone from point A to B? 3. Can I increase the portability of my documentation? Considering the variables:
Approach the cognitive load of consuming and creating your documentation like you would the usability of an app. Photo Credits: http://www.bbc.co.uk/blogs/legacy/bbcinternet/2012/06/bbc_tv_channel_homepages_redes.html @niceux
Photo Credits: Dennis Kardys http://www.wsol.com/a-more-flexible-workflow/
Photo Credits: Dennis Kardys http://www.wsol.com/a-more-flexible-workflow/
As a designer 1. Conceptual Design • Strategy & Concept Convergence 2. Content Strategy & IA • Substance & Structure of Content • Environment, Organization, Portability and Structural Layout 3. Interaction Design • Types of Interactions, States and Transitions 4. Visual Design • Element Design As a developer 1. Environments 2. Data Binding 3. Content Delivery 4. Modular Elements
As a designer 1. Conceptual Design • Strategy & Concept Convergence 2. Content Strategy & IA • Substance & Structure of Content • Environment, Organization, Portability and Structural Layout 3. Interaction Design • Types of Interactions, States and Transitions 4. Visual Design • Element Design As a developer 1. Environments 2. Data Binding 3. Content Delivery 4. Modular Elements
Participatory Conceptual Design means involving non-designers to the designer tea party. Photo Credits: http://www.slideshare.net/runger/big-d-sketchingkey Consider trying the 6-8-5 Sketch Workshop on your next project during the requirements gathering and conceptual brainstorming phase with stakeholders and other team members.
1. Define strategy, context of use and content.
1. Define strategy, context of use and content. 2. Rapidly produce many variations.
1. Define strategy, context of use and content. 2. Rapidly produce many variations. 3. Critique and repeat.
Separate features, assumptions, risks and potential usability points of friction.
Think through high level page flows and the conversation the user will have throughout their experience.
Individually focus on UI elements, potential options for handling information and interaction.
Put it all together.
Tell your story.
s Utilize collaborative, cross-functional sketch sessions to gain buy-in and converge on design concepts together. Photo Credits: http://spin.atomicobject.com/2012/04/22/more-takeaways-from-cooper-ux-bootcamp/ @niceux #leandocs
As a designer 1. Conceptual Design • Strategy & Concept Convergence 2. Content Strategy & IA • Substance & Structure of Content • Environment, Organization, Portability and Structural Layout 3. Interaction Design • Types of Interactions, States and Transitions 4. Visual Design • Element Design As a developer 1. Environments 2. Data Binding 3. Content Delivery 4. Modular Elements
Content strategists in the digital age need to become data philosophers and explore the metaphysics of content, starting with the question “What is content?” Photo Credits: http://www.bbc.co.uk/blogs/legacy/bbcinternet/2012/06/bbc_tv_channel_homepages_redes.html Rachel Lovinger in 2007: http://boxesandarrows.com/content-strategy-the-philosophy-of-data/
1. Structure and Relationships. Content Modeling Photo Credits: http://alistapart.com/article/content-modelling-a-master-skill
1. Structure and Relationships. 2. Volume and Details. Content Modeling Photo Credits: http://alistapart.com/article/content-modelling-a-master-skill
1. Structure and Relationships. 2. Volume and Details. 3. Potential Issues Posed to Design and Development. Content Modeling Photo Credits: http://alistapart.com/article/content-modelling-a-master-skill
Communication with Flexible Documentation - IxDA Miami 2014
Photo Credits: http://alistapart.com/article/content-modelling-a-master-skill
Communication with Flexible Documentation - IxDA Miami 2014
• Artist • Album • Title • Cover Art • Genres • Songs • Title • Time • Explicit
Communication with Flexible Documentation - IxDA Miami 2014
Communication with Flexible Documentation - IxDA Miami 2014
Communication with Flexible Documentation - IxDA Miami 2014
Utilizing JSON gives me and rest of the team a flexible, structured, and sharable information set to distribute in various environments. Photo Credits: http://www.bbc.co.uk/blogs/legacy/bbcinternet/2012/06/bbc_tv_channel_homepages_redes.html
Communication with Flexible Documentation - IxDA Miami 2014
Communication with Flexible Documentation - IxDA Miami 2014
Communication with Flexible Documentation - IxDA Miami 2014
Communication with Flexible Documentation - IxDA Miami 2014
Communication with Flexible Documentation - IxDA Miami 2014
Utilizing JSON gives me and rest of the team a flexible, structured, and sharable information set to distribute in various environments. Photo Credits: http://www.bbc.co.uk/blogs/legacy/bbcinternet/2012/06/bbc_tv_channel_homepages_redes.html
Information Architecture is the structural design of shared information environments Photo Credits: http://www.bbc.co.uk/blogs/legacy/bbcinternet/2012/06/bbc_tv_channel_homepages_redes.html Wikipedia: http://en.wikipedia.org/wiki/Information_architecture
As a designer 1. Conceptual Design • Strategy & Concept Convergence 2. Content Strategy & IA • Substance & Structure of Content • Environment, Organization, Portability and Structural Layout 3. Interaction Design • Types of Interactions, States and Transitions 4. Visual Design • Element Design As a developer 1. Environments 2. Data Binding 3. Content Delivery 4. Modular Elements
Communication with Flexible Documentation - IxDA Miami 2014
Realistic Screen Real Estate
Responsive Design Source Ordering Major vs. Minor Breakpoints Photo Credits: http://zurb.com/word/source-order
Edge Cases
Using code for your wireframes gives you realistic detail control. Transitions lasting 250 ms feel a lot different than 750 ms. Photo Credits: http://www.bbc.co.uk/blogs/legacy/bbcinternet/2012/06/bbc_tv_channel_homepages_redes.html @niceux #UXCamp
If you’re using code to prototype, plan ahead for the inevitable request to have it represent the end product. Photo Credits: http://www.bbc.co.uk/blogs/legacy/bbcinternet/2012/06/bbc_tv_channel_homepages_redes.html @niceux #UXCamp
…using the implicit psychology at work in design presentations to our advantage … don’t let the client think you’re further ahead than you actually are. http://www.amazon.com/Responsive-Design-Workflow- Stephen-Hay/dp/0321887867 Stephen Hay
Plan ahead to supplement a coded prototype with annotations, a static PDF of key screens or a how-to guide. Photo Credits: http://www.bbc.co.uk/blogs/legacy/bbcinternet/2012/06/bbc_tv_channel_homepages_redes.html @niceux #UXCamp
Communication with Flexible Documentation - IxDA Miami 2014
As a designer 1. Conceptual Design • Strategy & Concept Convergence 2. Content Strategy & IA • Substance & Structure of Content • Environment, Organization, Portability and Structural Layout 3. Interaction Design • Types of Interactions, States and Transitions 4. Visual Design • Element Design As a developer 1. Environments 2. Data Binding 3. Content Delivery 4. Modular Elements
[Style tiles are] a catalyst for discussions around the preferences and goals of the client. http://styletil.es/ Samantha Warren
Wireframes and moodboards tend to be too abstract. Perhaps it’s just that I’ve never perfected the art of articulating their purpose, but I find it akin to showing someone a blueprint of their dream house and asking them what curtains would fit well in the space http://danielmall.com/articles/rif-element-collages/ Dan Mall
Now is my happy time with CSS. In-browser visual tweaks using the inspector and console. Me
Communication with Flexible Documentation - IxDA Miami 2014
Design Wireframe / Dev
Too much spacing Incorrect Typeface Text is too big Too much spacing Text isn’t bold, wrong typeface Not enough “leading”
Communication with Flexible Documentation - IxDA Miami 2014
Too much spacing Incorrect Typeface Text is too big Too much spacing Text isn’t bold, wrong typeface Not enough “leading”
Reduce #header’s top-padding to 10px Add font-weight: bold to nav Increase padding-top to 300px and reduce margin-top to 100px Reduce line-height to 1.25em Add font-family: “Open sans”, Helvetica, sans-serif;
Measuring success of a workflow change means answering one question: Does this change make everyone on the team happier? Photo Credits: http://www.bbc.co.uk/blogs/legacy/bbcinternet/2012/06/bbc_tv_channel_homepages_redes.html @niceux
Photo Credits: http://www.bbc.co.uk/blogs/legacy/bbcinternet/2012/06/bbc_tv_channel_homepages_redes.html Thank you!

More Related Content

PDF
Lean Value Stream Mapping (VSM) Training Module
Frank-G. Adler
 
PDF
Communication with Flexible Documentation
Jon Hadden
 
PDF
Communication with flexible documentation edmonton ux camp 2014
Jon Hadden
 
PDF
Open Govt May 15th
Silona Bonewald
 
PDF
5. transportation problems
Hakeem-Ur- Rehman
 
PDF
How to Use VSM Correctly
Mike Rother
 
PDF
Communication with Flexible Documentation
Jon Hadden
 
PPT
Growing Your Business With A Website: WIBO
Mardy Sitzer
 
Lean Value Stream Mapping (VSM) Training Module
Frank-G. Adler
 
Communication with Flexible Documentation
Jon Hadden
 
Communication with flexible documentation edmonton ux camp 2014
Jon Hadden
 
Open Govt May 15th
Silona Bonewald
 
5. transportation problems
Hakeem-Ur- Rehman
 
How to Use VSM Correctly
Mike Rother
 
Communication with Flexible Documentation
Jon Hadden
 
Growing Your Business With A Website: WIBO
Mardy Sitzer
 

Similar to Communication with Flexible Documentation - IxDA Miami 2014 (20)

PDF
Scoping and Estimating WordPress Projects as an Agency
John Giaconia
 
PDF
Scoping and Estimating WordPress Projects as an Agency
Kara Hansen
 
PDF
Presentation bt online showcase appendix_150212_v1
Jonty Roots
 
KEY
Production process presentation - drupalcamp Toronto 2010
Aidan Foster
 
PDF
Realising Dreams: Building for the Web
stephtroeth
 
PPTX
Content Management & Web Analytics Theatre; How cloud technology helped Vodaf...
TFM&A
 
PPTX
20מאת יוסי אמרם Steps To Better Wireframin מצגת
AMRAMy
 
PDF
Best Practice For UX Deliverables - Eventhandler, London, 22 Oct 2013
Anna Dahlström
 
PDF
Best Practice for UX Deliverables
Event Handler
 
PDF
You Should Charge More - - Design/Development Services Pricing
Lisa Sabin-Wilson
 
DOC
Website design proposal
Niaz Yousufzai
 
KEY
101 Exciting Tips To Get The Site You Need While Saving Time And Money (And G...
Myplanet Digital
 
PDF
Jessica D Anson 2009
maejam
 
PDF
Need Creative1 Brand
needcreative
 
KEY
Topsy Turvy Design: Adapting your design process for adaptive layout
Rich Quick
 
PDF
How to build a marketplace without code - No Code Conf 2019 Workshop
Webflow
 
PPTX
The Website Owner's Guide To Working With Web Designers
Kane Jamison
 
PPTX
TFMA Presentation - Transforming Client - Agency Interactions
SkyDox LTD
 
PPTX
Public compass deck v2
Mike Wilner
 
PDF
Justin French Web Directions07
justinfrench
 
Scoping and Estimating WordPress Projects as an Agency
John Giaconia
 
Scoping and Estimating WordPress Projects as an Agency
Kara Hansen
 
Presentation bt online showcase appendix_150212_v1
Jonty Roots
 
Production process presentation - drupalcamp Toronto 2010
Aidan Foster
 
Realising Dreams: Building for the Web
stephtroeth
 
Content Management & Web Analytics Theatre; How cloud technology helped Vodaf...
TFM&A
 
20מאת יוסי אמרם Steps To Better Wireframin מצגת
AMRAMy
 
Best Practice For UX Deliverables - Eventhandler, London, 22 Oct 2013
Anna Dahlström
 
Best Practice for UX Deliverables
Event Handler
 
You Should Charge More - - Design/Development Services Pricing
Lisa Sabin-Wilson
 
Website design proposal
Niaz Yousufzai
 
101 Exciting Tips To Get The Site You Need While Saving Time And Money (And G...
Myplanet Digital
 
Jessica D Anson 2009
maejam
 
Need Creative1 Brand
needcreative
 
Topsy Turvy Design: Adapting your design process for adaptive layout
Rich Quick
 
How to build a marketplace without code - No Code Conf 2019 Workshop
Webflow
 
The Website Owner's Guide To Working With Web Designers
Kane Jamison
 
TFMA Presentation - Transforming Client - Agency Interactions
SkyDox LTD
 
Public compass deck v2
Mike Wilner
 
Justin French Web Directions07
justinfrench
 
Ad

Recently uploaded (20)

PDF
The Basics of Presentation Design eBook by VerdanaBold
VerdanaBold
 
PPTX
NEW EIA PART B - Group 5 (Section 50).pptx
yqsuniacc0o0
 
PDF
SOUND-NOTE-ARCHITECT-MOHIUDDIN AKHAND SMUCT
ArchitectAFMMohiuddi
 
PPTX
Orthtotics presentation regarding physcial therapy
amhusnainahmad
 
PDF
intro_to_rust.pptx_123456789012446789.pdf
soumyadipiitk231026
 
PPT
EthicsNotesSTUDENTCOPYfghhnmncssssx sjsjsj
Mohammad Omer Rafique
 
PDF
Strengthening Tamil Identity A. Swami Durai’s Legacy
sanskart409
 
PPT
WHY_R12 Uaafafafpgradeaffafafafaffff.ppt
VijayalakshmiGanesh3
 
PPTX
a group casestudy on architectural aesthetic and beauty
sibbirahmad4
 
PPTX
LITERATURE CASE STUDY DESIGN SEMESTER 5.pptx
banikishika701
 
PPTX
Presentation.pptx anemia in pregnancy in
sumansachdev98
 
PDF
2025_AIFG_Akane_Kikuchi_Empathy_Design.PDF
Akane Kikuchi
 
PDF
ART & DESIGN HISTORY OF VEDIC CIVILISATION.pdf
Tanisha Ranbida
 
PPTX
22CDH01-V3-UNIT-I INTRODUCITON TO EXTENDED REALITY
GOWSIKRAJA PALANISAMY
 
PPTX
rapid fire quiz in your house is your india.pptx
rishikjjwala
 
PPTX
2. Competency Based Interviewing - September'16.pptx
kesarisrilakshmi
 
PPTX
VERNACULAR_DESIGN_PPT FINAL WITH PROPOSED PLAN.pptx
banikishika701
 
PPTX
Entrepreneur intro, origin, process, method
SANGEETHA PRIYA B
 
PDF
Test slideshare presentation for blog post
thomasguiart1
 
PPTX
22CDO02-IMGD-UNIT-I-MOBILE GAME DESIGN PROCESS
GOWSIKRAJA PALANISAMY
 
The Basics of Presentation Design eBook by VerdanaBold
VerdanaBold
 
NEW EIA PART B - Group 5 (Section 50).pptx
yqsuniacc0o0
 
SOUND-NOTE-ARCHITECT-MOHIUDDIN AKHAND SMUCT
ArchitectAFMMohiuddi
 
Orthtotics presentation regarding physcial therapy
amhusnainahmad
 
intro_to_rust.pptx_123456789012446789.pdf
soumyadipiitk231026
 
EthicsNotesSTUDENTCOPYfghhnmncssssx sjsjsj
Mohammad Omer Rafique
 
Strengthening Tamil Identity A. Swami Durai’s Legacy
sanskart409
 
WHY_R12 Uaafafafpgradeaffafafafaffff.ppt
VijayalakshmiGanesh3
 
a group casestudy on architectural aesthetic and beauty
sibbirahmad4
 
LITERATURE CASE STUDY DESIGN SEMESTER 5.pptx
banikishika701
 
Presentation.pptx anemia in pregnancy in
sumansachdev98
 
2025_AIFG_Akane_Kikuchi_Empathy_Design.PDF
Akane Kikuchi
 
ART & DESIGN HISTORY OF VEDIC CIVILISATION.pdf
Tanisha Ranbida
 
22CDH01-V3-UNIT-I INTRODUCITON TO EXTENDED REALITY
GOWSIKRAJA PALANISAMY
 
rapid fire quiz in your house is your india.pptx
rishikjjwala
 
2. Competency Based Interviewing - September'16.pptx
kesarisrilakshmi
 
VERNACULAR_DESIGN_PPT FINAL WITH PROPOSED PLAN.pptx
banikishika701
 
Entrepreneur intro, origin, process, method
SANGEETHA PRIYA B
 
Test slideshare presentation for blog post
thomasguiart1
 
22CDO02-IMGD-UNIT-I-MOBILE GAME DESIGN PROCESS
GOWSIKRAJA PALANISAMY
 
Ad

Communication with Flexible Documentation - IxDA Miami 2014

  • 1. Communication with Flexible Documentation Jon Hadden @niceux niceux.com Effective communication and efficient workflow for today’s web designers
  • 3. Birth of A Legend designed by Jakub Gruber (Buy this t-shirt) 33 years ago…
  • 4. Birth of A Legend designed by Jakub Gruber (Buy this t-shirt)
  • 6. I love strategy, information architecture, observing human behavior, front-end development and helping people enjoy the web. Hi, my name is Jon. NiceUX
  • 7. I love strategy, information architecture, observing human behavior, front-end development and helping people enjoy the web. Hi, my name is Jon. NiceUX
  • 16. =
  • 18. Photo Credits: http://www.smashingmagazine.com/wp-content/uploads/2011/12/7.jpg Pay attention to contextual information. Be efficient. Remain flexible and adapt to surroundings. Find the best way to effectively communicate to your audience.
  • 19. Photo Credits: http://www.smashingmagazine.com/wp-content/uploads/2011/12/7.jpg Pay attention to contextual information. Be efficient. Remain flexible and adapt to surroundings. Find the best way to effectively communicate to your audience.
  • 20. Photo Credits: http://www.smashingmagazine.com/wp-content/uploads/2011/12/7.jpg Pay attention to contextual information. Be efficient. Remain flexible and adapt to surroundings. Find the best way to effectively communicate to your audience.
  • 21. Photo Credits: http://www.smashingmagazine.com/wp-content/uploads/2011/12/7.jpg Pay attention to contextual information. Be efficient. Remain flexible and adapt to surroundings. Find the best way to effectively communicate to your audience.
  • 22. The approach and manner in which you tell a story, influences an audience’s perception of that story’s value. Photo Credits: http://www.bbc.co.uk/blogs/legacy/bbcinternet/2012/06/bbc_tv_channel_homepages_redes.html @niceux
  • 24. Approve an invoice • Performed multiple times per day, every day. • User’s end of the year bonus depended upon number of non-error approvals. • Used by 40-60 year olds who don’t use their computers besides to check in over email or Facebook with their college aged kids. • Primarily used at a desktop PC, using IE7 • Originally built as desktop application, and 10 yr old code was “dropped” into a web version.
  • 25. 4 things needed to approve an invoice without error 1. Invoice Amount 2. Bill Amount 3. Route Details 4. Associated Notes
  • 26. 4 things needed to approve an invoice without error 1. Invoice Amount 2. Bill Amount 3. Route Details 4. Associated Notes Invoice List
  • 27. 4 things needed to approve an invoice without error 1. Invoice Amount 2. Bill Amount 3. Route Details 4. Associated Notes Invoice List Invoice Amount 3-5 seconds
  • 28. 4 things needed to approve an invoice without error 1. Invoice Amount 2. Bill Amount 3. Route Details 4. Associated Notes Invoice List Invoice Amount 3-5 seconds
  • 29. 4 things needed to approve an invoice without error 1. Invoice Amount 2. Bill Amount 3. Route Details 4. Associated Notes Invoice List Invoice Amount 3-5 seconds Bill Amount
  • 30. 4 things needed to approve an invoice without error 1. Invoice Amount 2. Bill Amount 3. Route Details 4. Associated Notes Invoice List Invoice Amount 3-5 seconds Bill Amount
  • 31. 4 things needed to approve an invoice without error 1. Invoice Amount 2. Bill Amount 3. Route Details 4. Associated Notes Invoice List Invoice Amount 3-5 seconds Bill Amount Route Details
  • 32. 4 things needed to approve an invoice without error 1. Invoice Amount 2. Bill Amount 3. Route Details 4. Associated Notes Invoice List Invoice Amount 3-5 seconds Bill Amount Route Details
  • 33. 4 things needed to approve an invoice without error 1. Invoice Amount 2. Bill Amount 3. Route Details 4. Associated Notes Transactions ~ 6 seconds Notes
  • 34. 4 things needed to approve an invoice without error 1. Invoice Amount 2. Bill Amount 3. Route Details 4. Associated Notes Transactions 3-5 seconds Notes Invoice Notes
  • 35. 4 things needed to approve an invoice without error 1. Invoice Amount 2. Bill Amount 3. Route Details 4. Associated Notes Transactions 3-5 seconds Notes Invoice Notes
  • 36. 4 things needed to approve an invoice without error 1. Invoice Amount 2. Bill Amount 3. Route Details 4. Associated Notes Transactions Notes Invoice Notes ~ 6 seconds
  • 37. 4 things needed to approve an invoice without error 1. Invoice Amount 2. Bill Amount 3. Route Details 4. Associated Notes Transactions Notes Invoice Notes ~ 5 minutes per approved invoice
  • 41. Photo Credits: Dennis Kardys http://www.wsol.com/a-more-flexible-workflow/
  • 42. Concept Direction 1 30 Wireframes Concept Direction 2 Concept Direction 3 20 PSDs Large 20 Wireframes 10 PSDs Medium 30 Wireframes 5 PSDs Small 20 Wireframes 5 PSDs X-Small 30 Wireframes 20 PSDs 20 Wireframes 10 PSDs 30 Wireframes 5 PSDs 20 Wireframes 5 PSDs 30 Wireframes 20 PSDs 20 Wireframes 10 PSDs 30 Wireframes 5 PSDs 20 Wireframes 5 PSDs
  • 43. Concept Direction 1 30 Wireframes Concept Direction 2 Concept Direction 3 20 PSDs Large 20 Wireframes 10 PSDs Medium 30 Wireframes 5 PSDs Small 20 Wireframes 5 PSDs X-Small 30 Wireframes 20 PSDs 20 Wireframes 10 PSDs 30 Wireframes 5 PSDs 20 Wireframes 5 PSDs 30 Wireframes 20 PSDs 20 Wireframes 10 PSDs 30 Wireframes 5 PSDs 20 Wireframes 5 PSDs
  • 44. Concept Direction 1 30 Wireframes Concept Direction 2 Concept Direction 3 20 PSDs Large 20 Wireframes 10 PSDs Medium 30 Wireframes 5 PSDs Small 20 Wireframes 5 PSDs X-Small 30 Wireframes 20 PSDs 20 Wireframes 10 PSDs 30 Wireframes 5 PSDs 20 Wireframes 5 PSDs 30 Wireframes 20 PSDs 20 Wireframes 10 PSDs 30 Wireframes 5 PSDs 20 Wireframes 5 PSDs
  • 45. Concept Direction 1 30 Wireframes Concept Direction 2 Concept Direction 3 20 PSDs Large 20 Wireframes 10 PSDs Medium 30 Wireframes 5 PSDs Small 20 Wireframes 5 PSDs X-Small 30 Wireframes 20 PSDs 20 Wireframes 10 PSDs 30 Wireframes 5 PSDs 20 Wireframes 5 PSDs 30 Wireframes 20 PSDs 20 Wireframes 10 PSDs 30 Wireframes 5 PSDs 20 Wireframes 5 PSDs
  • 46. Concept Direction 1 30 Wireframes Concept Direction 2 Concept Direction 3 20 PSDs Large 20 Wireframes 10 PSDs Medium 30 Wireframes 5 PSDs Small 20 Wireframes 5 PSDs X-Small 30 Wireframes 20 PSDs 20 Wireframes 10 PSDs 30 Wireframes 5 PSDs 20 Wireframes 5 PSDs 30 Wireframes 20 PSDs 20 Wireframes 10 PSDs 30 Wireframes 5 PSDs 20 Wireframes 5 PSDs
  • 47. Concept Direction 1 30 Wireframes Concept Direction 2 Concept Direction 3 20 PSDs Large 20 Wireframes 10 PSDs Medium 30 Wireframes 5 PSDs Small 20 Wireframes 5 PSDs X-Small 30 Wireframes 20 PSDs 20 Wireframes 10 PSDs 30 Wireframes 5 PSDs 20 Wireframes 5 PSDs 30 Wireframes 20 PSDs 20 Wireframes 10 PSDs 30 Wireframes 5 PSDs 20 Wireframes 5 PSDs
  • 48. Concept Direction 1 30 Wireframes Concept Direction 2 Concept Direction 3 20 PSDs Large 20 Wireframes 10 PSDs Medium 30 Wireframes 5 PSDs Small 20 Wireframes 5 PSDs X-Small 30 Wireframes 20 PSDs 20 Wireframes 10 PSDs 30 Wireframes 5 PSDs 20 Wireframes 5 PSDs 30 Wireframes 20 PSDs 20 Wireframes 10 PSDs 30 Wireframes 5 PSDs 20 Wireframes 5 PSDs
  • 49. Concept Direction 1 30 Wireframes Concept Direction 2 Concept Direction 3 20 PSDs Large 20 Wireframes 10 PSDs Medium 30 Wireframes 5 PSDs Small 20 Wireframes 5 PSDs X-Small 30 Wireframes 20 PSDs 20 Wireframes 10 PSDs 30 Wireframes 5 PSDs 20 Wireframes 5 PSDs 30 Wireframes 20 PSDs 20 Wireframes 10 PSDs 30 Wireframes 5 PSDs 20 Wireframes 5 PSDs
  • 50. Concept Direction 1 30 Wireframes Concept Direction 2 Concept Direction 3 20 PSDs Large 20 Wireframes 10 PSDs Medium 30 Wireframes 5 PSDs Small 20 Wireframes 5 PSDs X-Small 30 Wireframes 20 PSDs 20 Wireframes 10 PSDs 30 Wireframes 5 PSDs 20 Wireframes 5 PSDs 30 Wireframes 20 PSDs 20 Wireframes 10 PSDs 30 Wireframes 5 PSDs 20 Wireframes 5 PSDs
  • 52. Concept Direction 1 30 Wireframes Concept Direction 2 Concept Direction 3 20 PSDs Large 20 Wireframes 10 PSDs Medium 30 Wireframes 5 PSDs Small 20 Wireframes 5 PSDs X-Small 30 Wireframes 20 PSDs 20 Wireframes 10 PSDs 30 Wireframes 5 PSDs 20 Wireframes 5 PSDs 30 Wireframes 20 PSDs 20 Wireframes 10 PSDs 30 Wireframes 5 PSDs 20 Wireframes 5 PSDs 1. Nights and weekends.
  • 53. Concept Direction 1 30 Wireframes Concept Direction 2 Concept Direction 3 20 PSDs Large 20 Wireframes 10 PSDs Medium 30 Wireframes 5 PSDs Small 20 Wireframes 5 PSDs X-Small 30 Wireframes 20 PSDs 20 Wireframes 10 PSDs 30 Wireframes 5 PSDs 20 Wireframes 5 PSDs 30 Wireframes 20 PSDs 20 Wireframes 10 PSDs 30 Wireframes 5 PSDs 20 Wireframes 5 PSDs 1. Nights and weekends. 2. Changing the same thing a billion times … just because.
  • 54. Concept Direction 1 30 Wireframes Concept Direction 2 Concept Direction 3 20 PSDs Large 20 Wireframes 10 PSDs Medium 30 Wireframes 5 PSDs Small 20 Wireframes 5 PSDs X-Small 30 Wireframes 20 PSDs 20 Wireframes 10 PSDs 30 Wireframes 5 PSDs 20 Wireframes 5 PSDs 30 Wireframes 20 PSDs 20 Wireframes 10 PSDs 30 Wireframes 5 PSDs 20 Wireframes 5 PSDs 1. Nights and weekends. 2. Changing the same thing a billion times … just because. 3. File names like: 
 204_OH_PortalRedesign_wireframes_FINAL_DRAFT_FINAL.graffle
  • 55. Concept Direction 1 30 Wireframes Concept Direction 2 Concept Direction 3 20 PSDs Large 20 Wireframes 10 PSDs Medium 30 Wireframes 5 PSDs Small 20 Wireframes 5 PSDs X-Small 30 Wireframes 20 PSDs 20 Wireframes 10 PSDs 30 Wireframes 5 PSDs 20 Wireframes 5 PSDs 30 Wireframes 20 PSDs 20 Wireframes 10 PSDs 30 Wireframes 5 PSDs 20 Wireframes 5 PSDs 1. Nights and weekends. 2. Changing the same thing a billion times … just because. 3. File names like: 
 204_OH_PortalRedesign_wireframes_FINAL_DRAFT_FINAL.graffle 4. Sucking at life.
  • 57. 1. Where are opportunities to reduce misinterpretation when viewing a design? Considering the variables:
  • 58. 1. Where are opportunities to reduce misinterpretation when viewing a design? 2. How can I make my process more efficient, or reduce the amount of work I need to do in order to get everyone from point A to B? Considering the variables:
  • 59. 1. Where are opportunities to reduce misinterpretation when viewing a design? 2. How can I make my process more efficient, or reduce the amount of work I need to do in order to get everyone from point A to B? 3. Can I increase the portability of my documentation? Considering the variables:
  • 60. Approach the cognitive load of consuming and creating your documentation like you would the usability of an app. Photo Credits: http://www.bbc.co.uk/blogs/legacy/bbcinternet/2012/06/bbc_tv_channel_homepages_redes.html @niceux
  • 61. Photo Credits: Dennis Kardys http://www.wsol.com/a-more-flexible-workflow/
  • 62. Photo Credits: Dennis Kardys http://www.wsol.com/a-more-flexible-workflow/
  • 63. As a designer 1. Conceptual Design • Strategy & Concept Convergence 2. Content Strategy & IA • Substance & Structure of Content • Environment, Organization, Portability and Structural Layout 3. Interaction Design • Types of Interactions, States and Transitions 4. Visual Design • Element Design As a developer 1. Environments 2. Data Binding 3. Content Delivery 4. Modular Elements
  • 64. As a designer 1. Conceptual Design • Strategy & Concept Convergence 2. Content Strategy & IA • Substance & Structure of Content • Environment, Organization, Portability and Structural Layout 3. Interaction Design • Types of Interactions, States and Transitions 4. Visual Design • Element Design As a developer 1. Environments 2. Data Binding 3. Content Delivery 4. Modular Elements
  • 65. Participatory Conceptual Design means involving non-designers to the designer tea party. Photo Credits: http://www.slideshare.net/runger/big-d-sketchingkey Consider trying the 6-8-5 Sketch Workshop on your next project during the requirements gathering and conceptual brainstorming phase with stakeholders and other team members.
  • 66. 1. Define strategy, context of use and content.
  • 67. 1. Define strategy, context of use and content. 2. Rapidly produce many variations.
  • 68. 1. Define strategy, context of use and content. 2. Rapidly produce many variations. 3. Critique and repeat.
  • 69. Separate features, assumptions, risks and potential usability points of friction.
  • 70. Think through high level page flows and the conversation the user will have throughout their experience.
  • 71. Individually focus on UI elements, potential options for handling information and interaction.
  • 72. Put it all together.
  • 74. s Utilize collaborative, cross-functional sketch sessions to gain buy-in and converge on design concepts together. Photo Credits: http://spin.atomicobject.com/2012/04/22/more-takeaways-from-cooper-ux-bootcamp/ @niceux #leandocs
  • 75. As a designer 1. Conceptual Design • Strategy & Concept Convergence 2. Content Strategy & IA • Substance & Structure of Content • Environment, Organization, Portability and Structural Layout 3. Interaction Design • Types of Interactions, States and Transitions 4. Visual Design • Element Design As a developer 1. Environments 2. Data Binding 3. Content Delivery 4. Modular Elements
  • 76. Content strategists in the digital age need to become data philosophers and explore the metaphysics of content, starting with the question “What is content?” Photo Credits: http://www.bbc.co.uk/blogs/legacy/bbcinternet/2012/06/bbc_tv_channel_homepages_redes.html Rachel Lovinger in 2007: http://boxesandarrows.com/content-strategy-the-philosophy-of-data/
  • 77. 1. Structure and Relationships. Content Modeling Photo Credits: http://alistapart.com/article/content-modelling-a-master-skill
  • 78. 1. Structure and Relationships. 2. Volume and Details. Content Modeling Photo Credits: http://alistapart.com/article/content-modelling-a-master-skill
  • 79. 1. Structure and Relationships. 2. Volume and Details. 3. Potential Issues Posed to Design and Development. Content Modeling Photo Credits: http://alistapart.com/article/content-modelling-a-master-skill
  • 83. • Artist • Album • Title • Cover Art • Genres • Songs • Title • Time • Explicit
  • 87. Utilizing JSON gives me and rest of the team a flexible, structured, and sharable information set to distribute in various environments. Photo Credits: http://www.bbc.co.uk/blogs/legacy/bbcinternet/2012/06/bbc_tv_channel_homepages_redes.html
  • 93. Utilizing JSON gives me and rest of the team a flexible, structured, and sharable information set to distribute in various environments. Photo Credits: http://www.bbc.co.uk/blogs/legacy/bbcinternet/2012/06/bbc_tv_channel_homepages_redes.html
  • 94. Information Architecture is the structural design of shared information environments Photo Credits: http://www.bbc.co.uk/blogs/legacy/bbcinternet/2012/06/bbc_tv_channel_homepages_redes.html Wikipedia: http://en.wikipedia.org/wiki/Information_architecture
  • 95. As a designer 1. Conceptual Design • Strategy & Concept Convergence 2. Content Strategy & IA • Substance & Structure of Content • Environment, Organization, Portability and Structural Layout 3. Interaction Design • Types of Interactions, States and Transitions 4. Visual Design • Element Design As a developer 1. Environments 2. Data Binding 3. Content Delivery 4. Modular Elements
  • 98. Responsive Design Source Ordering Major vs. Minor Breakpoints Photo Credits: http://zurb.com/word/source-order
  • 100. Using code for your wireframes gives you realistic detail control. Transitions lasting 250 ms feel a lot different than 750 ms. Photo Credits: http://www.bbc.co.uk/blogs/legacy/bbcinternet/2012/06/bbc_tv_channel_homepages_redes.html @niceux #UXCamp
  • 101. If you’re using code to prototype, plan ahead for the inevitable request to have it represent the end product. Photo Credits: http://www.bbc.co.uk/blogs/legacy/bbcinternet/2012/06/bbc_tv_channel_homepages_redes.html @niceux #UXCamp
  • 102. …using the implicit psychology at work in design presentations to our advantage … don’t let the client think you’re further ahead than you actually are. http://www.amazon.com/Responsive-Design-Workflow- Stephen-Hay/dp/0321887867 Stephen Hay
  • 103. Plan ahead to supplement a coded prototype with annotations, a static PDF of key screens or a how-to guide. Photo Credits: http://www.bbc.co.uk/blogs/legacy/bbcinternet/2012/06/bbc_tv_channel_homepages_redes.html @niceux #UXCamp
  • 105. As a designer 1. Conceptual Design • Strategy & Concept Convergence 2. Content Strategy & IA • Substance & Structure of Content • Environment, Organization, Portability and Structural Layout 3. Interaction Design • Types of Interactions, States and Transitions 4. Visual Design • Element Design As a developer 1. Environments 2. Data Binding 3. Content Delivery 4. Modular Elements
  • 106. [Style tiles are] a catalyst for discussions around the preferences and goals of the client. http://styletil.es/ Samantha Warren
  • 107. Wireframes and moodboards tend to be too abstract. Perhaps it’s just that I’ve never perfected the art of articulating their purpose, but I find it akin to showing someone a blueprint of their dream house and asking them what curtains would fit well in the space http://danielmall.com/articles/rif-element-collages/ Dan Mall
  • 108. Now is my happy time with CSS. In-browser visual tweaks using the inspector and console. Me
  • 111. Too much spacing Incorrect Typeface Text is too big Too much spacing Text isn’t bold, wrong typeface Not enough “leading”
  • 113. Too much spacing Incorrect Typeface Text is too big Too much spacing Text isn’t bold, wrong typeface Not enough “leading”
  • 114. Reduce #header’s top-padding to 10px Add font-weight: bold to nav Increase padding-top to 300px and reduce margin-top to 100px Reduce line-height to 1.25em Add font-family: “Open sans”, Helvetica, sans-serif;
  • 115. Measuring success of a workflow change means answering one question: Does this change make everyone on the team happier? Photo Credits: http://www.bbc.co.uk/blogs/legacy/bbcinternet/2012/06/bbc_tv_channel_homepages_redes.html @niceux