Running an early startup is tough, as a Founder, you are the designer, engineer, and maker. Learning these 4 tools will certainly speed up app development!

Everyone knows that running a startup is tough. Being a founder of an early startup, you need to handle everything yourself. You are the engineer, developer, and maker at least until you raise enough money to hire or get a co-founder to help you.

Starting a company is like eating glass and staring into the abyss. - Elon Musk

Important tools to master

The good thing is that things have changed. With the improved in technology and better tools and product around, you can actually speed up app development and build an MVP in a shorter time.

1. Sketch — For Designing

The most common use tools for Designer who use Mac now are certainly Sketch! Sketch utilize a fully vector-based workflow. This means that everything that is created can be scale up and down at the best quality. You no longer have to worry about the exact required resolution.

using symbols in Sketch

Sketch Symbol is the next best thing. It allows the elements to be reused easily across different Artboards and Pages. You no longer have to copy and paste similar design and face the frustration of changing it one by one ever again. With Symbol, changing it at the Symbol Artboard would also update all the Symbol that is used everywhere else.

Sketch has many other useful features, but for a start, understanding Artboards, Pages and Symbol will save you a lot of time than to fix it later. The great thing about Sketch include the learning docs and free videos that to help speed up your learning process. The community and help out there is also amazing, I have never failed to solve anything when I googled it.

2. Zeplin — For styleguide and generate code snippets

Zeplin provide style guide that aid developers

Zeplin provide all the details that developer need when creating an app. It provides the colors used, the dimension required, the spacing between the item and also the ability to download assets when done correctly. At the start of the year, it also added links support to allow navigating to different screens on Zeplin.

With the Zeplin Extension, you can easily generate and download code snippet that can be imported directly to Xcode. What most people didn’t know is that you can actually add these colors to an assert catalog that can be used in Xcode Storyboard.

Zeplin extensions that could generate styling code snippets

Whats amazing is that you do not need many extra works. With Zeplin Sketch Plugin, you can easily generate all these automatically. Start with Design > Export to Zeplin > Export code snippets > Import to Xcode/Android Studio.

3. InVision — For prototyping and demo

Before starting to code, most of the time you like to look at how the app feels. Navigate around to feel how the experience is like and if everything makes sense together. With InVision, you can do just that.

creating prototype with InVision

You can either use a Craft, a Sketch Plugin to sync the screen to InVision or export the Images and Upload it via the web. Once on InVision Prototype, you can mark out a rectangle that could navigate to another screen. If you work with someone else, they can also mark out the different part of the screen to leave comments.

When everything is done, you can actually send out SMSes to friends or potential users to try out the latest design. They can click around and navigate the prototype like an actual app. The only different is that it is all predefined data and is not connected to any backend to fetch or update data.

Try out this Sketch Demo Prototype and you will understand!

4. Postman — For API Integration and Mock Server

Finally, you have validated the design and are ready to start developing an app now. An app usually required API integration to a backend service. If you are building everything yourself this will take sometime before a backend service is ready. Even if you hire someone to work on it simultaneously, discussion and documentation need to be drawn out as a contract for the integration to work seamlessly later.

With Postman, you can actually start creating a mock server first. It acts exactly like a backend service, and return you with the exact responses when an API endpoint is requested. The frontend can start integrating all designed endpoints with Postman Mock Server. Once the backend is ready, all we have to do is just update the URL to the one provided by our backend service.

generate api code snippets with Postman

On top of that, you can also make uses of the generate code snippets function to speed up app development. It provides many different programming languages with snippets that work directly with the API Endpoint created on Postman.

Conclusion

Mastering them to a professional level and to have them do things at your will might be difficult. But mastering just 20% can actually boost 80% of your productivity.

These tools are also commonly used by designer and developers. Understanding enough of it will aid you in communication with your future designer and developers.

Thanks for reading!

In the day, I am a technical product lead. At night, I am a maker, engineer, and designer. I enjoy learning and building new things about tech, products, and startup. You can find me on Twitter.