The design stack below is based on DesignOps — optimizing the design process that is simple and efficient for all parties — designers, developers, managers, etc.
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:
- Practical Typography — simple and important practices related to typography
- Can't Unsee — pretty old but still cool design UI/UX test
- Victor Ponamariov Twitter — UI/UX tips.
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.
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.
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).
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.
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.
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.
The same way I'm climbing Dunning-Kruger curve.
Think 3D or Bitcoin back in 2017. Or no-code 😏.