In recent years, the practice of designing websites directly in HTML prototypes has become increasingly prevalent. And with good reason – designing "in-browser" has many mertis over static mock-ups. But how do we ensure a design good process and hand off, when we move from design to development, and it is time to implement the prototype in Drupal? In this presentation Morten Christoffersen, User Experience Lead at FFW, and Yuriy Gerasimov, Drupal Architect at FFW, share their approach to designing with prototypes in Drupal projects. Throughout the session they following topics are covered: 1) The benefits of a prototype-based design approach over building static mock-ups in Photoshop or Sketch 2) The tools and workflow used for building prototypes and ensuring a good process (Gulp, Twig, Sass and others) • The techniques used to implement prototypes and custom templates in Drupal with less effort

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