Couldn't make it to our event? We recorded it for you. Check it out HERE.
Kicking things off for this first design event of the year was our own, Juan Herrera, who offered up a bit of a backdrop on the growing design tool revolution.
“Four or five years ago, it was just the norm to build interfaces in Photoshop–it’s powerful and can be used for everything from painting and photo manipulations to rudimentary gifs.” But with file sizes eating up hundreds of megs and even gigs of disk space, Photoshop, simply put, was Bloat City.
Then iOS 7 came along and with it the rise of Sketch: “It was very accommodating, lightweight, vector based, and generally pleasant to use,” Juan explained.
As they do, however, needs surrounding product design optimization and workflow evolved.
“Lately, we’ve seen a multitude of products emerging, sometimes even on a monthly basis, attempting to solve design cycle problems.” Although, as Juan was quick to note, problems, such as prototyping, collaboration, and version control are nothing new. “What is new is the amount of options available to designers to solve them. That’s what’s never been quite as diverse as it is right now.”
Find Juan's full presentation HERE.
And with that, Juan welcomed to the stage Avocode CEO, Vu Hoang Anh, to discuss how figuring out how to improve his own team’s workflow lead to the birth of their critically acclaimed design software.
Avocode’s roots were planted roughly eight years ago when Vu was a part of a small three-person digital agency. “I was the designer and Martin and Peter (Avocode Co-founders), web and developers. Back in the day when I would finish my design works, I would just hand it off to them so they could turn it into code. I would just send them a Photoshop file, no specs, no prototype, no documentation, just a plain file… you guys, deal with it.”
In an attempt to streamline the process, his team began asking him to make lists of the elements, layer styles and values he was using, manually. To Vu’s own admission, “I was a lazy designer. Cleaning up my mess in layers was already enough. You want me to do this extra work, really?”
Realizing there had to be a better way, Vu turned his attention to the possibility of automation and found a plugin that could turn layer styles into CSS3 code—the problem, though. It didn’t work.
“So I went to our team of developers and said, could we build something like this? Luckily they said yes, and we built the first tool for designers and developers, a product called CSS Hat.”
Then, just as Vu and team began to celebrate having created this first-of-its-kind plugin, Adobe abruptly came along with their own built in CSS Hat-style feature. Although this came as a bit of a letdown, it did make Vu realize that there were many other problems surrounding workflow in need of solving.
“Design hand-off was still tedious. Developers were forced to use design tools with these plugins to get data from the design. What if the developer doesn’t have that design tool? Are they expected to buy it and learn the software? Should they all have to buy a MacBook just because of Sketch? This is how we came up with the solution of building our product, Avocode.”
“The first requirement was to create one UI for the developer to get specs and assets from the design. Avocode also had to be fully cross-platform. This didn’t just mean making an app that was compatible on Mac, Windows, and Linux, but also allowing anyone to open a design file independently without requiring design tools.”
Although the project was inarguably ambitious, after three years (which included creating their own universal file format), Vu and team fully realized their original vision with Avocode 3, which shipped in spring of ‘18 and is now used by industry heavyweights such as Intel, Samsung, and Avast.
“We really believe that designers should focus more on actually creating delightful user experiences rather than worrying about specs, redlining the design, and exporting assets for the developer. We also wanted to make designs more open and accessible for developers.
Find Vu's full presentation HERE.
For our second talk, Juan introduced Webflow product designer, Darin Dimitroff, who discussed the use of direct manipulation to help designers perform complex tasks without code.
Most of the time when the term “direct manipulation” is used, it’s in the context of computer science. However, Darin asked the audience to think of it in more of a rudimentary sense.
“It’s working with your hands. It’s working with visual abstractions. When writing text (for example), regardless if it’s on a piece of paper or on a computer—you’re writing the actual poem or song lyric—you’re not writing a wireframe of it and then handing it off to another person.”
“A digital artist or a photographer uses Photoshop to directly manipulate their photos, visually. A game designer builds complex environments, visually. Print designers, texture artists, video editors and visual effects artists, it’s all completely visual.”
With this, Darin posed the question: “Why haven’t we reached this level of direct manipulation in product and web design?”
Currently, working in production as a designer means learning code. Although current design tools are great for ideation and communication, as Darin stated, when it comes to production, “they’re not there at all.”
“At Webflow, we’re building a very different kind of tool: the first production-design tool. A tool that allows you to work with the engineers in a real-time environment without being a second-class citizen of the codebase. There’s no handoff, there’s no translation.”
In addition to targeting layout and animations, Webflow was also designed to solve problems which aren’t usually present in standard design tools, such as states of animation.
For layouts, “all sizing is done with Flexbox, grids, or margin & padding. You don’t really have to drag things around to move them. They follow a rule-based layout system. Everything is completely responsive. When you hit the publish button, you get a live web link which you can even open on your phone because it’s just HTML, CSS, and JavaScript.”
“Webflow is also the only design tool that has full production support for Flexbox and CSS Grid. Anything an engineer can do in Flexbox can be done in Webflow.”
Lastly, to demonstrate Webflow’s speed and effectiveness for engineers, Darin offered an example of Apple TV’s hover tilt effect and presented a query. “You’ve all seen this, where the three-dimensional rotation is based on user input. (with Webflow) We’re going to do this in one minute. I challenge any engineer in here to do this in one minute with code.”
After selecting the cards, new mouse animation, and then quickly setting parameters for X and Y axes, the demo was already over. “If you open it up now, this interaction works on any browser, any website. It’s not something you have to give to an engineer, and they have to code from scratch. It’s the final thing. Again, no handoff required.”
Find Darin's full presentation HERE.
Follow us on Facebook or subscribe to our newsletter for more information about upcoming events!
