Communicating visually is key to success when managing projects within the realm of mobile and web development. Nobody wants to read and re-read paragraphs upon paragraphs when the answer often lies between the lines. Preemptively communicating with visuals avoids back-and-forth emails when it comes to application development and the net result is efficiency.  There are a multitude of mechanisms out there to use as a means of making yourself clear with visual assets. Below are a few visual communication tools that have revolutionized my processes as a Project Manager.

Animated Gifs

When it comes to documenting feedback on interactions, features or the occasional bug, Animated Gifs have become my very best friends. Rather than going through the process of writing out all of the steps to reproduce an interaction to get the other party up to speed for discussion, use an application like LICEcap (gross name, awesome tool) to quickly create an animated gif capturing the interaction you want to address with your team. LICEcap is super easy to use, it gives you a frame to snap the gifs within from your desktop; for detailed instructions click here. Perform the steps you took to reproduce the interaction, capture the URLs and voila, no guess work involved in the communication process regarding the interaction in question. You can capture entire workflows with this process; however, since animated gifs are just images (no audio) it makes sense to keep these short when possible. The files can be quite cumbersome in size, even when short, so I recommend uploading your animated gif to an application like Imgur to create a link to share and ditch the large gif file afterwards.

Annotated Screenshots

Screenshots are incredibly helpful tools for communicating visually with your team and annotated screenshots are even better! Receiving a screenshot with no description can be as befuddling as receiving paragraphs upon paragraphs explaining something that can be captured in a single screenshot. Annotated screenshots are really the best of both worlds. Evernote’s Skitch allows you to take screenshots directly from the application (or upload existing files) and write, point, draw exactly what it is that you are trying to communicate on the image. Once you’ve got the screenshot all marked up you can generate a link to share the annotated image.

Flowcharts and Diagrams

When planning an important sprint, launch, or phase of a project I find that creating a flowchart or diagram provides visible organization and is extremely easy to digest the overarching goals on a team level. Lucid Charts is my favorite tool for mapping out information architectures, feature relationships, timelines, dependencies and goals. This tool can also be used for rapid prototyping and has some cool features for capturing interactions with their concept of “Hotspots”.

Wireframes

There are so many wireframing tools and therefore, so may opinions but my personal go-to is Balsamiq Mockups. This product is so incredibly user friendly and the cartoonish aesthetic allows stakeholders to focus on funcitonality and basic layout without getting too hung up on the UI. If you are looking for hi-fi, pixel perfect, polished mockups then Balsamiq is not the tool for you. If you work on the technical side of projects and just need to clearly and efficiently communicate how a feature will work on the client side then Balsamiq is an excellent choice.

There can be no words without images.
– Aristotle