𝗨𝗜/𝗨𝗫 Learn – Telegram
𝗨𝗜/𝗨𝗫 Learn
5.63K subscribers
209 photos
36 videos
59 files
201 links
This is the University of UI/UX...
👋 Welcome...

▪️Udemy UI/UX Course
▪️UI/UX Training
▪️Figma Training
▪️Introducing Figma Plugins
▪️Introduction of UI/UX Books
etc..

Admin: @Contactthechanneladmin
Download Telegram
𝗨𝗜/𝗨𝗫 Learn pinned «بچه ها بیاین... ماجرای یک UI Designer 🙂 ( #فصل_اول) سوال خیلی خیلی از بچه ها اینه که آقا چجوری UI رو یاد بگیریم و بعدش حرفه ای بشیم و بعدش پروژه بگیریم و بعد به درآمد برسیم ... #پاسخ: برای رسیدن به این نقطه چند تا قدم هست که باید گام به گام پیش برید…»
🔻بچه ها یه خبر...

این روز ها تو مصاحبه ها و کار خیلی مهمه که مهارت هدف‌گذاری و مدیریت عملکرد رو داشته باشی ...


پروداکت پلن یک دوره #رایگان آماده کرده که اسمش هست:
دوره رایـــــگان اصول طراحی OKR


نکته ی مهم :

بچه ها از کیفیت دوره اطلاعی ندارم و این دوره، از جهت فنی ، تایید یا رد نمیشه ...لذا #خودتون #بررسی کنید که خدای نکرده (از جهت اینکه زمان بذارید و بعد ناراضی بشید ) باعث متضرر شدن شما نشم ....

لینک دوره:
https://B2n.ir/ek6174
118😍2👍1👏1
Design Principles...
👍168
سلام بچه ها

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

حالا با مثال بگیم بهتره :


نقطه کانونی (Focal Point):
مثال: در پوستر یک فیلم، تصویر چهره بازیگر اصلی در مرکز و بزرگ‌تر از بقیه قرار می‌گیره.
کاربرد: جلب فوری توجه بیننده به مهم‌ترین بخش.

اندازه (Size):
مثال: دکمه "خرید" در سایت‌های فروشگاهی معمولاً بزرگ‌تر از بقیه متن‌هاست.
کاربرد: تأکید بر عملکرد مهم یا اقدام مورد نظر (Call to Action).

نزدیکی (Proximity):
مثال: شماره تماس، آدرس و ایمیل در کارت ویزیت نزدیک هم قرار می‌گیرن.
کاربرد: نمایش ارتباط بین اطلاعات مشابه.

رنگ (Colour):
مثال: استفاده از رنگ قرمز برای هشدار یا تخفیف.
کاربرد: ایجاد احساسات یا جلب توجه به قسمت خاصی.

کنتراست (Contrast):
مثال: متن سفید روی پس‌زمینه مشکی.
کاربرد: افزایش خوانایی و برجسته‌سازی اطلاعات مهم.

قاعده یک‌سوم (Rule of Thirds):
مثال: در عکس‌برداری، سوژه اصلی کمی از مرکز فاصله داره و در یک‌سوم تصویر قرار گرفته.
کاربرد: ترکیب‌بندی جذاب و حرفه‌ای‌تر.

حرکت (Movement):
مثال: طراحی فلش یا خطوطی که چشم را به سمت دکمه ثبت‌نام هدایت می‌کند.
کاربرد: کنترل مسیر نگاه کاربر.

تراز (Alignment):
مثال: همه متن‌های یک بروشور به صورت منظم از سمت چپ چیده شده‌اند.
کاربرد: نظم بصری و حرفه‌ای به نظر رسیدن طرح.

فضای خالی (Whitespace):
مثال: سایت Apple که فضای خالی زیادی داره و تمرکز روی محصولات رو بیشتر می‌کنه.
کاربرد: ایجاد حس لوکس بودن و تمرکز بر محتوا.

تایپوگرافی (Typography):
مثال: استفاده از فونت خاص برای تیتر مجله و فونت ساده برای متن.
کاربرد: تفکیک اطلاعات و انتقال حس برند.

خطوط (Lines):
مثال: استفاده از خط‌های افقی برای جدا کردن بخش‌های مختلف یک وب‌سایت.
کاربرد: هدایت چشم یا تقسیم‌بندی محتوا.

نسبت طلایی (Golden Ratio):
مثال: طراحی لوگوی توییتر یا پوسترهایی که بر اساس نسبت ۱.۶ طراحی شدن.
کاربرد: ایجاد حس زیبایی طبیعی و هماهنگی.

بافت (Texture):
مثال: استفاده از بافت کاغذ قدیمی در طراحی جلد کتاب تاریخی.
کاربرد: افزودن حس واقعی یا جذابیت بصری.

تعادل (Balance):
مثال: طراحی صفحه‌ای که عکس در سمت چپ و متن در سمت راست، با وزن بصری برابر چیده شده.
کاربرد: پایداری و آرامش در طراحی.

الگو (Pattern):
مثال: پس‌زمینه‌ای با طرح تکراری برگ‌ها در یک پوستر طبیعت.
کاربرد: هویت بصری منظم و جذاب.

تکرار (Repetition):
مثال: استفاده از یک رنگ ثابت برای تمام دکمه‌ها در یک اپلیکیشن.
کاربرد: انسجام بصری و تقویت برند.

پرسپکتیو (Perspective):
مثال: طراحی تصویر خیابان با خطوطی که به یک نقطه دور ختم می‌شن.
کاربرد: القای عمق و تمرکز به نقطه خاص.

تصادفی (Random):
مثال: قرار دادن المان‌های رنگی به صورت پراکنده در یک طرح هنری.
کاربرد: حس خلاقیت، زندگی و جلوگیری از یکنواختی.
🔥238👍1
𝗨𝗜/𝗨𝗫 Learn pinned «سلام بچه ها عکس بالا، فهرستی جامع از قوانین سلسله‌مراتب بصری برای طراحی بهتر، در یک نگاه ... حالا با مثال بگیم بهتره : نقطه کانونی (Focal Point): مثال: در پوستر یک فیلم، تصویر چهره بازیگر اصلی در مرکز و بزرگ‌تر از بقیه قرار می‌گیره. کاربرد: جلب فوری…»
#دعوت_به_همکاری

🔸 موقعیت شغلی: #طراح_گرافیک
(یکی از زیر مجموعه های شهرداری تهران)

توانایی طراحی پوستر و صفحه آرایی.
تسلط به هوش مصنوعی امتیاز محسوب میشه.

حقوق: ۲۰ تا ۲۵ نسبت به سطح (توافقی)

بیمه تامین اجتماعی
کمک هزینه دوره های آموزشی
هدایا مناسبی و ...

همکاری: حضوری
تهران محدوده ونک (شنبه تا چهارشنبه ۹ تا ۵)


برای ارسال رزومه و نمونه کارهاتون به آی‌دی زیر در تلگرام پیام بدین:
@HaniBahmani


بچه هایی که تمایل دارند #بررسی کنید
👍14
سلام بچه ها ....خوبین؟؟

کتابچه #رایگان تعاریف و اصطلاحات پرکاربرد UIUX (نسخه اول)

🔅یه #هدیه کوچیک برای بچه‌های علاقمند به حوزه ی UI/UX

🔍 اگه تازه می‌خوای وارد دنیای طراحی رابط و تجربه کاربری بشی و یا کلی اصطلاحات عجیب و غریب شنیدی و نمی‌دونی یعنی چی، این کتابچه به کارت میاد!

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


📚 این کتابچه مناسب برای:

تازه‌کارهای UIUX
و همه افراد علاقه مند به این حوزه


قلب ❤️ های شما یعنی حمایت ☺️
64👍6🔥2
تعاریف_و_اصـطـلاحات_پُــرکـاربـرد.pdf
7.1 MB
کتابچه تعاریف و اصطلاحات پرکاربرد UIUX
68🙏9👍3😍3
This media is not supported in your browser
VIEW IN TELEGRAM
سلام بچه ها ... بیاین ☺️

خب دیشب فیگما ترکوند با آپدیت‌های
جدیدش توی #Config2025!

بذارید خیلی خلاصه و خودمونی مورد های مهمش رو بگیم که چیکار کرده این بزرگوار :😊

1️⃣ بخش Figma Draw

که دیگه برای آیکون ساختن یا تصویرسازی، لازم نباشه بری سراغ ایلاستریتور. همه چی دم دسته!(خوشم اومد از این🙂)

2️⃣ در بخش Auto Layout هم حالا می‌تونی گرید بندازی. یعنی راحت گالری بسازی و...


3️⃣ بخش Figma Site که از طراحی سایت تا زدنش روی اینترنت، همه و همه توی خود فیگما. ...
یه جورایی زده تو کار Webflow و Framer ...(دمش گرم🙂)

4️⃣ با قابلیت Figma Make هم می‌تونی با AI دیزاین کنی. فقط باید پرامپت بدی، خودش بقیه‌شو اوکی می‌کنه ...

5️⃣ بخش Fill هم آپدیت شده که حالا می‌تونی با پترن و نویز و بلر گرادینت، شکلتو قشنگ‌تر کنی...(اینم احسنت داره 🙂)

6️⃣ تمپلیت‌سازی درون‌سازمانی هم اضافه شده. برای شرکتا عالیه، وقتت تلف نمیشه دیگه...



خب گویا فیگما حسابی آپدیت زد امسال!😎
جزییات بیشتر اینجاست؛
https://www.figma.com/release-notes/?noscript=config-2025



راستی شما تونستید آپدیت ها رو ببینید ؟ کدومش بیشتر چشم‌تونو گرفت؟
😍33🔥109👍3🙏3
بچه ها سلام ...
#سوال
یه مسأله ای که برای بچه های تازه وارد هست و سوال زیاد میکنند اینه که چطور مهارت UI خودمون رو ارتقا بدیم و خلاق تر بشیم!؟

#پاسخ

ببینید برای اینکه خلاق تر باشید، چند تا کار هست که باید به طور مستمر جز روتین کارتون باشه :

اول :
سایت هایی مثل دریبل و بیهنس و...رو روزانه ببینید و الهام بگیرید....
طرح هایی که خوشتون میاد رو ذخیره کنید و تحلیل کنید که مثلا
چرا جذاب اند...
ترکیب رنگش،ترکیب بندی ، فضاهای خالی و...

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

محدودیت ذهن رو وادار می‌کنه که خلاق تر فکر کنید ...

سوم:
قابلیت استفاده رو با زیبایی ترکیب کنید مثلا پیش خودتون بگید چرا این طرح برای کاربر خوبه!؟

و نکته آخر :
اینکه ترند های روز طراحی رو هم در جریانش باشید...و به روز باشید


اگر واسه بهتر شدن خلاقیت پیشنهادی دارید بگید ....🙂
48👍9🔥2
بچه ها سلام
اکانت پرو جمینای ۱۵ ماه رایگان

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

http://one.google.com/join/ai-student

ارزش این طرح ۳۰ میلیون تومنه پس از دست ندید شاید زمانش محدود باشه.

ویژگی هایی که براتون باز میشه:
۱.دسترسی استفاده از مدل‌های «Deep Search with 2.5 Pro» و «Veo 2» (تبدیل پرامپت به ویدیو)
۲. فضای ذخیره سازی «Google One» شمارو به 2TB ارتقا میده.
۳. میتونید از «NotebookLm» (تبدیل اسناد به پادکست) با دسترسی بیشتر استفاده کنید.
و یه سری امکانات ریز و درشت دیگه که وقتی کار کنید باهاش متوجه میشید.

اگر استفاده تخصصی یا گسترده از Ai دارید حتما ثبت نام کنید.

برای ورود حتما با VPN و با ای پی امریکا وارد شید

❤️ارسالی توسط امیر حسین سجادی
👍103😍2🔥1
بچه ها ی مطلبی رو عرض کنم :

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

اگر دوست داشتید ، با نام خودتون هم درج میشه ❤️🙂
👍184
𝗨𝗜/𝗨𝗫 Learn pinned «بچه ها ی مطلبی رو عرض کنم : اگر مطلب و محتوای خوبی در حوزه ی UIUX و پروداکت دیزاین و حتی مطالب مرتبط داشتید ، میتونید از طریق آیدی زیر برامون ارسال کنید تا ما هم در کانال درج کنیم تا بچه ها استفاده کنند ... @Contactthechanneladmin اگر دوست داشتید ، با…»
#ارسالی_اعضای_کانال

سلام، عصرتون بخیر
من اینو امروز تو لینکدین پیدا کردم

این سایت، مباحث UI/UX رو با اسکچ و نقاشی توضیح داده و واقعا به نظرم مفید و کاربردی اومد،

پیام داخل کانال رو دیدم و گفتم چرا بقیه استفاده نکنن

خدمت شما

https://uxknowledgebase.com


🔅بچه ها شمام اگر مطلب مفیدی در حوزه UIUX دارید بهمون بدید تا در کانال درج کنیم تا همه استفاده کنند 😊
ارسال به آیدی زیر:
@Uiuxlearnadmin
😍1413🙏5👍1🔥1
سلام بچه ها ...خوبین ...
#سوال

برای طراحی UI/UX یه لندینگ پیج خوب و کار بر پسند، باید حواسم به چه چیزایی باشه؟ 😎

بریم خیلی اصولی و خودمونی بررسی کنیم:


اول از همه: تجربه کاربری (UX)

1. هدفت چیه؟
لندینگ پیج باید یه هدف مشخص داشته باشه، مثلاً اینکه کاربر عضو شه، یه چیزی بخره یا فرمی رو پر کنه...
اگه بخوای چند تا کار رو با هم جلو ببری، کاربر گیج می‌شه و احتمال زیاد هیچ کاری نمی‌کنه!

2. کاربرتو بشناس
بفهم طرف کیه، دنبال چیه، از کجا اومده، چه مشکلی داره؟
وقتی بدونی کاربر دنبال چیه، می‌تونی خیلی بهتر براش بنویسی و طراحی کنی....

3. یه مسیر مشخص براش بچین
اول یه تیتر جذاب که توجهش رو جلب کنه، بعد یه توضیح خلاصه از چی براش داری، و در آخر یه دکمه که بگه: «خب حالا این کارو انجام بده!»

4. اعتمادشو جلب کن
نشون بده قبلاً چه کسایی ازت استفاده کردن، لوگوهای مشتریا، نظر کاربرا، یا اگه مجوز یا افتخاری داری، حتماً بذار.
کاربر باید حس کنه که با یه برند درست‌حسابی طرفه....

5. همه‌چی سریع و ساده
سایت باید زود لود شه.
فرما رو هم زیاد شلوغ نکن، فقط اطلاعات ضروری رو بگیر.
هیچ‌چیزی نباید کاربر رو معطل یا سردرگم کنه.
👍14😍82
حالا بریم سراغ رابط کاربری (UI)

1. ساده، تمیز، مرتب
صفحه رو بی‌خودی شلوغ نکن. از فضای خالی (white space) استفاده کن تا چشم کاربر اذیت نشه...

2. رنگ و نوشته‌ها مهمن
متن‌ها باید خوانا باشن، رنگ‌شون با بک‌گراند تضاد داشته باشه.
تیتر باید دلبری کنه 🙂 و بگه: "بیا ببین من چی دارم برات!"

3. دکمه CTA رو خاص کن
اون دکمه‌ای که می‌خوای روش کلیک کنه (مثلاً «ثبت‌نام»، «دانلود»، «خرید») باید قشنگ معلوم باشه.
رنگش متفاوت باشه، نوشته‌ش واضح و وسوسه‌کننده...

4. حالت موبایلش هم عالی باشه
یادت نره خیلیا با موبایل میان...
پس همه‌چی باید توی گوشی هم خوب و راحت دیده بشه و کار کنه....

5. تصاویر خوشگل و باکیفیت
یه تصویر خوب خیلی کار می‌کنه! عکس محصول، چهره کاربر راضی، یا یه آیکون گرافیکی شیک می‌تونه حس خوبی بده...
😍15👍3
اینم یک چک‌ لیست جمع‌وجور برای طراحی لندینگ پیج:

یه تیتر قوی و جذاب
یه زیرتیتر که توضیح بده
یه عکس/ویدیو خوب
مزایای اصلی محصول یا سرویس
یه دکمه CTA خوش‌رنگ و خوش‌فرم
اعتمادسازی (نظرات، لوگوها)
فرم ساده و کاربردی
طراحی ریسپانسیو (موبایل‌فرندلی)
👍12🙏9🔥6