The design stack below is based on DesignOps — optimizing the design process that is simple and efficient for all parties — designers, developers, managers, etc.
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.
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.
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.