UIUX WorkShop – Telegram
UIUX WorkShop
7.21K subscribers
522 photos
59 videos
25 files
212 links

محیطی در راستای ارتقاء دانش و مهارت در طراحی ‌رابط و تجربه‌ کاربر

👤ارتباط: @HamidRMousazade

📝کانال پروژه و استخدامی: @UIUXProjects
Download Telegram
یادم نمیاد چطوری به این مطالب برخورد کردم ولی یادمه در همون نگاه اول جذبم کرد و همونجا تصمیم گرفتم یه روزی با بقیه به اشتراک بذارمش که شروعش امروزه . ۵۲هفته با تجربه کاربری ، متن های کوتاهی از Josh Brewer وJoshua Porter  که در طول تقریبا ۵۲ هفته نوشته شده. جاش برور از طراحان اصلی توییتر بوده که الان بعنوان بنیانگذار Abstract فعالیت میکنه. 

این مطالب سریالی رو قرار هست هر ۵شنبه در اینستاگرام منتشر کنم. از لینک زیر میتونید دنبالش کنید.
instagram.com/HamidRMousazade

#آموزش #مقاله

@UIUXWorkshop
نکات آموزشی UI/UX☝️
#نکات
#شماره 76

قسمت کوچکی از بخش بعدی طرحتون رو به کاربر نشون بدین تا مشتاق به دیدن ادامه کار بشه و اقدام به اسکرول کنه!

برای داشتن ux بهتر سایت،به کاربر این امکان رو بدین که در نگاه اول بتونه علاوه بر دیدن کامل بخش فعلی،قسمت کوچیکی از بخش بعدی رو هم ببینه.با این راه شما کاربر رو به دیدن بخش بعدی مشتاق می‌کنین.


@UIUXWorkshop
☝️نکات آموزشی UI/UX☝️
وبینار 3 ساعت آموزش ادوبی اکس دی AdobeXD  + پروتوتایپ پروژه نهایی

🗓سه شنبه 14 دی ماه 
ساعت 18:00 الی 21:00
3 ساعت

اطلاعات بیشتر و ثبت نام:
http://bit.ly/XD-Webinar

👨🏻‍💻مخاطبان دوره: 
تمام افراد علاقمند به حوزه‌ی طراحی رابط و تجربه کاربری

📝خلاصه سرفصل‌ها:
Gridهای Square و Layout
Gradient های خطی و دایره ای
ساخت و ویرایش اشکال وکتوری
کار با ابزار Pen و ویژگیهای آن
کار با Mask ها
وارد کردن تصاویر در شکل ها
افزودن تصاویر و متن با Repeat Grid
 کار با کامپونتت ها 
افزودن و مدیریت رنگ ها
افزودن و مدیریت استایل های متن
نامگذاری و سازمان دهی Asset ها
ساخت کتابخانه های CC
استفاده از وکتورها از کتابخانه های CC
پلاگین های اکس دی
انیمیشن و پروتوتایپ
 آشنایی با Transition ها و Easing
ساخت انیمیشن ها در یک Artboard با 
انیمیشن و پروتوتایپ
 آشنایی با Transition ها و Easing
خروجی گرفتن از Assetها
و…

+ کلی تکنیک خفن که خیلیا از وجود اونها اطلاع ندارند...

اطلاعات بیشتر و ثبت نام:
http://bit.ly/XD-Webinar

@UIUXWorkshop
☝️نکات آموزشی UI/UX☝️
#معرفی
#ابزار

اینروزا اکثر افرادی که توی طراحی فعالیت میکنن سعی بر این دارن که آثار خودشون رو به بهترین شکل در فضای مجازی، سایت ها و مشتری ها ارائه کنن.برای اینکار از ابزاری به اسم موکاپ استفاده میکنن.

ما توی این پست 7 منبع رایگان موکاپ براتون آماده کردیم تا بتونین به راحتی به بروزترین موکاپ ها دسترسی داشته باشین.

▪️ mockupworld.co
▪️ freedesignresources.net
▪️ graphicburger.com
▪️ freebiesbug.com
▪️ originalmockups.com
▪️ uispace.net

@UIUXWorkshop
نکات آموزشی UI/UX☝️
شهادتت مبارک سردار‌ دل‌ها...
#نکات
#شماره 77

با صراحت و بدون شک و تردید با کاربران صحبت کنین!

پیامهای مهمتون رو به نحوی به کاربران منتقل کنین که حالت بلاتکلیفی برای اونا بوجود نیاره، بهتره اون پیام رو با اطمینان بیان کنین.
سعی کنین، از عباراتی مثل "شاید"، "احتمالا"، "آیا علاقه دارید؟" و "آیا می خواهید؟" ، آیا ممکن است؟" کمتر استفاده کنین، و کمی جدی تر پیام رو منتقل کنین.


@UIUXWorkshop
☝️نکات آموزشی UI/UX☝️
#معرفی
#ابزار
#فونت

فونت رایگان: استعداد
طراح:امین عابدی
این فونت به صورت رایگان در سایت زیر منتشر شده:👇👇
https://aminabedi68.github.io/Estedad


@UIUXWorkshop
☝️نکات آموزشی UI/UX☝️
This media is not supported in your browser
VIEW IN TELEGRAM
#آموزش

🎥 آموزش طراحی یک UI شاد و ساده اونم از جنس RayBan 😎
در Adobe XD


@UIUXWorkshop
☝️نکات آموزشی UI/UX☝️
✳️میدونسین که ما گروهی به اسم UIUX Group داریم که میتونین سوال یا اگه مشکلی تو زمینه UIUX داشتید اونجا برای دیگر اعضای گروه مطرحش کنین؟!

🌐لینک پایین رو برا دوستاتون که علاقه به این زمینه دارن بفرسین تا اونا هم از این گروه استفاده کنن👇

(طرح ازpikisuperstar)

https://news.1rj.ru/str/joinchat/B3YPy0EaYaUQhXMXWQI9YA
‌ نه زبان قدرت گفتار دارد و نه چشم قدرت اشک…
و دل پر از اندوه…
تسلیت هم واژه ناچیزیست بر این درد…

🖤 #ایرانم_تسلیت

(طرح از ماهان‌خوشی)
@UIUXWorkshop
☝️نکات آموزشی UI/UX☝️
#معرفی
#ابزار

وب سایتی رو میخوایم بهتون معرفی کنیم که برای ساخت تصاویر لودینگ به کار میره.این سایت 33 تصویر رایگان لودینگ داره که میتونین از پنل تعبیه شده در سایت، اونا رو تغییر بدین.مثل:رنگ،سرعت،اندازه و...

یکی از مزایای استفاده از این سایت اینه که میتونین از تصاویر لودینگ انتخاب شده 3 خروجی با فرمت های GIF , CSS,SVG بگیرین.
🌐www.loading.io/


@UIUXWorkshop
☝️نکات آموزشی UI/UX☝️
#نکات
#شماره 78

لیبل‌ها رو بالای تکست باکس قرار بدین!

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


@UIUXWorkshop
☝️نکات آموزشی UI/UX☝️
👍1
Media is too big
VIEW IN TELEGRAM
#آموزش

🎥 آموزش طراحی صفحه پروفایل و لاگین
در Adobe XD


@UIUXWorkshop
☝️نکات آموزشی UI/UX☝️
#معرفی
#ابزار

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

🌐 https://www.kapwing.com/404-illustrations


@UIUXWorkshop
☝️نکات آموزشی UI/UX☝️
#نکات
#شماره 79

✳️در طراحی فرم‌ها به فکر راحتی کاربر باشین!!

به جای استفاده از textBox جهت تعیین رنج قیمت کالا یا خدمات از ابزاری استفاده کنین که دیگر نیازی به تایپ کردن کاربر نباشد.و بتواند سریعتر به هدفش برسد.


@UIUXWorkshop
☝️نکات آموزشی UI/UX☝️
#معرفی
#ابزار

✳️از اونجایی که اینروزا طراحا توی طراحیاشون از وکتورهای ایلاستریتور زیاد استفاده میکنن و کاربرپسند هست،امروز یکی از سایت هایی که کلی وکتورهای جذاب و رایگان داره رو میخوایم بهتون معرفی کنیم.

یکی از مزایای این سایت اینه که وکتورها رو براساس موضوعاتی مشخص دسته بندی کرده که راحت میتونین وکتور موردنظرتون رو پیدا کنین و ازش استفاده کنین.

🌐www.glazestock.com

@UIUXWorkshop
نکات آموزشی UI/UX☝️
Media is too big
VIEW IN TELEGRAM
#آموزش

🎥 آموزش طراحی یک landing page
در Adobe XD


@UIUXWorkshop
☝️نکات آموزشی UI/UX☝️
#نکات
#شماره 80

از کنتراست (contrast) رنگی به بهترین شکل استفاده کنید.

منظور از کنتراست رنگی ، تفاوت بارز بین دو رنگ می‌باشد.استفاده درست از رنگ‌های با کنتراست خوب، باعث می‌شود که کاربر به خوبی با اپلیکیشن و یا سایت شما ارتباط برقرار کند و متنها به خوبی خوانده شود .در بالا تصویر سایتی رو می‌بینید که با به کار بردن کنتراست رنگی بالا (تفاوت رنگی مناسب) بین اجزا باعث به خوبی دیده شدن بخش های مختلف سایت شده است.
در تصویر بالا دو مربع رسم شده که مثالی از کنتراست خوب و بد را به نمایش گذاشته است.


@UIUXWorkshop
☝️نکات آموزشی UI/UX☝️
#معرفی
#ابزار


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

1- unsplash www.unsplash.com

2- reshot www.reshot.com

3- pexels www.pexels.com

4- pixabay www.pixabay.com

5- brust (by shopify) www.burst.shopify.com


@UIUXWorkshop
☝️نکات آموزشی UI/UX☝️
Media is too big
VIEW IN TELEGRAM
#آموزش

🎥 آموزش طراحی یک landing page
در Adobe XD


@UIUXWorkshop
☝️نکات آموزشی UI/UX☝️
This media is not supported in your browser
VIEW IN TELEGRAM
سلام.
دوستان ۲ دعوت‌نامه دریبل داریم. هرکدوم از دوستان که تمایل داشت، پیج نمونه کارهاشو برام دایرکت کنه ( دقت کنید عکس‌هاشونو نفرستید فقط لینک پیج).
https://www.instagram.com/hamidrmousazade/

برای دوستان با استعدادتون هم ارسال کنید.