Lorem ipsum dolor sit amet, consectetur adipiscing elit lobortis arcu enim urna adipiscing praesent velit viverra sit semper lorem eu cursus vel hendrerit elementum morbi curabitur etiam nibh justo, lorem aliquet donec sed sit mi dignissim at ante massa mattis.
Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere praesent tristique magna sit amet purus gravida quis blandit turpis.
At risus viverra adipiscing at in tellus integer feugiat nisl pretium fusce id velit ut tortor sagittis orci a scelerisque purus semper eget at lectus urna duis convallis. porta nibh venenatis cras sed felis eget neque laoreet suspendisse interdum consectetur libero id faucibus nisl donec pretium vulputate sapien nec sagittis aliquam nunc lobortis mattis aliquam faucibus purus in.
Nisi quis eleifend quam adipiscing vitae aliquet bibendum enim facilisis gravida neque. Velit euismod in pellentesque massa placerat volutpat lacus laoreet non curabitur gravida odio aenean sed adipiscing diam donec adipiscing tristique risus. amet est placerat.
“Nisi quis eleifend quam adipiscing vitae aliquet bibendum enim facilisis gravida neque velit euismod in pellentesque massa placerat.”
Eget lorem dolor sed viverra ipsum nunc aliquet bibendum felis donec et odio pellentesque diam volutpat commodo sed egestas aliquam sem fringilla ut morbi tincidunt augue interdum velit euismod eu tincidunt tortor aliquam nulla facilisi aenean sed adipiscing diam donec adipiscing ut lectus arcu bibendum at varius vel pharetra nibh venenatis cras sed felis eget.
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®.
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:
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.
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!
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.
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!
