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

⭕️یکی از مهمترین بخش ها در طراحی وب سایت خصوصا لندینگ پیچ ها استفاده از طراح های گرافیکی برای جذاب تر کردن کار هست. اما ممکن است تولید این طرح ها کمی سخت و وقت گیر باشه.

🌐سایت undraw یکی از معروفترین سایتهایی است که میتونید به مجموعه ای عالی از طرح های illustator دسترسی داشته باشید و فایل ها را به صورت noscript دانلود و شخصی سازی کنید و تو پروژه ها ازشون استفاده کنید

👇🏼👇🏼
https://undraw.co/illustrations


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

#خلاقیت #گیف

استفاده خلاقانه از صفحه ی ۴۰۴ و تبدیل اون به یک بازی
این کار میتونه از ناراحتی کاربران کم کنه ولی حواستون باشه کاربر نباید بشینه بازی کنه و کلا سایت شما از یادش بره

(یکی از دوستان بازی ۲۰۴۸ رو گذاشته بود توی این صفحه ، یه بازی بی نهایت و اعتیاد آور 🤦‍♂️)


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

#خلاقیت #گیف

احتمالا زیاد شنیدید که میگن ایکن های Tabbar بهتره ۳ یا ۵ مورد باشن
ولی اگر ۴تا ایکن داشتیم و واقعا نمیشد ایکن دیگری اضافه کرد چیکارکنیم؟
میتونید از روش خلاقانه ای که توی گیف میبینید استفاده کنید.


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

#نکات

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

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

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


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

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


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

#نکات

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


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

#معرفی_سایت

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

🔰نکته:قبل از کلیک کردن روی لینک اول فیلترشکن را روشن نمایید.

https://www.pexels.com


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

#انگیزشی

به جای فکر کردن به صد دلیل برای تسلیم شدن،
به هزاران دلیل برای ادامه دادن فکرکن....


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

#فان

وقتی محصول رو بدون اینکه تست کنی میدی بیرون 😂


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

#نکات

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


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

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

چند وقت پیش سایت معروف 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☝️