At Adage, we have a large design team that works directly with our front end and back end web developers to bring designs to life. From time to time our engagement will require that our web developers work with a 3rd party design team.
Bringing your own designs to life with a web development team and a content management system can be challenging. Bringing someone else’s designs to life can be a real challenge. From small details like interaction design to the overall mobile look and feel, failing to take the necessary precautions can result in skewed designs and broken user experiences.
That’s why we always recommend you partner with a firm or agency that can handle both design and development (like us!). However, it’s common for people to ask development firms and to accurately build a website using their internal designs or designs from an outside agency. Agencies are often focused on the graphic design and brand—not on user experience design.
Five key considerations for web developers implementing 3rd Party Designs
1. Ensure that designs are built with consistency and functionality in mind
When developing 3rd party designs you need to start communication early. Designs should be created with practical development and user needs in mind. An email with a zip file of the designs should never be the first contact you have with a designer.
Make sure your client’s design team, or the external design agency, understands the importance of systematic design when it comes to developing a site using a content management system like Episerver. Website templates and components should be systematized as much as possible. Designing content blocks that can serve multiple purposes will save not only development hours but the time spent on content population and site maintenance. A system-driven or component-driven approach like atomic design is important to deliver a full design system and not just a series of page templates.
…The fundamental mistake of assuming a (web) page is a uniform, isolated, quantifiable thing. The reality is that the web is a fluid, interactive, interdependent medium. As soon as we come to terms with this fact, the notion of the page quickly erodes as a useful means to scope and create web experiences.
Brad Frost, Atomic Design
2. Have A Firm Handoff Date
As much as possible, have a firm handoff date scheduled.
That means you should have a date where the designs and related materials are formally handed off to the development team. Push for the design to be finalized before it’s passed off for implementation—avoid having the design team hand things over piece-by-piece or continuing to make changes after the handoff date. Keep in mind this is a large factor in the recommendation to work with a firm with all skills in-house. Agencies that handwork off for development will struggle with agile approaches. In our experience when an agile approach is attempted with a 3rd party design the timelines tend to extend.
To better prepare, you can also ask to see working files and design mockups as soon as they’re available. This will help your team get an idea of the work ahead of you and to improve your estimation.
3. Secure Assets Upfront
Make sure you get ahold of all of the necessary assets—including copy, images, videos, fonts, and more—at the handoff date. You don’t want to be blocked down the road waiting to receive an asset, or risk design flaws from using generic, filler media. Working with some placeholder media is inevitable, but obtaining hardcoded design elements, such as background patterns, is a must.
Getting your assets in the right format can also be helpful. How you actually receive them, whether in a zip file from an email or individually from an FTP server, isn’t as important as the actual media file format. For example, we prefer working with SVGs for icons and logos. Using SVG vector artwork allows for better scalability of the artwork and relieves concerns about pixel resolution.
4. Don’t Forget About Licensing
Don’t forget to consider licensing requirements as early as possible in the process of working with an external design team. The development team sometimes has to handle securing rights for assets, so be sure that you’re aware of non-open source fonts and controlled stock photography being used in the designs. Fonts, in particular, always seem to be forgotten—the Microsoft Office experience makes many clients think that fonts are just free to use.
The design team should explain font usage to the client and to your development team during the initial design iterations. They should explain to the client that if they like the look and feel of a certain font, it will be an investment. Otherwise, they’ll have to work alternative open-source fonts into their designs.
While ideally, outside design agencies take care of licensing issues before the final designs are even approved, the development team should always be aware of this process to ensure there are no surprise, last-minute costs.
5. Request A Quality Style Guide and User Interface (UI) Kit
The most important consideration when working with an external design team is to make sure you receive a detailed web style guide and user interface (UI) kit with your designs. This isn’t a puzzle. You shouldn’t have to piece together the new designs. The style guide and UI kit should explain what you’re building and how everything fits together.
A good style guide is more than just a PDF of the mockups and design elements. A quality style guide should include not only elements such as button and form styles but also UI considerations: what do the interactions look like? What kind of button goes where? The more detailed the guide, the fewer assumptions your development team has to make. This helps ensure that the final product matches the designer’s original intentions. A great UI Kit designed in a tool like Figma will allow web developers to sample sizes, colors, and generate assets.
Many of the style guides we see from 3rd party design teams are made using layered Photoshop files, though guides for more complex designs are sometimes built using interactive prototyping tools, such as Axure RP. The best guides not only have an accessible format but also use the language that our front-end developers will use. Such as noting whether a reusable page element will be “fixed” or “static.”
Success working with an outside design team or agency really comes down to quality communication and documentation.
One more bonus tip:
6. Make Sure to Discuss WCAG & Accessibility
Another consideration for your early meetings with the design team is to ask about how accessibility guidelines will impact their designs. Today, accessibility recommendations based on the WCAG guidelines are a growing concern for many organizations. Especially as an increasing number are subject to legal action. Building accessible websites is the right thing to do.
Many organizations have realized that a quick retrofit for compliance just isn’t possible with their current designs. By making sure you and your design team are aware of the current guidelines, you can help ensure that your new site is both generally more accessible and easily adapted to new accessibility regulations.
