New style guide for apps | ESADE



With the help of AtikStudio, at Ohmycode we have created a new style guide for ESADE internal applications, which will be done in a new technological stack.

The premises of the project were to create the base layout in Bootstrap and create a style guide for minimum components that would enable the creation of forms.

At Ohmycode we recommended starting with a template to reduce costs, which was done. We have previously worked with different versions of an HTML and CSS Metronic template, which is what we chose for this project; everything went as we expected, satisfying ESADE’s expectations. You can see the original template here. If you want to see a presentation of the final design click here.


More agile development and more uniform applications

This project has enabled developers to design the applications in a far more agile manner, as they already have examples and guides to create the pages. There are also previously developed components that avoid the need to devote extra hours to programming. Moreover, the applications created will be more uniform, also reducing the training and adaptation time for the end users.

The result is a fully responsive systems that is rendered on the main devices: computer, mobile and tablet, for both iPhone and Android systems. It is also scalable in components, as both the template and Bootstrap have elements that are easily integrated.


The best thing…Working with Jesús from AtikStudio. He is an artist!
The worst thing…The number of libraries that were not used and had to be deleted. This is the downside of starting with a template.

The Ohmycode solution

AtikStudio led on the designs through the Zeplin and Sketch template. Based on these, Ohmycode developed the project using Bootstrap and SASS. For the tables we decided to use DataTables, a Javascript plugin that allows the creation of very powerful, dynamic tables in a simple way.

The structure of the project was sections with the explanations of the components and example codes, as well as complete example pages, to understand how the applications would look.

To demonstrate that it covered the new technology stack, a fully operational demo was also given on Angular that showed that our style guide could be applied perfectly and successfully.

Conclusions. Sometimes it is better to start with already developed elements such as templates or libraries and work with them, modifying them. Making the style guide from scratch would have meant tripling or quadrupling the budget, and having less features. The initial design was key for the success of this project.

Ready, steady, code !

This could be the start of something cool