Are you designer? A developer? Have you heard clients say this as well?
Well. I’ve been hearing it from the clients for such a long time. Years!
Why does this occur? Why is it that despite designers crafting beautiful layouts, selecting perfect colours, aligning elements meticulously, and focusing on aesthetics, the final developed page often diverges from the intended design? It’s a nightmare for both designers and clients alike.
So, how do we address this issue? Before diving into solutions, let’s identify the problem first.
With over 16 years of experience in the field, I’ve encountered some recurring observations regarding this issue. Let’s examine them individually.
Alignments
Alignment is a significant concern in design. Designers meticulously ensure pixel-perfect alignments for a reason; it’s integral to the overall coherence of the design. However, in many cases, this attention to detail is lost during development, resulting in layouts that deviate from the intended design.
A straightforward solution to this issue is utilizing the Align Panel available in most design and coding software. This tool allows users to select elements and align them precisely according to the design specifications. By simply clicking the “align” button on the panel, one can quickly achieve proper alignment, ensuring that the design remains consistent throughout development.
Spacing
Spacing presents another significant challenge in the design and development process. In the past, the handover from designer to developer often involved tedious processes like using Red Lines files in Photoshop to specify every spacing detail.
Fortunately, modern software programs like Zeplin, Figma, Sketch, Adobe XD, and others have integrated spacing systems, greatly simplifying this aspect of the workflow and making everyone’s lives happier and easier.
Developers can further support designers by ensuring they’re utilizing a 4-point grid system. This system, which mandates spacing and alignment in multiples of 4 pixels, proves to be a lifesaver. Rather than using arbitrary numbers like 5 or 10 pixels, elements should be spaced at intervals of 4, 8, 12, 16, 20, 24, 28 pixels, and so on, ensuring that all gaps are divisible by 4 and result in whole numbers. Spacing or the gaps must be divisible by 4 in a result of a whole number.
This blog by Jason Lusk gives you a good explanation of Why 4px Grid system
These software programs provide developers with the freedom to precisely check spacing and gaps down to the exact pixel. Developers can easily incorporate this information into their CSS as a template, ensuring consistency across all pages.
Colours
Similarly, colour consistency is crucial. Sometimes, a single missing character can drastically alter a colour, which may not seem like a major concern at first glance. However, having colour definitions stored in a master CSS file significantly reduces the iteration time for developers; any fixes typically take only a minute.
When developers receive design files, it’s beneficial to request a colour guide. Many software programs mentioned earlier offer this feature, providing a comprehensive overview of the colours used in the design.
Designers can inadvertently introduce variations of the same colour, leading to a clutter of colour options. In such cases, developers can collaborate with designers by questioning the colour choices, fostering clarity and reducing confusion over multiple colour iterations.
Moreover, modern software programs often generate CSS code for colours, streamlining the implementation process.
Fonts & Sizes
Fonts present yet another challenge for designers. Despite meticulously selecting the perfect font to match the tone and design, during development, it’s not uncommon to encounter Times New Roman or system fonts instead of the chosen ones.
One common issue stems from minor errors in defining the font in CSS, such as a missing character or incorrect spacing in the font name. This oversight can lead to unexpected substitutions. While there are multiple reasons for such discrepancies, this is a significant one. When errors occur, the system defaults to the next available font.
Fortunately, advancements in software programs have streamlined the conversion of fonts and sizes in developer handoffs, reducing these occurrences.
All the ones mentioned above and a lot more the modern tools can do from Spacing, Font size, Colour, Shadows, Rounded corners, Hover states, Transitions, Transparency, Responsive design, Asset management, JIRA integration and so much more. All the Designer & Developer need to do is, to collaborate, work as a team & understand the nuances right from Sprint 0.
Code first focus
As evident as it may seem, developers typically prioritize coding first. However, what designers strive to achieve is mutual comprehension of the design system by both parties, making everyone’s job easier. In a collaborative team comprising developers and designers, fostering understanding of each other’s roles and objectives is essential for seamless workflow.
- The designer takes the lead in evangelizing and educating the team, not only developers, about the design system. This includes explaining the decision-making process behind the design choices and the rationale behind the design system’s structure and components. By providing this context, the designer ensures that everyone on the team understands the principles driving the design and can effectively collaborate to implement it.
- The developer actively engages with the designer, posing questions about decisions and the design system. This collaborative dialogue ensures clarity and understanding, ultimately leading to a more cohesive implementation of the design vision.
When this happens, its smooth sails from there.
Unaware of features
While this might not be the most pressing case, there could be just a handful of starters who could miss this. While I witness, developers nowadays are equally & more than equipped with the feature needed & intended as the outcome.
When a designer creates a layout, element, or component, it’s typically focused on enhancing the user experience. However, the complexity of certain features can sometimes lead to multiple implementation approaches, some of which may simplify the developer’s task.
It’s crucial to recognize that these features are designed to improve the user’s experience, prioritizing their ease of use over the convenience of designers or developers. Our goal is to put in the hard work to ensure the user’s experience meets standard acceptance, if not exceeds it.
Developers can contribute by understanding the underlying reasons behind design decisions. This allows them to propose development solutions with the user’s needs at the forefront of their considerations, rather than solely focusing on minimizing effort and time.
Yes I am aware too, that at times the budget might not be our ally, those are exception times (most of the time that's the issue, hahaha!)
Knowledge
Returning to the earlier point, developers can greatly enhance collaboration within the team by acquiring some design skills. This could involve participating in decision-making sessions alongside designers. When a developer possesses design knowledge and can work closely with a designer, it becomes a significant asset and contributes to team success.
Fortunately, there are numerous resources available, such as courses tailored for developers interested in delving into design. These resources can provide valuable insights and practical skills to facilitate collaboration and improve overall project outcomes.
Here are few blogs you can start with
- Developer turned Designer by Filip Grkinic
- How to Approach Design for Developers by David Grenger
- The 7 Things The Most Successful Web Devs And Designers Have In Common by Cameron Chapman
- 7 Things Developers Need Designers to Know by Proto.io
File types
File types have undergone significant evolution and advancement, with “.svg” emerging as the predominant format. The versatility of SVGs cannot be overstated. Gone are the days of using multiple dimensions of the same icon; SVGs provide a comprehensive solution. It also helps a lot in responsive design.
Many designers utilize SVG libraries with integrated APIs, streamlining the integration process. Collaborating with your designer on this front is essential. By working together, designers and developers can find optimal solutions, reducing page load times and enhancing performance. Additionally, SVGs are lightweight and highly adaptable, allowing for efficient usage across various instances within a project.
Why Developers Should Use SVG Files by Mike Davey — Good read
As we dig into why the pages we design don’t always match up with what developers deliver, let’s take a peek at what hurdles developers might face when dealing with design elements.
Here is Pixel-perfect Web implementation by Krishna Kiran — Must read for the full circle!
Hope this blogs gets some insights to “Why doesn’t your Developed page look like the Mockup”
