Our favourite insights from Smashing Conference

Our favourite insights from Smashing Conference

Recently, two of our amazing developers, Felipe and Jonny, attended the Smashing Conference in Toronto, where they learned about developments in JavaScript, UX, and UI. The conference was packed with workshops and talks from important names in web development. Here, they’ll each share one of the topics they found most valuable and how it ties into their work to continually evolve our platform, SenseiOS^®.

Felipe: Design Systems

One of the biggest challenges in software development, especially for a complex and evolving platform like SenseiOS, is to maintain design consistency. A simple yet powerful tool to overcome this challenge is a Design System. In one of the amazing lectures from Smashing Conference, Brad Frost, author of the Atomic Design book, dove into Pattern Lab, an open source tool that helps teams adopt and develop Design Systems. Brad demonstrated how to create reusable front-end components and tested them on screen in a real pilot project.

One of the most interesting ideas behind Pattern Lab is that it uses Brad’s Atomic Design concepts in which each pattern can be nested inside each other and divided into five different layers:

• Atoms are the basic building blocks of a design, e.g. form fields or buttons
• Molecules are composed of atoms and built to be reused, e.g. a search box composed of an input field and a button
• Organisms are more complex and compound building blocks e.g. header or a footer
• Templates are complete representations of an entire pages in the system with different components from previous layers
• Pages are instances of templates with real representative content to show what will be seen in the real system.

In SenseiOS, we’ve been using a Design System and our own UI components called Sensei Kit. This talk gave us a new approach that we were able to take back to analyze and improve our own workflow even further.

Having our own Design System helps us to deliver better and faster features.

Once a Design System is in place, whether using Pattern Lab or another tool, it helps to improve the communication and the synergy between UX Designers and Software Developers enabling a cleaner, more consistent user experience. Implementing Sensei Kit has been a major win for our team and it was a great experience to see how other organizations implement their Design Systems. I hope you can also explore Design Systems in your own work!

Jonny: Color System

Color system was another interesting topic presented by Diana Mounter from GitHub. She talked about the challenges of implementing a concise color system and solutions for some of the most common issues when it comes to normalizing all the color variations in a system.

The process starts with auditing all colors used in the platform, this must include a screenshot of where the color is used to give its context. Once all colors in use are identified, the next step is a normalization process to ensure a consistent usage of colors throughout the application. For example, the shade of green on a confirm button should be the same as the green used in a success notification. At the end of the process you’ll have a color system, which should look something like this:

Once this step is ready, you’ll need the right technology to implement this color system in a way that will allow you to easily swap color values. For instance, in our case this is helpful in customizing the branding in different instances of SenseiOS to match our customers’ branding.

Diana showed how GitHub implements a consistent set of SASS variables that includes variations and how the most important colors get their own class to simplify the development process. In SenseiOS, we take a similar approach, but we rely on an advanced CSS feature called Custom Properties (a.k.a. CSS variables). Similar to SASS variables, CSS Custom Properties allowed us to reduce the number of hard coded colors in our system and replace them with variables that can easily be customized for each customer’s instance. We’ll continue to improve our color system by applying some of the ideas about color normalization, variable naming, and custom configuration.

Conclusion

Conferences like this one provide useful insights about how other people and teams solved issues and how we can prevent them. It’s also a great way to keep connected with other developers and make new friendships. We definitely recommend Smashing Conference to anyone who wants to explore new concepts in JavaScript, UX, and UI. We’re looking forward to attending again next year!