DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Erin Bensinger for The DEV Team

Posted on

Follow Friday: UX/UI Edition (29 July 2022)

Happy Friday, friends! πŸŽ‰ Follow Friday is your weekly opportunity to shout out fellow DEV Community members doing awesome work. Check out the comments and follow someone new!

User experience (UX) and user interface (UI) design is a key consideration when it comes to developing the front end of your app. And it can be a lot of fun, too!

So, devs: who are your favorite DEV community members writing about UX/UI considerations?

Formatting tip: to populate a card with a follow button, use the liquid tag syntax {% embed https://... %} and insert the URL of your favorite author's profile.

Join in on the #FollowFriday fun by @mentioning your favorite author to follow for UX/UI tips (and letting us know why you love their posts!) ‡️

Top comments (8)

Collapse
perssondennis profile image
Dennis Persson

I want to shoutout to @asyrafhussin4. CSS does not always have to be useful, it can be an art. My favorite CSS paint is Jack Sparrow, but most exciting is to see what the next paint will be! πŸ˜€

Collapse
asyrafhussin4 profile image
Asyraf Hussin

Thank you Dennis for the shoutout.

Collapse
iyanukit profile image
Onoja

Hi if I may ask pls …what tips or course can I use to improve myself, I want to be a ui/ux designer…any advice??
Thanks so much.

Thread Thread
perssondennis profile image
Dennis Persson

Hello Onoja. Depends on what you mean with UI/UX designer. Some people want to code and some prefer doing sketches in tools like Figma, Adobe XD, Invision and Sketch.

If you want to sketch interactive prototypes I would suggest learning the softwares I mentioned above. If you want to code with HTML and CSS there are plenty of resources for that on the internet as well. What I could do is to guide you a bit of what you would need to know in that case.

Thread Thread
iyanukit profile image
Onoja

Thanks so much ❀️ Well I want to code with HTML and CSS cause that’s what I’ve been practicing for a while. πŸ™πŸΎ

Thread Thread
perssondennis profile image
Dennis Persson

Alright :) I can't really recommend some specific websites for it since I haven't used any for a long time. I can however recommend you what to learn. I don't know about you previous experience but I will take it from start.

HTML is basic. Learn using tags such as div, a, img, button input and that's enough for a starter. Later comes semantic tags such as main, article, section etc.. It's important for accessibility but don't mind if you don't understand when to use which, learn that later I would say.

Most important things in CSS is flex, learn that. Margin, padding, border, background and border-radius are have-to-learns, make sure to master them. Animations are next-level but required if you want things to move. You have some pseudo classes as well you need to learn. But most often it's enough with :hover and :focus.

Moreover, kinda use id and classes as css selectors. Try avoid using nth-child, or nested selectors (e.g. div > span > link) as long as possible. That only makes it harder to maintain the code.

When you know HTML and CSS like that, you can do most UIs yourself. Then start looking at CSS in js and UI libraries to see how CSS often is used today. It's the same CSS, just integrated with the javascript. If you are using React you should look in to styled components or emotion, and the UI library Mui. Learning CSS in js and Mui requires that you know about javascript and React though.

After mastering those things, you are up-to-date to develop modern UIs.

Thread Thread
iyanukit profile image
Onoja

This is a great guide for me …. Thanks so much for your time and honestly I love this ❀️.

Collapse
yuridevat profile image
π•π•¦π•π•šπ•’ πŸ‘©πŸ»β€πŸ’»

Everyone who is designing with accessibility in mind πŸ’œ

🌚 Life is too short to browse without dark mode