2017 was an engaging and intriguing year for the UX department at Stride Gaming where I was working at the time.
With many challenges ahead, among one of the most important projects we had to achieve was the creation of a design system. A design system not only will allow us to design efficiently at a scale but engage with the benefits of time-saving features and better, faster output.
With no doubt, this was something I was excited about and so, the hard work began.
ATHENA CASINO design system was created for an online casino business. With this in mind, we created the site with the possibility to adapt all the elements needed for this kind of business and, we also thought about possible variations so that in the future we could accommodate business needs to those pages where it may be required, as an example the games page and or the promotions page.
What is a design system? A design system is a series of assets and components that can be reused in different combinations with the purpose use to build a digital product.
As the extension and complexity of the project, it’s significant, I will present Athena’s elements following Atomic Design’s methodology and principles which I think will put the content in its right context.
Atomic Design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner.
More extensive details of the project can be shown upon request.
Atoms of our interfaces serve as the foundational building blocks that comprise all our user interfaces.
Examples of Atoms used in Athena System
In interfaces, molecules are relatively simple groups of UI elements functioning together as a unit.
Organisms are relatively complex UI components composed of groups of molecules and/or atoms and/or other organisms. These organisms form distinct sections of an interface.
Templates are page-level objects that place components into a layout and articulate the design’s underlying content structure.
Article page template for desktop & article page template mobile.
Pages are specific instances of templates that show what a UI looks like with real representative content in place.