When a Magician Wants a Website
A.I. Web Design Explained Like You’re Six Years Old
When a magician wants a website, she’ll have to create some content. So she’ll shoot some photos and videos, gather testimonials and write a little about herself and her act. To turn that content into a website, she will have to make a choice: A) Give her content (and pile of cash) to a web designer she trusts to create something custom, or B) Hire a template website so she can quickly and cheaply fill its buckets with her photos and text, then customize the generic design herself.
She will search portfolios and decide to hire Virgil, a modestly priced, mild-mannered web designer who has designed sites she likes for a band, his church and a photography studio. They’ll agree on a fair price and a timeline for deliverables that is outside her budget and faster than he’d like but well worth the expense to her and the time to him. He will listen to her requirements and gather her content, logo and stylistic preferences. He will design 3 site options, each with its own distinct style, in under 3 weeks. For each design, he will create a gridded layout which gives proper structure to her content and gives each item the priority his client noted on each. Then, he’ll select a few color palettes that compliment both her photos, and the brand she is trying to create. Finally, he’ll select fonts that fit the tone and level of professionalism she hopes to convey. Since he is feeling inspired, he will also provide a few menu and motion options to give the site experience some life. He will present them to her and she will love them. She will then ask for her two favorite design options to be combined and tweaked slightly. One will be a little more artistic than she is comfortable with and the other will have the perfect layout but the wrong font. This will horrify Virgil but in the interest of keeping his client happy, he will Frankenstein his work as she has requested. After a couple more weeks and a couple rounds of changes, she’ll have a simple website design she is pleased with. Virgil will then hire his friend Erin to code it and after 3 more weeks, the magician will have a website she is proud of.
She will quickly book her calendar with birthday parties and Bar Mitzvahs and then, she will be happy.
Two months later, she’ll want to revamp her image to attract cruise-ship coordinators. She’ll want changes to her website’s content, layout, colors, fonts and menu. She will call Virgil. He will have taken a job at Facebook…
She will have a choice, A) Search for a new web designer willing to take over for Virgil, or B) Move her content to a template. This time, she’ll try her luck with a template because it’s cheap and easy and if her annoyingly successful sister-in-law can do it, she sure as hell can too. She will see a hundred different templates, each one more striking and minimal than the next. She will scroll through countless digital versions of the happy people in the photos that come with frames until she finds the template she likes best. She will pick the one with the surfing photos and swimsuits for sale. She will replace the photos with her photos. But she will have shot her photos in landscape mode and the surfers and swimsuit models will be in portrait. She will crop her photos so as to maintain the integrity of the layout. Then she will replace the template’s titles and paragraphs with her titles and paragraphs. But her titles will be long and the template’s titles will be short. And her paragraphs will be short and the template’s will be long. She will have gotten 3 testimonials but the template will have 4 columns. So after cropping her photos, editing her text and collecting another testimonial, she’ll see another template she likes better and change it all one more time.
After getting her content in her chosen layout, she will have to decide what color she wants her text, buttons, decorations and menus to be. Those colors will need to look good with her photos and her new brand. She’ll choose colors she thinks cruise-ship entertainers would use. Then, she’ll pick a font that looks sort of like the one Virgil used in the design she rejected. When that’s done, she won’t have to wait for Virgil’s friend Erin to code it into a website because the template WILL BE the website. She will again have a website she is proud of.
She will spend her summer cruising the Caribbean. Then she will be happy.
If she were a better magician, she’d have waved her wand and conjured a magic Design System. This Design System would have analyzed the photos, videos, titles and paragraphs she’d created, laid them out on a grid and colorized them BASED ON the contents of those items. Just like Virgil would have done. Her Design System, like the template website, would enable her to quickly see changes to styles, colors, fonts and layouts. But rather than having to change her content to fit the layout, her magic Design System would change the layout and styling to accommodate the orientation of her photos, the size and priority of her videos, the length of her titles and testimonials and the professionalism of her brand. And it wouldn’t complain to their mutual friends about her questionable taste later that night over drinks. It wouldn’t matter if she had 3 portrait photos or 300 squares, a long headline and three short paragraph or 20 short headlines and no paragraphs. Her magic Design System would return that content in an appropriate layout with a color palette generated right from her photos. She would have no decisions to make except, “accept” or “reject and redesign.” And instead of a new design taking a few days to a few weeks, it would take a few seconds to a few minutes. And it would cost her nothing to do it 500 times.
This is the Design System we are building at The Grid.
For 20 years, I’ve designed and coded websites. The oversimplified process for a simple site hasn’t changed much in that time.
- Gather the content.
- Lay it out.
- Style it (fonts and colors mostly).
- Present it to the client.
- Make requested changes.
- Repeat 4 and 5 until it is approved.
- Code it.
- Launch it.
I’ve been part of designing and/or coding a couple hundred sites in my twenty year career. The A.I. designer generating Grid sites has designed and coded tens of thousands this month. This simultaneously fills me with excitement and makes me feel insignificant. Since coming to work for The Grid 2 years ago, I’ve been writing code that teaches an A.I. Design System to design and code websites. The magician’s magic Design System above is my best attempt at describing what my friends and I have been building for 2+ years. Our Design System is not as talented as a mid-career web designer. Not yet. We don’t anticipate that it will satisfy everybody’s web design needs or win you an Awwwards Site of the Day this year.
If you can afford it, and you have the time, hire a web designer you trust to create something exceptional for you. It’s worth the time and money. We have a lot to teach the A.I. and a few million websites to generate before our system gets that good.
Our purpose on the Design Systems team is “Teaching A.I. to design websites we are proud of.” When we let in our first large group of beta testers in June, 2015, we were embarrassed of the sites the A.I. was generating. Letting people with high expectations use it was terrifying. But we were pleasantly surprised to learn that there were more people hoping to see what we are doing become reality, than those eager to write it off as a failure. Today, it’s just beginning to generate some sites we are proud of, which is why we are releasing it publicly. It’s still terrifying, as the designer, to have people judge our work-in-progress. If you look for its flaws, you’ll find them. But there are far fewer than there were in August and far more than there will be by October. There isn’t yet infinite variety and the layout isn’t always perfect for the content but those goals are in sight. Not every site generated is up to our standards but they are getting closer. If you want to see the potential of our Design Systems to forever change the way a person or business who needs a simple, well-designed site gets one quickly, give it a whirl. Let us know where it lets you down and where it surprises you.
If you want to get a little nerdier about the system, check out
http://design-systems.github.io/basics
And if you want to really nerd-out about something, I’m @narrowd on Twitter.
