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

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

https://www.materialui.ir/


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

#طراحی
براتون سواله چجوری به این قشنگی کاراکتر طراحی میکنن؟

کلیپ بالا رو حتما ببینید👆🏻👆🏻


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

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

⭕️سایت های مورد نیاز برای دیدن نمونه های مختلف
یک نکته رو حتما توجه داشته باشید، هرکجا و هرسایتی و هر اپلیکیشنی رو برای نمونه دیدین، سعی کنید URL اون رو پیدا کنید تا یک طرح کامل و پیاده سازی شده رو دیده باشید ، رسپانسیو کردن رو چک کنید و بعضی وقتا حتی کسانی که کدنویسی میکنید کدهای سایت رو هم بررسی کنید تا ببینید با چه روشهایی و چه کدهایی طرح رو پیاده سازی کرده اند...

🔸 https://land-book.com
🔹 https://www.siteinspire.com/
🔸 https://ecomm.design/
🔹 https://www.lapa.ninja/
🔸 http://collectui.com/
🔹 https://www.behance.net/
🔸 https://dribbble.com/
🔹 https://www.awwwards.com/
🔸 https://uimovement.com/
🔹 http://www.flickr.com/
🔸 https://mobbin.design/
🔹 https://sitesee.co/
🔸 https://pttrns.com/
🔹 https://www.uplabs.com/
🔸 https://onepagelove.com/
🔹 https://pinterest.com/
🔸 https://interfaces.pro/

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


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

🔸اگر با مفاهیم طراحی UI و UX آشنایی دارید، عاشق یادگیری، خلاقیت و پیشرفتید، ازتون دعوت می‌کنیم توی این دوره کارآموزی رهنماکالج شرکت کنید.

🔸مهلت ثبت‌نام: تا 18 اردیبهشت 98
🔸زمان برگزاری آزمون آنلاین: 20 اردیبهشت 98

http://bit.ly/9thrahnemacollege

#نکات

✔️به جای طراحی چند ستونه، طراحی تک ستونه را هم امتحان کنید

با استفاده از طراحی تک ستونه، شما کاربر را به سمت هدف موردنظرش هدایت می کنید.اما در طراحی چند ستونه این عمل برعکس می شود و کاربر را از هدف اصلی منحرف میکنید.
پیشنهاد می شود که مطلب خود را به صورت تک ستونه به همراه یک دکمه CTA به اشتراک بگذارید.


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

#فان

😁😁 بدون شرح !!!


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

#نقد

فوتر سایت خوب و بزرگ ایوند

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

اون بخش سرچ هم که کمی از هدرشون زده بیرون رو حالا گیرنمیدیم بهش میگیم تقصیر مرورگرماست

ولی در کل ما انتظارمون از ایوند بیشتر از این حرفاست 🙂
اگر دوستی یا همکاری توضیحی درمورد این موارد داشت خوشحال میشیم بگه و با بقیه اعضای کانال درمیون بذاره


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

#نکات

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


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

#معرفی_سایت

🏞 دریافت تصاویر رایگان در Unsplash

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

🌐 https://unsplash.com


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

نیمه شعبان بر تمام منتظران آن حضرت در سرتاسر جهان مبارک باد
@uiuxworkshop

#نمونه

نمونه بسیار زیبا از پیج 404


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

بهترین مکان برای نمایش اخطارها در فرمها ( فارسی ) ، پایین یا سمت چپ فیلد هست.
چون چشم کاربر اول فیلد رو رصد میکنه بعد اخطار رو میبینه.
اگر محدودیت فضا دارین و دیزاینتون بهم نمیریزه ، اخطار هارو زیر فیلد بذارین. در موبایل هم این مکان گزینه ی بهتری هست...


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

لازم نیست کارهای عجیب غریبی در اپلیکیشن انجام بدیم ، همین انیمیشن های کوچیک هم میتونه حس خوبی به کاربر بده احساس لذت داشته باشه موقع کارکردن با نرم افزار

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

#نکات

📋 ایجاد فرم با اعتبارسنجی درون خطی

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


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

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


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

http://colorland.ir

➖➕➖➕➖➕➖


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

#نقد

خلاقیت به شیوه ی سایت تامین اجتماعی

کلی ایراد میشه از سایت های دولتی گرفت
چه از نظر رابط کاربری چه معماری اطلاعات و چه تجربه کاربری ...

خلاصه یه خونه تکونی شدید به نظرم توی سایت های دولتی نیازه


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

#پالت_رنگ

💢خلاق باش،ترکیب کن و اثر هنری خلق کن


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

مسیر یادگیری یک زبان یا علم جدید

@QuickLearn

#نکات

📋 راحتی کاربران

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

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

#نقد #نقد_طراحی

هوم پیج سایت رجا به آدرس raja.ir رو میبینیم
نکته اول اینه که ظاهر نه چندان مدرن سایت ممکنه به کاربرها این حس رو منتقل کنه که قطار ها و ساز و کارشون هم قدیمی و غیرمدرن هست

اگر به هدر سایت دقت کنید سرچ رو میبینید که واقعا سواله چرا اونجا گذاشتنش و وقتی روش کلیک میشه چرا اکثر لینک های هدر محو میشه؟
مورد بعدی همرنگ بودن لوگو و بکگراند هدر هست... خب چرا آخه؟...یکیشو میتونستن سفید کنن

دیگه به تراز نبودن هدر از سمت چپ ، سه خطی بودن بخش زبان و دوخطی بودن بقلیاش گیرنمیدم 🤦🏻‍♂️ حالا اینا در یک نگاه ظاهری بود و اسکرول نکردیم پایین
واقعا اعصاب آدم خورد میشه ...

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