In this article I want to focus on the best tools and resources that you will need when you start out to create a digital product.

Especially if your background is industrial design or architecture, you might not be familiar with all the tools, so this article is for YOU.

 

This article is the second part of a 3 series. Checkout the other article where I cover essential tools for all designers and tools to create physical products:

Part I: The Most Essential Tools And Resources For Every Designer

Part III: The Best Tools and Resources To Create Physical Products

 

There are a lot of tools for digital product designers on the market now and the list is growing steadily.

In fact, it has never been a better time to be a digital product designer because our world becomes more and more digital.

Nevertheless, many tools are still in their infancies and there is no tool available yet that covers the entire workflow of creating a digital product.

The market is pretty fragmented and you need different tools for different tasks.

Keep in mind that this article will not cover the entire process of developing software but rather gives you a selection of solid tools to get started.

As mentioned before, there are so many out there but the most important thing for creative entrepreneurs is to get the job done. Don’t lose yourself in all the tools. If a tool gets the job done for you, stick to it and “never change a running system”.

Before getting started, I want you to keep a couple if things in mind when it comes to digital products:

  • Software will not be perfect the first time so don't waste time perfecting it
  • the beauty of software is that you can always update it
  • Design and Prototype fast -> Then Iterate and improve
  • Developing a standalone app can be done pretty fast, but creating multi platform apps and web services is very complex
  • If you want to develop your own digital product, get familiar first how software is developed and understand the constraints of the required technologies (checkout this podcast: Bootstrapping a Startup with Nathan Barry and this How to Build a Software Business with No Coding, No Money, and No Ideas)

inspiration

Communities

These are my go-to sources whenever I need inspiration for visual design. It is great to copy from others for learning purpose, but never lose yourself in just copying and applying blindly without understanding the context.

Dribbble – An invite-based design community and show room for digital design snippets.

Behance  – A design community by adobe. Very talented people who show off their latest projects here.

Pinterest – A Virtual Pinboard – My #1 resource to find inspiration in ANY field

LogoPond – A massive resource to get inspiration for your brand identity

 

 

Libraries

Useful libraries with interaction and visual patterns.

Pttrns – Most up to date mobile pattern library for iOS & Android

Littlebigdetails – A treasure for micro interactions

Patterntap – A Library for Mobile & Web Patterns by Zurb

Subtle Patterns – A wonderful background pattern Library

Siteinspire – A great website gallery -> Find inspiration for any kind of website

Onepage – Best resource if you need inspiration for a one page product website

Adobe Kuler – If your are unsure about a color selection, this tool will come in handy.

 

UI Guidelines:

If you want to create a mobile application for Android or iOS, you won’t get around taking a look at these. Google and Apple did a great job in documentation how things should look and feel to offer the best user experience for the users.

Google Material Design – A necessary place if you want to design Android Apps

iOS Design Guidelines – Learn how to design apps for iOS

Design

Design Apps

Sketch App

The best vector based tool for designing digital products, gaining great market share from photoshop and illustrator.
What you can do with it:

  • design screens for all platforms (iOS, Android, Web)
  • design sophisticated vector graphics (multiple effect layers)
  • export assets for all platforms quick and easy
  • supports prototyping tools such as Framer, Flinto, Principle or Invision
  • great Community with loads of free content

 

Sketch Mirror – Preview your designs from sketch on your iPhone.

 

Crystal – Preview your designs from sketch on your Android Phone.

 

 

Adobe Creative Suite

As a serious designer, you won’t get around the Creative Suite. If you are a hardcore graphic designer and need to design more complex Vector graphics or edit photos, you will rely on Illustrator and Photoshop.

 

Resources

Sketch App Resources – A huge library of sketch templates so you don’t need to design standard elements for iOS or Android yourself.

TheNounProject – Find Icons for EVERYTHING

Iconmonstr – Another fantastic free icon library

prototyping

Pop App

Still my go-to tool when it comes to fast prototyping.
Before jumping into digital design tools such as Sketch, you can use this app to quickly prototype the interaction of your app. You just take a picture of your drawing and create click areas to connect the screens. Pretty straight forward. Saves time and money.

 

Keynote

Hardly underestimated but very powerful. Every mac comes equipped with this useful tool by default. You can quickly prototype animations using “magic move” and export as a video to gather feedback.
Checkout this video how google material design was prototyped in keynote:

Watch the video: Click

Download the Keynote File to learn from: Download

 

Principle

Use principle to design micro interactions. Principle is not made for complex flows but rather exploring animations of elements and screen transitions. If you have a very complex app with many screens, the following tools will be more useful.

 

Flinto

Flinto makes more sense if you want to prototype a flow for an entire app and see how screens are connected. I personally use this one a lot.

 

Invision

Create click prototypes for web and mobile applications and test bigger flows. You can use it for free if you have only one prototype, but after that it turns into a subscription based tool. Very helpful is the feedback feature if you work in a team.

 

 

Framer

Only recommended for advanced users who are not afraid of learning how to code (coffeescript)
For newcomers probably not necessary but I want to mention it anyway.
Framer works with code, so you can do all the things you can’t do with the other tools:

  • native feeling
  • precise control over animations / transitions
  • can make use of real data
  • connect with APIs

Framer has a strong community and loads of resources you can learn from:
Checkout Examples: See Prototypes 
Learn the basics: Learn Framer 

 

Framer Preview  – Preview your prototypes on iPhone and Android.

development

Calculating Costs

Here are some resources that help you to understand better how much it takes to create an App. The numbers should give you a good starting point but keep in mind that it of course depends on the complexity of your product.

App Cost Calculator

How much does an App cost

 

Build a team

If you don’t want to develop the product yourself, you need to hire people who can create the software for you. Here are a few resources where you can hire people from:

Upwork 

Freelancer 

Fiverr

 

Project Management

Trello – A great tool to keep track of tasks

Teamweek – pretty simple program management tool

 

Communication

Slack – Instant communication tool for the team

Zeplin – Hand off your designs to developers easily – Free for 1 Project

Avocode – Zeplin alternative

Sympli –  Another alternative to Zeplin and Avocode – Free for 1 Project