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
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?
6. Interfaces were easy to use.
7. After you learned 
 a “simple” recipe.
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.
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/
29. Styleguides & Pattern libraries
30. Central repository.
33. Make every item as a standalone component.
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
41. What if we designed websites the way we played games?
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