Prototypes and Drupal

– from designing in-browser to implementing custom templates

Prototypes & Drupal

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis Join the conversation on Twitter FFWglobal FFWdcon

Hello

Morten ChristoffersenUser Experience Lead

Yuriy GerasimovDrupal Architect

HERE, THERE AND ALL AROUND

USA Brazil UK Denmark Sweden AustriaGermany Bulgaria Ukraine Moldova Vietnam

15 YEARS EXPERIENCE

420 FULL TIME

EMPLOYEES20 OFFICES

WORLDWIDE

250 TECHNOLOGY SPECIALISTS

1000+ SOLUTIONS DELIVERED

~100 PROJECTS RUNNING

HERE, THERE AND ALL AROUND

Agenda.Today01 Designing in-browser 02 Prototyping setup 03 Drupal 7 implementation 04 Drupal 8 - what is next?

There will be time for questions after each section.

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis Join the conversation on Twitter FFWglobal FFWdcon

What is it and why should we do it?Designing in-browser

What?“Designing in-browser”

Designing websites directly in the browser using HTML, CSS and Javascript, instead of using apps such as Photoshop or Sketch.

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

Replacing static mock-ups…

.. with designing prototypes in code

Replacing static mock-ups…

.. with designing prototypes in code

Why?

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

Why?1. Precision 2. Consistency 3. Interaction 4. Transparency

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

Why?1. Precision 2. Consistency · Reusable styles and components 3. Interaction · Animations and transitions 4. Transparency · Continous testing and iteration

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

1. PRECISION

? ?

1. PRECISION

Animations by FROONT (http://blog.froont.com/9-basic-principles-of-responsive-web-design/)

1. PRECISION

Animations by FROONT (http://blog.froont.com/9-basic-principles-of-responsive-web-design/)

1. PRECISION

Why?1. Precision · Control over details and responsive behaviour 2. Consistency · Reusable styles and components 3. Interaction · Animations and transitions 4. Transparency · Continous testing and iteration

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

Why?1. Precision · Control over details and responsive behaviour 2. Consistency 3. Interaction · Animations and transitions 4. Transparency · Continous testing and iteration

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

2. CONSISTENCY

THIS IS A BUTTON

THIS IS ALSO A BUTTON

34px

19px

2. CONSISTENCY

THIS IS A BUTTON

40px

20px

THIS IS ALSO A BUTTON

34px

19px

2. CONSISTENCY

THIS IS A BUTTON

40px

20px

THIS IS ALSO A BUTTON

34px

19px

THIS IS A BUTTON

2. CONSISTENCY

.button { padding: 20px 40px; background-color: $blue; font-family: $mark-pro;

}

THIS IS A BUTTON

THIS IS A BUTTON

2. CONSISTENCY

.button { padding: 20px 40px; background-color: $blue; font-family: $mark-pro; border-radius: 5px;

}

THIS IS A BUTTON

Why?1. Precision · Control over details and responsive behaviour 2. Consistency · Reusable styles and components 3. Interaction · Animations and transitions 4. Transparency · Continous testing and iteration

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

Why?1. Precision · Control over details and responsive behaviour 2. Consistency · Reusable styles and components 3. Interaction 4. Transparency · Continous testing and iteration

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

3. INTERACTION

User flows (logical user journeys and funnels)

3. INTERACTION

User flows (logical user journeys and funnels)

3. INTERACTION

Feedback (errors, confirmations, hover states, active states)

3. INTERACTION

Feedback (errors, confirmations, hover states, active states)

3. INTERACTION

Transitions and animations (states, context, delight)

3. INTERACTION

Transitions and animations (states, context, delight)

Why?1. Precision · Control over details and responsive behaviour 2. Consistency · Reusable styles and components 3. Interaction · Flows, feedback, animations and transitions 4. Transparency · Continous testing and iteration

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

Why?1. Precision · Control over details and responsive behaviour 2. Consistency · Reusable styles and components 3. Interaction · Flows, feedback, animations and transitions 4. Transparency

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

MAGICAL DESIGN “BLACK BOX”

4. TRANSPARENCY

CLIENT INPUT DESIGN SOLUTION?

4. TRANSPARENCY

4. TRANSPARENCY

4. TRANSPARENCY

Why?1. Precision · Control over details and responsive behaviour 2. Consistency · Reusable styles and components 3. Interaction · Flows, feedback, animations and transitions 4. Transparency · Continuous testing and iteration

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

Questions?

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geek Police

Let’s see the goodsPrototyping setup

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

NPM · Package manager for dev tools

Bower · Package manager for front end libs

Gulp JS · Build system and task automation

Sass · CSS preprocessor Susy · Sass-based grid system Twig · Template engine (actually, TwigJS)

1. Start a static server with live reloading 2. Watch files and run tasks on changes 3. Compile SCSS and add vendor prefixes 4. Generate source maps 5. Compile Twig templates to HTML 6. Include data with our templates

Gulp automates all of this – so we can focus on designing!

Twig 1. Output, escape and filter data 2. Presentation logic; Conditionals, loops 3. Define and override blocks 4. Include and extend templates

Styleguide> KSS – http://warpspire.com/kss/styleguides/ > Hologram - http://trulia.github.io/hologram/ > LivingStyleGuide -https://github.com/livingstyleguide/livingstyleguide

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis Join the conversation on Twitter FFWglobal FFWdcon

Questions?

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geek Police

How to implement prototypes?Drupal 7 implementation

Backend vs. Frontend1. Backend developers will resist 2. Their ideal workflow -- here is your data, make it beautiful 3. Frontend developers need to learn a lot of drupal theming

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

Techniques1. Panels 2. Views 3. View modes 4. Javascripts

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

Panels1. Have inventory of templates / blocks 2. Organise your templates right 3. Start with layouts

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

Panels1. Place template of each content pane in its folder

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

Custom panes everywhere

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

Views1. Do not render lists with views 2. Just get results and render them on your own

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

Display modes1. Always create render nodes with view modes 2. Advantages: separate templates, entity cache, render cache

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

Javascripts1. When prototyping discuss the versions (jQuery, Bootstrap etc.) 2. Add drupal.js in the beginning 3. Use Drupal.behaviors

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

Custom framework1. Silex took 4 hours to implement the page from prototype

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

What is next?Drupal 8

What to expect1. Twig templates (need to figure out) 2. Javascripts more modern versions 3. Backbone and other frameworks

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

Questions?

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geek Police

Visit us at booth 501 Thank you

Join the conversation on Twitter FFWglobal FFWdcon