Many people are mystified by the capabilities of creative teams, looking at their completed designs or sites and wondering just how we did it (Or maybe they don’t, and I just like to think they’re mesmerized by what we do). Our team of talented creatives calls on a small (but mighty) arsenal to assist in our productions, namely web design, in this post.
For years, Photoshop was the tool of choice for starting a website design (along with all necessary materials: sitemap, content, the point of the site). Even today, Adobe has some amazing features for web or product designers, such as libraries, cloud features and more apps than you can shake a stick at to sync the whole process together.
However, over the past year Photoshop and I have grown apart, and I have cultivated a close, personal relationship with Sketch (and all it’s wonderful plugins) combined with the boss in collaboration: Invision.
If someone was to interview me on the tools I use when working on a website, they may ask:
“What are you working on?”
A website.
“What programs do you use?”
Sketch + Invision apps = combo power
“You don’t just use photoshop?”
Nope.
Like I said, small, mighty, but a winning combination.
Here is a breakdown of my must-have tools and platforms — with some insight, you may find useful too:
Sketch
For myself, Sketch is king when it comes to flexibility with workflow. Powerful features such as symbols, layer styles, text styles, grids, bitmap editing, and pages and artboards make using Sketch a breeze.
It offers support with multiple artboards and pages, features like shared styles and symbols (much like an actual website, go figure). Since everything is vector-based, I’m able to easily create shapes, symbols and styles within a single application and quickly share the pages with my team.
Craft
Craft offers a unique suite of plugins for Sketch that let you design with real content, easily build or upload to prototypes, sync your pages, and more. Of these plugins, my favorite at the moment is the sync feature.
Craft sync allows me to upload to Invision (more on that soon) directly from Sketch. This nullifies the old step of exporting artboards as a jpeg or pdf and uploading to Invision, which not only saves not only server space, but saves time in the process, as well. The sync feature saves me from those “minor edit” headaches like, ahem, when I misspell all the words.
Freehand
A recent addition to the Invision platform–and the T/G toolset–Freehand offers a creative way to collaborate with rough ideas like wireframes, sitemaps, or design presentations. Our team is able to share, present, and provide feedback in real-time, directly from Invision.
Invision Prototypes
Invision offers a powerhouse of prototyping, collaboration, and workflow apps. We’re able to simplify our presentation and feedback process in one place. The main aspect I will focus on for this is Invision’s prototyping feature.
With all it’s wonderful extensions and prototyping features, Invision has changed the game on how we present internally and to our clients. Instead of fumbling around with an exported PDF of a website, we’re able to create a living, breathing prototype with Invision projects. Within a single application, we’re able to share designs and provide feedback without the hassle of uploading or downloading individual pages. Building a site with invision helps us fine-tune functionality faster than using PDF comps or artboards only.
A design from initial concept to final product can be a tedious process. For myself and the T/G team, these tools have proven to simplify our design process, streamline communication, and create better collaboration with the team and our clients.