top of page
Profile picture of Suzanne Scacca

8.31.2021

5 min read

Methods for effective collaboration in web design

With so many creatives, clients and stakeholders involved in website creation, streamlining collaboration across the board is crucial.

An illustration of hands holding pieces of paper over a cutting board.

Illustration by Anita Goldstein

Stay informed on all things design.

Thanks for submitting!

Shaping Design is created on Editor X, the advanced web design platform for professionals. Create your next project on Editor X. 

When web designers and fellow team members try to collaborate without the right strategy in place, it can sometimes feel like there are too many cooks in the kitchen. When you look at the scope of a website design project, you can see why it is that collaboration can be so painful as well as stifle individual productivity and creativity.


Everyone uses different software, approaches the job from differing perspectives, and even speaks a different “language.” Of course, there’s going to be friction if or when any of the teams try to come together.


But the solution isn’t to work separately. Instead, let’s look at five tools you can use to reduce that friction and enable better communication, collaboration, and creativity in team environments.



1. Use a task management system to keep everyone accountable


Managing website jobs is no easy feat. Not only do you have to balance all the moving pieces internally, but you have to account for the client as well.


The best way to keep everything straight— not just for the project manager, but also for each person who contributes to the job — is to use a task management system.


There are many tools you can use, so it’ll take some trial-and-error to find one that’s right for your team. Some options include Basecamp, Trello, Wrike and Asana.


Ultimately, you want something that will allow you to:

  • Lay out each step and task of a job before you get started.

  • Set milestones and track progress.

  • Assign tasks and deadlines to stakeholders.

  • Communicate with the client.

  • Collaborate internally.


It should also make it easy for you to create your own project management checklists and templates. The less time you have to spend on tedious administrative tasks, the more time there is to do the actual work of building a site.


In addition, it’s important to find a tool that provides visibility, which will enable everyone to get more done. That way, individuals can own their schedules without the fear of micro-management getting in the way. It would also be beneficial for everyone to see how their contribution fits into the larger scheme of the job and to better understand how it affects others’ work.


Just as task management tools can help with lessening the chances of a project going off the rails, they can also be useful for team-building and accountability, too.



2. Build a design system for each project


While design systems are most commonly associated with UX design, I’d argue that any website constructed by a team needs one.


For starters, a design system gets everyone on the same page right from the very start. And by creating it in the research and planning phase, you’ll ensure that every member of the team has clear guidelines to work from early on.


Many times, friction occurs because one person interprets instructions differently from someone else. But when you lay down a set of tools and rules, there can be no confusion about what’s expected, what needs to be done, and what you’re all working towards.


Another reason to create design systems for each job is empowerment.



Visual of a web page with pop up window and side menus showing the site's design library.


One of the more frustrating things about working within a creative team is when only certain people hold the reins. For instance, let’s say there are three designers on your team, each working on different jobs. One of the designers gets sick and is unreachable for a couple weeks.


Without a design system, one of the other designers would have to step in and try to figure out where the project is at and what the next steps are, which can feel like reinventing the wheel. Design systems remove that obstacle and empower anyone at any time to step in and hit the ground running.


If you’re creating a website on Editor X, you can use its design libraries tool to build a reusable collection of typography themes, color palettes and design assets for every web project, allowing you to apply your design system consistently across the board.



3. Close the language barrier


As a team grows in size, communication can become difficult as everyone has a different perspective and approach. Without a common ground to work from, it’s easy for things to get lost in translation and for tempers to flare when someone doesn’t understand something or feels like they have more work than others.


But how do you establish that common ground without having to re-educate everyone? It’s not as though the various members of a creative team can use the same tools to do their jobs. Designers, developers, copywriters, and other creatives have widely different perspectives, goals and skill sets for a reason.


Here are some ways you can fix that divide without everyone having to reconfigure how they work:



Bridge the gap during handoff


At certain points in a job, one team will have to hand off their work to another.


The biggest source of friction is likely to occur between design and development as designers create the visual interface and then developers turn it into a working website.


One way to streamline handoff between these two is to use a software built specifically for this purpose like Zeplin or InVision. These tools help create a bridge between the two disciplines, and automate the translation of design to code.


If you’re building a website on Editor X, you can eliminate the need for handoffs by co-create on the same site, at the same time with real time collaboration capabilities. On Editor X, teammates and collaborators can jump onto the same canvas with concurrent editing. This allows you to work simultaneously and see what each person is working on and where, with all change being made reflected instantly to everyone else on the site.


You can also control each team member’s roles and permissions with custom roles, so that each contributor can edit and control only the actions that fall under their scope. This way, a designer could change the layout but not the copy, and a content writer could edit the text but not the typography it’s written in.



Visual of a website in collaboration mode, showing multiple users in the backend at once.


Digitize feedback


The exchange of feedback between team members can be another big point of contention. And, yet, it’s something you must do if you want to reap the benefits of collaboration.


For instance, let’s say a writer has delivered the copy for the About page. After thanking them for sending it over, you might be inclined to return it and let them know it’s too dense to use as is. This might not go over well if they don’t understand what you mean.


So, what you can do instead is communicate feedback visually. Either hop on a call and do a screenshare so you can walk them through the changes, or you can screenshot a page and add notes that explain the changes within the context of the page.


If you’re using Editor X, you can communicate and chat with team members directly on the canvas using live comments, allowing you to leave notes, ask questions and assign tasks. Your comments and feedback can even be element-specific, so that it’s highly clear what you’re referring to on the page and why.



A visual of different collaborators commenting on a web design in progress.


Conclusion


Let’s face it: there are a ton of barriers over the course of a project that can prevent you from doing your best work. Many times, that blame falls on demanding clients or timelines that don’t account for the project’s entire scope.


Other times, though, the team itself can get in the way of things like productivity and creativity, whether it’s from having too many meetings, working with vague directions, fostering a competitive environment, using incompatible systems, or just the sheer physical (or virtual) distance between team members.


The good news is that you can break down a lot of these walls simply by using the right kinds of tools and strategies.

Get our latest stories delivered straight to your inbox →

bottom of page