Join DeveloperTown in supporting the American Diabetes Association’s #IndianaTourdeCure on August 10, 2019 LEARN MOREx

The 3 Most Impactful Design Tools

Lauren Ludwig • Jan 07, 2016

AT DEVELOPERTOWN

Our design and development teams have chosen our favorite design tools based on the positive impact they have had on our process over the past year. These tools have made us better designers and developers and help us deliver better software products. We are pumped to share our list and the stories that tell why.

At DeveloperTown, we do everything in-house, pun totally intended. Yes, this means developers actually work with the designers and see each other every day. Crazy, we know. That’s what makes our designs stand out from concept into the market. In order to work efficiently and effectively, we have found some of the most useful design tools available and figured out how to use them in collaboration with our development better-half. So here they are, starting with our number one pick:


ZEPLIN

https://zeplin.io/


Oh how we LOVE Zeplin! Zeplin is an important collaboration tool for us at DeveloperTown. Our designers and developers are able to work closely and efficiently together. Designers are able to upload their designs and make comments for the developers. The developers are then able to see the specific colors, dimensions and assets all in the Zeplin viewer. It’s more straight to the point for developers, as it automatically creates the style guides for the designs. It saves so much time by removing a lot of the back and forth between designers and developers. Oh, did we mention that any updates to the designs are automatically reflected in Zeplin for the developers? How cool is that?


Marc Labranche, a developer at DeveloperTown, is a huge fan of the automatic updates feature. He likes the time it saves, and for someone who had never actually worked directly with designers before, this tool has helped him ease into the process.


ZEPLIN MAKES IT EASIER FOR ME TO WORK AT MY OWN PACE AND NOT BOTHER ANYONE, ESPECIALLY WHEN I AM WORKING ON THE WEEKENDS OR OUTSIDE OF OFFICE HOURS.

Marc Labranche, developer

Adam Yale, a designer at DeveloperTown, also loves the asset creation and automatic update features that Zeplin offers. Adam believes that Zeplin has taken efficiency and streamlining to a whole new level. Per project, he estimated that it saves about an average of 10-20 hours on a project. That’s huge!


NO TOOL HAS EVER DONE THIS BEFORE. IT WILL CHANGE YOUR LIFE AS A DESIGNER WORKING WITH DEVELOPERS.

Adam Yale, designer

What else do we love about Zeplin? Oh, maybe the fact that it’s totally budget friendly. You can try one project out completely FREE! Check them out here.

First runner up goes to……


SKETCH APP


Speaking of being super efficient, Sketch is right up there with Zeplin and has become the foundation of our design process! Although Sketch isn’t necessarily new anymore, at DeveloperTown, we have successfully moved from Omnigraffle and Photoshop to Sketch for almost all wireframing and visual design work. It took a few of us a little while to break the habit, but now that everyone has tried it out, we love it!


Sketch was made for UI design and cuts out all of the nonsense. It’s more optimal for CSS, which means it makes the designs much easier on developers when it comes to coding it all up. Because of its simplicity and the fact that Sketch is vector based, the tool is super light!


Jeff Pope, designer at DeveloperTown, is a big fan of the plugins that Sketch has to offer. He enjoys that there are plenty of options and that the simplicity of Sketch made it quick to learn and implement in his everyday designing. He also liked how Sketch works well with the other design tools that we use at DeveloperTown, such as Zeplin.


THERE ARE LOTS OF COOL OUT-OF-THE-BOX {PLUGIN} OPTIONS, AND THEY ALL WORK REALLY WELL ON THE INTERFACE DESIGN.

Jeff Pope, designer

Sketch also makes it easy to scale for screens and to export assets, and the plugins save our designers so much time. Josh Littlejohn, one of our designers, uses this every day and it's become one of his favorite features. He was admittedly one of the last designers to switch over from Photoshop to Sketch.


I CAN’T TELL YOU HOW MUCH TIME I WOULD SPEND IN PHOTOSHOP RESIZING ELEMENTS FOR ASSET EXPORTATION. IN SKETCH, IT’S AS SIMPLE AS JUST A CLICK OF A BUTTON!

Josh Littlejohn, designer

Finally, Sketch has a super cool feature that we all love as designers called the Mirror. Mirror lets the designer see what their artboard looks like on their own device screen. This makes it easier to see all of the elements of our designs on the actual devices in real time.

If you haven’t already, you should at least give it a shot. Sketch allows you to try it out for FREE for a whole 30 days! You’re welcome!

Alright, and for the second runner up we chose……


INVISION


As mentioned before, at DeveloperTown, we have all of our designers and developers working together, so this means that collaborating design tools are a must for us. InVision takes this to a whole new level.

InVision is a rapid prototyping tool that helps make presenting designs to developers and clients a snap. It provides live-like interaction rather than still images, like PDF’s. It's easy to setup, and you can link the source files directly or drag your designs straight in from sketch.

InVision has helped improve the designs of Korey Clements, a designer at DeveloperTown. The interactions make it easier to go through the user flows and ensure that all of the elements of the design are working together in unison before handing it off to other designers, developers, and clients for review. Korey’s favorite feature of InVision is the ability to update existing, clickable prototypes with new mockups without having to repetitively create new buttons.


ELEMENTS, SUCH AS BUTTONS, ACTIONS, AND LINKS ALL REMAIN THE SAME AFTER I MAKE EDITS ON THE MOCKUPS WITHOUT ME HAVING TO LIFT A FINGER.

Korey Clements, designer

Another one of our designers, Lisa Sangiorgio, calls InVision an “eye-opener” for both the designer and the client. This design tool makes it easier for the designer to see any holes or gaps in their UX design and get the chance to improve them before delivering to a client. For the client, InVision is an excellent way to visualize the product and be able to interact with it to fully understand it.


I CAN VISUALIZE AND EXPRESS THE EXPERIENCE MORE CLEARLY AND ACCURATELY {IN INVISION}, WHICH BRINGS TO LIGHT CERTAIN FEATURE FAILINGS OR OPPORTUNITIES.

Lisa Sangiorgio, designer

From a developer’s point of view, Steve Ernstberger, also enjoys the interaction feature of InVision. The ease of seeing what elements are clickable and their transitions have the ability to develop those elements that much more efficiently.


AS A DEVELOPER, IT IS NICE TO HAVE EVERYTHING IN ONE DOCUMENT THAT CAN BE SORTED THROUGH VERY EASILY IN INVISION. PLUS, THE INTERACTIONS SHOWN BY THE DESIGNER IS PROBABLY THE COOLEST FEATURE.

Steve Ernstberger, developer

Unlike Photoshop or Sketch, InVision doesn't have layers to sort through. It’s also easy to import screens and override existing screens. Both of these features make it easier for the designer to make updates and for the developer to receive these updates automatically.

Of course, there is a free trial for InVision so you can check it out for yourselves.


WHAT IT ALL MEANS

Our goal is simply to produce the best software products possible. Beautiful, high-quality products that people like to use. To accomplish this we must have great people, trust the process and always be on the lookout for the right tools. We hope understanding how we use them and how they enhance our process can help you deliver great software too.

If you want to see firsthand, take a look at some of our stories: DeveloperTown Case Studies