Published on <a href="https://blog.prototypr.io/game-of-clones-the-design-tool-battle-b183649afdd?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Boaz Lederer <img alt="" src="https://cdn-images-1.medium.com/max/1024/1*ns5nbrlR0UAP-DY7vOR_SA.jpeg">
I wrote <a href="https://medium.com/@aniboaz/prototyping-wars-c2fd614f1426">a while back</a> about the prototyping wars. now that 2017 is coming to an end, there is a continuing <a href="http://www.prototypr.io/prototyping-tools/">boom of products for designing user interface</a>. not to be confused with prototyping products, or UX solutions (<a href="https://uxtools.co/tools/design">wait what?</a>). Whats more, the grey area between high fidelity screen design and interactive prototyping is even thinner after almost every high fidelity UI design tool added (very basic) prototyping features.
However this time I want to look at it from a business point of view to try to guess what can we learn from all of them.
Although I am not in a position to of a business manager (but as a user of these programs), and don’t have viable data to confirm my assumptions. I suggest to ask the strategy and goals so I can perfect these qualities as a product designer.
<img alt="" src="https://cdn-images-1.medium.com/max/561/1*uF_5KcxvZnT8CAWJdeMExA.jpeg">
<h3>Sketch the revolutionary</h3>
Though it now seem self evident, before 2010 saying that a small group of creators from Hague will beat Adobe would have been imaginative. However, in a couple of years Sketch did became the <a href="https://avocode.com/design-report-2016/">dominant tool for ui designers</a>.
The seven year run that sketch made from a <a href="https://web.archive.org/web/20110711125106/http://www.bohemiancoding.com/about/blog/sketch-1-0-finally-released/">modest web-oriented vector tool</a>, to a User interface (/High fidelaity prototyping) is alot to cover, So I want to try to cover what they did right from a product point of view.
What can we learn from bohemian about product strategy and design?
<img alt="" src="https://cdn-images-1.medium.com/max/1000/0*zcskWO111i3Ffsvc.jpg">
<h4>Creating a blue sea</h4>
When Sketch was first created it filled a massive void. when it first appeared the majority of UI designers worked with Photoshop, basically meaning that they abused a raster image tool to design for the web. this created several severe problems:
<ul>
<li>lousy text editing</li>
<li>vector based friction</li>
<li>Handoff gap</li>
<li>limited canvas</li>
<li>lousy UX</li>
</ul>
The first friction was the handoff gap. This was originally considered a matter of translating design to code a avocode , but sketch realized that a <a href="https://uxdesign.cc/mirrored-atomicity-ui-and-front-end-speaking-the-same-language-3ac5c2fe382b">development logic</a> program would also benefit the designers. this means that developer workflow is closer to the designer workflow.
Vector based software friction: sketch entroduced endless canvas and artboards, responsive design meant designing in one-size(bitmap) was not suitable for the design use-case and acted as a catalyst.
As its name suggests, Photoshop was never meant to deal with large amounts of text — one of the cornerstones of Ui . Another pain-point in designing web or UI is repetitive objects and patterns in mobile but also in development. This was a pain long before e design system became a thing.
Answering a problem people didn’t know existed. Bohemian made their own market, creating the tool for UI design. the most important thing to understand here is that Sketch basically created a new market because they defined a neglected need — of UI design.
Worth noting that history favored sketch because of mobile. many of the features listed including infinate canvas, vector based or easy exporting, answered needs for a program that launched in parallel of the iphones and mobile revolution.
<h4>The power of community</h4>
If you worked with sketch you can’t really imagine it without Plugins. Sketch made it apparently very simple to code plugins which encouraged developers and designers to add powerful features.
eventually sketch took this further when they <a href="https://medium.com/think-big-work-smart/sketch-43-this-changes-everything-8aff8438cf80">opened up their file-system</a>. Though I don’t have data to back me up here, I believe this move, increased and encouraged plugin developers to push limits and develop even bigger flexible plugins.
Earning fan-base and users by being free and recently adding a modest payment for updates. the design community had a lot to do with adopting sketch as a standard.
<h4>Defining what your NOT</h4>
The big lesson here, and I cant stress this enough, is to focus on the problem your solving, and not a set of features your adding. Just see <a href="https://www.digitalartsonline.co.uk/reviews/interactive-design/bohemian-coding-sketch-2-review/">this review comparing sketch against “fireworks”</a> and listing in cons — “Can’t share styles; no symbols;” against “ Easy to use; fits in well with web designer-centric workflow”. So when it started out sketch was a slim featured program, but won some hearts non the less. Of course today sketch offers more and more, but some big issues are still getting a resilient “no”.
<ul>
<li>Not on WIN or Linux. <a href="https://www.designernews.co/comments/114810">probably because it was coded</a> and based on mac tech to run.</li>
<li>No hand-off solving: though sketch did introduce sketch cloud and several export features. most of the solution to export to code are still external (including open-source plugins).</li>
</ul>
This one is interesting because, other tools like <a href="http://macaw.co/">Macaw </a>or Fireworks who targeted “exporting to html” didn’t succeed among designers, not just because of bad ux but because they tried to take care of the “code-production” part. Sketch is for designers and set its modest goals to (initially) just take care of their end of the deal.
Not firing on all fronts means your not competing against 30 players (that solve design to HTML, animation, rastor image edit, print design) but only the 3 that solve high def UI design. this meant that some hand-off related solutions actually <a href="https://www.switchtosketchapp.com">joined in with sketch</a> instead of competing against it.
It also might have helped bohemian coding to be an underdog, serving the program initially cheap, up against Adobe. and they are still only 28 employees(?)
<h4>Keep your eye on the ball</h4>
That said, updates like libraries and open-files means bohemian have a clear roadmap and vision but also are probably aware of changes and current challenges.
A good example is <a href="https://blog.sketchapp.com/sketch-3-7-and-new-symbols-d833a5be4027">smart symbols last year.</a> They lately updated the “Library “ option which allows designers to work in a manner consistent with one living design system.
Change comes in many forms and bohemian coding also made big call <a href="https://blog.sketchapp.com/versioning-licensing-and-sketch-4-0-8ad98783e9ba">changing to a paid license model</a>. so the trend here suggests that soon enough sketch will align to other UI design programs, and change the “no” policy to include more features. The main reason for this is all the fresh new players.
<h3>Figma ~ the distruptor</h3>
<img alt="" src="https://cdn-images-1.medium.com/max/538/1*gnhky8zPWfEW9oh_XmmnFg.jpeg">
there are a lot of new players coming in to claim the throne following sketch’s rise to the top. During the writing of this article even invision, one of the most supporting partners of sketch, announced their <a href="https://www.invisionapp.com/studio">own solution</a>. (probably to become an Independent “all-in-one” solution).
So now ill say why my money is on Figma as the next sketch. not just because its a leader(set the rules for the others), but because I think its unique. Figma’s strategy is its purposely distruptive. the speed of development is<a href="https://blog.figma.com/reflecting-on-figmas-first-year-5a76eccdf30a"> really impressive </a>this just in 3 years since launching in 2015. but some of its key differences from Sketch tell us alot about what changed in terms of designers expectations as well.
<h4>Saas with speed</h4>
From inception figma challenged the rules of the game by betting on a <a href="https://blog.figma.com/design-meet-the-internet-4140774f2872">browser based solution. </a>to most designers this seemed wrong — we&#8217;re used to thinking we need big hardware to run graphics. but younger designers who work with web 2.0 see no reason for this.
<img alt="" src="https://cdn-images-1.medium.com/proxy/1*hvX2oyr8oLjRnb4gQzihJQ.gif">
<h4>Realtime collaboration</h4>
One of the big advantages of being a cloud based was a real innovation in terms of interface design — realtime collaboration. its also a recognition that designers work in teams and have different needs that sketch, probably is less suited for.
Figma (like framer) defined collaboration, prototyping, sharing and handoff as part of the designer workflow, and as such, provide a solution for many needs.
<h4>All in one</h4>
the direct opposite of what I wrote about sketch, but in the gap between 2008–2018 thats probably a gap in customers expectations.
today, before buying or trying a program UI designers come with a long checklist of needs in order to migrate. that’s why this is a good strategy to grow, in my opinion.
this means many of figma’s features arent necessarily design related but solve other work problems like managing versions, collaborations, or even project management. this also means that the users of figma will not be exclusively designers. It will be interesting to see how much features will remain out of scope and the level of integrations that we designers love. In my opinion their only missing advanced prototyping and animation editing and they have a full-house.
<h4>Innovative design</h4>
This one goes to Sketch, since its one ugly UI piece of program. (the success of sketch despite its ugly interface is also a good example of why UX is more important than UI). Seriously: if your a UI program your supposed to look like the future — and that’s how figma looks.
So why is this important also from a business perspective? because part of being adopted by the design community means good looking UI. Thats one of the reasons why <a href="https://medium.com/@mengto/figma-vs-sketch-c01e5e74eddd">Meng To loved it</a>
<h4>Runners up</h4>
Framer a prototyping code library which made its way to being an end to end design tool(mostly for mobile), looks very interesting and similar in the approach of an all-in-one solution. the big advantage of framer is its roots — making it ideal for rapid animation prototyping and having a code ready to ship. I would have written more but somebody <a href="https://blog.prototypr.io/unwrapping-the-new-framer-397a1477d58c?source=linkShare-24b8d2a79cc7-1513885638">already did</a>
I’ll keep an eye out for Invision as well.
<img alt="" src="https://cdn-images-1.medium.com/max/774/1*0uvY9qgW7jvsJ9MOs16dng.jpeg">
<h3>Why Photoshop is still king</h3>
My view on the battle between photoshop Vs. sketch is that Phtoshop wasnt ever in the battle. If any it was Fireworks that <a href="http://productgraveyard.com/products/fireworks.html">died and bled in the field</a>.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/0*NESpxRH65g8D7sX9.jpg">the layout for every graphic program ever.
The starting point of any comparison of photoshop to anything is unfair, I can easily name a few advantages
<ul>
<li>Photoshop exist for more than 20 years</li>
<li>Photoshopping is a verb.</li>
<li>photoshop is still used for: image enhancements, print design, web, animation and what not.</li>
<li>The layout that’s a standard</li>
<li>You use it even <a href="https://photoshopfordesignerswhodontusephotoshop.com/">when you dont</a></li>
</ul>
On top of all of these traits, you can use this today to design UI (although it’s still a bad idea) and get away with it. And about half of the design world still does. The fact that it’s considered difficult to learn and the high pricing tag still doesn’t tickle Adobe’s flagship enough.
In terms of innovation: you cant really say that nothing is improving either. Adobe manages to add powerful new features (one or two) that keeps Photoshop in line with a variety of other solutions, like mobile competition. plus some of the examples I talked about started with Photoshop: remember all that “open-source” sketch moves like its awesome plugins? that was <a href="https://en.wikipedia.org/wiki/Photoshop_plugin#History">Photoshop actions</a>.
<h4>keeping up with the new guys</h4>
Adobe’s approach can teach us some lessons in the challenges enterprise companies have with new competition.
Adobe tested out several options to include<a href="https://medium.com/photoshop/introducing-export-options-for-photoshop-7e8b58207150"> UI design within photoshop</a> before finally caving in and launching a sketch-clone named “adobe XD” as a (free for cc users) Beta product.
They also developed brackets an open source IDE that would deal with the handoff gap.
<img alt="" src="https://cdn-images-1.medium.com/max/798/0*RuDaumIeO6iPTfHL.gif">adobe XD added some powerful features towards the launch.
Initially, as a designer, I was constantly disappointed by XD. as a windows user I wanted it to succeed but keep in mind the playing field was pretty heavy by the time it got out as beta and not being able to even copy paste(off photoshop) or see layers got me off the wagon. I can say that from appearance the <a href="https://techcrunch.com/2017/10/18/adobe-xd-designing-at-the-speed-of-thought/">launch of the product</a> along with recent updates can pose a real threat to any other competition.
its also apparent that Adobe learned from sketch to <a href="https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests">learn and grow</a> from the user-base. Though I cant say I know where this is going yet.
<h3>conclusion</h3>
Will 2018 be the year that design tool finally conclude the race, probably not. I think its an interesting time to write about it, since the competition is now pretty tight. after firing the first few shots, the new goal seem to be solving every designers problems with one product. It seems that you cant really tell each one apart of the other. each new feature echos in updates of all sides. I personally believe that an end result of 4 very different tools will benefit the users best.
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=b183649afdd" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/game-of-clones-the-design-tool-battle-b183649afdd">Game Of Clones: The design tool battle</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Game Of Clones: The design tool battle

Top Stories