If your only tool is a hammer, every problem will look like a nail.
If your only tool is e-mail, every minute will be spent checking your inbox.
Unicorns are highly sought-after individuals in the creative world. They are considered to be great visual designers who also understand user experience and interaction design, know how to write code, and are generally one-person Swiss Army knives that can fill in any missing roles on a project.
Most teams don’t have unicorns, but fortunately they don’t need them either. Plenty of tools have popped up that allow teams to collaborate and communicate better, and to produce cleaner, faster, and better work:
Tools For Collaboration
Collaboration and communication form the basis of any functional project team. If a team can’t communicate ideas, designs, and deadlines effectively, then any products or outputs will suffer as a consequence.
The following tools provide alternate ways to communicate project details outside of email.
- Stand Up Meetings
Stand up meetings (aka scrum), normally a part of Agile methodology, are just what they sound like. You meet once a day, usually every morning, and each person or project team talks about three main things: What they accomplished yesterday, what they will accomplish today, and things that may prevent them from accomplishing what they need to. That’s it. This lets other members know if they can be of any help, and helps everyone keep each other accountable.
- Kanban Boards And Trello
Sometimes standup meetings get derailed; people can forget what they’ve been doing, or they work with each other on different projects.. Enter the Kanban board. It is a fancy name for a group of lists: tasks to do, tasks you’re doing, and finished tasks. Some like to add a fourth list with ideas. These lists help the team keep track of both progress and setbacks, and works well in conjunction with standup meetings.Trello is a product that lets users easily create and collaborate on anything from Kanban boards to shopping lists.
Slack has recently been branded the “e-mail killer.” I don’t fully subscribe to the idea that Slack can kill a communication tool that’s been around for more than 30 years, but Slack supports some very useful features that may one day supplement e-mail. Slack behaves more like a hybrid chat and e-mail app, where users can write thoughts, post questions, or share documents with other team members. It’s very useful for ideation, tracking status, and distributed offices.
Prototype Pipeline Tools
Depending on a project’s needs, a project might only need to be presented in a PhotoShop. But often the PhotoShop files are just an approximation of what a design might look like in a browser. Sometimes the designs have to be prototyped, tested, and iterated upon.
- Cloud Services: Dropbox
Dropbox, Box.com, Google Drive, and Microsoft OneDrive all provide cloud storage services for businesses. These are great for keeping assets updated in a pipeline. The key is to use Dropbox for source asset prototypes other apps can easily link to. Any updates from a designer will immediately push into the prototype or design comps.
- Collaborative Coding: Github
Most developers have probably used Github from some point as a coding and collaboration tool, or to download a framework or some source code. Github is also incredibly powerful for non-developers since it allows for document revision control and now works with both text and PhotoShop documents. Github also allows for completely free web hosting using its Jekyll framework.
- Static Site Generators: Jekyll
Jekyll is a type of static site generator. Like WordPress, it can generate an entire site from smaller modules, but instead of serving these pages live, the pages are generated into set of static HTML and CSS files. Static site generators can be used to quickly create blogs and other complex sites with deeply nested structures or with lots of repetition. Jekyll is also excellent for quickly generating in-browser comps and prototypes. Used in conjunction with Github, Jekyll can quickly push new comps and images to the in-browser comps. With Jekyll, designers can create and publish changes with modules instead of entire full-page designs, saving a lot of time. Once done, the prototype can easily be published for free to Github.
- Pre-Compiled CSS: Sass
Sass is another tool that can quickly speed up browser comps and prototype development. It’s a type of CSS pre-compiler, which can abstract CSS production. If you need to change a color across many pages, you can easily change it in one place using Sass with a variable, instead of hunting every place that color appears in CSS. Sass also offers many pre-written helpers such as Compass and Bourbon, which can help designers create complex styles much easier. Paired with Jekyll and Dropbox, a designer could use Sass to swap out and publish a prototype design almost instantly, without the help of any developer.
- Front-End Frameworks: Bootstrap, Foundation
Building on top of pre-compiled CSS, advanced frameworks have cropped up to do a lot of the work required to quickly create fully functional, responsive websites. Both Bootstrap and Foundation are popular among designers and startups that need to quickly deploy beautiful responsive websites. The flexibility comes at a cost, however, as many frameworks, including Bootstrap and Foundation, are overburdened by complex markup. Since they need to appeal to broad audiences and to an even broader need, this flexibility leads to a lot of bloat in production-level code. However, used properly, these frameworks are a boon to quickly iterating through prototypes and ideas.
- Package Management And Automation
For larger teams and long-term projects, setting up prototypes in a more production-type environment is most effective. Using the previously mentioned tools to create an internal website to keep track of documentation, requirements, style guides, and etc., allow different teams to start curating information and store it in a central place.
- Live Style Guides
Live style guides let internal users see how they work, interact with them, and use the code behind them. They are essentially interactive PhotoShop comps that are able to communicate more than just page layout, but also button styles, hover styles, animation, responses to clicks, responsive breakpoints, and many other “live” aspects of a website that a static comp would not be able to communicate. However, although there are many benefits, live style guides are difficult to maintain.
There are many options for designing, prototyping, and collaborating. With the advent of many tools available for both production and prototyping, designers with even a limited knowledge of code can produce work that is faster, richer, and more interactive.