0

Hi I'm new in UI/UX world. My question is when creating mockups for desktop/mobile applications, is there a kind of standardized symbol that you guys use communicate with developers for fluid designs?

Sometimes you want the developers to make do fluid design otherwise they will just grab the exact width number from zepplin, for example

How do you represent some layout similar to css flex box, is there some standardize symbol/lines that we can use to translate "there are 3 columns, the first and second are fixed width, and third will fill reminding."

or something like: "take whole row, and put the 3 children in a space-around distribution"

In Android studio there are some kind of those symbols enter image description here

As you can see, they use a spring as fluid spacing and solid line as fixed space. but I don't know if there is a formal one.

Thanks

  • I wouldn't know what those represent just by looking at it. I've never seen a standard. However, as long as the whole team knows what that means you're probably fine. – Bryce Howitson Nov 20 '18 at 21:05
1

This isn't intended to be snarky, but have you tried having a conversation with your dev team? Having frequent conversations with them would allow you to determine what language works best for the team and your project as well as the appropriate process for documentation.

As an extension of the above, I tend to add words to most of my designs for context. Almost every tool has a notes capability, or simply add additional context in the drawing program as a sidebar. If you provide context or additional detail that isn't immediately available in the mockup, every dev I know will read it and try to follow what you're requesting.

  • thanks for the response, I just added an example to clarify what exactly I mean. – Yichaoz Nov 20 '18 at 20:32
0

Defining/Documenting Component Level Behaviour Would Help

What I normally do is, along with using Zeplin to deliver pixel level spec and assets, define a component behavior guideline document. You can mention the components which are expandable and the ones which are not.

Use Zeplin Annotation Feature

Zeplin allows you to add comments/notes on each of the screens. If it's feasible, you can also consider leaving pointer for the components on the individual screens as well.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.