Gone are the days when designers did all their UI/UX concepts in Photoshop. Now, they're being called on to code their mockups.
But how do you introduce designers to code if they've never programmed before? You take a page from the early days of the web, and build them a WYSIWYG—also known as a "what you see is what you get" editor, like PowerPoint or Photoshop, that shows them the finished product in real time.
Unveiled today, Autocode is a WYSIWYG from the popular prototyping tool Framer that lets non-coders design interactive prototypes without knowing a lick of JavaScript. And it's useful for coders, too.
First thing's first. Why design in code, over a tool like Photoshop? Framer co-founder Koen Bok says that when it comes to interactive design, using static design tools just leads to miscommunication.
"I can't tell you how many design meetings I've been in where someone presented a Photoshopped mock-up of an app, everyone left the meeting thinking they were on the same page, and a few months later it turned out no one had agreed on how it was supposed to actually work," he says. "Code is the best tool to express interactive design, because it's easier to communicate how a design should feel, not just how it looks."
Framer was created to give designers a coding toolbox for realizing their interactive designs, Bok says. But while code is an undeniably powerful design tool, it's got drawbacks; it has a steep learning curve, and even if you're a coder, there are going to be times when hammering out actual code is overkill. "While we believe code is the best tool for many things, some things are better done with visual design," says Bok. "It's easier to position and reposition an element on screen by dragging-and-dropping it, then typing in x and y coordinates."
That's why AutoCode is so useful. For those who don't know code, AutoCode gives some simple tools to prototype interactive designs, allowing them to create and directly manipulate new layers, boxes, and other on-screen design elements as easily as if they were putting together a PowerPoint presentation. As you work, AutoCode consistently updates the underlying Framer code, giving non-coders a entry point to learning JavaScript just by playing around. But even if you do code, AutoCode constantly scans your Framer designs, looking for snatches of code that would be easier for you to manipulate by clicking and dragging.
The goal of AutoCode, says Bok, was to give Framer a WYSIWYG editor that was useful to both coders and non-coders alike. "You can build design prototypes just using AutoCode's UI alone, but it will also get out of the way when you don't need it," he says. Bok describes AutoCode as an inverted Flash, Adobe's much-maligned animation platform, which is also often used to design interactive prototypes. "In Flash, you use an editor that is all UI-based, and sprinkle in code when you run into problems," Bok explains. "We flipped that model, only adding UI where it makes interactive design easier."
Check out Framer here.