@that_igor_ Build Momentum
🎨

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.

10+ years ago when there weren't any convenient tools for design, designers used to work in Photoshop files. Then once the page or project is done it is sent for review. In order to open it, the reviewer had to has Photoshop installed on their computer and they needed to understand photoshop basics in order to review it. Once reviewed they've sent a tone of comments back to the designer, which brought them back to the photoshop file. After few painful iterations, the file was finally sent to the developer.

Developers ideally needed Photoshop installed on their machine too. But developers love Linux (well-deserved) and Linux does not support Photoshop. So they rather installed VirtualBox or communicate with the designer back and forth to cut needed assets (images, dimensions etc.). And when they finally exported some asset, it often was done incorrectly due to lack of photoshop knowledge. So implemented layout was different from the approved designs.

The steps above went on-and-on. Supporting the changes was a great mess too because the implementation was different from layout and the process was so cumbersome.

It caused huge friction and depend on many things: people involved, their communications, skills, time to install and upgrade software etc.

DesignOps means getting rid of as much friction as possible to let people enjoy the process and give them tools to support.

👊🏼 Fight friction.

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?
image

Think 3D or Bitcoin back in 2017. Or no-code 😏.