Design and Code. Work should be fun.by Andrii Vandakurov, frontend developer
eleks.com
Designers think outside of the box and see crazy animations, ideas, pixels, and buttons, while developers see the technology, speed bumps, and limits.
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
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:
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.
Specctr
Communication with the team
Effective collaboration requires effective communication
Tools (Free):
● Marqueed ● Framebench ● Notism
Features
● Design comments ● Notifications ( via Slack ) ● Export assets/colours ● Styleguide ● Web interface
For now Zeplin works only with Sketch (
Notes:
ZEPLIN
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
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
Icons
Icon sets (free) :
● Font awesome ● Material icons
Customization tools:
● IcoMoon ● Fonticons ● Fontello ● Fontastic
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
Developing enterprise applications should be fun too.
● 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
Cool stuff
● Push notifications ● Track online/offline status ● Splash screen ● Battery api ● Page visibility api ● Audio api
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
Top Related