As a software designer who wasn’t ever thrilled about writing code (I never lived to write the perfect piece of code, I just wanted to make the system work) — I worked with hardcore programmers (true coders) who could execute my ideas better than I could — I’ve always looked for ways to simplify the design process. Mind you I could program, but I didn’t have the heart that some of my fellow geeks did. It won’t surprise you to know that they were far better at it either.
My expertise was designing systems and processes that met corporate objectives, effectively conveying to the engineers what needed to be built, then managing the process.
Anyway, for many years I’ve tested and tried all kinds of software and systems for building software prototypes and demonstrations, hence my interest. It’s still unlikely that such a product could be used to create a commercial product yet, but for developing a proof -of-concept, something like this could be giant leap forward.
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.”