This document discusses best practices for collaboration between designers and developers. It recommends using blueprints, prototypes, and effective communication tools to facilitate the design and development process. Prototyping and preprocessors are also presented as ways to validate ideas quickly and efficiently. Frameworks, libraries, animations, and UI sets are referenced as options to accelerate development.

1. Design and Code.
Work should be fun.
by Andrii Vandakurov, frontend developer
eleks.com

2. Designers think outside of the
box and see crazy animations,
ideas, pixels, and buttons,
while developers see the
technology, speed bumps, and
limits.

3. 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

4. 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:

5. 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.

6. Specctr

7. Communication
with the team
Effective collaboration
requires effective
communication
Tools (Free):
● Marqueed
● Framebench
● Notism

8. Features
● Design comments
● Notifications ( via Slack )
● Export assets/colours
● Styleguide
● Web interface
For now Zeplin works only with Sketch (Notes:
ZEPLIN

9. 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

10. 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

11. Icons
Icon sets (free) :
● Font awesome
● Material icons
Customization tools:
● IcoMoon
● Fonticons
● Fontello
● Fontastic

12. 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

13. Developing enterprise
applications should be fun too.

14. ● Kendo UI
● DevExpress
● Wijmo
● Essential JS
Link with comparison of these ui sets https://goo.gl/LdFCb2Notes:
Faster development. Easier integrations with backend.
UI sets

15. Cool stuff
● Push notifications
● Track online/offline status
● Splash screen
● Battery api
● Page visibility api
● Audio api

16. 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