Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Design-dev cooperation and fast Android prototyping
Search
Juhani Lehtimäki
February 07, 2018
Design
0
2k
Design-dev cooperation and fast Android prototyping
How to bring a product to reality in a few days.
Juhani Lehtimäki
February 07, 2018
Tweet
Share
More Decks by Juhani Lehtimäki
See All by Juhani Lehtimäki
Beyond the smartphone screen
juhanilehtimaeki
1
77
Other Decks in Design
See All in Design
良いアプリケーションをデザインするための感覚の持ち方 / Cultivating a Sense for Designing Great Applications
usagimaru
22
7.5k
あらゆる場面でデザインを駆使するための技術 / Techniques for Applying Design in Any Situation
akiramotomura
4
2.1k
Data+Diversity: Celebrating W.E.B Du Bois through Data Visualization
ajstarks
0
290
Backlogのイロハ・ やさしい使い方(基本編)
wattlaa
0
310
全社を巻き込んだコーポレートバリューの再定義に関するデザイナーの関わり方
sugiyama_sukedachi
0
170
雑誌『広告』をサイズ展開する
takuro_nakajima
PRO
0
1.1k
新しい資産運用サービスALTERNA(オルタナ)の伝え方の工夫
layerx
PRO
0
890
マスとAIをなめらかにつなぐデザイン
abcmisuzu
0
240
意志と、デザインと、ときどきお金
transit_kix
2
2.2k
共創のための地域基盤としての非公式組織の形成 / Informal community as an infrastructure for co-creation
fumiyaakasaka
1
220
SUKEDACHI DESIGN NIGHT発表スライド
sugiyama_sukedachi
0
220
もち的デザイナーのキャリアデザイン新提言:副業起業家のすゝめ
mochitaro
0
1.3k
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
67
8.6k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
2k
10 Git Anti Patterns You Should be Aware of
lemiorhan
645
57k
Raft: Consensus for Rubyists
vanstee
130
6.2k
Building Better People: How to give real-time feedback that sticks.
wjessup
352
18k
For a Future-Friendly Web
brad_frost
171
8.9k
How GitHub (no longer) Works
holman
302
140k
Testing 201, or: Great Expectations
jmmastey
27
6.3k
Robots, Beer and Maslow
schacon
PRO
154
7.9k
How to name files
jennybc
64
92k
Faster Mobile Websites
deanohume
296
30k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Transcript
How to bring a product to reality in a few
days: Design-dev cooperation and fast Android prototyping Juhani Lehtimäki @lehtimaeki Pierluigi Rufo @pierluigirufo
Designers and developers: No longer a house divided
? Designers and developers: No longer a house divided
None
None
You know you are in trouble if..
“This design cannot be implemented” You know you are in
trouble if..
“Sorry this has been signed off already” You know you
are in trouble if..
“Is this design spec final? I will not be changing
the UI!” You know you are in trouble if..
“Yeah, we have a designer. He’ll make the icons.” You
know you are in trouble if..
“Programming is not difficult, I’ve done HTML, I know” You
know you are in trouble if..
How to get out of this loop?
None
Divided we fail
Function Logic Linear thinking Technical Aesthetic Intuition Creativity Imagination Diverse
= stronger
One sided approach: Function over Form Function Logic Linear thinking
Technical Aesthetic Intuition Creativity Imagination
None
None
One sided approach: Form over Function Aesthetic Intuition Creativity Imagination
Function Logic Linear thinking Technical
None
None
None
Problem solving within a set of constraints Solution Scope Aesthetic
Function
Aesthetic Function Solution Scope Problem solving within a set of
constraints
Solution Scope Function Aesthetic Problem solving within a set of
constraints
Know your domain
Start from the user • Discuss assumptions based on user
needs • Validate asap through testing • Design pattern exist, let’s use them #1
Mental models
Personas
7 (+- 2) Short term memory
Usability Testing
None
None
User Make Mistakes And it is your fault
Know your stuff • Know platform guidelines • Understand design
patterns • Be ready for the “Why?" #2
Devs, know:
Devs, know:
Devs, know:
Designers, know:
constraintlayout.com Designers, understand basic of:
Designers, try:
Difficult to implement Easy to implement Important for UX Nice
to have for UX
Workflow: here we are
None
Step in early • Kick-off meeting and shared documentation •
Establish a close interaction and feedback loop • Over-communication better than under-communication #3 DISCOVER DEFINE DEVELOP DELIVER
Stakeholder management • Pipe feedback to certain channels • Allow
everyone see the whole progress • Communicate WiP • Own the design communication to the customer #4 This UI is not final!
Technical constraints User needs Business Goals
Keep your priorities in mind • Focus on the core
needs • Structure and behaviour first, styles later • Customisation costs #5 MANDATORY IMPORTANT NEEDED NICE TO HAVE P1 P2 P3 P4
Interact, interact, interact • Brainstorm instead of handing over •
Prototype instead of presentation • Dev should support design explorations • Design with live data help to avoid surprises #6
None
None
None
None
BUILD, TEST, ITERATE
Tools can help, a lot
Speed and consistency #7 SKETCH • Vector based and adaptive
layout • Tons of templates and resources • Plugin integration • Symbols and styles managing ZEPLIN • Easy export • Styleguide • Comment in place • Versions commit messages +
None
None
None
Text styles Assets
Text styles Assets
Text styles Assets
None
⌃ + ⌘ + E
None
None
Nadar85
None
None
None
A show case story (solutions applied and lessons learned)
#1 - Understand the context
#1 - Understand the context
#1 - Understand the context
#2 - Draft the structure
#3 - Explore and define
#3 - Explore and define
#3 - Explore and define
#3 - Explore and define
#4 - Prototype and test
#4 - Prototype and test
#4 - Prototype and test
#5 - Build and Refine
#5 - Build and Refine
#5 - Build and Refine
#5 - Build and Refine
#5 - Build and Refine
#6 - Add the NTHs
#6 - Add the NTHs
androiduipatterns.com
• Always have the user in mind • Step in
at early stage • Find a good workflow base and keep refining it • Use the right tools • Respect and empathy Takeaways
Thank you! @lehtimaeki snappmobile.io @pierluigirufo