Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Modular and Bulletproof User Interfaces @ WebCamp Zagreb 2015

Modular and Bulletproof User Interfaces @ WebCamp Zagreb 2015

Working with bigger projects is often a challenge from the design standpoint. It’s important to optimise the design phase so that we can easily keep track of different interface elements across the site. Building an interface inventory is often the first step, with style guide and pattern libraries following the design process — serving as the project foundation. The final deliverable is always HTML and CSS, in form of building blocks and components that will allow you to easily build new templates and test for different use–case scenarios while your design remains bulletproof — even with future updates.

2eaa540dfe93c83d61a8fafedec664ff?s=128

Lucijan Blagonić

October 04, 2015
Tweet

Transcript

  1. Modular and Bulletproof
 User Interfaces Lucijan Blagonić — 4. 10.

    2015. — WebCamp Zagreb
  2. About me A (front–end) designer. Also gamer. 
 And stargazer.

    ABBA fan. 
 Not necessarily in that order. Working with Emanuel in a small design studio — Blagonić Brothers.
  3. Do you play video games?

  4. None
  5. None
  6. Interfaces were easy to use.

  7. After you learned 
 a “simple” recipe.

  8. None
  9. Every puzzle can be solved by combining available 
 verbs/actions

    and items.
  10. In parallel — every website can be designed by using

    a set of components and styles.
  11. None
  12. The trick is about finding the right combination.

  13. Back in the days…

  14. Image + HTML/CSS + Coding

  15. Optimised for Internet Explorer 6 and 800x600 resolution.

  16. Add another page? Just duplicate the last one that worked.

  17. Today

  18. Our landscape is different.

  19. Phones, tablets, laptops, desktops, TVs …

  20. Our projects are living organisms. They evolve.

  21. Our interfaces need to be flexible as well. 
 They

    have to adapt.
  22. Interface awareness

  23. Bootstrap, Foundation, UI kit…

  24. OOCSS, BEM, SMACSS…

  25. We are not building websites — we are building design

    systems.
  26. Do an interface inventory

  27. http://bradfrost.com/blog/post/interface-inventory/

  28. None
  29. Styleguides & Pattern libraries

  30. Central repository.

  31. None
  32. None
  33. Make every item as a standalone component.

  34. None
  35. Design critique is easier when we are judging specific components

    as well as the whole experience.
  36. Once you have a pattern library in place — you

    can easily build pages.
  37. Pass dynamic data to included components and create a quick

    prototyping system.
  38. http://garann.github.io/template-chooser/

  39. Time Travel

  40. None
  41. What if we designed websites the way we played games?

  42. None
  43. Remember, it’s only a matter of finding the correct recipe.

  44. How to reinforce design system thinking in a project?

  45. Information architect, visual designer, front end developer, back end developer,

    client…
  46. Great interfaces require 
 team effort.

  47. Thank you. Lucijan Blagonić — @lblagonic