- Design: Sketch, Abstract, Craft, Invision, Invision Design System Manager, Photoshop, Illustrator, After Effects, 3ds Max, Maya, draw.io
- Documentation: Confluence
Read further to know how I use them through my process of design and development !
I’ve always been enthusiastic about learning new things and tried my hands on various techs built by the fantastic people out there. I believe it's important to understand why people are building new things and one must have a hands on to know what works for them.
My current tech stack includes the following
I always start it with the basics. A simple pencil, eraser and notebook are my goto things to start sketching the idea with low-fidelity wireframes.
Do you remember starting the CS classes back in the day with the simple flowcharts. I leverage this Google’s tool to create user flows. It’s really simple and effective, just drag-drop the components.
“Old Habits die hard !”
Let’s say some of this might be true in this case. Ever since I switched from Photoshop, our beloved first tool, for user interfaces I’ve created a knack for it. Not that I’m saying I don’t like the other tools in the market but I love the ease, speed, plugins and it’s hard to switch.
Organizing and collaborating on sketch files with the team has always been a pain in the ass.
With Abstract we could easily organize them and leverage the power of version control. As a developer, it was a treat to see Abstract built for designers which simplifies the Git into the key concepts and presents them in a GUI specially crafted for visual files. There is no other product with such a great user experience.
It’s true that Invision is actually a digital product design platform that powers the world’s best user experiences.
I use it for easy, fast and interactive prototyping. With craft, it’s really easy to add/modify the mock-ups in invision directly from sketch. It helps us to communicate, gather feedbacks and move the projects forward.
Earlier, I was using Zeplin to hand-off designs to developers, but with Inspect in invision, it is now even easier as same thing need not be done on two platforms. It provides them styleguides with accurate specs, assets and code snippets.
Also, we use the Design System Manager to maintain consistency within the team.
P.S. Our Sales team is in love with Invision.
Photoshop: I am pretty sure every designer has used Photoshop once in their lifetime. I used it for straight 8 years when I first entered this designing world as a kid. Even today, I use it sometimes to create photo manipulations, collages etc.
Illustrator: Even though there are many vector softwares out there, I believe it is the best for creating illustrations and infographics.With plugins, brushes available, it gives us a lot of tools to play around and manipulate vectors.
After Effects: I initially started using it to create VFX effects in real-life video footages (Yeah, I was amazed by Hollywood movies).My AE journey won’t be complete without this name - Videocopilot’s Andrew Kramer and his plugin Element 3d.
Later on I used it to create small motion graphics and with Airbnb’s Lottie, it was a cherry on the cake to reflect them in native applications or web apps.
I was also fascinated with the disney’s animated movies and tried to give a shot at 3d. I like 3ds Max over Maya or Blender as it had much easier user experiences and was way easy to learn than the later.
I started my development journey by creating static websites (like most of us did I guess).
As easy as it seems, CSS3 was initially a pain in the ass. How can one stick the goddamn footer to the bottom or vertically center a div. Thanks to the flexbox and now the grid, it becomes so much easier.
For preprocessors, I prefer SASS over LESS because of its resembles to SCSS in its syntax. It feels like writing CSS with the power of mixins, variables, nesting, includes etc.
A minimal webapp or dynamic website has no meaning without the scripting language.
I learnt the basics while a developing small utility webapp for my company. The syntax is very easy and one can run short scripts to manipulate data structures and create RESTful APIs. I am not sure about its viability in big projects as I am not much into backend development but I would choose python anyday over php to create small projects for its simplicity.
I use it to deploy my application on the server. It has both CLI and GUI which helps deploy the app real quick. Also, the documentation is really good and straightforward to help you deploy your first app.
I love the way how power of data can be leveraged by visualizations.(Who loves sheets anyway)
It helps to provide useful insights for decision making.
d3 provides a large number of visualizations with easy to understand JSON structures and also wrappers built for Angular, React etc. by the wonderful open source community for using in your application.
I learnt SVG SMIL to create animations for illustration purposes. Though it has been deprecated now in favour of the CSS animations but it was really easy to use with less calculations like in the case of later.
I love the <animateMotion> - which moves an element along a motion path which is really hard in case of CSS. CSS is catching up there but with a very limited browser support as of 2018.
I prefer it over the native mac terminal for its customizations, shortcuts, look and feel. Who wants to have that black boring screen when you can be a master of your own creation and also find existing templates FTW. And I highly recommend using Oh My Zsh. Trust me, you’ll love its features like git shortcuts or branches straight in your terminal for starters.
I use it for documenting the entire product process, design, features etc. With spaces and pages it is really easy to keep things managed with the team and get everyone on the same page.
And finally I’ve the Spotify macapp (not part of tech stack though) to help me create wonderful user experiences.