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.

Transcript

1. Modular and Bulletproof

   User Interfaces
   Lucijan Blagonić — 4. 10. 2015. — WebCamp Zagreb
   

   View Slide

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.
   

   View Slide

3. Do you play video games?
   

   View Slide

4. View Slide

5. View Slide

6. Interfaces were easy to use.
   

   View Slide

7. After you learned 

   a “simple” recipe.
   

   View Slide

8. View Slide

9. Every puzzle can be solved by
   combining available 

   verbs/actions and items.
   

   View Slide

10. In parallel — every website
    can be designed by using a
    set of components and styles.
    

    View Slide

11. View Slide

12. The trick is about finding the
    right combination.
    

    View Slide

13. Back in the days…
    

    View Slide

14. Image + HTML/CSS + Coding
    

    View Slide

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

    View Slide

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

    View Slide

17. Today
    

    View Slide

18. Our landscape is different.
    

    View Slide

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

    View Slide

20. Our projects are living
    organisms. They evolve.
    

    View Slide

21. Our interfaces need to be
    flexible as well. 

    They have to adapt.
    

    View Slide

22. Interface awareness
    

    View Slide

23. Bootstrap, Foundation, UI kit…
    

    View Slide

24. OOCSS, BEM, SMACSS…
    

    View Slide

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

    View Slide

26. Do an interface inventory
    

    View Slide

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

    View Slide

28. View Slide

29. Styleguides &
    Pattern libraries
    

    View Slide

30. Central repository.
    

    View Slide

31. View Slide

32. View Slide

33. Make every item as a
    standalone component.
    

    View Slide

34. View Slide

35. Design critique is easier when
    we are judging specific
    components as well as the
    whole experience.
    

    View Slide

36. Once you have a pattern
    library in place — you can
    easily build pages.
    

    View Slide

37. Pass dynamic data to
    included components and
    create a quick prototyping
    system.
    

    View Slide

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

    View Slide

39. Time Travel
    

    View Slide

40. View Slide

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

    View Slide

42. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

46. Great interfaces require 

    team effort.
    

    View Slide

47. Thank you.
    Lucijan Blagonić — @lblagonic
    

    View Slide