October 02, 2014
Stop Hiring Unicorns
Do designers need to learn code?

Nature of the Beast

Producing good work can be a turbulent process. Consider yourself lucky if you’ve never run into any schedule, budget, or client problems. But if you’re like the rest of us, you can always count on clients to change their minds, make last minute changes, and miscommunicate, leading to stretched budgets, broken project schedules, and frustrated teams. That’s just the nature of the beast.

Searching for Unicorns

With the constant flux of requirements, some companies increasingly turn to “unicorns” - individuals who are equally talented in both visual and user experience design, as well as front-end and perhaps even back-end development.

These companies realize the power of the all-in-one individual. They want people that can first design complex solutions, and then elegantly realize them. They need people who can save them countless of hours on meetings and presentations spent between designers and developers; they want someone that can do it all, front to back. They want a jack, queen, and king of all trades.

But unicorns are hard to come by, and even more expensive to find. Some have started asking if they actually need unicorns in the first place. Could one unicorn produce better and faster work than a small, well-rounded group of designers and developers? The internet wonders: what if designers could simply learn how to write some code? To some, the answer is a profound “yes”, but to others it’s not so simple.

Charlie would rather sleep

Focus on Shipping

In any case, the ultimate responsibility of the designer and the developer is to ship a great product. Instead of asking ourselves if our designers should learn code, we should ask ourselves if learning code can help them ship better products.

The designer’s job is to create the best possible user experience. If knowing code helps them design a better experience, then they should probably learn to code. There are many benefits to learning code: it may help designers better communicate ideas and better command respect with developers. It may also help them explore technical possibilities and constraints, as well as maintain their original design vision throughout the process.

Designers should learn to code if it improves their work. In most cases, they don’t need to understand entire software applications: only the parts that directly affect the user. If their main work is in illustration and video, they would barely need to know any. But if their job is to craft slick, interactive websites, then learning some HTML, CSS, and JavaScript might allow them to collaborate more closely with developers, and to produce better work.

Unicorns are popular because they can both design and implement their own visions. They are multidisciplinary chameleons that shift from one role to another, filling in knowledge gaps that might otherwise require an entire team. Unicorns can adapt and iterate, and save time otherwise lost through meetings and miscommunication. They are valuable because they have potential to iterate faster through requirements, ideas, and implementation cycles than project teams.

But relying on one unicorn is to put all the eggs in one basket. They’re not cheap, and they can’t do everyone’s work at once.

Working Together

Various projects might require different amount of iteration, as well as different levels of fidelity in design. For many projects, a few Photoshop comps might suffice. But for many projects, comps can be either too static or too unwieldy to edit often. A Photoshop comp also doesn’t always represent the exact appearance in a browser, as appearances may change shape and form depending on browser or. Similarly, some highly interactive sites need to be “played with” in order for designers to find the sweet spot. Some interactive experiences like games and productivity apps would be especially hard to visualize just through comps; they would need to be experienced to be improved upon.

A team of designers and developers with the right knowledge and tools can work just as well as unicorns. Each member doesn’t need to know how to design and build everything, but just enough to strengthen the team. A designer might save time by directly editing the stylesheet of a prototype instead of updating dozens of comps and passing them onto a developer. Similarly, a developer might fix design elements on her own, without any designer feedback, if they knew how to improve on the product. Designers and developers always be holding each other accountable and be looking to fix the small details, many which tend to slip through the cracks of the initial design.

Sometimes, prototyping with video, paper, and even more physical tools might work for a project. In these cases, developers might need to work closer with more traditional designers who have less digital experience but are more adept in traditional design methods. It’s always valuable for each team member to expand their knowledge into other fields, but it’s just as important for each member to specialize in their own skill.

Getting the small details is what makes a product feel right. But getting to that point requires the full participation of each team member, as every person needs to have a keen eye on both the design and the implementation. Projects are living and flexible, and the team behind them must adapt to their constantly changing needs. The team must communicate frequently and help each other as requirements and demands evolve. However, with the right tools and the right combination of knowledge, they would have no problems catching up with the nimble unicorn.

To Code or Not to Code

If you’re a designer, and if you wanted a yes or no answer, then I’m telling you “yes.” You should at least experience the process of learning how to write code. You need to become familiar with the arduous process of implementing, testing, and rewriting code. You don’t need to produce the most beautiful and functional code, but you should understand that code isn’t magic; that developers need to solve for certain challenges when implementing novel or difficult designs. You will also know how to better convince developers to take the more difficult but more user-friendly route, if you understood their challenges and could speak their language. Finally, learning code will also improve your own marketability. Having that a thorough understanding of code, will give you an edge over that competition.

Besides, a little more knowledge never hurt anyone.

Part II - Unicorn Tools

If your only tool is a hammer, every problem will look like a nail. If your only tool is email, every minute will be spent checking your inbox.

Unicorns are highly sought-after individuals in the creative world. They are considered great visual designers that also understand user experience and interaction design, 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.

The most important tools for smaller teams should focus on improving team communication, and the production pipeline. These are the elements where unicorns excel at, and where some teams often fall apart. Improving these aspects will collectively improve a team’s production output and quality.

Here are some tools that could potentially help.

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, normally a part of the Agile methodology, is just what it sounds. You meet once a day, usually every morning, and each person or project team talks about three main things: What they’ve accomplished yesterday, What they will accomplish today, and things that prevent them from accomplishing what they need to. That’s it. This lets other members know if they could be of any help, and helps everyone keep each other accountable.

More readings:

http://en.wikipedia.org/wiki/Stand-up_meeting https://medium.com/product-love/when-scrum-stand-up-meetings-feel-like-an-interrogation-c5e490315b80

Kanban Boards & Trello

Sometimes standup meetings get derailed. People can forget what they’ve been doing, or they work with each other on different projects. Sometimes meetings can get messy. 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 one with ideas. This list helps 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.

From Trello.com

Slack

Slack has recently been branded the “email killer.” I don’t fully subscribe to that idea that Slack can kill a communication tool that’s been around for over thirty years, but Slack supports some very useful features that may one day supplant email. Slack behaves more like a hybrid chat and email app, where users can write thoughts, post questions, or share documents with other team members. Very useful for ideation, tracking status, and distributed offices.

Prototype Pipeline

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 assets, that prototypes other apps can easily link to. Any updates from a designer will immediately push into the prototype or design comps.

Dropbox also recently added more controls for freelancers, who can make use of the new password protection and link expiration features.

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. But Github is also incredibly powerful for non-developers as well, as Github allows for document revision control, and now diff-ing both text and Photoshop documents.

Github also allows for completely free web hosting using a framework it calls Jekyll

Static Site Generators: Jekyll

Jekyll is a type of static site generator. These behave like a WordPress in that they 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, as changing a word in the header will change that word on every page. Used in conjunction with Github, Jekyll can quickly push new comps and images to the in-browser comps. With Jekyll, creatives can think about 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 precompiler, which can abstract CSS production. If you need to change a color of different parts across many pages, you can easily just 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 together 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 who 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 for broad audiences and even a 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 & Automation: npm, Bower & Grunt

Many common tasks required to set up a new project, including cloning a new project, setting up Jekyll, installing Sass, frameworks, and including copying projects and duplicating settings can be automated using npm and Bower. npm can be set up to run various scripts, including install and other setup scripts that make life much easier. Bower lets you install and create your own packages like your own CSS and JS code, and can be used to setup prototype variations.

Grunt can be used to run various scripts in sequence, such as Sass to compile your stylesheets into CSS, JSLint to check for JavaScript errors, and finally Uglify to minify the JavaScript, all with a simple “compile” command. Grunt can also be used to watch for changes, updating all necessary files when a file is changed, simplifying the prototype production process.

Together, these tools can cut down on a remarkable amount of time, since they do a lot of the busy work for the designer.

Prototype Production

On larger teams and longer term projects, setting up prototypes in a more production-type environment might make sense. What I mean is to use the previously mentioned tools to create an internal website to keep track of documentation, requirements, style guides, and more. With such a system, different internal teams can start curating information and store it in a central place.

Live Style Guides

Live style guides are an idea that styles can be fully implemented in a guide to let internal users see how they work, interact with them, and use the code behind them. Live style guides are essentially interactive photoshop comps, able to communicate more than just layout 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.

Though there are many benefits, live style guides are difficult to maintain. Here’s more on maintinaing styleguides from LonelyPlanet

Reactive JavaScript: Meteor & Angular

The last topic I’d like to touch on is reactive JavaScript frameworks. These are considered reactive because the interface can react to changes without any user interaction. These are apps that can update immediately with notifications, and new posts without a browser refresh. Reactive JavaScript frameworks allow designers and developers alike to quickly prototype rich, transactional and collaborative websites- sites like Twitter and Facebook that require logins and can manipulate user data. These frameworks can really allow designers to prototype fully realized web-based applications, and not just static web pages.

Last Words

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.

This post was originally written for Nurun’s Digital For Real Life.