Every designer, engineer and creative has their go-to collection of tools to use that form their ideal project workflow. For many years in my early design career has been a combination of Adobe’s Creative Suite Applications – particularly Illustrator, Photoshop, and EdgeCode for a majority of my work. This past year I extended my user flow to more diverse methods including Brackets, Sublime, and the always effective pen & paper, thanks to my Moleskin collection. I stuck to Adobe products out of a combination of circumstance and my design education being based in it. However, now that I’ve been a designer for a few years now (5 1/2) I’ve felt a need to expand my thinking and process. While Adobe is continually improving and I am happy to continue to support it, there has been a exponential growth in digital design tools worth exploring and many of them becoming just as popular and common as the Adobe Brand. In this read I have listed 10 web design tools & branches that I plan to explore throughout the 2016 year. Hopefully these tools will become staples in my design tool box that I can then use and share with others in the design community.
WhatFont is a chrome extension tool, and now mobile app, that allows quick identification of typefaces on a Webpage. Quick, simple, and ideal for both sourcing and clarifying details on those amazing webpages found on awwwards.com or thefwa.com. I have only reviewed it briefly but I am sure it will be a essential part in my own flow when it comes time to prototyping and style guide development.
One of the best pieces of advice that I received by was by my uncle Scott Sorokin, who said that besides knowing the industry, you have to know the people in it. CampFires is a great way to do it. A interview website for designers at Dropbox, Intuit, and Code Academy to name a few. It is a interesting morning read to learn new workflows and lateral inspirations.
Similar to current prototyping tools like Invision, Pixate pushes rapid prototyping tools further with 100% native prototypes, so you can experience your ideas on device as if they’re completely real. At the same time allows detailed interactive movements to create to help sell concepts fast for hack-a-thon like events.
Foundation for Emails
Building on email interactivity for brand recognition Foundation for Emails Quickly create responsive HTML emails that work on any device & client. Even Outlook. While maybe not an immediate addition to my personal workflow I can see this be a nice addition for groups doing branding/advertisement work and would want to a easy system for promotions.
While Pinterest is good for general ideas and image reference I found Ember as a option for “design elements” only boards. With an overwhelming hard drives archive or headers, footers, featured pages, and interactive elements. Ember’s archives are searchable by name, tags and even color. In addition dropbox storage for a clean drive. If you already have an archive you may need a weekend to get everything together or me a month, I’m hopeful it should be effective.
Along this theme of rapid prototyping tools Invision is another I would like to explore again. In the online program you upload your design files and add animations, gestures, and transitions to transform your static screens into clickable, interactive prototypes. While I last used it about a year ago, many recent updates have brought it back to life. Embed Prototypes, more unique page transitions, and a quality blog found here are all reasons to give it a second chance if you haven’t yet.
Atom is a text editor that’s modern, approachable, yet hackable to the core which is always a clear advantage. It is a tool you can customize to do anything but also use productively without ever touching a config file. Always looking for the cleanest and fastest text editor Atom is a clear contender with other text editors such as brackets, and sublime both of which are viable options for any designer or developer.
A self proclaimed but possibly true – Github of Designers – pixelapse is a file sharing service for PSD, AI, ID, and FW files. The goal of the service is to limit the over lapse between designer file saves leading to a thousand copies of the same illustration. This is a situation we all know too well. Allowing automatic updates, in file comments, real-time notifications as well as comparisons means that this could be the tool for all company design teams could use in the future.
Last but not least is Panda the best chrome extension for designers by far. A Start-Up page modifier, Panda is a combination of a new aggregator as well as an inspiration finder. Using sources such as Behance, Dribbble, and Wired among others combines many sites I already visit in one source. Highly customizable, cleanly designed, amazing content, and always updating, only three days into it’s use I am in love with this new system and has quickly been integrated in my workflow for work and personally scouring through it with my morning coffee before class.
Panda is available on many platforms including Chrome, Safari, Firefox, IOS and as a web app.