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.
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.”
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.