Prototypes and Drupal
0 likes522 views
The document discusses the transition from traditional web design tools to designing directly in the browser using HTML, CSS, and JavaScript, highlighting benefits such as precision, consistency, interaction, and transparency. It details the setup for prototyping, including tools like npm, Bower, Gulp, and Twig, and outlines Drupal 7 implementation challenges and techniques needed for effective front-end development. Lastly, it touches on expectations for Drupal 8, including modern JavaScript and Twig template usage.
Prototypes and Drupal
- 1. – 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
- 2. Hello Morten Christoffersen User Experience Lead Yuriy Gerasimov Drupal Architect
- 3. HERE, THERE AND ALL AROUND USA Brazil UK Denmark Sweden AustriaGermany Bulgaria Ukraine Moldova Vietnam
- 4. 15YEARS EXPERIENCE 420FULL TIME EMPLOYEES 20OFFICES WORLDWIDE 250TECHNOLOGY SPECIALISTS 1000+SOLUTIONS DELIVERED ~100PROJECTS RUNNING HERE, THERE AND ALL AROUND
- 5. Agenda.Today 01 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
- 6. What is it and why should we do it? Designing in-browser
- 7. 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
- 8. Replacing static mock-ups… .. with designing prototypes in code
- 9. Replacing static mock-ups… .. with designing prototypes in code
- 11. Why? Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
- 12. Why? 1. Precision 2. Consistency 3. Interaction 4. Transparency Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
- 13. 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
- 14. 1. PRECISION
- 15. ? ? 1. PRECISION
- 16. Animations by FROONT (http://blog.froont.com/9-basic-principles-of-responsive-web-design/) 1. PRECISION
- 17. Animations by FROONT (http://blog.froont.com/9-basic-principles-of-responsive-web-design/) 1. PRECISION
- 18. 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
- 19. 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
- 20. 2. CONSISTENCY THIS IS A BUTTON THIS IS ALSO A BUTTON 34px 19px
- 21. 2. CONSISTENCY THIS IS A BUTTON 40px 20px THIS IS ALSO A BUTTON 34px 19px
- 22. 2. CONSISTENCY THIS IS A BUTTON 40px 20px THIS IS ALSO A BUTTON 34px 19px
- 23. THIS IS A BUTTON 2. CONSISTENCY .button { padding: 20px 40px; background-color: $blue; font-family: $mark-pro; } THIS IS A BUTTON
- 24. THIS IS A BUTTON 2. CONSISTENCY .button { padding: 20px 40px; background-color: $blue; font-family: $mark-pro; border-radius: 5px; } THIS IS A BUTTON
- 25. 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
- 26. 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
- 27. 3. INTERACTION User flows (logical user journeys and funnels)
- 28. 3. INTERACTION User flows (logical user journeys and funnels)
- 29. 3. INTERACTION Feedback (errors, confirmations, hover states, active states)
- 30. 3. INTERACTION Feedback (errors, confirmations, hover states, active states)
- 31. 3. INTERACTION Transitions and animations (states, context, delight)
- 32. 3. INTERACTION Transitions and animations (states, context, delight)
- 33. 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
- 34. 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
- 35. MAGICAL DESIGN “BLACK BOX” 4. TRANSPARENCY CLIENT INPUT DESIGN SOLUTION ?
- 36. 4. TRANSPARENCY
- 37. 4. TRANSPARENCY
- 38. 4. TRANSPARENCY
- 39. 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
- 40. Questions? Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geek Police
- 41. Let’s see the goods Prototyping setup
- 42. 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)
- 44. 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!
- 46. Twig 1. Output, escape and filter data 2. Presentation logic; Conditionals, loops 3. Define and override blocks 4. Include and extend templates
- 50. 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
- 54. Questions? Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geek Police
- 55. How to implement prototypes? Drupal 7 implementation
- 56. Backend vs. Frontend 1. 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
- 57. Techniques 1. Panels 2. Views 3. View modes 4. Javascripts Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
- 58. Panels 1. Have inventory of templates / blocks 2. Organise your templates right 3. Start with layouts Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
- 59. Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
- 60. Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
- 61. Panels 1. Place template of each content pane in its folder Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
- 62. Custom panes everywhere Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
- 63. Views 1. 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
- 64. Display modes 1. 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
- 65. Javascripts 1. 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
- 66. Custom framework 1. Silex took 4 hours to implement the page from prototype Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
- 67. What is next? Drupal 8
- 68. What to expect 1. 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
- 69. Questions? Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geek Police
- 70. Visit us at booth 501 Thank you Join the conversation on Twitter FFWglobal FFWdcon