Pixel Perfect of the Future

Description of the fundamental problems with pixel perfect. Does it really important to consider and does it exists at all.
How should we change our behavior as a developers and designers to prepare for the next generation of pixel perfect, in order to provide best possible user experience on any screen size at any state with any possible data.

Transcript

1. PIXEL PERFECT of the Future @ahmed_sulajman
2. @ahmed_sulajman Brief history
3. @ahmed_sulajman Brief history Every pixel on the web page should be exactly the same as it is on the design
4. @ahmed_sulajman Brief history Every pixel on the iOS application should be exactly the same as it is on the design
5. @ahmed_sulajman perfect == impossible
6. @ahmed_sulajman Dynamic Layout
7. @ahmed_sulajman
8. @ahmed_sulajman Dynamic Data & States
9. @ahmed_sulajman
10. @ahmed_sulajman Design & Development
11. @ahmed_sulajman Click here
12. @ahmed_sulajman Click here Rectangle layer Text layer 2 layers != button
13. @ahmed_sulajman Wrong definition of pixel perfect
14. @ahmed_sulajman Every pixel on the iOS application should be exactly the same as it is on the design
15. @ahmed_sulajman Every pixel on the iOS application should be exactly the same as it is on the design
16. @ahmed_sulajman Application should provide best possible visual quality for every screen size at any state and with any data
17. @ahmed_sulajman States and Dynamic Data
18. @ahmed_sulajman Different states in design
19. @ahmed_sulajman Different states in design Lingo lingoapp.com
20. @ahmed_sulajman Real data in design Craft invisionapp.com/craft
21. @ahmed_sulajman Styleguides in code UISS https://github.com/robertwijas/UISS NUI https://github.com/tombenner/nui Classy https://github.com/ClassyKit/Classy
22. @ahmed_sulajman Styleguides in code UISS https://github.com/robertwijas/UISS { "UITabBar": { "tintColor": “darkGray" } }
23. @ahmed_sulajman Styleguides in code NUI https://github.com/tombenner/nui Button { background-color: @primaryBackgroundColor; border-color: #A2A2A2; border-width: @primaryBorderWidth; font-color: @primaryFontColor; font-color-highlighted: #999999; font-name: @primaryFontName; font-size: 18; corner-radius: 7; }
24. @ahmed_sulajman Styleguides in code Classy https://github.com/ClassyKit/Classy MYCustomView { background-color: $mainColor; title-insets: 5, 10, 5, 10; > UIProgressView.tinted { progress-tint-color: rgb(200, 155, 110, 0.6); track-tint-color: yellow; } }
25. @ahmed_sulajman Dynamic Layout
26. @ahmed_sulajman Adoptive design size Sketch http://bit.ly/2e7GDGr Sketch Resizing Playground
27. @ahmed_sulajman Dynamic nature of the app in design Invision Marvel Atomic
28. @ahmed_sulajman Dynamic layout in code SnapKit https://github.com/SnapKit/SnapKit Autolayout +
29. @ahmed_sulajman We solved the problem
30. @ahmed_sulajman No, just fixed…
31. @ahmed_sulajman Fundamental problems: • We still use images to show design
 • Designers and Developers should work closer to each other
32. @ahmed_sulajman
33. @ahmed_sulajman Thank you! Twitter: @ahmed_sulajman Facebook: http://fb.com/ahmed.sylaiman Mail: ahmed@flawlessapp.io Site: flawlessapp.io