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.


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?


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


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


1. PRECISION

? ?

1. PRECISION

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

1. PRECISION

http://blog.froont.com/9-basic-principles-of-responsive-web-design/

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

1. PRECISION

http://blog.froont.com/9-basic-principles-of-responsive-web-design/

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


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


2. CONSISTENCY

THIS IS A BUTTON

THIS IS ALSO A BUTTON

34px

19px

2. CONSISTENCY

THIS IS A BUTTON

40px

20px


34px

19px

2. CONSISTENCY

THIS IS A BUTTON

40px

20px


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


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


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


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


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


Questions?

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

Let’s see the goodsPrototyping setup


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


http://warpspire.com/kss/styleguides/

http://trulia.github.io/hologram/

https://github.com/livingstyleguide/livingstyleguide

Questions?


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


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


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




Panels1. Place template of each content pane in its folder


Custom panes everywhere


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


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


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


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


What is next?Drupal 8

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


Questions?


Visit us at booth 501 Thank you

Join the conversation on Twitter FFWglobal FFWdcon

Technology

Prototypes and Drupal