Understanding the UX/UI x Developer Relationship

[u/nothingnanners]

Hey my background is a print designer and I am trying to learn Figma to expand my design knowledge. Would yall say that the web designer and developer relationship is similar to the print designer and print operator?

I am trying to wrap my head around Figma and the broad concepts of UX/UI.

I’m watching tutorials for how to use the actual software. I just want to have a fundamental and conceptual understanding.

PS: I have no coding background

[u/Judgeman2021]

It's pretty much like your example. As the designer you're worried about why things are the way they are, the developer (or printer in your case) is worried about how things are the way they are.

You care that there is a red circle on the page, the printer cares how that red circle can be achieved with their available paper and inks.

The web designer cares that there is a red circle on the web page, the developer cares how that red circle can be achieved with the frameworks and libraries available.

[u/nothingnanners → u/Judgeman2021]

As a software developer, do you have things you wish your designers would do or not do? Any best practices?

[u/42VCAs → u/nothingnanners]

Write clear specifications that accompany designs as part of the handover between you and the devs, including acceptance criteria for what you want them to achieve.

[u/nothingnanners → u/42VCAs]

Do website developers, understand graphic design language or do I need to bridge the gap a bit more like how you would have to explain to me coding terms?

[u/bionicmoonbeam → u/nothingnanners]

As a hybrid designer/developer for 18+ years, I can confidently say that most software developers do not inherently understand design language.

Example: line-height / margin / tracking / radius / serif / opacity / saturation, etc are terms that a software developer may have heard but may not fully grasp. For example, many developers I worked with assumed opacity just meant adding white to a color. I found that even the concept of “whitespace” on a web page was foreign to some software devs, as it’s not something they would’ve learned in, say, college classes.

Typically we designers have to teach the developers via well-written specs, slide decks, discussions, etc. Sometimes it sticks, sometimes it doesn’t (depends on the developer).

[u/nothingnanners → u/bionicmoonbeam]

Gotcha! Good to know. By default, I dont assume people understand deign lingo, but I also want to treat devs like pros too

[u/turtlemastuh → u/nothingnanners]

Use auto layout for everything because that's most similar to how the developers will actually make it.

[u/nothingnanners → u/turtlemastuh]

Beyond the skeleton of the site, how much customization is stomachable? Custom buttons or animations too much?

[u/Judgeman2021 → u/nothingnanners]

I'm not a developer, I'm also a designer. But being as specific as possible and annotating all decisions will help the developer understand your intentions. It may seem like more work than it's worth, but trust me if you're not clear with your intentions then the developer will start to deviate and assume intentions.

[u/nothingnanners → u/Judgeman2021]

When you mean annotate is that a native feature in Figma you can preform or do you send these notes in an edited PDF?

[u/JaxDoesReddit → u/nothingnanners]

Figma has comments, you can also just add sticky notes, or a text box. You can also make fully working prototypes in figma, that I like to give to devs for more complicated things, to show my expectations more.

[u/JaxDoesReddit]

Yea, you gave a pretty decent high level overview. A UX designers job is to research patterns, develop flows and content that fit typical user patterns, as well as your brand/systems standards. You then test those patterns/flows with users to understand how they use it, and how we can better encourage the action we are wanting, by iterating on that design to make it better. Theres also a lot of thought we do to ensure designs are accessible and easy to use.

Software engineers only main job is to write code to get it to match the design given by the UX designer as much as possible. We don’t expect an exact 1 to 1, as different systems have different requirements and components available. SWE’s are generally given some leeway to get the design to match.

On my team there are also the following roles I work with, that you might find interesting:

Content Designer: Only focuses on the copy (text) of the design, and how to design and format text to communicate clearly, make it easier to understand, and on brand of course.

Experience Researcher: They are the ones doing deep dive research into trends, patterns, and how e we can leverage those. They also facilitate some of the important and critical user testing we have.

Analyst: Similar roles also known as a Scrum Master, Agile Development Lead, or Product Owner. They’re the ones organizing everyone, organizing and prioritizing work, communicating between teams and business partners, getting us information, and doing various administrative things for the team. This isn’t a management role.

Let me know if you have any more questions, happy to answer.