Generating design systems using deep learning

Uizard meme: You get a theme! You get a theme! Everyone gets a theme!

Design is hard for non-designers

Over time and throughout our private beta program, the majority of our recurrent active users started to increasingly become startup founders, product managers, consultants, business analysts, and marketing teams. We’ve also seen traction among user experience (UX) professionals and user researchers, who typically work closely with design teams but aren’t trained as graphic / UI designers themselves. Put simply, Uizard became a design tool for non-designers.

  • Easily create new themes that would look good given that they don’t have a design background.
  • Easily import existing design artifacts into Uizard to make sure that their projects would match their company’s brand identity.
Uizard meme: When everyone compliment your theme, but they don’t know your generated it using Uizard.
  • Easily generate original themes from any source of visual inspiration.
  • Easily extract components and styling properties from an existing brand identity, style guide, design system.

Generating a design system from an image

Since we had already developed an entire neural network pipeline for transforming user interface sketches into editable screens, we could reuse some of the building blocks for this new feature. Although a hand-drawn wireframe looks different from a user interface screenshot, both images represent the very same concepts: a button, a body of text, an input field, a footer with icons, etc. Although they look slightly different, both types of image are coming from the same domain.

Uizard product: generating design system components from a mobile app screenshot.
From an app screenshot to a customizable design system, courtesy of a big fat neural network
Uizard product: generating design system components from any image; app / website screenshot, photo, moodboard / inspiration.
One model to (kinda) rule them all

Generating a design system from a URL

The vast majority of our customers are using Uizard for their daily work and are either working in a startup, in an agency, or in an enterprise. That means that the vast majority of our customers are working in a company with an existing brand identity, style guide, or design system.

Uizard product: generating design system components from a URL by processing HTML, CSS, and a screen capture.
Extracting components from a web page with deep learning is fast!

Generating a design system from a Sketch file

Sketch is one of the most popular vector-based digital design tools for expert user interface designers. Although other tools are available out there, Sketch has historically been the most popular solution used by design teams. It’s therefore very likely that most companies have Sketch files laying around even if they transitioned to another design tool.

Uizard product: generating design system components from a Sketch file.
Sketch files are a mess, luckily we have machine learning to help us see through the noise

Parting words

Needless to say, we are pretty proud of our theme generator technology! You can try it for free at https://uizard.io.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Tony Beltramelli

Tony Beltramelli

308 Followers

Co-Founder & CEO uizard.io | building design and dev tools using machine learning | Forbes 30u30