Essential Tools for Designing your Live Video Application

You already know that TokBox makes coding live video easy, but we want to help you with the next step: to choose the best programs and tools for designing a solid UI and UX. The right tools can and will save you time and money.

On the TokBox Design Team, we work to craft the best experiences for all kinds of video apps. After many tests, from the planning stage to the handing over of assets, we have chosen these as our essential tools for designing a live video app.

1. Planning

The planning stage is crucial for any project; besides sketching functionalities, everyone needs to agree on requirements and responsibilities. In this brainstorming step, the best tools are the ones that allow easy sharing and collaboration. For scope planning, time visualization is critical.


Google Docs

Tools for designing Google docs

There’s a good reason why Google Docs is so popular. Live editing, tagging, and availability on all devices are the standout features that make us love it so much. Plus, it brings advantages of the Google ecosystem integrations.

Star Feature: Accessible everywhere.

Dropbox Paper

tools for designing dropbox paper

Dropbox Paper has all the same features as Google Docs and more. It allows attachment preview, code block rendering, gif visualization and pinpointed comments on images. It also accepts emojis, if that’s your thing.

Star Feature: Automatic image grid generation.



tools for designing Monday

Monday is a team management software based on ticket creation that allows for a quick view of timeline, status, and project priorities. It is simple but effective.

Star Feature: Timeline view.


tools for designing JIRA

Jira shares many features with Monday, with some extra things as well. In fact, there are so many customizable pieces that using it can be confusing. No doubt it’s strongest feature is the Atlassian ecosystem; if you already use Confluence, Stride, or Trello, Jira allows for some quick and easy integrations.

Star Feature: a wealth of integrations.

Google Sheets

tools for designing google sheets

If any of the above options overwhelmed you, a simple spreadsheet is still a great option for time management. Free Gant Charts templates can make it all even quicker.

Star Feature: Customizability and easy of use.

2. Creating

Now that you know where you are going, it’s time to put pen to paper and get creating. Here, the critical feature to look for is a versatile tool that can support exploration of a wide range of ideas, all in one place.


tools for designing Sketch

Sketch is a newcomer that’s taking Photoshop’s crown in the UX world because of its intuitive, fast and light performance. It’s the go-to for interface design, which means that many integrations, and resources are available. The only downside is that it’s only available for Mac.

Star Feature: Quick and customizable export system.


tools for designing Photoshop

Still the best for heavy image treatments and photo manipulation. You can do some app design on it too, but we wouldn’t recommend it.

Star Feature: Layering of effects.


tools for designing Illustrator

Although sketch can handle vectors pretty well most of the time, there are still some things that still just Illustrator can do. If you need to create isometric icons, this is the best tool for designing them around.

Star Feature: Outline preview.

3. Testing

Successful ideas incorporate feedback from field experts and target audiences. While sharing PDFs and single images can be useful, proper testing tools allow your reviewers to compare many screens at once, pinpoint specific information and give live responses.


tools for designing InVision

With simple page to page linking, or complex state animations, the Invision ecosystem lets you share your app in a realistic way. Besides sending links, you can also watch live test, or record for later analysis. Invision is great for testing UX.

Star Feature: Easy page linking.


tools for designing Freehand

Also from Invision, Freehand is a collaborative whiteboarding tool. After importing your designs with a plug-in from Photoshop or Sketch, you can see all your artboards at once, follow someone’s mouse view or live doodle on top of everything. It’s great for discussing UI refinements.

Star Feature: Live doodles!


tools for designing ConceptBoard

Conceptboard has the same features as Freehand, although it lacks direct file import. A great plus from this platform is the built-in live video chat; no need for other conferencing tools in the background. And you know we love live video chat!

Star Feature: Built-in video chat.


tools for designing Respondent

Respondent is a platform that connects you to potential testers. It differs from other services by the quality of the respondents. Their detailed profiles allow you to find a very close target audience.

Star Feature: Reliable quality testers.

4. Handing over

After significant time, energy and effort perfecting the design, you’ll want the building phase to go as painless and fast as possible. These tools let you grab CSS directly from your elements. No spec doc required anymore.


tools for designing Zeplin

Zeplin allows you to import files from sketch and automatically creates CSS, style guides, and exportable assets in one place. The folder organization system is also a plus.

Star Feature: Automatic spacing calculations from one element to another.

InVision Inspector View

tools for designing Invision Inspector View

Inspector does the same things as Zeplin, but with exportable assets. It’s biggest advantage is the InVision ecosystem.

Star Feature: Do everything in just one program.

So there you have it – our essential list of tools for designing your live video to perfection and getting it ready to launch. This list is always evolving as new tools emerge and develop to make the design process even easier.

For more Design advice for live video, check out our guide to some key features for designing a video conferencing app. And keep an eye out for more posts from the Design Team, coming soon…