Whilst the stereotype of the left-brained creative and right-brained developer may not always be accurate, there are specific areas where an improved understanding between the two could save time and improve results.
Let’s take a look:
Typography
For a designer, typography is one of the most fundamental aspects of design, so getting this right can make or break a product. Often hours are sweated into the minute details of choosing the right font family, specific weights as well as the typographical rhythm (spacing), only for a developer to interpret the design with a ‘similar’ but different font (note, you can’t use Times New Roman as replacement for every serif font).
Developers: Pay attention to the details; look at the letter spacing, line-spacing, exact weight and style of the font. All of this matters, as specific typography helps legibility, accessibility, and serves as an important vehicle for the brand (as well looking beautiful).
Designers: Be aware that your text will not look exactly as it does in Photoshop or Sketch. Fonts render differently on different browsers, screens and even against light/dark backgrounds. Check, if you can, how it will look in the browser and tailor your designs accordingly.
Work together: Setting up a series of rules regarding sizing and spacing will save time and produce better results. Look at how companies like Google use vertical rhythm/8-point grids and adapt. Using a modular scale for your typography allows fonts sizes to be consistent, harmonic and will save a developer from going back and forth with changing specific pixel values.
Content
For a designer, designing without exact content is more the rule than the exception. This means factoring in what content may be placed in the future; which as anyone with experience will tell you can be massively unpredictable. In a world where content is king, you need to make sure that, despite these challenges, your content is delivered effectively.
Another thing to consider is how this content will be populated into the site/app. If the client is using a CMS (such as WordPress or Umbraco), they may populate content in ways that you could never imagine (say goodbye to your carefully chosen colour palette or layout).
Work together: Designers and developers should sit down, discuss the ways that different content may break the site, and work out restrictions or contingencies to mitigate against them, whether this be technical solutions or providing clear documentation and guidance to your client.
Imagery
When it comes to imagery, we want to be able to provide images that look great but don’t take ages to download. In times past, we may have made compromises – showing low-resolution images on high-res screens (or vice-versa), but with the picture tag and srcset options in HTML 5, we can have the best of both worlds. In short, this allows the developer to set which version of an image will display for each screen size or resolution. Even better, you get Umbraco or WordPress to do the hard work for you by resizing your images.
Another thing to consider is aspect when it comes to imagery is crop and ratio. The biggest offender in this area is the hero image. Sometimes, providing an image at the exact crop and size can be problematic, as it may be best to display the image at different sizes and crops for different screens (particularly true if you’re going for a parallax effect).
Work together: Sit with each other and decide whether you want a fixed height/width image – or whether you want your images to maintain their aspect ratios. Talk about how images will affect performance, and where you can use SVG’s rather than PNG’s to keep things looking sharp and loading fast.
Conclusion
These are just a few, mostly functional, areas where good communication and understanding can result in happy teams, time-saving and great products. As both parties consider each other’s roles more, the possibilities to move beyond this are endless.
