Designed a handoff guide for UX and now I'm planning a similar document for developers

I’m sure this happens everywhere but at work we have this issue that no website we develop ends up looking like the original design. So I was tasked with doing a guide to close that gap between design and development. So the designer guide was focused on how to better communicate some of the details or concepts. Provided components for base variables such as color or typography. But that’s finished so it’s all good. Now, I’m doing the same, but for front end developers. And I’m struggling with how to tackle this. This is the outline I have. Figma: - Layers - Local styles Accessibility - Titles - Headings - Alt Text - Focus state Any tips or good talking points to include? I'm a designer first, web developer second so I tend to second guess what I think might be useful. Most of the department works with VUE so I tagged it.
13 Replies
ἔρως
ἔρως14mo ago
you forgot enable states and, for some elements, checked/open states for example, a custom checkbox should take into account the hover, checked and disabled states you mentioned titles and headings, but typography should be more complete than that
WoolHat
WoolHat14mo ago
Thanks, I'll be sure to include those.
ἔρως
ἔρως14mo ago
by the way, if you can, also include somewhere with a quick reference to all the colors you used, and identify them as well (text, border, ...), if it makes sense
vince
vince14mo ago
Not what you asked for but just sounds like the developers aren't that great at their job You have a full figma mockup with desktop, tablet, mobile versions? 100% developers should be able to develop from that, unless the design has specific design elements that are hard to code out, in which case the developers should be communicating that with the designers Have you talked with the developers to see where they get stuck at?
ἔρως
ἔρως14mo ago
mockups are everything, but aren't enough
WoolHat
WoolHat14mo ago
Nope, they are 100% remote so I haven't even meet half of them. We are understaffed so the devs are streched thin :/
vince
vince14mo ago
Ah that sucks. I think you're most valuable answers will come from your developers If they're stretched too thin they could just not be paying attention to the small details too which is the most important imo
ἔρως
ἔρως14mo ago
looking at small details all day long gets mentally draining really quickly if you can quickly put aside some information, it will help everybody
WoolHat
WoolHat14mo ago
Yeah, thats why my first approach was about teaching the design team how to design better handoffs
ἔρως
ἔρως14mo ago
do you clean up all the "garbage" you won't be use, before you handoff the design?
WoolHat
WoolHat14mo ago
I can't speak for the whole design team but I would say they are fairly polished and clear.
ἔρως
ἔρως14mo ago
that's good
WoolHat
WoolHat13mo ago
Thanks for the interest and comments. Any other tip for the developer team would be great for my presentation Thanks for all your answers, I'll mark the post as SOLVED 🫰
Want results from more Discord servers?
Add your server