سرگرمی برای آخر هفته :)

در این بازی شما باید با استفاده از دانش قبلی خود از برندهای معروف جهان و مهارت تشخیص رنگ، 9 لوگوی درج شده در این بازی را رنگ نمایید.

🌐 http://brandseenapp.com

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

#انگیزشی


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

به زودی ...
دوره‌ی رایگان «مبانی طراحی خدمات به زبان ساده»
انتشار در کانال دیگرگونی:
@Digargooni
و در سایت آژانس دیزاین دیگرگون:
www.Digargoon.com

#Fun

اندر احوالات ما و برخی مشتریان :)))

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

#نکات

⭕️یک اشتباه رایج در ظاهر متون مهم سایت این است که سایز فونت آنها بزرگتر از دیگر متون باشد و همچنین متون غیر مهم سایزشان کوچکتر باشد.

✅بهتراست که به جای استفاده از size فونت، همیشه از weight یا color مناسب جهت این کار استفاده کرد.


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

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

💠کالکشنی حرفه ای از گرادیانتهای زیبا برای CSS و Photoshop

🔻🔻🔻

https://webgradients.com


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

#نکات

🖌بهتر است بر روی بکگراندهای رنگی از متن خاکستری استفاده نشود،و رنگ متن نزدیک به رنگ بکگراند و کمی روشنتر از آن باشد.

✅ برای این کار میتوانید حالت رنگ را به HSL تغییر داده و گزینه آخر یعنی Lightness را کمی زیاد کنید تا به نتیجه مطلوب برسید

👌این کار به جذابیت بصری طرح، کمک بسیاری میکند...


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

#ابزار

☹️اکثر افراد در زمانبدی کارهایشان مشکل دارند.اگر شما هم جزو این دسته از افراد هستید پس این اپلیکیشن به شما کمک زیادی خواهد کرد.

✅شما می توانید با استفاده از برنامه #ترلو (trello) پروژه های کاری، برنامه های سفر، کارهای خانوادگی خود را مدیریت کنید.

🌀در Trello می توانید پروژه ها را به کارهای کوچکتر تقسیم کرده و به آن ها توضیح اضافه کنید، لیبل بچسبانید و فایل پیوست کنید.

🌐 www.trello.com

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

#نمونه

👌فرم بسیار مفهومی لاگین (login)

🕶 #ایده_بگیر_و_متفاوت_باش


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

#نکته

از دکمه های خطی به عنوان CTA استفاده نکنید . بجای آنها از دکمه های توپر (Filled) استفاده کنید که برای اینکار مناسب تر هستند.

دکمه های خطی به دلیل ظاهر زیبا و مینیمالی که دارن بین طرحان از محبوبیت خاصی برخوردار هستند اما برای Call to action مناسب نیستند . زیرا از نظر ظاهری اولیت پایین تری نسبت به دکمه های توپر دارند و چشم کاربر را کمتر درگیر میکنند به همین دلیل باعث کاهش نرخ کلیک میشوند...

✅دقت داشته باشید که کاراصلی دکمه انجام یک عملیات است نه زیباسازی

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

#ابزار

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

🌐https://ewebdesign.com/classic-ui-kit


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

#نکات

🌐اگر شما یک سایت بزرگ دارید، باید به 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