11

From Adobe Fireworks to Protopie

 3 years ago
source link: https://uxplanet.org/from-adobe-fireworks-to-protopie-d119bf33a111
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Image for post
Image for post

From Adobe Fireworks to Protopie

Some of us remember Fireworks, the first tool I used to create a clickable prototype. However, while Adobe was focusing on its cash cows (Photoshop, Illustrator, InDesign, Flash) for years, user experience (UX) designers started to use Sketch around 2013–2014. At that time, I was creating prototypes in Axure RP and occasionally Illustrator for wireframes and basic illustrations. Given the power of these software packages, I was not impressed with Sketch initially. It looked simple with a limited set of features.

Image for post
Image for post
Screenshot of Fireworks

However, Sketch has come a long way and eventually became the standard software for user interface (UI) design. For a while, InVision was used in combination with Sketch, but InVision (Studio) didn’t quite make the cut in the end.

Image for post
Image for post

Sketch is Made for User Interface Design

Unlike Illustrator, which was created in 1985, Sketch was launched 25 years later. An enormous difference in age, especially in terms of digital design.

Unlike Illustrator, which is the go-to tool for logos, illustrations, and vector-based art in general, Sketch always focused on UI design. Every feature is meant to help the user produce a design that can be developed.

This is the biggest difference between an application like Adobe Illustrator where pretty much everything goes, and Sketch, which is careful with implementing features given their focus on UI design.

Illustrator Works With Other Adobe Software

Before we start comparing Sketch with Adobe XD, it’s worth mentioning that Illustrator can (somewhat) work together with software like Adobe After Effects, which allows the production of complex animations. In addition to After Effects, Adobe recently brought Animate to the market as well.

Unfortunately, Sketch doesn’t have the advantage of importing files and designs into After Effects. You could potentially import your Sketch illustrations into Illustrator and go from there. However, this can be a bit of a hassle.

Image for post
Image for post

Illustrator is a Tool for Complex Illustrations

Sketch has evolved over the years, offering a lot more features today than it did a few years ago, and has a great user interface. In fact, it could potentially be used for illustrations as well and sometimes comes really close to Illustrator.

However, the set of features that Illustrators offers is still miles ahead of Sketch. This is mainly because it doesn’t focus on UI design per se. Remember that every feature in Sketch has to be implementable by developers. When it comes to creating logos or detailed illustrations, you go for Illustrator, which gives you complete freedom.

Compare Sketch with XD

A more comparable application for Sketch is Adobe XD. Unlike Sketch, XD offers more flexibility when it comes to prototyping. Although it’s not at the same level as Axure RP for example, it does offer unique features such as controlling a prototype with a game controller.

Both are meant for UI design and, to a limited extent, prototyping. However, after years of working with Sketch, I still tend to fire up Sketch for most design tasks.

Image for post
Image for post

As UX and UI Designer we Have Become Spoiled With Software

Sketch is more powerful than ever before, Adobe is working its way into the field of UX design, and we also have more choices in terms of design software than ever before. Protopie, Figma, Sketch, Adobe XD, and Framer X are probably the most powerful prototyping tools at the moment. But these are just a few of the applications that designers can use.

Voice Prototyping as Part of Multimodal Design

If you want to build a conversational experience, you’d pick Voiceflow, which is focused on building voice user interfaces (VUIs) and conversational design in general. However, to a limited extent, Adobe XD and ProtoPie have voice command and playback features available as well.

Image for post
Image for post

Dynamic Panels and Variables

After using Fireworks and Illustrator almost a decade ago, I switched to Axure RP. Some of its strongest features were dynamic panels and variables. It took years for other software packages, except Just In Mind, to provide similar options, such as text input fields. Axure RP pioneered many of the concepts that we use in prototyping software, such as Figma and ProtoPie, today.

Image for post
Image for post

Which Software to Use

I’m very impressed with Protopie for UI design and the speed at which you can put together a prototype. Since most of us have a subscription to Adobe CC, Adobe XD holds a strong advantage. If they keep releasing key features, such as variables, XD could become incredibly powerful. Figma is definitely worth mentioning as well. It has a loyal and large user base and plenty of solid plug-ins.

We mentioned most modern UX design software packages, however, if you want full flexibility and almost limitless options, you might want to pick up Framer X or Origami. It should be noted, however, that these have steep learning curves and we should not forget that UX prototyping is about speed and illustrating and validating concepts.

Purely based on my experience, since I’ve worked with most tool mentioned in this article, I will give a short overview of my top picks:

  • Adobe XD: I work a lot with XD because of its speed of delivery, plug-in section, simplicity, and auto-animate.
  • Sketch: After using Sketch for years, at agencies and large enterprises, Sketch has basically become my go-to tool when it comes to design, even for simple illustrations.
  • ProtoPie: This might become one of my favourite design tools of all. It offers variables, voice prototyping features, interactions, and much more.
  • Axure RP: unlike many of the other tools, Axure RP stands for rapid prototyping and should be used for this purpose. Even though it’s capable of creating high-end user interfaces, it’s strength is churning out dynamic prototypes at a fast pace. A perfect for early testing and creating concepts.
  • Figma (worth mentioning): I have to admit that my experience with Figma is not up to date. I hear good things about Figma and its plug-ins, but I’d have to give this one another go.
  • Framer (worth mentioning): As mentioned before, a steep learning curve, but you can do pretty much everything with Framer since you can dig into the code and create extremely complex and high-fidelity working prototypes.

We came a long way from Flash and Fireworks, or even Excel, which, believe it or not, was used to create very early prototypes.


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK