Automated Front-End Style Guide Design
I still remember when artificial intelligence (A.I.) was make believe and only real in sci-fi movies. At that time I certainly didn’t think I would be around to see the days when A.I. would start to slip into our daily lives. I mean who knew that technology would advance at the speed of light.
These days the more I read about machine-learning, big data, and A.I. the more I get excited by it. The more I get excited by it the more I think of how these advancements could improve various aspects of our lives. Which led me to start thinking how could machine-learning, big data, and A.I. innovate the design process? What if we were able to remove the mundane repetitive tasks and focus on creating more innovate designs. What if something like front-end style guide development could be automated?
Out with the old, in with the new
If you’re a designer working with websites or web apps chances are you’ve had to work on or create a front-end style guide at least once. It’s a pain in the butt, it’s time consuming, repetitive, and there’s a lot of room for mistakes. Plus all that time costs money, wether an employer is paying for it or a client is paying for it.
Now imagine a world where you didn’t have to do that. Imagine a world where you could create the basic styles and direction you intended the project to take, upload them to something, and after a few cranks of a dial, turns of the cogs, and sputtering of a machine out comes a full front-end style guide with all the elements and variations of elements your project might need.
On top of that how great would it be if the machine could analyze your design based on the design patterns that exist today and make suggestions as to how the design could be improved! Wouldn’t that be cool?
Think of all the time that would be freed up to spend actually designing!
So how does this really work?
All this sounds to good to be true and impossible, right? Well I would beg to disagree. I mean if we put a man on the moon then we can automate style guide design. So in theory this is how I envision it working.
A designer creates static designs based off of main pages in their app or website. They can use their favorite programs, Sketch, Illustrator, Photoshop, whatever. Those pages would have the basic elements they plan on using in their project. Things such as typography, color, grid, layout, buttons, links, etc..
Once the designer finalizes the direction and is ready to move towards production style work instead of spending hours upon hours creating all the elements and variations the designer can upload their static files to the automated front-end style guide generator for analysis.
With the use of machine-learning, big data, and A.I. the static design files can be analyzed, assessed, and compared to design patterns and scrutinized for things like usability and what not. The style guide generator would create variables based on things like color palettes and type stacks. Once the analysis is complete the automated style guide generator will produce its results for the designer to review. The designer can then examine what was developed and make any tweaks or changes they deem necessary.
After the designer is satisfied with the style guide the generator would get to working creating all the elements that would make up the style guide and output an easy to manage living style guide that could be used across any and all projects pertaining to that design direction.
Through the use of machine-learning, big data, and A.I. the automated front-end style guide generator would be able to compare all sorts of data creating the best possible solution for the design direction. And with continued input and adjustments made by designers the automated front-end style generator could get smarter making it better and better over time.
You’re either for or against it
Now, as a designer I myself first thought “Woah, this technology could literally put me out of a job.” But then I thought about the developments in other industries where robots assist humans in creating products. Look at the car industry. Even super cars are made by robots with the help of humans.
At the end of the day I look at it this way, websites and apps are products. Just like a toothbrush, a potato peeler, a coffee table, or a chair. And while all of these items have their own distinct design elements created by humans they are mass produced by machines.
If you scrutinize even nature itself you will find a series of patterns in all living (and even non-living) things all the way down to the molecular level. There are a series of existing design patterns that make up and shape the digital world in which we work and play in. Websites have similar functionality and layouts because humans are accustomed to the usage patterns. So why not leverage them.
On top of all these patterns are piles and piles of data. Things like user behavior, website analytics, and so forth. Machines can study this behavior and use it to its best advantage. For example we may think the sizing of a button is great but an automated style guide generator might suggest otherwise based on its analysis of data and best practice.
What would be really amazing with an automated front-end style guide generator is that each project will have its own unique custom framework to start with and build upon. Designers won’t have to adopt frameworks of others and follow the latest trends, they can tailor the style guide to meet their needs and not have to worry about the small stuff.
Innovation has to start somewhere
With this approach I truly feel the discipline of design in a digital sense can greatly be innovated. The reduction of mundane and repetitive tasks will free up time and mental capacity to start to improving the way we approach design. I feel even at its basic form an automated front-end style guide generator can really open doors for new and exciting possibilities.
What do you think?
Lately I’ve been really thinking about automation in regards to our everyday lives as designers. Do you think that automation can improve design? If you liked or hated this article I would love to hear your ideas and thoughts on this topic.
