When developing a website, multiple teams are coming together to deliver a great product. Designers are tackling the visual appearance of the site whereas developers are concerned with functionality. Breaking that down even further: frontend developers work heavily with both designers and backend developers, as they are focused on usability and functionality, and how users experience and interact with the website. Backend developers, on the other hand, focus on content and website architecture, how data is organized, stored, linked, and served. It’s easy for communication to fall to the wayside with each team working in silos across multiple projects.
Here are 7 methods that Rad Campaign implements break down those silos and bridge the gaps:
- Include developers on client calls. Developers will be able to gain insight on how design elements will translate in the back end, and be able to provide greater detail to the designer. Developers can also flag any potential issues with code during these initial discussions with the client, and then convey that information to the designer so everyone is on the same page.
- Don’t leave out any of the puzzle pieces. Before wireframes are handed off to designers, the project managers should share any branding guidelines from the client, accessibility requirements, as well as icon libraries that may be used (such as Font Awesome). Very rarely can too much information be included. The designer is trying to get the complete picture of the client’s website vision, their target audiences, their wants and needs, etc.
- Prepare all files in advance. Once the designer is ready to finalize the design with the development team, it's important the designer has included all relevant typography (font, size, weight, spacing), imagery (graphics created, source files, etc.) and source files (photoshop, sketch, etc). Any file that has layers should be labeled. If image overlays will be used, there should be a preliminary discussion in advance, including the development and design teams to discuss the best path for creation. Potentially one-off images that aren’t going to be updated often could be completed by the designer, whereas images uploaded by the client weekly or daily may need a more developed approach.
- Ensure everyone has access to the same software. Again, the designer could very rarely provide too much information to the development team about the designs. That being said, it’s very useful for the frontend developer(s) to have access to the same software as the designer. Boosting the overlap of knowledge is going to help bridge that developer-designer gap. If designers are using Sketch or Photoshop, it’s a good idea for the developers to have a working knowledge of the software as well.
- Live and breathe consistency. Once frontend and backend development is complete, another handoff needs to happen to the people on the team who are doing quality assurance (QA) testing. Likely, not every page will have a wireframe or design comp, so it’s critical for the developers to ensure consistency throughout the website. Atomic design principles are a good standard for any project. If any pages deviate from approved wireframes or design comps, it’s important to relay that information to the QA team to save time and headaches.
- Streamline communication and access. While it might seem like this is an obvious way to bridge the gap, it’s often not properly implemented. A communication tool such as Slack makes it effortless for companies to increase discussions, create channels for each project (and with custom integrations), hold daily SCRUM standups, etc. It’s easy to share files from Google Drive or Dropbox on Slack, and you can even sync your calendars. Utilizing these cloud storage providers allows everyone on the team access to all project information, including most up to date wireframes, design comps, etc., all in real time.
- Get everyone on the same page. Design trends are ever changing, and each development team will be focused on a different aspect. Frontend developers wish designers used Sketch for the component-based tools and want to incorporate scalable vector graphics to boost mobile prioritization. Meanwhile, backend developers want to accelerate page speed, especially on mobile pages. It’s important for the development teams to have a conversation to get on the same page so they can all meet their project goals.
Perfecting the Process
After each project is launched, a review should take place highlighting what worked best throughout the project, as well as what improvements could be integrated next time. Figure out a method and process that works best for your team in your environment. Implement a basic set of standards in communicating across development teams to better break down silos, and keep your projects on track.
