| کانال طراحی و رابط‌کاربری |

Public

مشاهده کانال

نمی‌توانید بپیوندید؟ @DevelopixDesign

۳.۳k عضو

به‌روزرسانی شده: May 16, 2026 at 1:43 PM

| کانال طراحی و رابط‌کاربری |

⭕️ کانال طراحی و رابط‌کاربری دولوپیکس 💠 دولوپیکس | جامعه توسعه‌دهندگان ایرانی 💎 @Developix 🚀 Developix.ir 📌 پشتیبانی و تبلیغات: @DevelopixSupport

@DevelopixDesign is a dedicated channel for developix and developixir with regular updates in دسی (Desi)

رتبه‌بندی

رتبه‌بندی جهانی

#456

رتبه‌بندی زبان

#45

رتبه‌بندی دسته‌بندی

#23

-1

رشد مشترکان (4 روز گذشته)

مجموع: 3.3K

رشد 24 ساعت: +0 0%

آخرین پست‌ها

| کانال طراحی و رابط‌کاربری |

۳۱ اردیبهشت ۱۴۰۵، ۰۸:۳۳

تو اکثر پروژه‌ها مشکل از همون اول شروع می‌شه: هر طراح یا برنامه‌نویس یه رنگ برای خودش انتخاب می‌کنه، بعد از چند ماه می‌بینیم ده‌تا آبی، پنج‌تا خاکستری و کلی Style تکراری توی فایل داریم 😅

یکی از تمیزترین راه‌حل‌ها استفاده از Design Token برای رنگ‌هاست؛ دقیقاً همون کاری که تو https://m3.material.io/foundations/customization/overview و سیستم‌های حرفه‌ای انجام می‌شه.

تو این پست می‌ریم سراغ یه ورک‌فلو ساده و واقعی برای ساخت Color Token ها تو Figma که مستقیم بشه تو Design System و بعدش تو Frontend استفاده‌شون کرد. 👇

۱️⃣ ساخت ساختار اسم‌گذاری درست
به‌جای اسم‌های حسی مثل:
blue-light یا green-button
از ساختار «نقش + سطح» استفاده کن:

color/primary/40
color/primary/80
color/neutral/10
color/error/60


این مدل، با ساختار Material Design 3 و خیلی از Design System های مدرن هم‌سوئه و اجازه می‌ده بعداً راحت Theme عوض بشه بدون این‌که اسم‌ها بی‌معنی بشن.

۲️⃣ ساخت Color Style ها در Figma
۱) تو Figma یه Frame برای "🟦 Colors" بساز.

۲) برای هر نقش (Role) مثل Primary, Secondary, Neutral, Error چند دایره/مستطیل کنار هم بذار و درجات مختلف روشنایی رو توش بذار (مثلاً 10، 20، 40، 80).

۳) هر رنگ رو به یه Style تبدیل کن:

- رنگ رو انتخاب کن.
- تو پنل Fill روی چهارخونه‌ی Style کلیک کن.
- روی + بزن و اسمش رو چیزی مثل این بذار:
color/primary/40
color/primary/80


حالا هر کامپوننتی این Style ها رو مصرف کنه، بعداً با یه تغییر Style کل UI آپدیت می‌شه ✨

۳️⃣ اتصال Token ها به Semantic Role ها
یه مرحله حرفه‌ای‌تر اینه که از Semantic Name استفاده کنی؛ یعنی چیزی که معنی استفاده رو بگه، نه فقط رنگ رو:

bg/surface/main
bg/surface/on-primary
text/primary
text/on-primary
border/subtle


داخل Style واقعاً از همون color/primary/40 و بقیه استفاده می‌کنی، ولی اسم Style ها رو Semantic می‌ذاری. این‌طوری اگر بعدها بخوای Theme Dark بسازی، فقط مپ کردن بین Semantic و Color عوض می‌شه.

۴️⃣ یک نمونه واقعی: دکمه Primary
برای یک Button Primary این مپ ساده خیلی جواب می‌ده:

- bg/surface/main => color/primary/40
- text/on-primary => color/neutral/0
- border/subtle => color/primary/60

کافیه Button Component فقط این Style ها رو استفاده کنه؛ حالا اگر اقتصادی‌تر یا تندتر بخوای Theme رو عوض کنی، مستقیم می‌ری سراغ Style ها، نه هر Artboard و هر صفحه.

۵️⃣ خروجی گرفتن برای Dev ها
اگر تو تیم‌تون از Token ها تو کد هم استفاده می‌شه، می‌شه با Plugin هایی مثل https://www.figma.com/community/plugin/843461159747178978 یا https://www.figma.com/community/plugin/888356646278934516 رنگ‌ها رو به JSON تبدیل کرد و تو Frontend خوند.

یه ساختار JSON خیلی رایج (مثل Style Dictionary) چیزی شبیه اینه:
{
"color": {
"primary": {
"40": { "value": "#6750A4" },
"80": { "value": "#D0BCFF" }
},
"neutral": {
"0": { "value": "#FFFFFF" },
"10": { "value": "#1C1B1F" }
}
}
}


نکته‌های ریز ولی مهم 🎯
- قبل شروع پروژه، پالت رنگ رو بر اساس Contrast (طبق WCAG) چک کن؛ ابزار رسمی: https://webaim.org/resources/contrastchecker/
- برای Light و Dark Theme جداگانه Style نساز؛ همون Structure رو نگه دار و فقط Value ها رو عوض کن.
- از اول برای Error, Warning, Success هم Token داشته باش؛ وقتی State ها زیاد می‌شن خیلی کمک می‌کنه.

اگر تا الان رنگ‌ها تو فایلت پخش و پلا بودن، از همین امروز یه صفحه 🧱 Foundations / Colors بساز و اولین سری Design Token هات رو تعریف کن؛ دو سه ساعت وقت بذاری، تو کل عمر پروژه پس می‌گیری 💪

🔖 #Design #طراحی #UI #UX #Figma #Design_Tokens #Color_System #Material_Design #UI #UX #Design_System

👤 Developix

💎 Channel:

1,070

| کانال طراحی و رابط‌کاربری |

۳۱ اردیبهشت ۱۴۰۵، ۰۸:۳۳

یه کار کوچیک ولی خیلی حرفه‌ای که تو همه‌ی تیم‌های طراحی جدی می‌بینی، درست‌کردن Design Token‌های رنگ توی Figma ـه. این کار باعث می‌شه رنگ‌هات تمیز، قابل‌مدیریت و آماده برای Design System باشن؛ مخصوصاً وقتی بعداً می‌خوای Dark Mode یا چند برند مختلف رو هندل کنی.

این روال بر اساس Tutorial رسمی Figma درباره Color styles و Tokens و همین‌طور توصیه‌های Material Design برای رنگ‌های Semantic ـه:
https://help.figma.com/hc/en-us/articles/360039957974-Create-and-use-color-styles
https://m3.material.io/styles/color/overview

۱️⃣ اول: رنگ‌هات رو Semantic ببین، نه بصری
به‌جای اسم‌هایی مثل blue-light و blue-dark از اسم‌های معنی‌دار استفاده کن:

• primary / primary-container برای رنگ اصلی برند
• success / warning / error برای وضعیت‌ها
• bg / surface / overlay برای پس‌زمینه‌ها
• text-primary / text-secondary / text-inverse برای متن

اینطوری اگه فردا Brand Color عوض شد، فقط مقدار Primary رو تغییر می‌دی، نه تک‌تک Frameها رو 😅

۲️⃣ ساخت Color Styleها در Figma

۱. یه Frame خالی بساز، اسمش رو بذار مثلاً 🎨 Tokens / Colors.
۲. چندتا Rectangle بکش برای دسته‌های مختلف رنگ: Brand، Background، Text، State.
۳. روی Rectangle مربوط به رنگ اصلی برند کلیک کن، از پنل راست:
• Fill رو تنظیم کن (مثلاً #6750A4 مثل Primary در Material 3).
• روی آیکن چهار نقطه کنار Fill بزن.
• Style > + > اسم بده: brand/primary.
۴. همین کار رو برای بقیه انجام بده؛ مثلاً:
• brand/primary-container
• text/primary
• bg/surface
• state/error

۳️⃣ ساخت ساختار منظم مثل Design Tokenها

اسم‌گذاری رو شبیه Tokenهای برنامه‌نویسی کن. یه الگوی ساده که روی خیلی پروژه‌ها جواب می‌ده:

semantic/role/state/variant

مثال‌ها:
semantic/bg/default
semantic/bg/elevated
semantic/text/primary
semantic/text/secondary
semantic/border/subtle
semantic/status/error
semantic/status/error-container

تو Figma هر جا از / استفاده کنی، Styleها به‌صورت گروهی نشون داده می‌شن و پیدا کردنشون خیلی راحت‌تره.

۴️⃣ اتصال این Styleها به کامپوننت‌هات

وقتی Button، Card یا Navigation Bar طراحی می‌کنی:

• برای Background از Styleهایی مثل semantic/bg/default استفاده کن.
• برای متن از semantic/text/primary.
• برای Border از semantic/border/subtle.

حالا اگه بخوای مثلاً تم Light رو کمی روشن‌تر کنی یا یه نسخه Dark Mode بسازی، فقط Styleها رو Update می‌کنی و کل UI باهات Sync می‌شه. این همون کاریه که تو Design Systemهای بزرگ مثل Material Design و iOS Human Interface Guidelines اتفاق می‌افته.

۵️⃣ چند نکته‌ی ریز ولی مهم

• طبق WCAG سعی کن کنتراست متن و پس‌زمینه‌ت حداقل 4.5:1 باشه؛ می‌تونی با ابزارهایی مثل
https://webaim.org/resources/contrastchecker/
چکش کنی.

• برای هر Token حداقل یک Use Case تو ذهنت داشته باش؛ مثلاً:
• semantic/status/error = پیام خطای فرم
• semantic/bg/surface = Cardها و Sheetها

• توی توضیحات Style (Description) بنویس کجا استفاده بشه؛ این کار برای Devها و بقیه دیزاینرها نجات‌بخشه.

اگه تا الان رنگ‌هات رو مستقیم روی Frameها ست می‌کردی، یه بار این ساختار رو پیاده کن؛ چند روز بعد که اولین تغییر رنگ برند یا Dark Mode رو زدی، تفاوت رو واقعاً حس می‌کنی 🌙✨

امتحانش کن روی یه پروژه کوچیک Figma و اگه جواب داد، کم‌کم ببرش تو کل Design System تیمت.

🔖 #Design #طراحی #UI #UX #Figma #Design_Tokens #Color_System #UX #UI #Material_Design #WCAG

👤 Developix

💎 Channel:

| کانال طراحی و رابط‌کاربری |

۳۱ اردیبهشت ۱۴۰۵، ۰۸:۳۳

در اکثر پروژه‌ها رنگ‌ها اولین جایی هستن که طراحی رو به‌هم می‌ریزن: هر صفحه یه رنگ، هر کامپوننت یه سایه! 😅 این‌جا Design Tokenها نجات‌مون می‌دن.

امروز سراغ یه ورک‌فلو خیلی عملی می‌ریم: تعریف Design Token رنگ در Figma بر اساس توصیه‌های Material Design و WCAG، تا هم UI تمیزتری داشته باشیم هم راحت بتونیم Theme عوض کنیم. 🎯

🧩 Design Token رنگ یعنی چی؟

به‌جای استفاده از #3498db تو هر لایه، یه اسم معنی‌دار تعریف می‌کنی، مثلاً:

color/primary
color/on-primary
color/background

بعد همه‌جا فقط از این Tokenها استفاده می‌کنی. اگه رنگ برند عوض شد، فقط Token رو آپدیت می‌کنی، نه تک‌تک فریم‌ها. این همون چیزیه که تو Design Systemهای بزرگ مثل Material Design هم استفاده می‌شه.

🛠 راه‌اندازی رنگ‌ها در Figma

ورک‌فلو زیر دقیقا از مستندات رسمی Figma و Google Material الهام گرفته شده:

۱️⃣ یه فایل مخصوص Design System بساز (مثلاً: Design System – Foundation).

۲️⃣ توی Local styles برید به بخش Color Styles و Styleهای پایه رو بساز:

• theme/light/color/primary
• theme/light/color/on-primary
• theme/light/color/background
• theme/light/color/surface
• theme/light/color/error

اگه Dark Mode هم داری، همین ساختار رو با theme/dark/... تکرار کن.

۳️⃣ از Material Design (نسخه 3) برای انتخاب رنگ اصلی کمک بگیر:
https://m3.material.io/theme-builder
رنگ برند رو وارد کن، Tool خودش طیف رنگ رو می‌سازه و Contrast رو طبق WCAG بررسی می‌کنه.

۴️⃣ رنگ‌های پیشنهادی رو تو Figma به Styleها نسبت بده. مثلاً:

• theme/light/color/primary ← Primary رنگ M3
• theme/light/color/on-primary ← On Primary برای متن روی دکمه‌ها

📏 تست Contrast برای دسترس‌پذیری

برای این‌که متن روی دکمه‌ و Background خونده بشه، نسبت کنتراست طبق WCAG باید حداقل 4.5:1 برای متن معمولی باشه.
برای تست می‌تونی از این ابزار استفاده کنی:
https://webaim.org/resources/contrastchecker/

فقط کافیه رنگ Token متن (مثلاً on-primary) و رنگ پس‌زمینه (مثلاً primary) رو وارد کنی.

💡 اتصال رنگ‌ها به کامپوننت‌ها

وقتی Button یا Card طراحی می‌کنی، به‌جای دادن رنگ مستقیم:

• Fill دکمه = theme/light/color/primary
• رنگ متن = theme/light/color/on-primary

اگه بعداً بخوای Dark Mode رو تست کنی، کافیه Styleها رو روی نسخه Dark سوییچ کنی، تمام UI با هم آپدیت می‌شه؛ این دقیقا همون کاریه که تو Design Systemهای حرفه‌ای انجام می‌شه. 🔁

🎁 یه نمونه ساده Token به صورت JSON (برای Devها)

این ساختار الهام‌گرفته از الگوی Design Token در سیستم‌های مدرنه:

{
"theme": {
"light": {
"color": {
"primary": "#6750A4",
"on-primary": "#FFFFFF",
"background": "#FFFBFE"
}
}
}
}


همین ساختار رو می‌شه با Devها شیر کرد تا توی Web, Android یا iOS به‌صورت خودکار Map بشه.

یه فایل کوچیک Design Token می‌تونه کل پروژه رو منظم‌تر، قابل‌تغییرتر و حرفه‌ای‌تر کنه. دفعه بعد که می‌خوای برای یه محصول جدید UI بسازی، از همون اول رنگ‌هات رو Token کن و نتیجه رو با پروژه‌های قبلیت مقایسه کن 😌

🔖 #Design #طراحی #UI #UX #Figma #Design_Token #Color_System #Material_Design #WCAG #UI_Design

👤 Developix

💎 Channel:

| کانال طراحی و رابط‌کاربری |

۳۱ اردیبهشت ۱۴۰۵، ۰۸:۳۳

🎯 توی این پست می‌ریم سراغ یه کار کاملاً عملی: ساختن سیستم رنگ (Color System) برای UI یه اپ موبایل داخل Figma؛ دقیقاً همون چیزی که بعداً تو Design System و Design Tokenها استفاده می‌شه.

ایده کلی اینه که به‌جای انتخاب تصادفی رنگ برای هر دکمه و متن، یه ساختار ثابت و قابل‌مدیریت بسازیم؛ چیزی که با رشد پروژه و تغییر برند، به‌هم نریزه.

🧩 قدم ۱: انتخاب رنگ پایه طبق Material Design
طبق راهنمای رسمی https://m3.material.io/styles/color/overview اول یه رنگ برند انتخاب کن:

- رنگ Primary (مثلاً آبی برای اپ فین‌تک)
- رنگ Secondary برای المان‌های کم‌اهمیت‌تر
- رنگ Tertiary برای Accentها

برای شروع می‌تونی از ابزار Color Tool در همون سایت Material استفاده کنی تا یه پالت کامل (با تیره‌روشن‌ها) بگیری.

🎛 قدم ۲: ساخت Styleهای رنگ در Figma
۱️⃣ تو Figma یه فایل مخصوص Design System بساز.
۲️⃣ از پنل Assets → Local styles → Color، برای هر رنگ یه Style بساز، مثلاً:

- Primary / 40
- Primary / 80
- Neutral / 10
- Error / 40

نام‌گذاری لِولی (۱۰، ۲۰، ۳۰...) کمک می‌کنه بعداً راحت Expand یا Refactor کنی.

📐 قدم ۳: تعریف Semantic Colorها
به‌جای این‌که توی UI از اسم «آبی ۴۰» استفاده کنی، یه لایه معنایی بساز:

- Bg / Primary
- Text / Primary
- Text / Secondary
- Border / Subtle
- State / Hover

اینا تو Figma همون Color Style هستن، فقط اسمشون معناییه. وقتی برند عوض شد، فقط Style رو آپدیت می‌کنی، نه تک‌تک فریم‌ها رو.

🧪 قدم ۴: چک کردن Contrast طبق WCAG
برای خوندنی بودن متن، حداقل کنتراست مهمه. طبق https://www.w3.org/WAI/WCAG21/ برای متن نرمال نسبت ۴٫۵:۱ لازمه.

برای تست، می‌تونی از پلاگین Figma مثل Contrast یا سایت https://webaim.org/resources/contrastchecker/ استفاده کنی.

مثلاً فرض کن:
- رنگ متن: #0F172A
- رنگ پس‌زمینه: #F9FAFB

با WebAIM چک می‌کنی که نسبتشون بالاتر از ۴٫۵ باشه.

🔧 نمونه Design Token ساده (برای Dev)
وقتی با تیم Dev کار می‌کنی، می‌تونی همین Styleها رو به Design Token تبدیل کنی. یه نمونه JSON که تو Android یا Web قابل استفاده‌ست:

{
"color": {
"bg": {
"primary": "#FFFFFF",
"surface": "#F9FAFB"
},
"text": {
"primary": "#0F172A",
"secondary": "#6B7280"
},
"accent": {
"primary": "#2563EB"
},
"state": {
"error": "#DC2626"
}
}
}


همین ساختار می‌تونه دقیقاً با Color Styleهای Figma Sync بشه (مثلاً با پلاگین‌هایی مثل Figma Tokens / Tokens Studio).

⚠️ چند نکته کاربردی
- برای Dark Mode از همون Semantic Name استفاده کن و فقط Map رنگ‌ها رو عوض کن.
- تعداد رنگ‌هات رو محدود نگه دار؛ نویز بصری رو کم می‌کنه و Consistency رو زیاد.
- برای Stateها (Hover, Pressed, Disabled) حتماً Variation رنگ جدا بساز؛ مثلاً Primary / 40 برای Default و Primary / 50 برای Pressed.

✨ این سیستم رنگ رو یه بار خوب بساز، بعدش تقریباً تو هر صفحه جدید فقط Drag & Drop می‌کنی و تمرکزت می‌ره روی UX، نه انتخاب رنگ. اگر مفید بود برای هم‌تیمی‌هات هم بفرست تا تو یه زبان مشترک رنگی طراحی کنین.

🔖 #Design #طراحی #UI #UX #Figma #Design_System #Color_System #Material_Design #WCAG #UI #UX

👤 Developix

💎 Channel:

| کانال طراحی و رابط‌کاربری |

۳۱ اردیبهشت ۱۴۰۵، ۰۸:۳۳

متن روی تصویر یا گرادیان وقتی کنتراست کافی نداشته باشه، حتی اگر فونت خوب باشه، تجربه کاربر رو خراب می‌کنه. مخصوصاً توی UI موبایل که کاربر زیر نور شدید صفحه رو می‌بینه. اینجا یک تریک ساده و عملی برای خواناتر کردن متن روی پس‌زمینه‌های شلوغ 👇

۱️⃣ از لایه Overlay تیره/روشن استفاده کن
روی تصویر یا گرادیان، یک لایه نیمه‌شفاف بذار تا اختلاف روشنایی بین متن و پس‌زمینه بیشتر بشه:

- متن روشن ✔️ → Overlay تیره روی پس‌زمینه
- متن تیره ✔️ → Overlay روشن روی پس‌زمینه

مثلاً در Figma:
- یک Rectangle روی تصویر بکش
- رنگش رو مشکی بذار با Opacity حدود ۴۰٪
- متن سفید رو روی اون قرار بده

۲️⃣ اعداد عملی برای شروع
برای UI واقعی، این تنظیم‌ها معمولاً جواب می‌ده:
- Background Overlay مشکی: #000000 با ۳۲٪ تا ۴۸٪ Opacity
- متن: #FFFFFF با وزن حداقل Medium

این ترکیب توی اکثر موارد به نسبت کنتراست نزدیک به استانداردهای WCAG می‌رسه و روی موبایل هم خواناست.

۳️⃣ اگر پس‌زمینه خیلی رنگی است
به‌جای خالص مشکی یا سفید، می‌شه از همون رنگ اصلی با Saturation کمتر و Lightness مناسب استفاده کرد؛ هم هارمونی حفظ می‌شه، هم متن واضح می‌مونه.

نمونه pseudo-code برای طراحی سبک
cardBackground: image
cardOverlay: rgba(0, 0, 0, 0.4)
cardTextColor: #FFFFFF
cardTextWeight: 500


۴️⃣ حتماً کنتراست رو چک کن
بعد از تنظیم Overlay، کد رنگ متن و پس‌زمینه نهایی رو توی یک Contrast Checker تست کن. حداقل هدف برای متن معمولی، نسبت ۴٫۵:۱ هست.

رفرنس کاربردی 📚
Nielsen Norman Group - Contrast and Color Use in UI:
https://www.nngroup.com/articles/low-contrast/

امتحان این تریک توی یک یا دو اسکرین از طراحی فعلیت، معمولاً بلافاصله فرق خوانایی و حس حرفه‌ای بودن UI رو نشون می‌ده. 😉

🔖 #Design #طراحی #UI #UX #UI #UX #Contrast #Color #Accessibility #Mobile_Design

👤 Developix

💎 Channel:

1,560

| کانال طراحی و رابط‌کاربری |

۳۱ اردیبهشت ۱۴۰۵، ۰۸:۳۳

🎯 تیتر و دکمه‌ای که واقعا دیده می‌شود

خیلی وقت‌ها طراحی‌مون قشنگه، اما متن روی دکمه یا تیتر اصلی «خوانا» نیست. مشکل اغلب از کنتراست رنگی ضعیف بین متن و پس‌زمینه است؛ مخصوصا در UI روشن و مینیمال.

ترفند سریع: همیشه کنتراست رنگ متن و پس‌زمینه را با یک ابزار معتبر (مثل ابزار WCAG) چک کن؛ حداقل نسبت 4.5:1 برای متن معمولی و 3:1 برای تیترها و دکمه‌های درشت.

🧩 مثال کاربردی در طراحی UI

فرض کن دکمه‌ات اینه:

• پس‌زمینه: #F5C2C2 (صورتی روشن)
• متن: #FFFFFF (سفید)

این ترکیب روی مانیتور خوب شاید اوکی به‌نظر برسد، اما طبق WCAG کنتراستش خیلی پایینه و روی موبایل زیر نور آفتاب تقریبا ناپدید می‌شود.

با یک تغییر کوچک:

• پس‌زمینه: #E53935 (قرمز تیره‌تر)
• متن: #FFFFFF (سفید)

کنتراست به محدوده قابل قبول می‌رسد، دکمه هم همچنان «برند» می‌ماند، هم واقعا قابل کلیکه.

🛠 نمونه چک‌کردن کنتراست در کد

این فقط یک نمونه برای فهم پشت‌صحنه محاسبه کنتراسته:

function relativeLuminance(rgb) {
const srgb = rgb.map(v => {
v = v / 255;
return v <= 0.03928
? v / 12.92
: Math.pow((v + 0.055) / 1.055, 2.4);
});
return 0.2126 * srgb[0] + 0.7152 * srgb[1] + 0.0722 * srgb[2];
}

function contrastRatio(rgb1, rgb2) {
const L1 = relativeLuminance(rgb1);
const L2 = relativeLuminance(rgb2);
const light = Math.max(L1, L2);
const dark = Math.min(L1, L2);
return (light + 0.05) / (dark + 0.05);
}


🍀 چند نکته عملی

• اول «خوانایی» بعد «برند رنگی»؛ اگر رنگ برند کنتراست خوب نمی‌دهد، برای متن از رنگ خنثی (مثل تقریبا مشکی) استفاده کن.
• روی چند حالت مختلف تست کن: حالت Light/Dark، نمایشگرهای مختلف، و مخصوصا موبایل در نور زیاد.
• برای متن روی عکس، حتما از لایه تیره/روشن (Overlay) یا پس‌زمینه نیمه‌شفاف استفاده کن تا متن گم نشود.

📚 رفرنس معتبر

برای جزییات کامل معیارهای کنتراست از راهنمای رسمی WCAG استفاده کن:
https://www.w3.org/WAI/WCAG21/quickref/#contrast-minimum

امتحان این ترفند روی تیتر و دکمه‌های مهم در طراحی فعلی، معمولا در چند دقیقه تأثیر محسوسی روی وضوح و حس حرفه‌ای بودن UI می‌گذارد.

🔖 #Design #طراحی #UI #UX #Contrast #WCAG #Color #Accessibility #UI #UX

👤 Developix

💎 Channel:

| کانال طراحی و رابط‌کاربری |

۳۱ اردیبهشت ۱۴۰۵، ۰۸:۳۳

✨ سیستم فاصله‌گذاری ۸pt: سریع‌تر، مرتب‌تر، قابل پیش‌بینی‌تر

فاصله‌های نامنظم در یک رابط کاربری، حس بی‌نظمی و سردرگمی ایجاد می‌کنند. استفاده از یک مقیاس فاصله‌گذاری ثابت (مثل شبکهٔ ۸pt) کمک می‌کند که عناصر با هم هماهنگ شوند و تصمیمات طراحی سریع‌تر گرفته شود. 🧭

ایدهٔ ساده: همهٔ فواصل (padding, margin, gap) را از مضارب ۸px تعیین کن—مثلاً 8, 16, 24, 32. این کار خوانایی، انسجام بصری و سرعت پیاده‌سازی در طراحی و توسعه را بالا می‌برد. ✅

مثال عملی در CSS (قابل استفاده به‌عنوان tokens در Figma یا سیستم طراحی):
/* spacing scale */
:root{
--space-xxs:4px; /* برای جزییات خیلی کوچک */
--space-xs:8px; --space-sm:12px;
--space-md:16px; --space-lg:24px; --space-xl:32px;
}
.card{ padding:var(--space-md); margin-bottom:var(--space-sm); }
.grid{ gap:var(--space-lg); }


نکات کاربردی:
- از یک پایهٔ ثابت (۸pt) شروع کن؛ در موارد خاص ۴pt برای جزئیات قابل قبول است. 🧩
- مقیاس منطقی انتخاب کن (8، 16، 24…) تا اجزا به‌صورت شبکه‌ای منظم قرار بگیرند.
- در Figma از Design Tokens یا Auto Layout برای اعمال سریع استفاده شود تا تیم توسعه هم هماهنگ بماند. 🔁

اشتباهات رایج: تغییر دستی فواصل هر المان، ترکیب واحدهای ناهمگن یا استفاده از اعداد دلخواه که انسجام را می‌شکند.

تلاش کن این سیستم را روی یک کامپوننت ساده پیاده‌سازی کنی؛ تفاوت در تمیزی و سرعت تصمیم‌گیری ملموس خواهد بود. ✨

منبع معتبر: https://material.io/design/layout/understanding-layout.html

🔖 #Design #طراحی #UI #UX #UI #spacing #design_tokens #8pt #Figma

👤 Developix

💎 Channel:

1,500

| کانال طراحی و رابط‌کاربری |

۳۱ اردیبهشت ۱۴۰۵، ۰۸:۳۳

https://cdn.novinhub.com/upload/18576/vihubaki-68d8fa8875df3.jpgنسل جدید طراحی اینجاست!

🎨 مسترکلاس طراحی UI&UX؛ پیکسل

از مبتدی تا حرفه‌ای، همه چیز رو یاد بگیر و تبدیل به یک طراح رابط و تجربه کاربری پول‌ساز شو!
🚀 توی این دوره یاد می‌گیری:
• اصول پایه‌ای طراحی رابط کاربری (رنگ، تایپوگرافی، آیکون، گرید…)
• کار با نرم‌افزار فیگما از صفر تا سطح حرفه‌ای
• طراحی اپلیکیشن و وب‌سایت خارجی به‌صورت پروژه واقعی
• استفاده از هوش مصنوعی در طراحی UI
• مهارت‌های نرم بازار کار: ساخت نمونه‌کار، حضور حرفه‌ای در شبکه‌های اجتماعی و جذب پروژه

💰 قیمت اصلی دوره: ۶.۵۰۰.۰۰۰ تومان
اما برای شروع، یه خبر خوب داریم 👇

🎁 تخفیف‌های ویژه انتشار دوره:
🔹 40٪ تخفیف برای 5 نفر اول
🔹 35٪ تخفیف برای 10 نفر بعدی
🔹 30٪ تخفیف برای 15 نفر بعدی
🔹 25٪ تخفیف برای 20 نفر بعدی

📌 نگران پرداخت یک‌جا هم نباش!
این دوره با پلن اقساطی ۴ قسطه هم ارائه میشه.

💯ثبت نام💯 ( https://academy.rtl-theme.com/course/ui-ux/)
بعد از این دوره، نه‌تنها مهارت طراحی داری، بلکه آماده‌ای برای ورود به بازار کار و گرفتن پروژه‌های بین‌المللی! 🌍💼
💚 https://t.me/academy_rtltheme I آکادمی راست چین

https://t.me/rtltheme

2,070

| کانال طراحی و رابط‌کاربری |

۳۱ اردیبهشت ۱۴۰۵، ۰۸:۳۳

یک میکروانیمیشن ساده می‌تواند تجربهٔ کاربری را روان‌تر کند، اما باید سریع، قابل دسترس و قابل نگهداری باشد. در این پست نحوهٔ ساخت یک دکمهٔ تعاملی با Framer Motion و رعایت prefers-reduced-motion را مرور می‌کنیم.

مراحل کلیدی
1. نصب: https://www.framer.com/motion/).
2. تعریف variants برای حالت‌های hover و tap.
3. استفاده از  به‌جای 

1,860

| کانال طراحی و رابط‌کاربری |

۳۱ اردیبهشت ۱۴۰۵، ۰۸:۳۳

معرفی سایت icon-icons

سایت https://icon-icons.com/ یکی از سایت‌هایی هست که کلی آیکن و عکس‌های زیبا داخلش پیدا می‌شه.
آیکن‌ها با فرمت‌هایی مثل PNG، SVG، ICO و ICON در دسترس هستن و میشه خیلی راحت ازشون استفاده کرد.

همچنین بعضی از سایت‌های خفن دیگه هستند که چنین آیکن‌هایی رو ارائه میدن و می‌تونید ازشون استفاده کنید:

۱- https://icons8.com/
۲- https://thenounproject.com/
۳- https://freeicons.io/
۴- https://www.iconarchive.com/

🔖 #Design, #طراحی, #UI, #UX

👤 𝐏𝐫𝐨𝐠𝐫𝐚𝐦‌‌‌‌𝐦𝐞‌‌‌‌𝐫‌‌‌‌

💎 Channel:

4,370

| کانال طراحی و رابط‌کاربری |

۱۱ اردیبهشت ۱۴۰۵، ۰۸:۱۳

📷 Photo

✨۷ اصل طلایی طراحـی✨

✅اگه می‌خوای توی طراحی حرفه‌ای بشی، باید این اصول رو بلد باشی!

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

#آموزش #آموزش_گرافیک #گرافیک

🔖 #Design, #طراحی, #UI, #UX

👤 Mobi🧸🎈

💎 Channel:

6,840

| کانال طراحی و رابط‌کاربری |

۳۰ فروردین ۱۴۰۵، ۲۲:۱۱

همونطور که خودتون میدونید وقتی کسی طراحی انجام میده ریزبین‌تر میشه🧐 و به جزئیات محیط پیرامونش بیشتر از قبل توجه میکنه، مثلا همین‌ چند روز پیش یه کافه رفتیم جاتون خالی😂 ولی طراحی و فونت کافه به شدت آزار دهنده بود🫠 تصمیم گرفتم یه پیام تو ‌کانال بذارم یک‌سری نکات توی طراحی منو رو بگم😁

توی طراحی منو به این نکات توجه کنید✅

🔰 سایز فونت‌ها:

- عنوان‌ها (مثلاً نام دسته‌بندی غذاها): باید بزرگ‌تر و برجسته‌تر باشند. معمولاً سایز بین ۲۰ تا ۳۰ پوینت (Pt) بسته به نوع طراحی مناسب است.

- نام غذاها: باید خوانا و قابل توجه باشند. سایزی بین ۱۴ تا ۱۸ پوینت پیشنهاد می‌شود.

- توضیحات کوتاه (اگر دارید): بهتر است کمی کوچک‌تر از نام غذاها باشد، مثلاً بین ۱۲ تا ۱۴ پوینت.

- قیمت‌ها: نباید از نام غذا بزرگ‌تر باشند تا توجه کاربر بیشتر به غذا جلب شود، نه به قیمت. معمولاً ۱۰ تا ۱۴ پوینت سایز مناسبی برای قیمت‌هاست.

🔰چینش قیمت‌ها:

- چینش قیمت‌ها: به صورت افقی در سمت راست هر آیتم غذایی قرار گیرد، تا کاربر ابتدا اسم غذا را ببیند و بعد قیمت را. همچنین بهتر است قیمت‌ها همگی در یک خط صاف قرار گیرند تا منظم به نظر برسد.

- حذف نشانه‌های اضافی: از گذاشتن علائمی مانند "$" در کنار قیمت‌ها اجتناب کنید تا توجه مخاطب به مبلغ کمتر شود.

- استفاده از قیمت‌های غیر گرد: به جای 20,000 تومان از 19,000 تومان استفاده کنید. این یک ترفند روان‌شناسی است که قیمت‌ها را پایین‌تر از آنچه که هست احساس می‌کند.

💎از همه مهم تر سعی کنید از طرح های شلوغ اجتناب کنید و تا حد امکان از طراحی‌های ساده و شَکیل استفاده کنید چون باعث سردرگمی مشتری و عدم توجه به فهرست و قیمت‌ها میشه🙂‍↔️

💡 فونت‌های فارسی مناسب طراحی منو:

1. فونت ایران سنس: یکی از بهترین فونت‌های فارسی که خوانایی بالایی دارد و در طراحی‌های مدرن و رسمی بسیار استفاده می‌شود.

2. فونت ساحل: یک فونت زیبا و خوانا که مناسب طراحی‌های دوستانه و غیررسمی است.

3. فونت وزیر: یک فونت رایگان و زیبا که قابلیت خوانایی بالا در سایزهای مختلف دارد.

4. فونت شبنم: فونتی مینیمال و جدید که حس مدرن بودن را به مخاطب منتقل می‌کند.

5. فونت دانا: فونتی جدید و شیک که برای منوهای رستوران‌های لوکس بسیار مناسب است.

6. فونت پینار: فونت دوستانه و جذابی هست.

امیدوارم با در نظر گرفتن این نکات دیگه روی مخ مشتریا نرید😂

🔖 #Design, #طراحی, #UI, #UX

👤 Mobi🧸🎈

💎 Channel:

| کانال طراحی و رابط‌کاربری |

۱۸ فروردین ۱۴۰۵، ۱۸:۰۸

📷 Photo

✨ معرفی سایت‌هایی برای دانلود آیکون‌های SVG

✦ http://boxicons.com/
✦ http://iconic.app/
✦ http://iconoir.com/
✦ http://heroicons.com/
✦ http://lucide.dev/icons
✦ http://icons.radix-ui.com/
✦ http://flowbite.com/icons
✦ http://flaticon.com/
✦ http://thenounproject.com/
✦ http://iconmonstr.com/
✦ http://iconfinder.com/
✦ http://svgrepo.com/
✦ http://icons8.com/

🔖 #Design, #طراحی, #UI, #UX

👤 Maryam

💎 Channel:

4,590

Showing 13 of 13 posts

No more posts

رتبه‌بندی

ورود لازم است

نظرات کاربران (0)

هنوز هیچ نظری وجود ندارد. اولین نفری باشید که نظر خود را به اشتراک می‌گذارید!

کانال‌های تلگرام مرتبط

Loading recommended channels...

| کانال طراحی و رابط‌کاربری |

| کانال طراحی و رابط‌کاربری |

رتبه‌بندی

رشد مشترکان (4 روز گذشته)

آخرین پست‌ها

رتبه‌بندی

نظرات کاربران (0)

کانال‌های تلگرام مرتبط

Design Stuff

◥ ツعالم الابداعツ ◤

ملفات مفتوحة PSD

ديزآين ستوديو - DZN STD

پخش عمده نوشت افزار فانتزی و دکوری بازرگانی آیما

አንደኛ - Andegna Wood & Metal Works

كروشية الإبداع

دژم؛

کانال‌های تلگرام مرتبط

Design Stuff

◥ ツعالم الابداعツ ◤

ملفات مفتوحة PSD

ديزآين ستوديو - DZN STD

پخش عمده نوشت افزار فانتزی و دکوری بازرگانی آیما

አንደኛ - Andegna Wood & Metal Works

كروشية الإبداع

دژم؛

نظرات کاربران (0)

آخرین پست‌ها