8 ways to increase designer/developer collaboration
UPDATE: Here is the link to the Develop Denver Conference Presentation(8/4/2016)
https://speakerdeck.com/rochestb/designer-developer-collaboration
Video — https://www.youtube.com/watch?v=YKW34hfbY2A
The truth is, multiple individuals working at full productivity still struggle to be as effective as a highly collaborative team. The process of building applications has changed dramatically over the years, along with the tools we all use to create them. In this article, I am going to describe a few ways for teams to reduce redundant efforts and simplify their workflow.
History
The web started out in the early 90’s but it was a completely different process. Web development was more about if you could build a website or application, instead of how or why. And web-design was barely a thing. As the web evolved, tasks that were repeated again and again acted as incentives for people to innovate ways to reduce time or difficulty within a process. We went from having under 100 websites on the internet in the early 90’s to reaching almost a billion on the web today. In addition, the total amount of websites users were able to browse went up significantly, creating a much more competitive space. The image below shows a screen shot taken from Internet Live Stats detailing the increase of unique hostnames since 1991.
As the internet began to boom and become more competitive, tools were introduced to simplify building things like icons, videos, carousels and mobile applications. Languages in which the web was written evolved to become easier and include more features. Even browsers competed in how they displayed the web. Tools that used to take place as stand-alone desktop applications or devices that sat on your desk were transformed into cloud-hosted software.
The web transformed almost overnight. The world wanted polished websites that were easy to use and visually pleasing. New careers such as ‘User Experience Designer’ or ‘User Interface Designer’ were created to help with the growing process that is application development. Here’s an example of what Amazon.com looked like in 1995 when HTML tables seemed to be the standard in building the web vs a picture of Amazon in 2015 during Cyber Monday. The current day Amazon.com is undoubtedly a product of iteration and data-driven design stretching across numerous disciplines.
Tooling
Now, to modern day development. We are building websites in weeks, not months or years. We are working on multiple sites per day with a very refined process, similar deliverables, and multiple handoffs between disciplines.
There are tools available for building standard web design such as twitter bootstrap, generators, and scaffolding. For design, there are mock-up generators, UI toolkits, prototyping tools and large communities to inspire your creative vision. All of these tools are built to help streamline the process of development, so we can create faster and easier. But if you aren’t careful you can end up with an application that looks and feels like a common template or like Every Fucking Bootstrap Website Ever.
Here are 8 ways to increase collaboration.
1.) Atomic Design
One of the largest and most difficult obstacles to creating collaboration is changing the way we think about application development.
“As the craft of Web design continues to evolve, we’re recognizing the need to develop thoughtful design systems, rather than creating simple collections of web pages.“ — Brad Frost
Atomic design is a methodology for creating design systems based on building blocks known as Atoms, Molecules, Organisms, and Templates. It is essentially a way to build an application based on components instead of pages. Once you create a design system, an application becomes easier and easier to add pages and manage.
Here’s a brief breakdown of atomic design.
Atoms: Simple HTML elements such as buttons, headings, inputs.
Molecules: Groups of atoms such as a label next to an input.
Organisms: Combine molecules to create organisms. For example a Header
Templates: When we take all the building blocks and create a page.
This method of thinking can change the way we design artboards, organize CSS and even the way we create user stories.
To know more read Atomic Web Design by Brad Frost or The Unicorn Workflow: Design to Code with Atomic Design Principles and Sketch by Joe Toscano.
2.) Style Guides!
Style guides should be created at the beginning of every project. They will decrease development time, reduce code, and allow more consistent designs across a brand. Designers should start their design process with creating atoms and molecules.
3.) Style Tiles
“Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web.” They act as a mood board to help sell designs and avoid the tedious task of mocking up fake pages. Remember we should be building design systems and not designing pages. Style Tiles will help communicate visual direction and prevent clients from getting stuck on features and content like you would with a mock-up.
4.) Icon Fonts
Icons are everywhere and it is important that designers know how developers are using them and animating them. The first thing to know is icons are typically exported as SVG’s or Scalable Vector Graphics. SVG files are built in XML so they can be manipulated with CSS or Javascript. They can also be turned into a web-font making adding an icon to a button extremely simple.
When designing icon fonts, make sure they are built using strokes and not fill colors and that they can be reduced to a single path using the pathfinder tool. Developers like SVG icons because they are infinitely scalable without losing quality, they can be animated, and they can dynamically change color. SVG’s can be converted into a font using something like gulp-iconfont or icomoon.
5.) Prototyping Tools
Motion’s a valuable part of digital storytelling. But the tools we use to do this have been all over the place and still are. Lots of people prefer to use After Effects to create motion comps and then transfer that motion into code. Other tools are starting to come out like FrameJS or Facebook’s Origami. Often times these tools allow you to export code to perfectly match the motion you created in the application. The downfall of these tools is that they can limit you to the capabilities of the application.
6.) Designer Version Control
Version Control has been around for a long time in the development community and it’s about time we start seeing designers use some version of it.
There are tools such as Pixelapse, this sketch plugin, this other sketch plugin, even GitHub is starting to support design version control. Version control lets developers easily see what has changed since the previous version and creates an organized history of older versions. You can also create separate branches so there can be multiple design directions running in parallel without the disorganization of managing everything on the cloud or worse email.
7.) Cross-discipline sprint planning.
Sprints shouldn't be isolated to a department when often times a single user story can stretch across the whole team. If there’s a simple task such as create a login form that stretches through UX, design, front-end development, and then backend development, a similar user story can be created for every discipline. This helps the whole team stay on track and see who is being blocked and why. In our example, in Sprint 1 both design and development can start building out the style guide. They can assign watchers to tasks and communicate within each ticket.
8.) Share Often
The longer we build in a bubble or without exposure to other teammates, the greater chance another team member will be forced to wait, not like the work, or do unnecessary work. This is why it is important to show work and demo frequently. During daily stand-up, instead of talking about what you worked on, a quick demo to the team can speak volumes. One way to do this is for developers to share their local IP address so multiple people can access a local development server. You could also use GhostLab, an app that lets multiple people on the same network visit the application hosted on a single computer. One user can operate the app and have everyone else’s app follow along.
To conclude, the web is constantly evolving and it is important to continually explore and try new tools. If we begin to think about an application as a system of components early in the process we can save time on design and development. We can also create smaller hand-offs as well as a more collaborative workplace. Not all tools are perfect, some can be limiting but save time and some can be complicated but offer extended functionality.
