Crafting Awesome Designs - #BSW14
-
Upload
david-pitman -
Category
Design
-
view
512 -
download
1
description
Transcript of Crafting Awesome Designs - #BSW14
![Page 1: Crafting Awesome Designs - #BSW14](https://reader038.fdocuments.net/reader038/viewer/2022110119/556cb299d8b42ab70c8b4c3d/html5/thumbnails/1.jpg)
CRAFTING INCREDIBLE DESIGNSPushing the Limits of Mockups & Prototypes
#BSW14
![Page 2: Crafting Awesome Designs - #BSW14](https://reader038.fdocuments.net/reader038/viewer/2022110119/556cb299d8b42ab70c8b4c3d/html5/thumbnails/2.jpg)
DAVE PITMAN
@edavepitman
co-‐founder
UX, Data Viz, Product Strategy
hGp://www.kytheram.com
![Page 3: Crafting Awesome Designs - #BSW14](https://reader038.fdocuments.net/reader038/viewer/2022110119/556cb299d8b42ab70c8b4c3d/html5/thumbnails/3.jpg)
< 1 MILLION 34 MILLIONvsPLAYERS
Play here: hGp://saming.fr/p/2048/
Play here: hGp://gabrielecirulli.github.io/2048/
![Page 4: Crafting Awesome Designs - #BSW14](https://reader038.fdocuments.net/reader038/viewer/2022110119/556cb299d8b42ab70c8b4c3d/html5/thumbnails/4.jpg)
Comparing screenshots (1)
![Page 5: Crafting Awesome Designs - #BSW14](https://reader038.fdocuments.net/reader038/viewer/2022110119/556cb299d8b42ab70c8b4c3d/html5/thumbnails/5.jpg)
Comparing screenshots (2)
![Page 6: Crafting Awesome Designs - #BSW14](https://reader038.fdocuments.net/reader038/viewer/2022110119/556cb299d8b42ab70c8b4c3d/html5/thumbnails/6.jpg)
Comparing screenshots (3)(hard to see the difference…)
![Page 7: Crafting Awesome Designs - #BSW14](https://reader038.fdocuments.net/reader038/viewer/2022110119/556cb299d8b42ab70c8b4c3d/html5/thumbnails/7.jpg)
Comparing screenshots (4)(screenshots might not be effec[ve…)
![Page 8: Crafting Awesome Designs - #BSW14](https://reader038.fdocuments.net/reader038/viewer/2022110119/556cb299d8b42ab70c8b4c3d/html5/thumbnails/8.jpg)
Video of gameplay (elegant anima8ons/transi8ons
really make the game fun)
![Page 9: Crafting Awesome Designs - #BSW14](https://reader038.fdocuments.net/reader038/viewer/2022110119/556cb299d8b42ab70c8b4c3d/html5/thumbnails/9.jpg)
Video of gameplay (hint: it looks the exact same as the screenshots)
![Page 10: Crafting Awesome Designs - #BSW14](https://reader038.fdocuments.net/reader038/viewer/2022110119/556cb299d8b42ab70c8b4c3d/html5/thumbnails/10.jpg)
Side-‐by-‐side comparison video
![Page 11: Crafting Awesome Designs - #BSW14](https://reader038.fdocuments.net/reader038/viewer/2022110119/556cb299d8b42ab70c8b4c3d/html5/thumbnails/11.jpg)
With this version, can effec8vely follow quick gameplay
![Page 12: Crafting Awesome Designs - #BSW14](https://reader038.fdocuments.net/reader038/viewer/2022110119/556cb299d8b42ab70c8b4c3d/html5/thumbnails/12.jpg)
Video examining transi8ons in depth
![Page 13: Crafting Awesome Designs - #BSW14](https://reader038.fdocuments.net/reader038/viewer/2022110119/556cb299d8b42ab70c8b4c3d/html5/thumbnails/13.jpg)
< 1 MILLION 34 MILLIONvsPLAYERS
![Page 14: Crafting Awesome Designs - #BSW14](https://reader038.fdocuments.net/reader038/viewer/2022110119/556cb299d8b42ab70c8b4c3d/html5/thumbnails/14.jpg)
2048 PROVES WHY THE DESIGN BETWEEN MOCKUPS MATTERS
![Page 15: Crafting Awesome Designs - #BSW14](https://reader038.fdocuments.net/reader038/viewer/2022110119/556cb299d8b42ab70c8b4c3d/html5/thumbnails/15.jpg)
HERE’S MY MOCKUP
(how we design today)
![Page 16: Crafting Awesome Designs - #BSW14](https://reader038.fdocuments.net/reader038/viewer/2022110119/556cb299d8b42ab70c8b4c3d/html5/thumbnails/16.jpg)
HERE’S MY STORYBOARD
(how we design today)
![Page 17: Crafting Awesome Designs - #BSW14](https://reader038.fdocuments.net/reader038/viewer/2022110119/556cb299d8b42ab70c8b4c3d/html5/thumbnails/17.jpg)
HERE’S MY STORYBOARD
NAILED IT!
(this process of sta[c mockups and storyboards isn’t cueng it anymore)
![Page 18: Crafting Awesome Designs - #BSW14](https://reader038.fdocuments.net/reader038/viewer/2022110119/556cb299d8b42ab70c8b4c3d/html5/thumbnails/18.jpg)
PHOTOSHOP
Why are we using tools that were never designed for this?
![Page 19: Crafting Awesome Designs - #BSW14](https://reader038.fdocuments.net/reader038/viewer/2022110119/556cb299d8b42ab70c8b4c3d/html5/thumbnails/19.jpg)
OMNIGRAFFLE
Why are we using tools that were never designed for this?
![Page 20: Crafting Awesome Designs - #BSW14](https://reader038.fdocuments.net/reader038/viewer/2022110119/556cb299d8b42ab70c8b4c3d/html5/thumbnails/20.jpg)
UX WORKFLOW I DID RECENTLY
…FOR JUST THE SIGNUP PROCESS
Got me thinking-‐ I need to find a beGer way
![Page 21: Crafting Awesome Designs - #BSW14](https://reader038.fdocuments.net/reader038/viewer/2022110119/556cb299d8b42ab70c8b4c3d/html5/thumbnails/21.jpg)
A DESIGNER’S NEW WISH LIST
Easily create pixel-‐perfect mockups
Prototype & demonstrate anima[on (change)
“Advanced” visuals (blur, noise, gradients, etc)
Test & tune gestures (flicking, pinching, etc)
An extremely high level of fidelity in all tools
![Page 22: Crafting Awesome Designs - #BSW14](https://reader038.fdocuments.net/reader038/viewer/2022110119/556cb299d8b42ab70c8b4c3d/html5/thumbnails/22.jpg)
<EPIC TRAINING MONTAGE>
![Page 23: Crafting Awesome Designs - #BSW14](https://reader038.fdocuments.net/reader038/viewer/2022110119/556cb299d8b42ab70c8b4c3d/html5/thumbnails/23.jpg)
TOOLS I’VE TRIED RECENTLY
![Page 24: Crafting Awesome Designs - #BSW14](https://reader038.fdocuments.net/reader038/viewer/2022110119/556cb299d8b42ab70c8b4c3d/html5/thumbnails/24.jpg)
SKETCH
![Page 25: Crafting Awesome Designs - #BSW14](https://reader038.fdocuments.net/reader038/viewer/2022110119/556cb299d8b42ab70c8b4c3d/html5/thumbnails/25.jpg)
![Page 26: Crafting Awesome Designs - #BSW14](https://reader038.fdocuments.net/reader038/viewer/2022110119/556cb299d8b42ab70c8b4c3d/html5/thumbnails/26.jpg)
![Page 27: Crafting Awesome Designs - #BSW14](https://reader038.fdocuments.net/reader038/viewer/2022110119/556cb299d8b42ab70c8b4c3d/html5/thumbnails/27.jpg)
![Page 28: Crafting Awesome Designs - #BSW14](https://reader038.fdocuments.net/reader038/viewer/2022110119/556cb299d8b42ab70c8b4c3d/html5/thumbnails/28.jpg)
… STILL STATIC MOCKUPS
![Page 29: Crafting Awesome Designs - #BSW14](https://reader038.fdocuments.net/reader038/viewer/2022110119/556cb299d8b42ab70c8b4c3d/html5/thumbnails/29.jpg)
PROS
Pixel-‐perfect mockups
Easy to do gradients, blur, etc
Expor[ng tools
Vector-‐based
Symbols
CONS
Styles func[onality is a mess
Was unstable, now just buggy
CSS export misses poten[al
![Page 30: Crafting Awesome Designs - #BSW14](https://reader038.fdocuments.net/reader038/viewer/2022110119/556cb299d8b42ab70c8b4c3d/html5/thumbnails/30.jpg)
MACAW
![Page 31: Crafting Awesome Designs - #BSW14](https://reader038.fdocuments.net/reader038/viewer/2022110119/556cb299d8b42ab70c8b4c3d/html5/thumbnails/31.jpg)
![Page 32: Crafting Awesome Designs - #BSW14](https://reader038.fdocuments.net/reader038/viewer/2022110119/556cb299d8b42ab70c8b4c3d/html5/thumbnails/32.jpg)
PROS CONS
Is actual HTML/CSS
Fluid vs Sta[c Layouts
Creates decent code
Capabili[es match reality
Is actual HTML/CSS
Great-‐looking awful UI
Spend a lot of [me figh[ng it
Limited toolkit
![Page 33: Crafting Awesome Designs - #BSW14](https://reader038.fdocuments.net/reader038/viewer/2022110119/556cb299d8b42ab70c8b4c3d/html5/thumbnails/33.jpg)
FRAMER JS
![Page 34: Crafting Awesome Designs - #BSW14](https://reader038.fdocuments.net/reader038/viewer/2022110119/556cb299d8b42ab70c8b4c3d/html5/thumbnails/34.jpg)
PHOTOSHOP
SKETCH
FRAMER JS BROWSER
![Page 35: Crafting Awesome Designs - #BSW14](https://reader038.fdocuments.net/reader038/viewer/2022110119/556cb299d8b42ab70c8b4c3d/html5/thumbnails/35.jpg)
Video showing Framer JS exampleExample here:
hGp://examples.framerjs.com/#Google%20Now%20-‐%20Overview.framer
![Page 36: Crafting Awesome Designs - #BSW14](https://reader038.fdocuments.net/reader038/viewer/2022110119/556cb299d8b42ab70c8b4c3d/html5/thumbnails/36.jpg)
PROS CONS
Easy to implement
Full control over details
Awesome toolchain
Fantas[c prototyping
Documenta[on / Examples
Requires basic JS know-‐how
Future not certain?
Sketch -‐> Framer 😢
![Page 37: Crafting Awesome Designs - #BSW14](https://reader038.fdocuments.net/reader038/viewer/2022110119/556cb299d8b42ab70c8b4c3d/html5/thumbnails/37.jpg)
ORIGAMI
![Page 38: Crafting Awesome Designs - #BSW14](https://reader038.fdocuments.net/reader038/viewer/2022110119/556cb299d8b42ab70c8b4c3d/html5/thumbnails/38.jpg)
Video showing Origami example
Example here: hGp://facebook.github.io/origami/examples/
![Page 39: Crafting Awesome Designs - #BSW14](https://reader038.fdocuments.net/reader038/viewer/2022110119/556cb299d8b42ab70c8b4c3d/html5/thumbnails/39.jpg)
What it looks like at first
![Page 40: Crafting Awesome Designs - #BSW14](https://reader038.fdocuments.net/reader038/viewer/2022110119/556cb299d8b42ab70c8b4c3d/html5/thumbnails/40.jpg)
Actual amount of work involved
![Page 41: Crafting Awesome Designs - #BSW14](https://reader038.fdocuments.net/reader038/viewer/2022110119/556cb299d8b42ab70c8b4c3d/html5/thumbnails/41.jpg)
PROS CONS
Visual layout
Supported by Facebook
Creates great prototypes
Like building a machine
Developer Mac-‐only (really)
No middle-‐ground
Steep learning curve
No in-‐app design
![Page 42: Crafting Awesome Designs - #BSW14](https://reader038.fdocuments.net/reader038/viewer/2022110119/556cb299d8b42ab70c8b4c3d/html5/thumbnails/42.jpg)
HYPE
![Page 43: Crafting Awesome Designs - #BSW14](https://reader038.fdocuments.net/reader038/viewer/2022110119/556cb299d8b42ab70c8b4c3d/html5/thumbnails/43.jpg)
![Page 44: Crafting Awesome Designs - #BSW14](https://reader038.fdocuments.net/reader038/viewer/2022110119/556cb299d8b42ab70c8b4c3d/html5/thumbnails/44.jpg)
Video showing Hype example
Example here: hGp://tumult.com/hype/gallery/Linkility/Linkility.html
![Page 45: Crafting Awesome Designs - #BSW14](https://reader038.fdocuments.net/reader038/viewer/2022110119/556cb299d8b42ab70c8b4c3d/html5/thumbnails/45.jpg)
PROS CONS
Anima[on [meline
HTML/CSS/JS back-‐end
Gesture support
Capabili[es match reality
No ability to create design
Timeline UIs can be limi[ng
Not designed for “apps”
Anima[ons, not manipula[ons
![Page 46: Crafting Awesome Designs - #BSW14](https://reader038.fdocuments.net/reader038/viewer/2022110119/556cb299d8b42ab70c8b4c3d/html5/thumbnails/46.jpg)
Other tools I’ve tried & didn’t like, or are not appropriate for crea[ng advanced interac[ons
![Page 47: Crafting Awesome Designs - #BSW14](https://reader038.fdocuments.net/reader038/viewer/2022110119/556cb299d8b42ab70c8b4c3d/html5/thumbnails/47.jpg)
CRAFTING INCREDIBLE DESIGNSPushing the Limits of Mockups & Prototypes
#BSW14
@edavepitman