گشتم و گشتم و یه ui, ux دیزاینر آوردم براتون اونم از نوع خفنش😍💪

مصحابه با ابراهیم فرجامی و پاسخ به سوالات شما
پروداکت منیجر در اوتوموبی | ابراهیم فرجامی

- حق با برنامه نویس هستش یا یوآی یوایکس دیزاینر ؟
- چه خصوصیاتی میتونه توی تبدیل شدن به یک یوآی، یوایکس دیزاینر خوب تاثیر گذار باشه ؟
- 3 تا نکته مثبت درباره ui, ux دیزاینری و این مسیر شغلی ؟
- 3 تا نکته منفی درباره ui, ux دیزاینری و این مسیر شغلی ؟
- چجوری وارد این حوزه کاری شدی ؟
و ...

https://www.youtube.com/watch?v=A-r2I0EGy6E&list=PLAS8sE7zBqC-Kdq5IGNsk79VAWNjAiWsn

#youtube #uiux

Channel | YouTube | Instagram

5 نکته کاربردی در زمینه UI, UX که به عنوان یک فرانت‌اند دولوپر بهتره بدونید ... 💥

🎨 طراحی مینیمال (Minimalism)

رابط‌های کاربری ساده و کم‌جزئیات باعث می‌شود کاربران به راحتی با سایت ارتباط برقرار کنند و تمرکز بیشتری بر محتوای اصلی داشته باشند.

⌛ سرعت بارگذاری (Loading Speed)

کاربران انتظار دارند صفحات به سرعت بارگذاری شوند؛ بنابراین بهینه‌سازی تصاویر و استفاده درست از انیمیشن‌ها می‌تواند تجربه کاربری ( UX ) را بهبود دهد.

🟢 تعاملات واضح (Clear Interactions)

کاربران باید بدانند چگونه با المان‌های مختلف تعامل کنند، به همین دلیل استفاده از دکمه‌های برجسته و بازخوردهای بصری مانند تغییر رنگ یا افکت‌های هاور کمک می‌کند تا تجربه کاربری بهبود یابد.

✅ طراحی بر اساس الگوهای شناخته شده (Familiar Patterns)

استفاده از الگوهای رایج در طراحی مانند منوهای همبرگری یا ساختار صفحات مشابه سایت‌های مشهور به کاربران کمک می‌کند سریع‌تر با وب‌سایت آشنا شوند.

💬 بازخورد فوری (Immediate Feedback)

ارائه بازخورد فوری به کاربران پس از انجام یک عملیات (مثل ارسال فرم یا کلیک روی دکمه) باعث می‌شود آن‌ها بدانند که عملیات با موفقیت انجام شده است.

مثلا وقتی به روی دکمه ارسال فرم کلیک میشود، بهتر است دکمه به حالت لودینگ در بیاید تا زمانی که پاسخ از سمت سرور دریافت شود

این نکات به شما کمک می‌‌کنند تا تجربه کاربری بهتری را برای کاربران وبسایت ایجاد کنید و با دید بهتری پروژه رو جلو ببرید ✅

#️⃣ #uiux #tips

🚀 @coolycode

هیچوقت فکرشو میکردید بشه طرح های ui داخل فیگما رو با چند تا کلیک به کد تبدیل کرد ... ⁉️💥

ابزار locofy همین الان داره انجامش میده. اونم نه فقط به کد html, css بلکه از Typescript و کلی چیزای دیگه پشتیبانی می‌کنه که واقعا برگاتون میریزه :))

از چیا پشتیبانی میکنه ؟ 🚀

طبق ادعای خودش‌ قابلیت این رو داره تا طرح شمارو به هر کدوم از تکنولوژی های زیر تبدیل کنه :

Frameworks

React
Angular
Next
Vue
Gatsby

Design System

MUI
Bootstrap
Ant Design
ChakraUi
Vuetify
...

Other

Javscript
Typescript
Tailwind
Css
...

البته از تکنولوژی های دیگه ای هم پشتیبانی میکنه و برای هر مرحله از پروژه مثل دانلود کد، دیپلوی و ... برنامه داره که میتونید توی عکس همسن پست ببینید ⚡

راستی توی این ویدیو نحوه استفاده ازش رو توضیح داده، به نظرم ببینید جالب بود 🔻

📺 https://youtu.be/yhCtAs--r_Y

🌐 وبسایت رسمی locofy

#️⃣ #figma #tools #AI #uiux

🚀 @coolycode

اگر خواستید خودتون طرح پروژتون رو با فیگما بزنید و از اونجایی که الان خیلی از shad cn استفاده‌ میشه ( بخاطر ویژگی هایی که داره ) میتونید از این پروژه در فیگما استفاده بکنید که همه کامپوننت های shad cn رو از قبل تو فیگما آماده کرده با جزئیات کامل و کارتون رو خیلی سریع تر میکنه 🚀

🌐 مشاهده پروژه در فیگما

راستی این پروژه توی توسط سایت رسمی shad cn  معرفی شده 🔻

🔗 https://ui.shadcn.com/docs/figma

آپدیت :
رفقا از این لینک جدیدی که میزارم استفاده کنید، پروژه رسمی که خود سایت shad cn گذاشته بود خیلی کامل نبود برای همین یه مورد بهتر پیدا کردم ⚡🔻

https://www.figma.com/community/file/1342715840824755935/shadcn-ui-components-updated-july-24

#️⃣ #figma #uiux #shadcn

🫶 𝗖𝗛𝗔𝗡𝗡𝗘𝗟  |  𝗚𝗥𝗢𝗨𝗣