A crucial part of the creative process is researching current trends and advances in the design industry. This is a time consuming task involving inspecting the CSS of sites, taking notes of design elements, and evaluating them before choosing a design direction. We discussed how there was an opportunity to make this process easier, and Stylify Me was born.
Stylify Me was created to help designers quickly create a style guide of an existing site, including colours, fonts, sizes and spacing. It’s a tool that allows the designer to research the CSS styles efficiently without the need to inspect each element, in order to be aware of current design trends and inform their design decisions.
Running a load speed script from PhantomJS’s example library.
The step-by-step process of analyzing the styles for Nurun.com.
In our processing instructions for PhantomJS we analyze the text and background colours of all elements on the page and order them by quantity, giving some, for example, the main background and the main text colour, a higher priority. Next we look for the main text element. For proper HTML5 markup this is simple, we just need to look for the role=”main,” but in reality a lot of websites use old and irregular markup, which requires us to look for common id and class names. If this does not work we simply use the middlemost element – in the hope that this is part of the main copy and not the side navigation. Based on this selection we extract the CSS styling of the text and headlines and return everything as a JSON response back to the user.
If you’re interested in learning more about the technical side of Stylify Me, you can check out the source code of the service layer on Michael’s GitHub.
Stylify Me was a fun, collaborative project to work on. We hope it becomes a useful tool that helps make the design process a little easier.