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