UX Guidelines

[pavan-shipmnts]

As a front-end dev whats the best way to learn/follow UX guidelines? Do you follow any standards/guide etc?

[Neha]

UX is very important for Front-end developer, I believe. As there are times when might be UX person is not aware of UX issues could happen. I learned about UX guidelines + best practices on-the-job only.

Check: interaction-design site they provided training on UX

As a front-end developer a few things you should learn:

• Reviewing of the designs from the technology point-of-view, cross-browser/OS support, Responsive, etc.
• There should not be more than 2 font-family in the design
• The design should not use lot of images. As it will hit performance.
• Colors contrast
• As a user, are you able to understand and perceived the design?
• If the site is content-heavy, how to break it and make it more readable
• Important information should come before the fold
• Use the icons where ever possible.
• Micro-interactions such as hover, click, active, etc these state should be clearly defined
• Video and audio should not by default play and there should be always the control provided to the user to turn on/off.
• Keep the design simple. Do not make things complex. Form navigation to filling a form.
• The design should have consistency.
• The CTAs should be clear.
• A good UX is not let the user think.

Thanks, Neha

[vijayksingh]

Hi @Neha, thanks for the answer, can you suggest some resources. I am heavily into JS and really didn't care about UX until now. Also been keeping CSS on the side since I have been working but now I am realizing the importance of consistent Styling all across the project. And the importance of keeping the CSS synced all across the project.

I have been working on Micro Front End pattern application, we have 20+ Angular apps divided in various parts ( Check-In, POS, Configuration, Admin ...)

I know it's a lot to ask but if possible can you explain how a person can develop intiution and skills to define and look and existing design system and learn from it.

What are the building blocks of a Design System? Should I create another issue for this question?

[Neha]

Hey, @perceptron007 I assume you have raised a new issue for this. Hence, I will answer that.

[pavan-shipmnts]

Thanks I'll follow the question of @perceptron007 for the resources.