Career choice Чепыгова Анастасия Свиридова Анастасия Коршунова Майя 11-Б класс.
Анастасия Войтова | Working with designs: make love not war
-
Upload
fwdays -
Category
Technology
-
view
373 -
download
1
Transcript of Анастасия Войтова | Working with designs: make love not war
Working with designs: make 💖 not ⚔
@vixentael
#itsat@vixentael
TDDBDD
DDDADD
FDD
http://scottberkun.com/2007/asshole-driven-development/
Quiz
Test
Behavior Assert
Feature
Quiz
DDD
#itsat@vixentael
Design Driven Development
#itsat@vixentael
Design defines: app architecture
data models
network flow
backend logic
#itsat@vixentael
Static Picture vs
Dynamic Design
#itsat@vixentael
Static Picture vs Dynamic Design
looks nice
shows the flow of the app
scales for real data
#itsat@vixentael
Rendering
#itsat@vixentael
Rendering
http://www.paintcodeapp.com/news/iphone-6-screens-demystified
#itsat@vixentael
1 pixel separators
var onePixelLine = 1.0
one point lineone point line
#itsat@vixentael
1 pixel separatorslet mainScreen = UIScreen.mainScreen() var onePixelLine = 1.0 / mainScreen.scale
https://developer.apple.com/library/ios/documentation/2DDrawing/Conceptual/
DrawingPrintingiOS/GraphicsDrawingOverview/GraphicsDrawingOverview.html
@1x — 1.0@1x — 1.0@2x — 0.5@2x — 0.5
#itsat@vixentael
1 pixel separatorslet mainScreen = UIScreen.mainScreen() var onePixelLine = 1.0 / mainScreen.scale if mainScreen.respondsToSelector(Selector("nativeScale")) { onePixelLine = 1.0 / mainScreen.nativeScale }
@1x — 1.0@1x — 1.0@2x — 0.5@2x — 0.5@3x — 0.33@3x — 0.33
#itsat@vixentael
https://developer.apple.com/library/ios/documentation/2DDrawing/Conceptual/
DrawingPrintingiOS/GraphicsDrawingOverview/GraphicsDrawingOverview.html
Data-drivendoes design scale to fit real data?
#itsat@vixentael
Data-drivengerman l10n?
#itsat@vixentael
http://nshipster.com/launch-arguments-and-environment-variables/
http://www.thedotpost.com/2016/01/roy-marmelstein-localization-is-hard
Links for designers
#itsat@vixentael
Designingat1x.TheIdealProductDesigner’sWorkflowhttps://medium.com/sketch-app-sources/designing-at-1x-33240842180c#.5ymv8uvkq
DesigningaLocalization-FriendlyUserInterfacehttps://www.transifex.com/blog/2015/localization-friendly-ui-design-part-1/
Flow of the app
One screen
#itsat@vixentael
One screenjust one screen
so easy
much wow
very simple
such success
just list
#itsat@vixentael
Empty
#itsat@vixentael
FullScreen Loading
#itsat@vixentael
FullScreen Failed
#itsat@vixentael
Getting new data
#itsat@vixentael
updating..updating.. errorerror
Load more data
#itsat@vixentael
errorerrorfetching prev datafetching prev data
One screen, 8 states
#itsat@vixentael
Links for designers
#itsat@vixentael
UXDesigner’sNotes:DesigningFortheEmptyStateshttps://stanfy.com/blog/ux-designers-notes-designing-for-the-empty-states/
Whyemptystatesdeservemoredesigntimehttps://medium.com/@InVisionApp/why-empty-states-deserve-more-design-time-44b5adc7eb52#.izpqmr1d7
UXTip:ConsidertheEmptyStateshttp://webdesign.tutsplus.com/articles/ux-tip-consider-the-empty-states--cms-23692
Tools
#itsat@vixentael
#itsat@vixentael
Sketch
#itsat@vixentael
Making icon
#itsat@vixentael
Live drawing
#itsat@vixentael
Sketch for Devs
#itsat@vixentael
super easy
quick export
vector
http://www.raywenderlich.com/117609/sketch-indie-developers
tutorial
#itsat@vixentael
Zeplin
#itsat@vixentael
Export
#itsat@vixentael
Zeplin for Devs
#itsat@vixentael
even more easy
exports ‘exportable’
web-version for everyone
color board
#itsat@vixentael
Invision
#itsat@vixentael
Invision for Devs
#itsat@vixentael
working prototypes!
discussingsharing
assets
Use them!
#itsat@vixentael
+ +
=
💪 💪😼
Links for designers
#itsat@vixentael
Howdoyouensurethatthedevteamunderstandsthedesign?https://medium.com/swlh/how-do-you-ensure-that-the-dev-team-understands-the-design-b7043ea01cd8#.vwon69bmq
7TipsforSketchUsershttps://medium.com/@nnwoodman/7-tips-for-sketch-users-e09c27c7ce08#.nvphxansw
7ReasonsWhyIUseInVisionforRapidPrototypinghttps://medium.com/@mrjeremywells/7-reasons-why-i-use-invision-for-rapid-prototyping-ed1c33d5b86#.ia7j0oj5q
Ways
#itsat@vixentael
PNG vs PDF
#itsat@vixentael
PNG vs PDF
#itsat@vixentael
3 assets 1 asset
http://martiancraft.com/blog/2014/09/vector-
images-xcode6/
https://bjango.com/articles/idontusepdfs/
xcode renderingpixel perfect
okay for evrthg okay for glyphs
tricky export paramseasy export
#itsat@vixentael
PaintCode
#itsat@vixentael
PaintCode
#itsat@vixentael
PaintCode
#itsat@vixentael
no images!
all in code!complex
animations*
…but code is
#itsat@vixentael
Preview Xcode
#itsat@vixentael
see every screen at once
Xcode plugins
#itsat@vixentael
https://github.com/rickytan/RTImageAssets
https://github.com/kaphacius/IconMaker
RTImageAssetsgenerate@2x,@1ximagefrom@3ximageforyou,upscaleto@3xfrom@2x
IconMakergeneratesappiconsofallsizesfromlargeone
https://github.com/ksuther/KSImageNamed-Xcode
KSImageNamed-XcodeautocompletetheimageNamed:calls
Wind of change
#itsat@vixentael
or if designs are worse than you expected
What’s wrong?
#itsat@vixentael
Fix
#itsat@vixentael
use one of colors!
#itsat@vixentael
What’s wrong?
What’s wrong?
#itsat@vixentael
Fixes
#itsat@vixentael
Advice for Devs
#itsat@vixentael
speak with designers
share ownership of UI/UX
don’t be afraid to fix
know guidelines!
use placeholders
The last slide
@vixentael
More to Read
#itsat@vixentael
watch again, find every link and read it!