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

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

👤ارتباط: @HamidRMousazade

📝کانال پروژه و استخدامی: @UIUXProjects
Download Telegram
#معرفی_سایت
#ابزار

⭕️سایتی رو میخوایم بهتون معرفی کنیم که هرآنچه یه طراح گرافیک به اون نیاز داره رو میتونه در این سایت پیدا کنه.

انواع طرحای رایگان فتوشاپ
انواع وکتور های رایگان ایلاستریتور
انواع ui kit های رایگان مخصوص sketch
کلی آیکون و فونت رایگان
حتی می توانید کدهای جاوا اسکریپت و html رو هم رایگان استفاده کنین.
راستی یه بخش جدید هم اضاف کرده که میتونین عکسای استوک با کیفیت بالا رو هم رایگان دانلود کنین.

این پست رو حتما برا دوستاتون که طراحی میکنن فوروارد کنین

🎯 freebiesbug.com


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

امروزه اپلیکشن های فروش اینترنتی خواستار زیادی پیدا کرده.و داشتن نمونه کار برای طراحان از این دسته بندی یک مزیت محسوب میشه برای همین ما یک نمونه کیت طراحی رایگان با فرمت Adobe XD براتون آماده کردیم که بتونین ازش ایده بگیرید.

♦️دانلود فایل ضمیمه در پست بعدی👇

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

💠 پلاگین Artboard Plus

این پلاگین یکی از پرکاربردترین پلاگین هاییه که در نرم افزار XD استفاده میشه.

▪️با نصب این پلاگین می تونید به آرت بوردهای کاری خود نظم و انسجام بدید.همینطور میتونین لیست لایه ها رو براساس حروف مرتب کنین.
▪️یه قابلیت دیگه ای هم که داره اگر در یک آرت بورد طرحی زدین و خواستین اون طرح رو به صورت یک آرت بورد جدا دربیارین کافیه اون طرح رو انتخاب کنین و گزینه create artboard از این پلاگین رو انتخاب کنین.


@UIUXWorkshop
☝️نکات آموزشی UI/UX☝️
#اصلاحیه

😎 ادوبی XD در اوایل ماه نوامبر2019 پلن استارتر خودش رو که رایگانه با ویژگی جدید که در تصویر مشاهده میکنین برای طرفدارانش آپدیت کرده که تا آوریل 2020 فقط میتونن از این ویژگی های #نامحدود به صورت کاملا #رایگان استفاده کنن.
✴️زمان رو از دست نده و تا دیر نشده ازش استفاده کن .


@UIUXWorkshop
☝️نکات آموزشی UI/UX☝️
یک مطلب ناب و زیبا با موضوع اهمیت دیزاین از دیجیاتو

چطور از طراحی احمقانه هواپیما در جنگ جهانی دوم به مکینتاش رسیدیم؟
https://dgto.ir/1ix9

@UIUXWorkshop
☝️نکات آموزشی UI/UX☝️
UIUX WorkShop
#خبر 🤔خبر داری رنگ سال ۲۰۲۰ چیه؟ موسسه پنتون در سال ۲۰۱۹ با انتخاب رنگ #مرجانی میخواست مرجان های اعماق اقیانوس ها رو معرفی کنه امسال هم با معرفی #سفید_مرجانی یا Bleached Coral ، رنگ مرجان های مرده را توصیف کرد. حالا فلسفش چیه؟ اینه که وقتی مرجانهای اقیانوس…
#خبر

خب رنگ سفیدمرجانی که رنگ سال ۲۰۲۰ معرفی شده بود مثل اینکه غیر رسمی بود.
رنگ (واقعی) سال ۲۰۲۰ آبی کلاسیک هست:

Hex: #34558b
CMYK: 86, 67, 20 , 0
RGB: 51, 85, 139

(دلم میسوزه به حال اون طراحهایی که کالکشن لباس و ست‌های مختلف رو با رنگ سفیدمرجانی زده بودن و تولید کردن و کلی تبلیغ که بله ما با رنگ سال این محصولاتو ست کردیم 🤦‍♂️ واقعا چطوری میشه به این عظمت یه رنگی به صورت غیررسمی منتشر میشه آخه)

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

♦️ #فیگما از ویژگی جدیدش به نام Auto Layout رونمایی کرد.

از جمله موارد این ویژگی:

▪️دکمه ها (Button) میتونن خودشون رو نسبت به متن درونشان تغییر اندازه دهند.

▫️زمانی که طراحان،آیتم های یک لیست رو جابجا میکنند،لیست به صورت اتومات خودش رو مرتب میکنه.

▪️با اضافه کردن متن درون باکس ها، padding ها به صورت اتومات تنظیم میشه.

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

🎥 آموزش طراحی ui یک صفخه sign up اپلیکیشن با Adobe XD


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

♦️پلاگینی رو میخوایم بهتون معرفی کنیم که قدرت فوق العاده ای در تشخیص رنگ،تایپوگرافی و کانتراست رنگی داره.
این پلاگین دو ویژگی بارز داره که در زیر بهش اشاره میکنیم

1- ویژگی اول Contrast Checker : که با انتخاب یک لایه از کار،کنتراست رنگی بین المان ها را تنظیم میکنه.

2-ویژگی دوم Colorblind Simulation : بعضی سایتا واپلیکیشنا برای کاربرانشون که دارای کوررنگی هستن ظاهری جدا ارائه میدن.با این ویژگی شما میتونین رنگ طرحتون رو متناسب این افراد خاص تنظیم کنین.


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

📝بهتره فرم‌ها رو تک ستونه طراحی کنین!!

چشم کاربر تو پر کردن فرم‌ها عادت به حرکتی عمودی داره اما چند ستونه بودن فرم‌ها این مورد رو رعایت نمیکنه و باعث اذیت شدن چشم کاربر میشه.


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

😍اگه عاشق استفاده از تصاویر ایلاستریتور در طراحی هاتون هسین.این پست رو از دست ندین!

بعد از معرفی سایت undraw در پست های قبلی نوبت میرسه به سایت fresh-folk.
تو این سایت جدید،بعد از ثبت ایمیلتون فایلی رو براتون میفرسه که شامل 14تا دسته بندی موضوعی در قالب فایل فتوشاپه که بتونین از اونا به صورت لایه ای استفاده کنین و قاب تصویری مورد نیاز رو متناسب با موضوع اپلیکیشن و یا سایتتون بسازین

👈 آدرس سایت fresh-folk

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

🎥 آموزش طراحی اسلایدر یک لندینگ پیج در Adobe XD


@UIUXWorkshop
☝️نکات آموزشی UI/UX☝️
یادم نمیاد چطوری به این مطالب برخورد کردم ولی یادمه در همون نگاه اول جذبم کرد و همونجا تصمیم گرفتم یه روزی با بقیه به اشتراک بذارمش که شروعش امروزه . ۵۲هفته با تجربه کاربری ، متن های کوتاهی از 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☝️