For the last decade, there has been a cold war happening between designers and developers. Designers have fumed about just how dependent they must be on developers to create mockups that go beyond limited static images. On the flip side, developers have resented their need for skilled designers to help them turn their own concepts into fully fledged, user-friendly interfaces.

But as design tools get better and easier to use, the cold war is coming to an end. The gap between developers and designers is narrowing.

It’s possible now to create a fairly impressive interactive prototype of an app without any coding experience. This means that designers can test new apps without writing a single line of code. It also means that developers can use simple tools to work out their own professional-looking designs without professional help.

Designers can obviously still benefit from learning to code, and developers should probably study design, but the gap between the two skillsets is getting easier and easier to bridge.

Not Too Long Ago, in a Web Far, Far Away there were developers and designers…

Not Too Long Ago, in a Web Far, Far Away…

The main role of digital designers five to seven years ago was to design static images of pages and screens in Photoshop to then hand off to a wizard developer who would turn them into a functional website or app. The “mockup” was always a limited output. It was static, the data was fake, and there were zero interactions. Have you ever run a user test with a static image? It doesn’t go far.

Endless back and forth communication between designers and developers trying to understand the designer’s intent would create email chains long enough to wrap around the globe. Weeks of development would go by only to discover after launch that what the developer understood by “slide up” was very different from what the designer had in mind. It was hell.

In a world like this, it’s no wonder every developer wrote an article that designers should learn to code. The developer who received an un-annotated PSD with dozens of unlabeled layers would not be blamed for wanting to jump out of the nearest window.

At the same time, developers who were interested in designing their own apps were frustrated by the complexity of tools like Photoshop and Illustrator. They needed an entire graphic design education on top of their computer science learning in order to bring their own ideas to fruition. Developers who tried to cut corners and design for themselves on the fly ended up with under-designed, under-tested apps that floundered as soon as they hit the market.

Digital Design Doesn’t Suck Anymore

Now, the situation between designers and developers is significantly better. With the invention of clever design tools and platforms like Craft by InVision, the InVision app, Framer, Flow, Flinto/Principle, and Sketch, designers and developers can easily design a prototype of an app and test it without the user even knowing that they’re using an app with no back-end. The barriers between design and code are fading.

The app will appear to work fully from the user’s perspective. Every single interaction, every flow will be there. The designer can gain valuable insights without touching a line of code, and the developer can create designs of their own with a few simple clicks.

Let’s take a closer look at those six hybrid design tools:

This site has been built from the ground up without one line of code required from the designer—and the site is fully responsive—using Webflow.

This site has been built from the ground up without one line of code required from the designer—and the site is fully responsive—using Webflow.

Craft by InVision

This suite of apps lets designers pull in real data rather than the standard “Lorem ipsum” and Michael Jackson icon filler. The various apps work together to make the design process smoother and more automated. The apps support collaboration, mockup of prototypes, syncing, and most importantly, your own data.

InVision

InVision really changed the game by letting designers create mockups that are not static. With InVision’s simple tools, images can be transformed into clickable, interactive prototypes that feel like real apps. InVision supports collaboration, making it easier for fellow designers and users to comment on changes every step of the way.

Check out this prototype that was created using Marvel (a competitor of InVision):

A fully functional mock up using Marvel App

With a fully functional mock up like this one, you could run tests with users before writing one line of code.

Framer

Framer is kind of like InVision, but it has the ability to pull off more complex interactions. Some pretty major companies use Framer to help them design apps that are intuitive and useful, but also simple. Uber is a prime example. They have used Framer to design their Apple Watch app and UberPOOL.

Flinto/Principle

Both of these apps can be used to create complex animations in minutes. They both take a bit of learning, but once designers become proficient with these apps, they can easily create animations that look and feel extremely professional, not like chintzy fillers. You can see here a bunch of amazing examples of what users can do with Principle.

Sketch

Sketch is like Photoshop, but with about four times the features for web and app developers. This powerful tool solves the problem of static designs that do nothing by letting designers create icons, interfaces, and websites that are totally unique and handcrafted.

Webflow

This one feels like a Mike Tyson uppercut. Webflow basically eliminates the need for designers to write any front-end code. Now designers use this beautiful WYSIWYG editor to do all the heavy lifting.

Apps without any Code

Heco: This agency has created incredibly complex animation and pulled off a very sophisticated front-end without any front-end developers, using only Webflow.

Heco: This agency has created a complex website just using Webflow

Todoist Designers illustrated how their to-do list works with this live mockup. By tapping around the app, you can see the full functionality of how Todoist works without any guesswork.

Todoist interactive mockup using the Marvel App

Creating CSS animations used to require CSS wizards who knew how to work with 3D transforms, delays, and endless CSS and JS hacks to create something complex. With Webflow, you can create something like this animation in half the time and without writing one line of code.

A complex CSS animation using Webflow

The Future Is Design, and There’s Plenty to Go Around

With design tools like these, designers don’t have to rely on static images anymore, and they don’t have to rely on developers to make professional, beautiful, functional prototypes.

At the same time, developers no longer need to rely on designers to bring them great ideas. Developers can and should start adding design skills to their resume, starting with the above tools. None of these programs are particularly complicated to learn. If developers stop relying on designers and start creating beautiful prototypes on their own, they could make themselves more employable and experience the satisfaction (not to mention savings) of taking their own ideas from concept to market.

This may sound like bad news for designers, but it’s not. With the addition of simple API integrations, automated workflows, and the ability to bring in real data, designers can create sophisticated, testable prototypes without constant back and forth from a developer. The result is that designers can focus on what they do best: design.

There’s no more need for a designer’s work to be interpreted and, inevitably, mangled by someone who doesn’t share their vision. So though these same tools allow developers to design, that shouldn’t threaten experienced designers. Rather than worrying about coders stepping on their turf, designers should take their head start with all the above tools and keep moving their craft forward.

About the author

Michael Abehsera, United States
member since December 15, 2015
Michael is a UI/UX designer and front-end developer originally from Israel and France. He specializes in designing landing pages and user interfaces. In addition, his background in marketing and data analysis helps him make better decisions in landing page designs and user interface construction. [click to continue...]
Hiring? Meet the Top 10 Freelance UI Designers for Hire in September 2017

Comments

Heiko Palawras
Great post! A historical post.
Julian Jorgensen
Well put. Thanks for posting this Michael. Cheers
Hannan Ali
Thanks for sharing the resources Michael! <3
Sérgio Oliveira
Hi Michael. Check out the Bondlayer editor at https://bondlayer.com - A visual editor capable of creating really advanced content driven websites (multilingual support, custom cms/collections, filters, sorts, search), and also capable of creating and deploying native apps for android and ios. Cheers
comments powered by Disqus
Subscribe
Free email updates
Get the latest content first.
No spam. Just great design posts.
Free email updates
Get the latest content first.
Thank you for subscribing!
Check your inbox to confirm subscription. You'll start receiving posts after you confirm.
Trending articles
Relevant Technologies
About the author
Michael Abehsera
Designer
Michael is a UI/UX designer and front-end developer originally from Israel and France. He specializes in designing landing pages and user interfaces. In addition, his background in marketing and data analysis helps him make better decisions in landing page designs and user interface construction.