Your developers don’t understand your designs
You can’t expect them too either
Introduction
Picture this: you’re a designer with a firm grounding in traditional design principles. You’ve mastered the art of color theory, have an instinctive feel for typography, and can balance visual elements on a page with ease. But when it comes to digital design, you find yourself feeling somewhat adrift. This is where understanding Cascading Style Sheets (CSS) can be a game-changer.
While design school arms you with aesthetic knowledge, the digital world often demands something more — an understanding of the practicalities, the mechanics, the interactivity, and the limitations of the platform for which you’re designing. That’s where CSS comes in. It’s the bridge between the aesthetics of design and the functional mechanics of web development.
Understanding the Gap: Why does it exist?
The gap between designers and developers often stems from their distinct roles, objectives, and tools they use. Traditionally, designers are primarily concerned with the look and feel of a website or application. They work with design tools like Adobe Photoshop or Sketch, focusing on colors, typography, layout, and other visual aspects. The end product of their work is usually a static design mockup.
On the other hand, developers are tasked with turning these static designs into functioning, interactive digital products. They work with programming languages like HTML, CSS, and JavaScript, focusing on functionality, performance, and browser compatibility. The end product of their work is a working website or application.
This segregation of roles can often lead to a lack of understanding and communication. Designers might create designs without considering the technical challenges involved in implementing them. Developers, focused on code, might overlook the importance of faithfully reproducing design elements, subtly altering them during implementation.
An illustrative example of this gap can be seen in the world of responsive design. A designer might create a beautiful website layout for a desktop screen without considering how the design should adapt to smaller mobile screens. When the developer receives this design, they’re left to make assumptions about how to adapt the design for different screen sizes, leading to a final product that might not match the designer’s intent.
Another common example is the use of custom fonts and high-resolution images. Designers, aiming for visual perfection, might incorporate unique, custom fonts or high-resolution images in their designs, overlooking the impact of these elements on website performance. Developers, mindful of website loading times, might opt for web-safe fonts or compress the images, altering the original design.
This gap, however, is not insurmountable. With a shared understanding of each other’s roles and constraints, fostered by knowledge of CSS, designers, and developers can work more harmoniously, creating digital products that are both visually stunning and functionally robust.
Bridging the Gap: Designer vs. Front-end Developer
In the spectrum of web design and development, designers and developers often find themselves playing fundamentally different yet interrelated roles. Designers are seen as the creatives who envision an aesthetic, user-friendly website, painting a beautiful picture of the digital presence of a brand or product. They are the ones who understand the symphony of colors, shapes, typography, and the subtleties of visual hierarchy that lead to a design that is both appealing and intuitive for users.
On the other hand, developers are often perceived as logical, pragmatic engineers who breathe life into the designers’ visions using code. They work behind the scenes, translating static designs into dynamic, interactive websites.
“Coding is not just about typing. It’s about thinking.” — Natalya Shelburn on Design Better Podcast
Developers must think through problems, devise efficient solutions, and continually adapt to new technologies and standards.
Despite these differences, the line between these roles becomes blurred when you step into the world of CSS. A profound understanding of CSS provides a shared language that facilitates better collaboration and mutual understanding between designers and developers. It forms a bridge between visual design and technical implementation, empowering designers to understand the feasibility and complexity of their designs and developers to grasp the importance of adhering to design elements like color schemes or typography to maintain a consistent brand identity.
Let’s take an example. Suppose a designer comes up with an intricate layout involving overlapping elements, different transparency levels, and complex shapes. A developer with limited design knowledge might struggle to implement it or take shortcuts that affect the final outcome.
But if the designer has a grounding in CSS, they would already know that such a design might require advanced CSS techniques like CSS grid, blend modes, or clip-path, and could adjust their design accordingly, or even produce a basic CSS prototype to guide the developer.
Inversely, a developer with some design sensibility would understand that seemingly minor changes, like altering a color hue or font, could significantly impact the overall look and feel of the website. Therefore, they would be more likely to consult with the designer before making such adjustments.
This mutual understanding, facilitated by knowledge of CSS, breaks down the barriers often found between designers and developers. It paves the way for smoother communication, reduces misunderstandings and revisions, and results in a more efficient workflow and a superior end product that aligns with the original design vision. After all, great digital products are not just about great design or great code — they’re about both these elements working seamlessly together.
The Unseen Mechanics of Digital Design
When we think of traditional design education, our minds are often drawn to static visual experiences — posters on a wall, beautifully printed brochures, captivating logos, or sleek magazine layouts. These mediums, while diverse in their purpose and audience, share a common characteristic — they are static. Once designed and printed, they remain unchanging and serve a singular, fixed visual experience to their audience. This traditional design training is often centered around creating these static visuals and may not prepare a designer for the dynamic and interactive world of web design.
Web design is an entirely different beast. It is not a one-way street, but rather a two-way interaction between the user and the website. The user’s actions elicit responses from the site, and it is this interactive dance that makes web design complex, engaging, and challenging. In this dynamic world, Cascading Style Sheets (CSS) serves as the backstage crew, controlling the lights, the props, and the curtain calls.
For example, let’s consider a button on a website. In the eyes of a traditional designer, a button may seem like a simple, static design element — a rectangle filled with a specific color and a text label. However, in the realm of web design, a button is far from static. It’s an interactive element, a portal that enables the user to perform an action or navigate to a different part of the site.
Consider hover effects — when a user moves their cursor over a button, it can change color, increase in size, or even animate. With CSS, a designer can control these changes and can choose to make a button glow, add a drop-shadow, change its color, or animate its shape. These subtle changes do more than just add aesthetic appeal; they also enhance user engagement by providing visual feedback to the user’s actions.
“Good design is about effective communication, not about personal preference or unsupported opinion.” — Brad Frost, ‘Atomic Design’
A designer who understands CSS knows how to effectively communicate using the language of interactivity. They can ensure the button doesn’t just look good, but also ‘feels’ good to interact with, offering a smooth, responsive experience to the user.
Let’s take a more complex example, a navigation menu. A designer with CSS knowledge could design not just the appearance of the menu but also its behavior. They could determine how it responds when a user hovers over a menu item or clicks it. They could decide if sub-menus appear as dropdowns or slide out from the side. They could even control the animation speed and ease, ensuring the menu is not just functional but also pleasurable to use.
Dynamics of Web Design: A Tale of Two Perspectives
Interactivity and Engagement
Let’s consider a common situation: a designer and a front-end developer are collaborating on the creation of a photo gallery for a website. The designer, focused on aesthetics, might conceptualize a layout of image thumbnails with specific dimensions, margins, and borders. They might carefully select images to ensure a balance of color and content, creating an appealing static presentation.
In contrast, the developer, equipped with knowledge of CSS, sees beyond the static layout. They envision the gallery as an interactive element. They might suggest implementing a lightbox feature, where clicking on a thumbnail enlarges the image, overlaying it on the current page with the rest of the page dimmed in the background. They could propose navigation arrows to flip through the enlarged images, transforming the static gallery into a dynamic slideshow.
This kind of interactive experience is challenging to envision from a traditional design perspective. Still, it’s an integral part of web design, enhancing user engagement and making the website not just beautiful, but also exciting and satisfying to use.
As designers and developers collaborate on web projects, their distinct perspectives can yield unique and innovative results. Taking the photo gallery example further, the developer could introduce transitions or animations for the lightbox feature. With CSS, the images can elegantly fade in and out, slide across, or even flip like a page in a book. The developer might also suggest adding keyboard functionality, where users can navigate through the slideshow using arrow keys. These enhancements are not just visually pleasing but also improve the overall user experience, making the website more accessible and user-friendly.
Ensuring Consistency Across Browsers and Devices
In another scenario, a designer might create a beautiful, intricate design that looks perfect on their large, color-calibrated monitor. They might use advanced design techniques and high-resolution images, aiming to create a visually stunning website that stands out from the crowd.
Meanwhile, the developer is considering the wide array of devices and browsers the website will be viewed on. They’re aware that what looks good on one device might not look as good on another. With their understanding of CSS, they know how to implement responsive design principles to ensure the website maintains its visual appeal and functionality across different screen sizes, from large desktop monitors to small mobile screens. They also know how to handle browser inconsistencies, ensuring the website looks and behaves consistently, regardless of whether the user is browsing with Google Chrome, Firefox, Safari, or any other browser.
This mindset, while essential for web design, is often absent in traditional design education. Yet, it’s crucial in today’s world, where people access the web through a wide variety of devices and browsers.
“CSS gives you the power to create designs that are not just beautiful, but also responsive and accessible. It’s like the Swiss Army knife of digital design.” — Unknown
When it comes to ensuring consistency across different devices and browsers, the developer’s role is crucial. Beyond just adjusting layouts to suit different screen sizes, they also consider elements like touchscreen functionality for mobile devices. They might suggest alterations to the design to accommodate touchscreen users, such as larger, easily tappable buttons or swipeable image carousels. Furthermore, they are mindful of how different browsers render colors, fonts, and CSS effects and work to ensure that the design looks consistent and functions smoothly across all potential user environments.
Performance vs Aesthetics
In another instance, the designer might have sourced a collection of stunning high-resolution images for the website. They’re excited about how these images will make the website visually appealing and immersive.
However, the developer knows that high-resolution images are large in file size and can significantly slow down page load times. Aware that website speed is a critical aspect of user experience and even impacts SEO rankings, they’re concerned about the potential performance issues. With CSS and other web technologies, the developer knows they can optimize these images, reducing their file size without significantly impacting their quality. They can also implement lazy loading, where images only load when they’re about to scroll into the viewport.
This understanding of performance optimization is an aspect of web design that designers may overlook but can significantly impact a website’s success. With CSS, designers can strike a balance between aesthetic appeal and performance efficiency, ensuring the site not only looks good but also loads quickly and runs smoothly.
Through these scenarios, we see that while designers and developers might approach web design from different perspectives, these perspectives are both crucial for creating successful websites. With the shared language of CSS, designers can gain insights into the developer’s world, leading to better collaboration, more effective designs, and ultimately, superior websites.
When balancing aesthetics with performance, the developer’s insights can be invaluable. They might suggest using CSS techniques such as gradients, shadows, or even SVG graphics to create visually appealing designs that don’t rely heavily on large image files. Additionally, they could recommend using web fonts instead of text embedded in images to ensure the website is accessible and performs well. These suggestions are based on a deep understanding of how various design choices can impact a website’s load times and overall performance
The Web Design Paradigms in Design Tools
Interestingly, modern design tools have started to incorporate principles of web design and CSS into their features. These features not only enhance the tool’s capabilities but also subtly educate designers about web design principles.
Take Figma’s Auto Layout feature, for example. It mirrors the behavior of CSS Flexbox, a web layout model that allows responsive elements within a container to auto-adjust to the available space. Using Auto Layout, designers can create dynamic designs where elements adjust their position and size based on defined rules, similar to how they would in a web browser.
Padding, a concept familiar to any CSS practitioner, is another feature now found in design tools. It specifies the space between the content of an element and its border, similar to how margins in these design tools create space around elements like CSS margins do.
By incorporating such features, these design tools are becoming more powerful and helping bridge the gap between design and development. Designers using these tools are being introduced to the principles of web design and CSS, fostering a better understanding of the constraints and possibilities of the web medium.
Thinking in Code: The Designer-Developer Hybrid
In traditional project workflows, design and development are seen as separate stages. Designers craft the visual aesthetics of a project, after which front-end developers step in to translate these static design blueprints into functional, interactive websites or applications. However, this division often leads to a disconnect — designs that overlook technical feasibility or implementations that miss the subtle nuances of the original design vision.
A new role has been gaining prominence in this landscape, a hybrid professional who melds the aesthetic understanding of a designer with the technical prowess of a developer. This designer-developer thinks in terms of both visuals and code, crafting designs with a clear understanding of how they will come alive in the final product.
“Great web design is about a harmonious collaboration between disciplines.” — Brad Frost
CSS can be a catalyst for this harmony, providing a shared language that enables designers and developers to understand each other’s perspectives and constraints.
Coding the Design: The Power of Prototyping in the Browser
Designers well-versed in CSS begin to ‘think in code.’ They can visualize the translation of their designs into HTML and CSS, anticipating potential implementation challenges and crafting designs that not only look good but are also feasible and efficient to implement.
Such designers might even adopt a ‘design in the browser’ approach. Instead of creating a design prototype in a graphic design tool, they build it directly in HTML and CSS. This approach allows for a more realistic representation of the final product, accommodating for browser behaviors and interactive elements. It facilitates real-time testing and tweaking, fostering a more iterative, dynamic, and effective design process.
Real-Life Champions of the Hybrid Approach
Several industry leaders have recognized the value of the designer-developer hybrid approach and have implemented measures to foster this collaboration.
Airbnb, for example, developed a Design Language System (DLS) to address this issue. This system provides a unified set of design and coding guidelines, facilitating effective collaboration between designers and developers. It ensures that both parties are on the same page, improving the consistency and efficiency of the design and development process.
An increasing number of organizations are adopting the ‘design in the browser’ approach. For instance, the UK Government’s Digital Service, the team behind gov.uk, has shared how they’ve moved away from using traditional design tools for prototyping. Instead, they create prototypes directly in HTML and CSS. They’ve found that this approach makes their design process more efficient, allows for more accurate representations of the final product, and facilitates early and continual user testing.
Shopify, a leading e-commerce platform, developed a system called ‘Polaris’ to improve the collaboration between designers and developers. Polaris is a design system that provides guidelines and code for creating consistent, user-friendly experiences across all Shopify interfaces. By creating a shared vocabulary between designers and developers, it ensures a seamless transition from design to development.
At Microsoft, they’ve developed the ‘Fluent Design System’ to create more cohesive experiences across their devices and platforms. This system encourages designers and developers to work together from the early stages of product development. Designers are encouraged to learn about code, and developers are encouraged to learn about design, leading to better understanding and collaboration between the two roles.
Conclusion
In digital design, traditional design education is just the starting point. To truly excel, designers must be willing to venture beyond their comfort zone, embracing tools like CSS that might seem daunting but can unlock new levels of creative expression and technical understanding. They can learn from the pragmatism of developers while imparting to them an appreciation for aesthetics and user experience.
“The gap between design and development is shrinking, and the future belongs to the hybrids — the designer-developers who can fluently switch between the two.” — Dave Rupert, co-host of the ShopTalk Show podcast,
The journey might seem challenging, but the rewards, both personal and professional, are more than worth it. After all, in the constantly evolving digital landscape, the ability to adapt and grow is the most valuable skill of all.
Written by: Inchara, kubo media team.
Hey!
If you enjoyed reading this article and want more engaging content like this, don’t forget to follow our publication!
ANNOUNCEMENT 🔥
We’re working on our very own AI tool that lets you create fully editable screens just from text prompts!
Check it out here and don’t forget to join the waitlist :)
