Unicorns: The myth and the magic
In web design, a Unicorn is a fantastic creature that possesses equal talent in multiple disciplines.
They’re the brilliant brand strategist that is an expert designer and an efficient developer. They can carry your project through all its stages from the very earliest concept, to the mockup, to the prototype, to the final build. Their strategy is comprehensive and methodological, their designs are clean and clever, their code is efficient and organized. They’re the ideal member of a web design team.
There’s only one problem with the Unicorn: like their namesake, they are exceedingly rare, and it’s hotly debated whether someone with that level of expertise in multiple disciplines can even exist.
Regardless of whether or not the Unicorn is a myth, however, the trend they represent in web design is very real. With the death of the waterfall model and the rise of agile methods, constant iteration, multi-device platforms, and mobile-first strategies, the lines are blurring between the web disciplines, and there is a greater push towards needing people with multiple talents.
Don’t be the unicorn, speak unicorn
So then what, is this the death of the specialist? Should we be forced to generalize — spending our time pursuing deeper knowledge in all aspects of our field rather than honing our chosen craft? And what if there are certain things you just don’t *want* to become experts in, due to a lack of interest or a struggle to master those skills?
There is an alternative. You don’t need to become a master at every discipline, just learn to speak their language.
There are already plenty of resources out there that encourage designers to learn the basics of coding. You don’t have to become a developer, they argue, but understanding how development works will allow you to produce work that takes better advantage of all the great technology that powers the web.
But developers must also learn how to reach across the aisle. In an interview with former Apple designer Mark Kawano, he says that Apple products have excellent design not because they have the best designers, but because of “the engineering culture, and the way the organization is structured to appreciate and support design.”
“Everybody there is thinking about UX and design, not just the designers,” Kawano said. “And that’s what makes everything about the product so much better . . . much more than any individual designer or design team.”
Adopting unicorn thinking and incorporating design into all aspects of the product results in a better final product overall. It turns design and development into a holistic process, where everyone is communicating on the same wavelength, and builds the project into a single cohesive entity rather than separate components.
Embracing unicorn thinking as a developer
Because of this, embracing unicorn thinking can help developers write cleaner, more modular code. Designers are trained to make decisions that support an entire system, rather than just individual components of functionality. Rather than examining each piece in isolation, they can see how the entire system works together and how each piece supports the overall message.
By taking this approach as a developer, you can help eliminate redundancies in code as you start to see patterns emerge across the entire site. You can also be more confident that your development decisions will support the goals of the project, since you are aware of the bigger picture the design is trying to serve.
Designers are also trained to notice small details that are often overlooked or unseen by everyone else. This is often a source of friction when designers and developers collaborate (who hasn’t had arguments over single pixels or slight variations in typefaces?) but these details often have a huge impact on readability and user experience.
As a developer, learning to notice these details empowers you to fill in the blanks on design decisions as development progresses, a common occurrence in agile workflows or responsive web design.
Building your unicorn vocabulary
In order to effectively speak unicorn, it is important to start with a common language.
On the most basic level, building your unicorn vocabulary is crucial for better communication. Much like a designer who understands code has an easier time working with a development team, a developer who understands design terminology is able to ask better questions of designers, and get better answers as a result.
User Experience: How people interact and engage with the site
(You may also hear about: information architecture, GUI, interaction design)
What a developer needs to know: User experience influences how users are directed through the site and led to specific end goals.
It encompasses many elements of design and development, including how something looks as well as how it works. When making decisions about functionality as a developer, it’s easy to let the tool, language, or data structure being used dictate how the process will work. Be sure to make these decisions with the experience of the end user in mind instead.
Branding: Communicates the organization’s message, values, and experience
(You may also hear about: design systems, brand essence, archetypes, brand strategy)
What a developer needs to know: Brand encompasses everything from the logo and identifiable design elements, to the context and history of the organization, to the gut feelings people get about the organization itself. Brand consistency shapes the strategy behind the site and is often a big driver of why things are built. Think of the brand when deciding how something will work. Would a brand based on “simplicity” need a complex process for the user? Would a brand build on “ease of use” benefit from something hard to find?
Composition: How the content and aesthetics of the site work together
(You may also hear about: proximity, harmony, unity, balance)
What a developer needs to know: Even though different components of a site are often built as separate pieces (and in the case of larger sites, sometimes even by different people) they should feel like they all belong together. Each element that is added or built for a site should feel like it belongs within the site layout, not just tacked on as an afterthought. This includes visual treatment as well as how a process works.
Hierarchy: The relative importance and visibility of pieces of information
(You may also hear about: emphasis, scale, readability, flow)
What a developer needs to know: Visual hierarchy is a collection of small details including typography, color, proximity, and balance. A good visual hierarchy helps with scalability of information, prioritizes the information on the page by importance, and provides the cues to direct the user through the site. Decisions made about the styling and position of individual elements have a huge impact on the site experience.
Typography: Aesthetic decisions about the arrangement of type
(You may also hear about: line spacing, letter spacing, kerning, fonts)
What a developer needs to know: The size, spacing, alignment, column size, and relative size to other typographic elements are not just about appearances. Typography is a major component of good hierarchy and user experiences, and as such should not be arbitrary. Make sure your typographic choices are deliberate, reinforcing the big-picture systems in place as well as being aesthetically appealing and easy to read/understand.
Color: Aesthetic decisions about the use of color in a composition
(You may also hear about: hue, value, shade, tint, saturation)
What a developer needs to know: Color can be used to create emotion, add emphasis, divide or group elements, reinforce hierarchy, create visual unity and balance, and is often related to branding. If color is being used a specific way or for a specific reason, be consistent across the entire site.
“Why?” and the unicorn
The number one vocabulary word in a unicorn’s arsenal is “Why?”
The consistent use of the use of “Why” leads to projects built upon deliberate decisions. Deliberate decisions that take into account big picture as well as small detail elements. And developers can make great use of this word, especially when confronted with a problem. “Why” enables you get past issues with technical difficulty or time and budget constraints, and work together with your team and the client to find the best way to solve a problem.
Collaboration is magic
Ultimately, learning to speak unicorn can help bring your entire team together. Many projects often feel like an us vs. them struggle, with the other parties not “getting it.” Once you understand each other, it is easier to respect each other as fellow experts in your fields, as well as develop empathy for all steps in the process. And a team that communicates well and respects one another’s contributions is a happy team. After all, friendship (and collaboration) is magic.
Michelle is an independent graphic designer, recently relocated to Minneapolis from Chicago. She was formally schooled in design including print, branding, packaging, etc., with additional education in Psychology and Sociology, all tying together in a love of How To Solve Problems. Lately she has been specializing in WordPress websites, infographics, and high-end presentations for her clients. She loves the WP community and speaks/volunteers/organizes at WordCamps and events around the country.
6 Comments