prototypes and drupal
TRANSCRIPT
– 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