{"id":71869,"date":"2019-10-16T04:16:53","date_gmt":"2019-10-16T11:16:53","guid":{"rendered":"http:\/\/www.taterboy.com\/blog\/2019\/10\/how-frontend-developers-can-empower-designers-work\/"},"modified":"2019-10-16T04:16:53","modified_gmt":"2019-10-16T11:16:53","slug":"how-frontend-developers-can-empower-designers-work","status":"publish","type":"post","link":"https:\/\/www.taterboy.com\/blog\/2019\/10\/how-frontend-developers-can-empower-designers-work\/","title":{"rendered":"How Frontend Developers Can Empower Designer\u2019s Work"},"content":{"rendered":"<link rel=\"canonical\" href=\"https:\/\/www.smashingmagazine.com\/2019\/10\/frontend-developers-empower-designers-work\/\"><title>How Frontend Developers Can Empower Designer\u2019s Work<\/title><\/p>\n<article>\n<header>\n<h1>How Frontend Developers Can Empower Designer\u2019s Work<\/h1>\n<address>Sandrina Pereira<\/address>\n<p>                  <time datetime=\"2019-10-16T12:30:59+02:00\">2019-10-16T12:30:59+02:00<\/time><time datetime=\"2019-10-16T11:08:23+00:00\">2019-10-16T11:08:23+00:00<\/time><\/header>\n<p>This article is mostly directed at you, dear Frontend Developer, who enjoys implementing user interfaces but struggles in aligning expectations with designers you work with. Perhaps you are referred to as the \u201cUI Developer\u201d or \u201cUX Engineer.\u201d Regardless of the title that you carry around, your job (and as well as mine) consists of more than breathing life into design files. We are also responsible for <strong>filling the gap between the design and development workflows<\/strong>. However, when crossing that bridge, we are faced with multiple challenges.<\/p>\n<p>Today, I\u2019d like to share with you practical tips that have helped me to collaborate more efficiently with designers in the past years.<\/p>\n<p>I believe it\u2019s our job, as UI Developers, to not only help designers in their journey to learn how the web works, but also to get to know their reality and learn their language.<\/p>\n<h3>Understanding UX Designers\u2019 Background<\/h3>\n<p>Most of the UX designers (also referred to as Web Designers or Product Designers) out there took their first steps in the design world through tools like Photoshop and Illustrator. Perhaps they were <em>Graphic Designers<\/em>: their main goal was to create logos and brand identities and to design layouts for magazines. They could also have been <em>Marketing Designers<\/em>: printing billboards, designing banners and creating infographics.<\/p>\n<p>This means that most UX designers spent their early days designing for print, which is a totally different paradigm from their current medium, the screen. That was their first big challenge. When dealing with print, designers cared about pixel alignment, but on a fixed area (paper). They didn\u2019t have to contend with a dynamic layout (screens). Thinking about text breaking or states of interactions was simply not part of their job either. Designers also had complete freedom over colors, images, and typography without performance constraints.<\/p>\n<p>Fortunately, there have been many efforts from the self-taught UX designers community, to teach <a href=\"https:\/\/uxdesign.cc\/development-fundamentals-for-ux-designers-caf759724874\">development fundamentals<\/a>, discuss whether designers should <a href=\"https:\/\/uxdesign.cc\/should-ux-desingers-learn-to-code-an-ex-developers-perspective-5f6cf04eafc2\">learn to code<\/a> and understand <a href=\"https:\/\/www.abstract.com\/blog\/developer-handoff-for-designers\/\">how to best perform hand-off to developers<\/a>. The same held true for the development side as well (more about that in a minute.) However, there is still friction happening between the two fields.<\/p>\n<p>On the one hand, designers complaining each time an implementation doesn\u2019t match their designs or feeling misunderstood when those are rejected by the developers without a clear explanation. On the other hand, developers might take for granted that designers know something technical when that might not be true. I believe we can all do better than that.<\/p>\n<div data-component=\"FeaturePanel\" data-audience=\"non-subscriber\" data-remove=\"true\"><\/div>\n<h3>Embracing A New Way Of Thinking<\/h3>\n<p>The websites and apps that we are building will be displayed on a wide range of screen sizes. Each person will use them on multiple devices. Our common goal is to create a familiar experience across their journeys.<\/p>\n<p>When we, as developers, think that designers are being picky about pixel alignments, we need to understand why that is. We need to recognize that it\u2019s beyond fidelity and consistency. It\u2019s about the sum of all the parts working together. It\u2019s cohesion. We have to embrace it and do our best to accomplish it. <strong>Learning the fundamentals of design principles is a good starting point<\/strong>. Understand the importance of selecting the right colors, how the hierarchy works, and why white space matters.<\/p>\n<p><strong>Note<\/strong>: <em>There\u2019s an online course known as \u201c<a href=\"https:\/\/frontendmasters.com\/courses\/design-for-developers\/\">Design for Developers<\/a>\u201d and a book called \u201c<a href=\"https:\/\/refactoringui.com\/book\/\">Refactoring UI<\/a>\u201d \u2014 both are great to get you started. With these, you\u2019ll be able to implement user interfaces with a sharp eye for detail and gain significant leverage when communicating with designers.<\/em><\/p>\n<h3>Magnifying Your Designers\u2019 Awareness<\/h3>\n<p>You might take for granted that designers know the web as much as you do. Well, they might not. Actually, they don\u2019t have to! It\u2019s our responsibility, as developers, to keep them updated with the current state of the web.<\/p>\n<p>I\u2019ve worked with the two sides of this spectrum: Designers who think that anything can be built (such as complex filters, new scroll behaviors or custom form inputs) without giving browser compatibility a thought. Then, there are designers with assumptions about the \u201clow limitations of the web\u201d and just assume by themselves that something is impossible to implement. We need to <strong>show them the true possibilities of web design<\/strong> and not let the limitations hold back their skills.<\/p>\n<h4>Teach Them Code, Not How To Code<\/h4>\n<p>This seems contradictory but bear with me: knowing <em>how to code<\/em> is at the core of a developer\u2019s job. We work in a fast-paced industry with new stuff popping up every day. It would be a hypocritical request from us to demand designers to learn how to code. However, we can help them to <em>understand<\/em> code.<\/p>\n<p><strong>Sit next to the designer you work with<\/strong> for 15 minutes and teach them how they can see for themselves whether the specs of an element are correct and how to change them. I find <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Tools\/Page_Inspector\">Firefox Page Inspector<\/a> remarkably user-friendly for this.<\/p>\n<p>Nowadays, it\u2019s a joy to visualize layouts, debug CSS animations and tweak typography. Show them a ready-to-use code playground like <a href=\"https:\/\/codepen.io\/\">Codepen<\/a> for them to explore. They don\u2019t need to know all CSS specs to understand how the layout paradigm works. However, they need to know how elements are created and behave in order to empower their daily work.<\/p>\n<h4>Include Designers In The Development Process<\/h4>\n<p>Invite designers to join you in the stand-up meeting, to be part of the QA process and to sit down with you while you refine visual details in your implementations. This will make them understand the constraints of the web and, soon enough, they\u2019ll recognize why a feature takes time to implement.<\/p>\n<h4>Ask Designers To Include You In Their Design Process<\/h4>\n<p>You\u2019ll realize that they do much more than \u201cmake things pretty\u201d. You\u2019ll learn more about the research process and how user testing is done. You\u2019ll discover that for each design proposal they show to you, several other studies were previously dropped. When designers request a change, ask the reason behind it, so you can <strong>learn more about the decisions being made<\/strong>. Ultimately, you\u2019ll start to understand why they are picky about white space and alignments, and hopefully, soon you\u2019ll be too!<\/p>\n<p>I find it crucial to treat frontend development as a core part of the design process, and design as a core part of the development process. Advocating <strong>a mindset where everyone gets the chance to be involved<\/strong> in the design and development cycle will help us all to better understand each other\u2019s challenges and to create great experiences as well.<\/p>\n<div><\/div>\n<h3>We May Use Different Tools, But We Must Speak The Same Language<\/h3>\n<p>Now that we are starting to understand each other\u2019s workflow a little better, it\u2019s time for the next step: to speak the same language.<\/p>\n<h4>Looking Beyond The Code Editor<\/h4>\n<p>Once you start to pay attention to your surroundings, you\u2019ll be better equipped to tackle problems. Get to know the business better and be willing to listen to what designers have to say. That will make you a team member with richer contributions to the project. Collaborating in areas beyond our expertise is the key to creating meaningful conversations and mutual trust.<\/p>\n<h4>Using UI Systems As A Contract<\/h4>\n<p>Ask designers to share their design system with you (and <a href=\"https:\/\/medium.com\/free-code-camp\/how-to-construct-a-design-system-864adbf2a117\">if they don\u2019t use one, it\u2019s never too late to start<\/a>). That will save you the bother of handpicking the colors used, figuring out margins or guessing a text style. Make sure you are familiar with the UI System as much as they are.<\/p>\n<p>You might already be familiar with the component-based concept. However, some designers might not perceive it in the same way as you do. Show them how components can help you to build user interfaces more efficiently. Spread that mindset and also say bye-bye to similar-but-not-equal-names: <em>header vs hero, pricing info vs price selector<\/em>. When a piece of the user interface (a.k.a \u2018a component\u2019) is built, <strong>stride to use the same names<\/strong> so they can be reflected in both design and code files. Then, when someone says, <em>\u201cWe need to tweak the proposal invitation widget,\u201d<\/em> everyone knows exactly what is being talked about.<\/p>\n<h4>Acknowledging The Real Source Of Truth<\/h4>\n<p>Despite the fact that the user interface is first created in the design files, the real source of truth is on the development side. At the end of the day, it is what people actually see, right? When a design is updated, it\u2019s a good idea to leave a side note about its development status, especially in projects where a large number of people are involved. This trick helps to keep the communication smooth, so nobody (including you) wonders: \u201c<em>This is different from the live version. Is it a bug or hasn\u2019t so-and-so been implemented just yet?<\/em>\u201d<\/p>\n<h4>Keeping The Debt Under Control<\/h4>\n<p>So, you know all about <em>technical debt<\/em>?\u2014?it happens when the cost to implement something new is high because of a shortcut we took in the past to meet a deadline. The same can happen on the design side too and we call it <em>design debt<\/em>.<\/p>\n<p>You can think about it like this: The higher the UX &#038; UI inconsistency, the higher the debt (technical and design). One of the most common inconsistencies is in having different elements to represent the same action. <strong>This is why bad design is usually reflected in bad code<\/strong>. It\u2019s up to all of us, both as designers and developers, to <a href=\"https:\/\/uxdesign.cc\/what-is-design-debt-and-why-you-should-treat-it-seriously-4366d33d3c89\">treat our design debt seriously<\/a>.<\/p>\n<h4>Being Accessible Doesn\u2019t Mean It Has To Be Ugly<\/h4>\n<p>I\u2019m really pleased to see that both we, as developers and designers, are finally starting to bring accessibility into our work. However, a lot of us still think that designing accessible products is hard or limits our skills and creativity.<\/p>\n<p>Let me remind you that we are not creating a product just for ourselves. <strong>We are creating a product to be used by all the people<\/strong>, including those who use the product in different ways from you. Take into account how individual elements can be more accessible while keeping the current userflows clear and coherent.<\/p>\n<p>For example, if a designer really believes that creating an enhanced select input is necessary, stand by their side and work together to <a href=\"https:\/\/uxdesign.cc\/designing-for-accessibility-is-not-that-hard-c04cc4779d94\">design<\/a> and <a href=\"https:\/\/medium.com\/@matuzo\/writing-css-with-accessibility-in-mind-8514a0007939\">implement<\/a> it in an accessible way to be used by a wide range of people with diverse abilities.<\/p>\n<div><\/div>\n<h3>Giving Valuable Feedback To Designers<\/h3>\n<p>It\u2019s unavoidable that questions will pop up when going through the designs. However, that\u2019s not a reason for you to start complaining about the designers\u2019 mistakes or about their ambitious ideas. The designers are not there to drive you mental, they just don\u2019t always intuitively know what you need to do your job. The truth is that, in the past, you didn\u2019t know about this stuff either, so be patient and embrace collaboration as a way of learning.<\/p>\n<h4>The Earlier The Feedback, The Better<\/h4>\n<p>The timing for feedback is crucial. The feedback workflow depends a lot on the project structure, so there isn\u2019t a one-size-fits-all solution for it. However, when possible, I believe we should aim for <strong>a workflow of periodic feedback<\/strong> \u2014 starting in the early stages. Having this mindset of open collaboration is the way to reduce the possibility of unexpected big re-iterations later in the road. Keep in mind that the later you give the designer your first feedback, the higher will be the cost for them to explore a new approach if needed.<\/p>\n<h4>Explain Abstract Ideas In Simple Terms<\/h4>\n<p>Remember when I said that performance was not a concern of the designers\u2019 previous jobs? Don\u2019t freak out when they are not aware of <a href=\"https:\/\/www.sarasoueidan.com\/blog\/svg-tips-for-designers\/\">how to create optimized SVGs for the web<\/a>. When faced with a design that requires a lot of different fonts to be loaded, explain to them why we should minimize the number of requests, perhaps even take advantage of <a href=\"https:\/\/developers.google.com\/web\/fundamentals\/design-and-ux\/typography\/variable-fonts\/\">Variable Fonts<\/a>. Asides from loading faster, it also provides a more consistent user experience. Unless designers are keen to learn, avoid using too many technical terms when explaining something. You can see this as an opportunity of improving your communication skills and clarifying your thoughts.<\/p>\n<h4>Don\u2019t Let Assumptions Turn Into Decisions<\/h4>\n<p>Some questions about a design spec only show up when we get our hands dirty in the code. To speed things up, we might feel tempted to make decisions based on our assumptions. Please, don\u2019t. Each time you turn an assumption into a decision, you are risking the trust that the design team puts on you to implement the UI. Whenever in doubt, <strong>reach out and clarify your doubts<\/strong>. This will show them that you care about the final result as much as they do.<\/p>\n<h4>Don\u2019t Do Workarounds By Yourself<\/h4>\n<p>When you are asked to implement a design that is too hard, don\u2019t say <em>\u201cIt\u2019s impossible\u201d<\/em> or start to implement a cheap alternative version of it by yourself. This immediately causes friction with the design team when they see their designs were not implemented as expected. They might react angrily, or not say anything but feel defeated or frustrated. That can all be avoided if we explain to them why something it\u2019s not possible, in simple terms and suggest alternative approaches. <strong>Avoid dogmatic behaviors and be open to collaborating on a new solution<\/strong>.<\/p>\n<p>Let them know about the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Graceful_degradation\">Graceful Degradation<\/a> and <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Progressive_Enhancement\">Progressive Enhancement<\/a> techniques and build together an ideal solution and a fallback solution. For example, we can <a href=\"https:\/\/www.smashingmagazine.com\/2017\/07\/enhancing-css-layout-floats-flexbox-grid\/\">enhance a layout from flexbox to CSS Grid<\/a>. This allows us to respect the core purpose of a feature and at the same time make the best use of web technologies.<\/p>\n<p>When it comes to animations, let\u2019s be real: deep down you are as thrilled to implement the next <em>wow<\/em> animation as much as the designers are to create it. The difference between us and them is that we are more aware of the web\u2019s constraints. However, don\u2019t let that limit your own skills! The web evolves fast, so we must use that in our favor.<\/p>\n<p>The next time you are asked to bring a prototype to life, try not to reject it upfront or do it all by yourself. See it as an opportunity to push yourself. Animations are one of the pickiest parts of web development, so make sure to refine each keyframe with your designer \u2014 in person or by sharing a private synced link.<\/p>\n<h4>Think Beyond The Ideal State \u2014 Together<\/h4>\n<p>Here\u2019s the thing: it\u2019s not all about you. One of the designers\u2019 challenges is to really understand their users and present the designs in the most attractive way to sell to the Product Manager. Sometimes they forget about what\u2019s beyond the ideal state and developers forget it too.<\/p>\n<p>In order to help avoid these gaps from happening, align with designers the scenario requirements:<\/p>\n<ul>\n<li><strong>The worst-case scenario<\/strong><br \/>A scenario where the worst possibilities are happening. This helps designers to say no to fixed content and let it be fluid. What happens if the title has more than 60 characters or if the list is too long? The same applies to the opposite, the empty scenario. What should the user do when the list is empty?<\/li>\n<li><strong>Interaction states<\/strong><br \/>The browser is more than hovering and clicking around. There are a bunch of states: default, hover, focus, active, disable, error\u2026 and some of them can happen at the same time. Let\u2019s give them the proper attention.<\/li>\n<li><strong>The loading state<\/strong><br \/>When building stuff locally, we might use mocks and forget that things actually take time to load. Let designers know about that possibility too and show them that are ways to <a href=\"https:\/\/uxdesign.cc\/what-you-should-know-about-skeleton-screens-a820c45a571a\">make people perceive that things don\u2019t take that long to load<\/a>.<\/li>\n<\/ul>\n<p>Taking into consideration all these scenarios will save you a lot of time going back and forth during the development phase.<\/p>\n<p><strong>Note<\/strong>: <em>There\u2019s a great article by Scott Hurff about <a href=\"https:\/\/www.scotthurff.com\/posts\/why-your-user-interface-is-awkward-youre-ignoring-the-ui-stack\/\">how to fix bad user interfaces<\/a> that will take us a step closer to an accessible product.<\/em><\/p>\n<h4>Embrace Change Requests<\/h4>\n<p>Developers are known for not being too happy about someone finding a bug in their code \u2014 especially when it\u2019s a design bug reported by a designer. There are a lot of memes around it, but have you ever reflected how those bugs can compoundingly rot both the quality of the experience as well as your relationship when these design bugs are casually dismissed? It happens slowly, almost like falling asleep. Bit by bit, then all at once. Designers might start out saying, \u201c<em>It\u2019s just a tiny little detail,<\/em>\u201d until the indifference and resentment builds up and nothing is said. The damage has then already been done.<\/p>\n<p>This situation is two-fold: both to your peers and to your work. Don\u2019t let that happen. <strong>Work on what\u2019s coloring your reaction.<\/strong> A designer being \u2018picky\u2019 can be inconvenient, but it can also be an engineer\u2019s shallow interpretation of attentiveness and enthusiasm. When someone tells you that your implementation is not perfect (yet), put your ego aside and show them how you recognize their hard work in refining the final result.<\/p>\n<h4>Go Off The Record Once In A While<\/h4>\n<p>We all have tasks to deliver and roadmaps to finish. However, some of the best work happens off the record. It won\u2019t be logged into the <em>TO DO<\/em> board and that\u2019s okay. If you find a designer you have a rapport with, go sneak into their workspace and explore together new experiments. You never know what can come from there!<\/p>\n<h3>Conclusion<\/h3>\n<p>When you are willing to learn from the design team, you are also learning different ways of thinking. You\u2019ll evolve your mindset of collaboration with other areas out of your experience while refining your eye for creating new experiences. Be there to help and be open to learning, because sharing is what makes us better.<\/p>\n<p><\/p>\n<hr>\n<p><em>This article wouldn\u2019t be possible without the feedback of many great people. I want to gratefully thank to the designers <a href=\"https:\/\/twitter.com\/jazmeijer\">Jasmine Meijer<\/a> and <a href=\"https:\/\/www.linkedin.com\/in\/margaridambotelho\/\">Margarida Botelho<\/a> for helping me to share a balanced perspective about the misunderstandings between designers and developers.<\/em><\/p>\n<h4><span>Related Reading<\/span> on SmashingMag:<\/h4>\n<ul>\n<li>\u201c<a title=\"Read 'Design For Developers'\" href=\"https:\/\/www.smashingmagazine.com\/2016\/12\/mistakes-developers-make-when-learning-design\/\" rel=\"bookmark\">Design For Developers<\/a>\u201d by <em>Mason Gentry<\/em><\/li>\n<li>\u201c<a title=\"Read 'Working Together: How Designers And Developers Can Communicate To Create Better Projects'\" href=\"https:\/\/www.smashingmagazine.com\/2018\/04\/working-together-designers-developers\/\" rel=\"bookmark\">Working Together: How Designers And Developers Can Communicate To Create Better Projects<\/a>\u201d by <em>Rachel Andrew<\/em><\/li>\n<li>\u201c<a title=\"Read 'How Frontend Developers Can Help To Bridge The Gap Between Designers And Developers'\" href=\"https:\/\/www.smashingmagazine.com\/2019\/05\/frontend-developers-designers\/\" rel=\"bookmark\">How Frontend Developers Can Help To Bridge The Gap Between Designers And Developers<\/a>\u201d by <em>Stefan Kaltenegger<\/em><\/li>\n<li>\u201c<a title=\"Read 'Which Podcasts Should Web Designers And Developers Be Listening To?'\" href=\"https:\/\/www.smashingmagazine.com\/2018\/04\/podcasts-web-designers-developers\/\" rel=\"bookmark\">Which Podcasts Should Web Designers And Developers Be Listening To?<\/a>\u201d by <em>Ricky Onsman<\/em><\/li>\n<\/ul>\n<div>\n  <img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/logo-red-12.png?w=900\" alt=\"Smashing Editorial\"><span>(ra, yk, il)<\/span>\n<\/div>\n<\/article>\n<p class=\"wpematico_credit\"><small>Powered by <a href=\"http:\/\/www.wpematico.com\" target=\"_blank\">WPeMatico<\/a><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"<p>How Frontend Developers Can Empower Designer\u2019s Work How Frontend Developers Can Empower Designer\u2019s Work Sandrina Pereira 2019-10-16T12:30:59+02:002019-10-16T11:08:23+00:00 This article is mostly directed at you, dear Frontend Developer, who enjoys implementing user interfaces but struggles in aligning expectations with designers you work with. Perhaps you are referred to as the \u201cUI Developer\u201d or \u201cUX Engineer.\u201d Regardless&#8230;<a class=\"moretag\" href=\"https:\/\/www.taterboy.com\/blog\/2019\/10\/how-frontend-developers-can-empower-designers-work\/\"> Read the full article&#8230;<\/a><\/p>\n","protected":false},"author":4,"featured_media":71870,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[371],"tags":[],"class_list":["post-71869","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-user-experience"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.0.1 - aioseo.com -->\n\t<meta name=\"description\" content=\"How Frontend Developers Can Empower Designer\u2019s WorkHow Frontend Developers Can Empower Designer\u2019s Work Sandrina Pereira 2019-10-16T12:30:59+02:002019-10-16T11:08:23+00:00This article is mostly directed at you, dear Frontend Developer, who enjoys implementing user interfaces but struggles in aligning expectations with designers you work with. Perhaps you are referred to as the \u201cUI Developer\u201d or \u201cUX Engineer.\u201d Regardless of the\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Guest Contribution\"\/>\n\t<meta name=\"keywords\" content=\"user experience\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.taterboy.com\/blog\/2019\/10\/how-frontend-developers-can-empower-designers-work\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.0.1\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Design for Immersive Technologies | User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"How Frontend Developers Can Empower Designer\u2019s Work | Design for Immersive Technologies\" \/>\n\t\t<meta property=\"og:description\" content=\"How Frontend Developers Can Empower Designer\u2019s WorkHow Frontend Developers Can Empower Designer\u2019s Work Sandrina Pereira 2019-10-16T12:30:59+02:002019-10-16T11:08:23+00:00This article is mostly directed at you, dear Frontend Developer, who enjoys implementing user interfaces but struggles in aligning expectations with designers you work with. Perhaps you are referred to as the \u201cUI Developer\u201d or \u201cUX Engineer.\u201d Regardless of the\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/www.taterboy.com\/blog\/2019\/10\/how-frontend-developers-can-empower-designers-work\/\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2019-10-16T11:16:53+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2019-10-16T11:16:53+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary\" \/>\n\t\t<meta name=\"twitter:title\" content=\"How Frontend Developers Can Empower Designer\u2019s Work | Design for Immersive Technologies\" \/>\n\t\t<meta name=\"twitter:description\" content=\"How Frontend Developers Can Empower Designer\u2019s WorkHow Frontend Developers Can Empower Designer\u2019s Work Sandrina Pereira 2019-10-16T12:30:59+02:002019-10-16T11:08:23+00:00This article is mostly directed at you, dear Frontend Developer, who enjoys implementing user interfaces but struggles in aligning expectations with designers you work with. Perhaps you are referred to as the \u201cUI Developer\u201d or \u201cUX Engineer.\u201d Regardless of the\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/how-frontend-developers-can-empower-designers-work\\\/#article\",\"name\":\"How Frontend Developers Can Empower Designer\\u2019s Work | Design for Immersive Technologies\",\"headline\":\"How Frontend Developers Can Empower Designer\\u2019s Work\",\"author\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.taterboy.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/logo-red-12.png?fit=60%2C80&ssl=1\",\"width\":60,\"height\":80},\"datePublished\":\"2019-10-16T04:16:53-07:00\",\"dateModified\":\"2019-10-16T04:16:53-07:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/how-frontend-developers-can-empower-designers-work\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/how-frontend-developers-can-empower-designers-work\\\/#webpage\"},\"articleSection\":\"User Experience\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/how-frontend-developers-can-empower-designers-work\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.taterboy.com\\\/blog\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"name\":\"User Experience\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"position\":2,\"name\":\"User Experience\",\"item\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/how-frontend-developers-can-empower-designers-work\\\/#listItem\",\"name\":\"How Frontend Developers Can Empower Designer\\u2019s Work\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/how-frontend-developers-can-empower-designers-work\\\/#listItem\",\"position\":3,\"name\":\"How Frontend Developers Can Empower Designer\\u2019s Work\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"name\":\"User Experience\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\",\"name\":\"Design for Immersive Technologies\",\"description\":\"User Experience for Games, Virtual Reality (VR) and Augmented\\\/Mixed Reality (AR\\\/MR)\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/\",\"name\":\"Guest Contribution\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/how-frontend-developers-can-empower-designers-work\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d2aad73eb0f48c67b141e9fc978a0e498969791ed623346e361d02d19775b0bb?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Guest Contribution\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/how-frontend-developers-can-empower-designers-work\\\/#webpage\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/how-frontend-developers-can-empower-designers-work\\\/\",\"name\":\"How Frontend Developers Can Empower Designer\\u2019s Work | Design for Immersive Technologies\",\"description\":\"How Frontend Developers Can Empower Designer\\u2019s WorkHow Frontend Developers Can Empower Designer\\u2019s Work Sandrina Pereira 2019-10-16T12:30:59+02:002019-10-16T11:08:23+00:00This article is mostly directed at you, dear Frontend Developer, who enjoys implementing user interfaces but struggles in aligning expectations with designers you work with. Perhaps you are referred to as the \\u201cUI Developer\\u201d or \\u201cUX Engineer.\\u201d Regardless of the\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/how-frontend-developers-can-empower-designers-work\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.taterboy.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/logo-red-12.png?fit=60%2C80&ssl=1\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/how-frontend-developers-can-empower-designers-work\\\/#mainImage\",\"width\":60,\"height\":80},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/how-frontend-developers-can-empower-designers-work\\\/#mainImage\"},\"datePublished\":\"2019-10-16T04:16:53-07:00\",\"dateModified\":\"2019-10-16T04:16:53-07:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/\",\"name\":\"Design for Immersive Technologies\",\"description\":\"User Experience for Games, Virtual Reality (VR) and Augmented\\\/Mixed Reality (AR\\\/MR)\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"How Frontend Developers Can Empower Designer\u2019s Work | Design for Immersive Technologies","description":"How Frontend Developers Can Empower Designer\u2019s WorkHow Frontend Developers Can Empower Designer\u2019s Work Sandrina Pereira 2019-10-16T12:30:59+02:002019-10-16T11:08:23+00:00This article is mostly directed at you, dear Frontend Developer, who enjoys implementing user interfaces but struggles in aligning expectations with designers you work with. Perhaps you are referred to as the \u201cUI Developer\u201d or \u201cUX Engineer.\u201d Regardless of the","canonical_url":"https:\/\/www.taterboy.com\/blog\/2019\/10\/how-frontend-developers-can-empower-designers-work\/","robots":"max-image-preview:large","keywords":"user experience","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/how-frontend-developers-can-empower-designers-work\/#article","name":"How Frontend Developers Can Empower Designer\u2019s Work | Design for Immersive Technologies","headline":"How Frontend Developers Can Empower Designer\u2019s Work","author":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"publisher":{"@id":"https:\/\/www.taterboy.com\/blog\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/logo-red-12.png?fit=60%2C80&ssl=1","width":60,"height":80},"datePublished":"2019-10-16T04:16:53-07:00","dateModified":"2019-10-16T04:16:53-07:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/how-frontend-developers-can-empower-designers-work\/#webpage"},"isPartOf":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/how-frontend-developers-can-empower-designers-work\/#webpage"},"articleSection":"User Experience"},{"@type":"BreadcrumbList","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/how-frontend-developers-can-empower-designers-work\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog#listItem","position":1,"name":"Home","item":"https:\/\/www.taterboy.com\/blog","nextItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","name":"User Experience"}},{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","position":2,"name":"User Experience","item":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/","nextItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/how-frontend-developers-can-empower-designers-work\/#listItem","name":"How Frontend Developers Can Empower Designer\u2019s Work"},"previousItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/how-frontend-developers-can-empower-designers-work\/#listItem","position":3,"name":"How Frontend Developers Can Empower Designer\u2019s Work","previousItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","name":"User Experience"}}]},{"@type":"Organization","@id":"https:\/\/www.taterboy.com\/blog\/#organization","name":"Design for Immersive Technologies","description":"User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","url":"https:\/\/www.taterboy.com\/blog\/"},{"@type":"Person","@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author","url":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/","name":"Guest Contribution","image":{"@type":"ImageObject","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/how-frontend-developers-can-empower-designers-work\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/d2aad73eb0f48c67b141e9fc978a0e498969791ed623346e361d02d19775b0bb?s=96&d=mm&r=g","width":96,"height":96,"caption":"Guest Contribution"}},{"@type":"WebPage","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/how-frontend-developers-can-empower-designers-work\/#webpage","url":"https:\/\/www.taterboy.com\/blog\/2019\/10\/how-frontend-developers-can-empower-designers-work\/","name":"How Frontend Developers Can Empower Designer\u2019s Work | Design for Immersive Technologies","description":"How Frontend Developers Can Empower Designer\u2019s WorkHow Frontend Developers Can Empower Designer\u2019s Work Sandrina Pereira 2019-10-16T12:30:59+02:002019-10-16T11:08:23+00:00This article is mostly directed at you, dear Frontend Developer, who enjoys implementing user interfaces but struggles in aligning expectations with designers you work with. Perhaps you are referred to as the \u201cUI Developer\u201d or \u201cUX Engineer.\u201d Regardless of the","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/www.taterboy.com\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/how-frontend-developers-can-empower-designers-work\/#breadcrumblist"},"author":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"creator":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/logo-red-12.png?fit=60%2C80&ssl=1","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/how-frontend-developers-can-empower-designers-work\/#mainImage","width":60,"height":80},"primaryImageOfPage":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/how-frontend-developers-can-empower-designers-work\/#mainImage"},"datePublished":"2019-10-16T04:16:53-07:00","dateModified":"2019-10-16T04:16:53-07:00"},{"@type":"WebSite","@id":"https:\/\/www.taterboy.com\/blog\/#website","url":"https:\/\/www.taterboy.com\/blog\/","name":"Design for Immersive Technologies","description":"User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","inLanguage":"en-US","publisher":{"@id":"https:\/\/www.taterboy.com\/blog\/#organization"}}]},"og:locale":"en_US","og:site_name":"Design for Immersive Technologies | User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","og:type":"article","og:title":"How Frontend Developers Can Empower Designer\u2019s Work | Design for Immersive Technologies","og:description":"How Frontend Developers Can Empower Designer\u2019s WorkHow Frontend Developers Can Empower Designer\u2019s Work Sandrina Pereira 2019-10-16T12:30:59+02:002019-10-16T11:08:23+00:00This article is mostly directed at you, dear Frontend Developer, who enjoys implementing user interfaces but struggles in aligning expectations with designers you work with. Perhaps you are referred to as the \u201cUI Developer\u201d or \u201cUX Engineer.\u201d Regardless of the","og:url":"https:\/\/www.taterboy.com\/blog\/2019\/10\/how-frontend-developers-can-empower-designers-work\/","article:published_time":"2019-10-16T11:16:53+00:00","article:modified_time":"2019-10-16T11:16:53+00:00","twitter:card":"summary","twitter:title":"How Frontend Developers Can Empower Designer\u2019s Work | Design for Immersive Technologies","twitter:description":"How Frontend Developers Can Empower Designer\u2019s WorkHow Frontend Developers Can Empower Designer\u2019s Work Sandrina Pereira 2019-10-16T12:30:59+02:002019-10-16T11:08:23+00:00This article is mostly directed at you, dear Frontend Developer, who enjoys implementing user interfaces but struggles in aligning expectations with designers you work with. Perhaps you are referred to as the \u201cUI Developer\u201d or \u201cUX Engineer.\u201d Regardless of the"},"aioseo_meta_data":{"post_id":"71869","title":null,"description":null,"keywords":null,"keyphrases":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_custom_url":null,"og_image_custom_fields":null,"og_custom_image_width":null,"og_custom_image_height":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"location":null,"local_seo":null,"created":"2021-02-07 17:13:14","updated":"2026-09-02 07:53:06","focus_keyword":null,"additional_keywords":null,"truseo_locale":null,"primary_term":null,"og_image_url":null,"og_image_width":null,"og_image_height":null,"twitter_image_url":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"Article","isEnabled":true},"graphs":[]},"limit_modified_date":false,"ai":null,"breadcrumb_settings":null,"seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.taterboy.com\/blog\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/\" title=\"User Experience\">User Experience<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tHow Frontend Developers Can Empower Designer\u2019s Work\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/www.taterboy.com\/blog"},{"label":"User Experience","link":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/"},{"label":"How Frontend Developers Can Empower Designer\u2019s Work","link":"https:\/\/www.taterboy.com\/blog\/2019\/10\/how-frontend-developers-can-empower-designers-work\/"}],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8wzr5-iHb","jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/logo-red-12.png?fit=60%2C80&ssl=1","_links":{"self":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts\/71869","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/comments?post=71869"}],"version-history":[{"count":0,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts\/71869\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/media\/71870"}],"wp:attachment":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/media?parent=71869"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/categories?post=71869"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/tags?post=71869"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}