ADI

  • The Glyph Studio
Background & Concept
Meet Wix Artificial Design Intelligence (Wix ADI). It is the first AI-driven system building unique websites on its own. Wix ADI learns your business needs by asking a few short questions. Based on the answers received, the system picks up the design and content elements to fit in your website. It can become even more customized whenever you decide to do it. Changing colors and font sizes or adding animations takes only a few clicks.
The Glyphers took part in the creation of this innovative product too. We worked on its visual style, guidelines and UI library.

Colors
The product color set was made of three major colors. The key website elements were designed in blue, the website panels in white and the content in grey. We also developed a detailed color map for all the design elements and attributed a unique code to each color shade selected. It made our further communication with software developers and designers at Wix way easier.
Corner Radius
Bringing about coherence in design is what we always do. So we developed the corner radius map for the square and rectangular elements with rounded corners. The map shows dependency of the design element size and corner radius to be applied. This is to ensure appropriate use of every design item throughout the system.
Typography
We developed the corporate font style based on Helvetica. Its patterns, size and style map are displayed below. Each color combination corresponds to a particular font size and its appropriate use in the interface.
UI Elements
The user interface was built on the composite elements system. Basically, these are simpler elements with correct indents. The composites are divided so that we can use them in different parts of the system. It helps avoid repetition of the same elements using different values. The composites save a lot of time and create a common system style, which is easy to reproduce.
Final Design
Here are a few more interface screens to show how the entire process of the website building looks like. They illustrate the way a user can customize the website, add personal information and photos, expand the website menu and make it mobile-friendly without any effort.
| The Glyph Studio | Dribbble | Behance | Twitter | Facebook | Instagram | Medium | Linkedin |