Download - Design and Code. Work should be fun
![Page 1: Design and Code. Work should be fun](https://reader031.vdocuments.net/reader031/viewer/2022030312/58ede43e1a28abab0e8b462d/html5/thumbnails/1.jpg)
Design and Code. Work should be fun.by Andrii Vandakurov, frontend developer
eleks.com
![Page 2: Design and Code. Work should be fun](https://reader031.vdocuments.net/reader031/viewer/2022030312/58ede43e1a28abab0e8b462d/html5/thumbnails/2.jpg)
Designers think outside of the box and see crazy animations, ideas, pixels, and buttons, while developers see the technology, speed bumps, and limits.
![Page 3: Design and Code. Work should be fun](https://reader031.vdocuments.net/reader031/viewer/2022030312/58ede43e1a28abab0e8b462d/html5/thumbnails/3.jpg)
What we can learn from real world ?
Create a site/product is almost the same as build a house. But in our case it could be much cheaper ;)
We need: ➔ communication ➔ prototypes ➔ blueprints
![Page 4: Design and Code. Work should be fun](https://reader031.vdocuments.net/reader031/viewer/2022030312/58ede43e1a28abab0e8b462d/html5/thumbnails/4.jpg)
Prototyping
Its about finding the fastest, cheapest way to validate ideas.
Image from Tom Chi presentation “Rapid prototyping Google Glass” https://goo.gl/jFer6j
Notes:
![Page 5: Design and Code. Work should be fun](https://reader031.vdocuments.net/reader031/viewer/2022030312/58ede43e1a28abab0e8b462d/html5/thumbnails/5.jpg)
Blueprints
Introduced in the 19th century, the process allowed rapid and accurate reproduction of documents used in construction and industry
Blueprints were created by sending light around an ink drawing on transparent film. The light would shine through everywhere except the ink and hit a paper coated with a light-sensitive material, turning that paper blue.
![Page 6: Design and Code. Work should be fun](https://reader031.vdocuments.net/reader031/viewer/2022030312/58ede43e1a28abab0e8b462d/html5/thumbnails/6.jpg)
Specctr
![Page 7: Design and Code. Work should be fun](https://reader031.vdocuments.net/reader031/viewer/2022030312/58ede43e1a28abab0e8b462d/html5/thumbnails/7.jpg)
Communication with the team
Effective collaboration requires effective communication
Tools (Free):
● Marqueed ● Framebench ● Notism
![Page 8: Design and Code. Work should be fun](https://reader031.vdocuments.net/reader031/viewer/2022030312/58ede43e1a28abab0e8b462d/html5/thumbnails/8.jpg)
Features
● Design comments ● Notifications ( via Slack ) ● Export assets/colours ● Styleguide ● Web interface
For now Zeplin works only with Sketch (
Notes:
ZEPLIN
![Page 9: Design and Code. Work should be fun](https://reader031.vdocuments.net/reader031/viewer/2022030312/58ede43e1a28abab0e8b462d/html5/thumbnails/9.jpg)
Frameworks follow the "Hollywood principle", i.e. "don't call us, we'll call you.” A software framework is a re-usable design for a software system.
A library is essentially a set of functions that you can call
Examples: Angular, Bootstrap, Foundation , Backbone, Ember
Examples: React, Jquery, Dojo
Framework vs Library
![Page 10: Design and Code. Work should be fun](https://reader031.vdocuments.net/reader031/viewer/2022030312/58ede43e1a28abab0e8b462d/html5/thumbnails/10.jpg)
A preprocessor is a program that takes one type of data and converts it to another type of data.
● Sass ● Less ● Stylus ● PostCss
Why we need preprocessors ? - Variables, Mixins, Nesting, Partials, Extend/Inheritance and even more …
Notes:
Preprocessors
![Page 11: Design and Code. Work should be fun](https://reader031.vdocuments.net/reader031/viewer/2022030312/58ede43e1a28abab0e8b462d/html5/thumbnails/11.jpg)
Icons
Icon sets (free) :
● Font awesome ● Material icons
Customization tools:
● IcoMoon ● Fonticons ● Fontello ● Fontastic
![Page 12: Design and Code. Work should be fun](https://reader031.vdocuments.net/reader031/viewer/2022030312/58ede43e1a28abab0e8b462d/html5/thumbnails/12.jpg)
We can write it ourselves. But should we? There are lot of free and ready to use animations
● Animate.css ● Bounce.js ● Magic Animations ● CSShake
Here you can find comparison of this libraries http://goo.gl/QZPEh8 ( Top 9 Animation Libraries to Use in 2016 )
Notes:
Animations
![Page 13: Design and Code. Work should be fun](https://reader031.vdocuments.net/reader031/viewer/2022030312/58ede43e1a28abab0e8b462d/html5/thumbnails/13.jpg)
Developing enterprise applications should be fun too.
![Page 14: Design and Code. Work should be fun](https://reader031.vdocuments.net/reader031/viewer/2022030312/58ede43e1a28abab0e8b462d/html5/thumbnails/14.jpg)
● Kendo UI ● DevExpress ● Wijmo ● Essential JS
Link with comparison of these ui sets https://goo.gl/LdFCb2
Notes:
Faster development. Easier integrations with backend.
UI sets
![Page 15: Design and Code. Work should be fun](https://reader031.vdocuments.net/reader031/viewer/2022030312/58ede43e1a28abab0e8b462d/html5/thumbnails/15.jpg)
Cool stuff
● Push notifications ● Track online/offline status ● Splash screen ● Battery api ● Page visibility api ● Audio api
![Page 16: Design and Code. Work should be fun](https://reader031.vdocuments.net/reader031/viewer/2022030312/58ede43e1a28abab0e8b462d/html5/thumbnails/16.jpg)
QA ?Helpfull links: ● specctr ● A Front-End Developer’s Ode To
Specifications ● Zeplin ● Prototyping by Tom Chi from
google ● Best practices for designer/
developer collaboration