#نکات

🌐اگر شما یک سایت بزرگ دارید، باید به footer خود یک mini Sitemap اختصاص دهید.

💢برای اثربخشی این نوع فوترها بهتر است که به هر ستون lable های مجزایی اختصاص دهید.که کاربران به راحتی بتوانند دسته بندی های مختلف را تشخیص دهند و عدم رعایت این مورد،باعث سختی دید کاربر می شود.

📱 برای استفاده از این نوع فوترها در تلفن همراه بهتر است از منوی آکوردئون استفاده کنید. این نه تنها موجب صرفه جویی در فضا می شود، بلکه از اشتباهات در انتخاب لمسی گزینه ها جلوگیری می کند.


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

این هم یه نمونه باحال و ایرانی از طرف آقای امیر سلطانیان ...

#فان #نمونه

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

#نکات

با اضافه کردن یه نوار باریک رنگی به عرض (4 الی 6px) به بالای menu bar می‌توانید به قالب سایتتان جلوه زیباتری ببخشید.

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

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

دوست خوبمون افشین محمدی مجموعه ای از ایکن های فوق العاده ای طراحی کرده است که میتونید به صورت رایگان از Dribbble دانلود کنید. لینک:
https://goo.gl/3YCDK3

https://icons8.com/ouch/

#معرفی_سایت
یک وبسایت درحال رشد دیگه در زمینه ی ارائه تصویرگری های رایگان
لذذذذذت ببرید

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

#دانلود
پک کامل طرح هایی که تا الان روی وبسایت داشتن رو میتونید دریافت کنید
( برای دسترسی به SVG باید حساب خرید کنید ).

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

این پست رو یادتونه؟
اکثر ما رنگ ها رو با حالت RGB یا کد HEX درطرح هامون استفاده میکنیم
بد نیست کمی درمورد حالت HSL هم بدونیم ساختار جالبی داره
وجالب تر اینکه خیلی جاها ازش استفاده میکنیم و خودمون خبر نداریم :))

HSL = Hue, Saturation, Lightness
درسال ۱۹۷۰ توسط پژوهشگران گرافیک کامپیوتری طراحی شد تا درک بهتری از بینایی انسان در ساختن رنگها داشته باشن.
اگر بخوایم ساختارشو توضیح بدیم باید به عکس بالا توجه کنید که هر کد از یه رنگ (Hue) + درصد اشباع یا غلظت (Saturation) + روشنایی (Brightness/Lightness) تشکیل میشه. خوبیش اینه شما با تغییر دادن هر پارامتر میتونید با یه شرایط مشابه رنگ جدیدی تولید کنید . مثلا یه سبز دارین خیلی روشنه و مطلوب شماست ، حالا اگر میخواید قرمز همینو داشته باشید کافیه H رو تغییر بدید و ببرید روی قرمز 🙂
یا اگر خواستید رنگ قرمزی که دارین رو فقط یکم کمرنگ کنید کافیه S رو کم کنید .خیلی جالب شد نه :))

اگر درست گفته باشم خودمون هم توی زندگی روزمره مون از همین پارامترها برای توصیف رنگ ها استفاده میکنیم. مثلا میگیم خیلییی پرررنگه یا خیلی کمرنگ (S)
خیلی روشنه (B)
اسم رنگهارو هم که میگیم (H)
بازم اگر درست حدس زده باشم بر همین اساس آدم هایی که کور رنگی دارن پارامتر H یا همون رنگ رو نمیتونن تشخیص بدن ( یه دلیل دیگه که این ساختار رنگ بر منطبق بر بینایی انسان طراحی شده ) ولی S , L رو میشناسن…

@UIUXWorkshop

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

تصاویر بالارو احتمالا خیلی از طراح ها، از خورشید توی آسمون بیشتر دیدنش :) اولی که خیلی آشناست چون پنجره ی انتخاب رنگ پیشفرض فتوشاپه و جالب اینکه پیشفرض فتوشاپ ساختار HSL هست (دورش خط کشیدم) احتمالا به این دلیل که میدونستن اینجوری برای ما راحتتره (برای اثباتش حالت رنگ رو به RGB تغییر بدید تا ببینید چه مکافاتی داره انتخاب فقط یه رنگ سفید).

توی این تصویر هم سه پارامتر رو میتونیم ببینیم:
محور افقی که S هست با حرکت روی این محور غلظت رنگتون کم یا زیاد میشه ( از صفر تا ۱۰۰ درصد).
محور عمودی هم L هست که با حرکت روی اون روشنایی رنگمون کم یا زیاد میشه ( از صفر تا ۱۰۰ درصد).
حالا H رو هم مثه یه نوار میبینید کنار این دوتا قرار داره که مقادیرش از ۰ تا ۳۵۹ هست (همون ۳۶۰ درجه ی دایره).

الان که خودم این هارو یادگرفتم خیلی راحت تر میتونم رنگهارو ادیت کنم و به رنگ مورد نظر برسم یا به یه فرد دیگه بگم کدوم عدد رو عوض کنه تا به رنگ مورد نظر برسه(امیدوارم برای شما هم همینطورباشه).

@UIUXWorkshop

اگر نکته ای درتکمیل نوشته های بالا میدونید و فکرمیکنید که میتونه برای بقیه هم مفید باشه برام ارسال کنید.
منبع چندخط اول پست اول و عکسش هم ویکی پدیای عزیزمونه :)

#ابزار#معرفی_سایت

https://uizard.io

اینم برای اونایی که دیجیتالی نیستن
از وایرفریم هایی که روی کاغذ میکشید عکس بگیرید، دیجیتالیشو تحویلتون میده :)

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

#نکات

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


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

☹️ و اینگونه است که ایده ها توسط مشتری خراب می شود....

⭕️موافقید؟


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

#نکات

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

🤔آنها شناسه ایمیل و شماره موبایل خود را به راحتی به یاد میاورند.


👇🏽👇🏽👇🏽
@UIUXWorkshop
☝️نکات آموزشی UI/UX☝️

#نکات

🔰یک کار باحالی که میشه انجام داد در فرم هایی که نیاز به رمز عبور دارن ، اینه که کاربر قبل از زدن دکمه ی ورود ، رمز خودشو ببینه که اشتباه وارد نکرده باشه . ( وقتی روی اون ایکن چشم کلیک کنیم یا Hover اتفاق بیوفته ،‌ رمز نمایان میشه )

شاید با این کار از باراضافی روی سرور و ایمیل های پشتیبانی و ... خیلی کم کنیم :) شاد باشید


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

#فان
حس و حالمون در این ساعات از روز 😅😂


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

#نکات

سعی کنید هرگز از سیاه خالص (کد رنگ # 000000) برای متن یا بک گراند استفاده نکنید.
کنتراست بسیار بالا بین سفید و سیاه خالص باعث خستگی چشم و آزار کاربران میشود.
جایگزین مناسب، کد رنگ های خاکستری نزدیک به سیاه هستند...

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

#نکات

با کمی خلاقیت در انتهای لودینگ ها ، به کاربر میشه این پیام رو داد که همه چیز به خوبی انجام شده ✅

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