@that_igor_ Subscribe
🎨

Design Stack

The design stack below is based on DesignOps — optimizing the design process that is simple and efficient for all parties — designers, developers, managers, etc.

Expand to understand DesignOps and why you should optimize your design process.

Some useful links to start:

image

Figma — collaborative designs

Figma is the go-to tool for design in any organization today. It allows you to prototype and build fully-featured designs based on components; share the progress, assets; build interactive mockups; collaborate with the team and review in real-time; and more.

The only downside of Figma is it's power — they have the tone of the functionality listed above. It makes your computer suffer from time to time. At the same time, Figma misses user testing and analytics features, but I believe they'll add some soon 😂.

Alternatives: Adobe XD seems to be the only one catching up Figma power today.

🤔

Back in the early days, Sketch was a decent competitor and a great tool for designs. The ecosystem was great and growing, plugins and great tools showed up, like InVision, Principle and Abstract. Today, unfortunately, I don't think that it worth investing in it. There are small chances the desktop app running exclusively on OS X will win the web competition. (but they're trying) But I think Sketch played a huge role in design process transformation. I appreciate it.

💡

Always build or use existing design systems for your products. Organize it to reflect easily in StoryBook for developers.

image

Zeplin — exporting & collaboration

Zeplin can be a great addition to Figma (or other design tool). But it's not something must-have.

It basically simplifies export and makes it even more accessible for the developers as it removes extra-noise from Figma files and allows to see style properties easily. It's convenient to store finalized version and style guides there to review with product managers and team.

image

ProtoPie — interactive animations

Interactive means you can animate how your app behaves on user interactions. Such as scroll, mouse click, drag etc.

There's no big leader in this area but our design team found ProtoPie to be pretty good.

Alternatives: Principle (it worked pretty impressive during Sketch era, now they've added Figma support too).

image

After Effects + Lottie — non-interactive animations

After Effects allows to build animations. Lottie allows you to export these animations and display them natively in a web or mobile environment.

image

Maze — user testing for designs

User testing is difficult. Difficult to configure, difficult to execute. I rarely see it's applied.

There's a good reason for it — you probably do not need a tool for testing at early stages and need it more for mature big products. For smaller products, you can do what doesn't scale and test designs synchronously with your users.

That's why there's no leaders in this area and everyone applies testing differently. However Maze seems to be the most perspective one. Use it with caution.

Check how we tested a mobile app designs during the MVP development phase.

Alternatives: UseBerry (similar to Maze), UserTesting (general-purpose testing on provided users panel — expensive).

image

Blender — 3D

3D strikes back and you can see it more and more used on websites today. I'm not really deep in it, but Blender seems to be the simplest and the most lightweight to start.

🔥 Spline — if you're into 3D you should definitely check out this new tool, It's still in Alpha and not stable but it looks like it's the future. You can create simple objects super easily and render them natively in a browser with WebGL (including interactions). We've created lightning for the accelerator site with Spline and it worked well. Also, check out SuperScene — great quality 3D bank.

BTW did you know how overhyped technology gets mature?