تئوری رنگ‌ها در طراحی uiux یکی از جذاب‌ترین قسمت‌های یادگیری طراحی به شمار می‌رود. رنگ‌ها یکی از اصلی‌ترین موضوعاتی هستند که در طراحی رابط کاربری باید به آنها توجه ویژه‌ای داشته باشیم. شناخت طراحان از رنگ‌ها، شیوه استفاده از آنها و روانشناسی رنگ‌ها، کمک بزرگی به طراحان رابط کاربری برای خلق پروژه‌های جذاب و حرفه‌ای می‌کند.
در این قسمت از دوره طراحی رابط کاربری رایگان از آژانس نوآوری رسام قصد داریم تئوری رنگ‌ها در طراحی uiux را مورد بررسی قرار دهیم. از شما دعوت میکنیم تا پایان مقاله ما را همراهی کنید.
روانشناسی رنگ‌ها در UI/UX
سه رنگ اصلی در طبیعت که با سایر رنگ‌ها ترکیب نشده‌اند. قرمز، زرد و آبی هستند. در صورتی که 3 رنگ اصلی که قرنیه چشم انسان با ترکیب آنها، سایر رنگ‌ها را می‌سازند، قرمز، سبز و آبی هستند. این دو نباید اشتباه شود. باید توجه داشت که تمامی نمایشگرها مانند مانیتور، تلویزیون و گوشی، منطقی مشابه عملکرد قرنیه یا شبکیه چشم انسان دارند. ساختار رنگی دیگری تحت عنوان CMYK نیز وجود دارد که در صنعت چاپ استفاده می‌شوند. فیروزه‌ای، سرخابی، زرد، مشکی. در ui کار خاصی با CMYK نداریم و این استاندارد رنگی، در طراحی چاپی استفاده میشود.
ساختار رنگی HSB
با استفاده از این ساختار و بدست آوردن طیف، اشباع و روشنایی که همان HSB می‌شوند، شما می‌توانید پالت رنگی خود را بسازید.
- طیف رنگ یا hue: مشخص می‌کند از چه طیف رنگی استفاده میکنیم.
- اشباع یا saturation: اگر 0 باشد خاکستری و اگر 100 باشد طیف کامل رنگ.
- روشنایی یا brightness: اگر 0 باشد مشکی و اگر 100 باشد کاملا روشن.
ساختار رنگی HSB
ساختار رنگی HSB یکی از مرسوم‌ترین ساختارهای رنگی مورد استفاده طراحان است. در واقع طراحان برای طراحی سایت نیز از این ساختار استفاده می‌کنند. کلا 6 کاراکتر دارد که 2 کاراکتر اول، بیانگر رنگ قرمز، 2 کاراکتر بعدی سبز و 2 کاراکتر بعدی نیز رنگ آبی است.
- هر عدد 16 حالت مختلف (از 0 تا 15) را شامل میشود.
- ساختار دیگر 16*16 = 256 حالت مختلف دارد که بین اعداد 0 تا 255 هستند.
- به این ساختار rgb گفته میشود که در واقع در مبنای دیگری نوشته شدند.
به تصویر زیر دقت کنید. ساختار hex که 6 کاراکتر دارد و هر 2 کاراکتر بیانگر یک رنگ است، هرکدام از آن 2 رنگ، می‌تواند 16 حالت مختلف داشته باشد. این 16 حالت از صفر شروع میشود. چون مثلا برای هر رنگ صرفا 2 کاراکتر می‌توانیم بگذاریم، بنابراین به‌جای 10 مقدار A، به‌جای 11 مقدار B، به‌جای 12 مقدار C، به‌جای 13 مقدار D، به‌جای 14 مقدار E و در نهایت به جای 15 هم مقدار F را می‌گذارند.
حال برای هر رنگ 16 حالت مختلف درج میشود. هر رنگ 2 عدد دارد. بنابراین 16 حالت ضرب در 16 حالت خواهیم داشت که میشود 256 حالت مختلف برای هر کدام از آن 3 رنگ. این مقدار چون از صفر شروع میشود، پس قاعدتا 0 تا 255 خواهد بود. به این ساختار نیز rgb گفته میشود که مثال نوشتاری آن در تصویر زیر وجود دارد. توجه داشته باشید که آلفا یا opacity اگر باشد این مقدار rgba میشود و عددها داخل پرانتز می‌آیند.
یادآوری: آلفا یا opacity شفافیت است که مقداری بین 0 و 1 است. اگر صفر بشود، کاملا جسم نامرئی شده و اگر نزدیک 1 بشود، رنگ کامل است و نامرئی نیست.
چرخه رنگ یا Colorwheel
طراحان با استفاده از چرخه رنگی می‌توانند رنگ‌های متنوعی را انتخاب کنند. ابزارهای آنلاینی برای آن نیز وجود دارد که معرفی خواهیم کرد. 3 رنگ اصلی طبیعت یعنی قرمز و آبی و زرد را خواهید دید که بین آنها رنگ‌های ثانویه و لایه‌های جزئی‌تر آن نیز ایجاد شده است.
- رنگ‌های گرم راست و رنگ‌های سرد سمت چپ هستند.
- رنگ‌های اصلی در طبیعت، که از ترکیب سایر رنگ‌ها تشکیل نشده‌اند.
- رنگ‌های ثانویه یا secondary که از ترکیب رنگ‌های primary ایجاد شده‌اند.
دسته‌بندی موضوعی رنگ‌ها در UI
باقابلیت‌های نرم‌افزار فیگما می‌توانیم پالت رنگی خود را انتخاب و به فیگما اضافه کنیم. قبل از آن، باید با این دسته‌بندی رنگ آشنا شویم. همچنین از افزونه‌های فیگما می‌توانیم برای بهبود و سرعت عملکرد، استفاده کنیم. مشاهده آموزش رایگان نرم افزار فیگما در این موضوع کمک بسیاری به شما خواهد کرد.
رنگ اصلی برند – Primary
رنگ اصلی برند معمولا در لوگو و برندبوک سازمانی شرکت‌ها به خوبی دیده میشود. مانند رنگ قرمز دیجی‌کالا یا رنگ زرد ایرانسل. برند شما با این رنگ در ذهن مخاطبان می‌ماند.
رنگ ثانویه – Secondary
رنگ ثانویه، اولویت بعدی رنگ برند است. به عنوان مثال، وقتی اسم برند پپسی را می‌آوریم، شما رنگ‌های دیگری را نیز به خاطر خواهید آورد. البته قرار نیست لزوما همه این موارد در لوگو باشند. اصلا ممکن است لوگو ساده و خاکستری طراحی شود. مانند لوگو نایک. در واقع اگر برندی رنگ یا رنگ‌های ثانویه نیز داشته باشد، شما با بررسی مدارک و برندبوک آن مجموعه، متوجه آن رنگ‌ها نیز خواهید شد. رنگ ثانویه، کمتر از رنگ اصلی، به خاطر کاربر می‌ماند.
رنگ اکسنت – Accent
رنگ اکسنت نیز در برندها ممکن است وجود داشته باشند. به عنوان مثال شما در دیجی‌کالا به جز رنگ اصلی برند که قرمز است، خصوصا در صفحات داخلی محصولات، رنگ‌های آبی فیروزه‌ای و آبی تیره، نارنجی، بنفش که بیانگر دیجی‌پلاس هست و کلی رنگ دیگر را اگر دقت کنید خواهید دید. در واقع رنگ‌های اکسنت برای نشان دادن جزئیاتی که لزوما خنثی و neutral نیستند، مورد استفاده قرار می‌گیرند. در فروشگاه‌ها و طراحی‌های شلوغ‌تر، اکسنت‌ها بیشتر هم مورد استفاده قرار می‌گیرند.
رنگ‌های خنثی – Neutral
برخلاف تصور، اتفاقا از رنگ‌های سیاه، سفید و خاکستری، استفاده بسیاری میشود. مانند رنگ دکمه‌های غیرفعال، بخشی از متون و عناوین، رنگ زمینه، کپشن‌ها، خطوط، سایه‌ها و خیلی از موارد دیگر را ممکن است با همین طیف خاکستری و خنثی بسازیم.
رنگ‌های معنایی – Semantic
رنگ‌های دیگری نیز وجود دارند که معنی و مفهومی را منتقل می‌کنند. این رنگ‌ها عمدتا سبز، قرمز، نارنجی و آبی هستند. شاید بپرسید اگر یک برند مثل دیجی‌کالا، رنگ اصلی یا primary آن قرمز بود چه میشود؟ پاسخ این است که از آن رنگ اصلی می‌تواند به عنوان semantic هم استفاده کند و یا قرمز دیگری برای semantic بسازد.
- سبز – Success: بیانگر پیغام یا عمل موفقیت در محصولات است. مانند دکمه تائید، متن تائید سفارش و پرداخت.
- قرمز – Danger: بیانگر خطا و بروز مشکل در محصولات است. مانند دکمه حذف، رد شدن یک درخواست و یا مواردی مشابه.
- نارنجی – Warning: بیانگر یک هشدار به کاربر است. مثلا اینکه صرفا 2 کالا در سبد خرید مانده است.
- آبی – Info: این رنگ بیانگر اطلاع‌رسانی بدون هشدار است.
ابزارهای انتخاب رنگ در تئوری رنگ‌ها در طراحی uiux
ابزارهای زیاد و متنوعی برای ساخت پالت رنگی وجود دارد. برخی از مهم‌ترین ابزارهای انتخاب پالت رنگ را در اینجا درج کرده‌ایم. آنها را بررسی کنید و برای تمرین، چند پالت رنگی بسازید و تجربه خود را در بخش نظرات این جلسه، مطرح کنید.
https://color.adobe.com
https://coolors.co
https://colorhunt.co
https://flatuicolors.com
https://materialpalette.com
https://www.w3schools.com/colors
ساختن پالت رنگی در فیگما به کمک ابزار و افزونه
در قدم اول شما نیاز دارید که لوگو و ترکیب رنگی را از کارفرما بگیرید. برندبوک همان سند هویت بصری است که لوگو، ترکیب رنگ، بخشی از تایپوگرافی، حتی طراحی سربرگ و المان‌های بصری آن سازمان، در آن وجود دارد. اگر کارفرما آن را داشت که عالی است. اگر برندبوک نبود دست کم لوگو مجموعه را دریافت و رنگ اصلی را از آن استخراج میکنیم. ما در ویدئو با استفاده از دیزاین سیستم source starter kit بخش رنگ‌ها و شیوه scale کردن آنها را توضیح دادیم. البته ما در جلسه دیزاین سیستم، مفصل درباره این قبیل فایل‌ها در فیگما صحبت خواهیم کرد.
در فیگما با استفاده از افزونه‌هایی مانند color scale generator می‌توانید رنگ را scale کنید و مثلا به 10 قسمت از تیره به روشن آنها را بسازید. نمونه‌ای از این scale را در تصویر وسط این صفحه از دسته‌بندی مختلف رنگ‌ها دیدید. این scale کردن رنگ، برای تمامی دسته‌ها مانند رنگ‌های اصلی، ثانویه، اکسنت، خنثی و معنایی، اعمال میشود. پس از این کار، استایل‌گاید رنگ‌های شما آماده است و شما می‌توانید آن را به استایل‌های فیگما اضافه کنید. این کار نیز با استفاده از افزونه chroma color به سهولت و سرعت بالاتری انجام شد.
دانلود فایل تمرین
در این جلسه بیان شد که یک فایل با فرمت fig تحویل داده میشود. می‌توانید آن را از لینک زیر دریافت کرده و سپس در صفحه اصلی فیگما، آن را import کنید. دقت کنید که این فایل را با دابل کلیک نمی‌توانید استفاده کنید و برای استفاده از آن، صرفا یک بار باید آنرا import کنید. این فایل به جز بخش رنگ‌ها، موارد دیگری را نیز در خود دارد که آنها را نیز در جلسات بعدی، استفاده خواهید کرد.
انتخاب رنگ مناسب با استفاده از تئوری رنگ‌ها در طراحی uiux
در این قسمت از دوره جامع ui ux رایگان آموزش رنگ‌ها در UI و متعلقات مربوط به این دانش مهم را توضیح دادیم. خوشحال می‌شویم تجربیات خود را با ما به اشترک بگذارید. همچنین اگر سوالی در مورد این مبحث داشتید از بخش دیدگاه‌ها، از متخصصین آژانس نوآوری رسام بپرسید.
موفق باشید 😍
73 پاسخ
راستش پیدا کردن رنگ secondary برام سخت بود خیلی اتفاقی یه پلاگین پیدا کردم به اسم simple Palette ک وقتی کد رنگ اصلی رو میدی چند طیف رنگ secondary و نیوترال و حتی پشت صفحه و اینفو کنسل یا تایید خیلی برام جالب بود گفتم با شما به اشتراک بزارم
درود بر شما. وقت بخیر
سپاس از لطف شما. بله خیلی پلاگین‌های خوبی هم اخیرا آمده. مثلا با پلاگین ایرانی shades ai کل پالت‌ها را می‌توان ساخت. همچنین سایت colors.dopely.top هم یک منبع بسیار خوب هست برای رنگ‌ها.
موفق باشید.
سلام بر شما و تشکر بابت آموزش های خوبتون
فایل تمرینی که گذاشتید رو چطوری باید impot کنیم؟
درود بر شما. وقت بخیر
سپاس از لطف و مهربانی شما. در همان صفحه اصلی فیگما (بعد از لاگین و همان‌جا که لیست پروژه‌های اخیر دیده میشود) یک گزینه import هست.
موفق باشید.
سلام وقت بخیر
من وقتی افکتها را اد میکنم در افکت استایل به شکل مربع نشان می‌دهد آیا این مانند رنگ‌ها معنی variable دارد و حتما آیکون آن باید دایره ای باشد؟ اگر اینطور است کجای کارم اشتباه است.
درود بر شما. وقت بخیر
استایل‌ها دایره‌ای هستند و متغیرها یا همان وریبل‌ها، همانطور که فرمودید مربع هستند. چون اینجا قصد افزودن استایل دارید، باید همان حالت دایره‌ای یا استایل را انتخاب کنید. (عملکرد وریبل‌ها کمی فرق دارد و برخی از قابلیت‌های آن، در نسخه پریمیوم فیگما می‌گنجد).
موفق باشید.
بله ولی من نتونستم افکتها رو بصورت دایره ای ادد کنم!
درود بر شما. وقت بخیر
موقع افزودن، دو تب دارد که یکی استایل و دیگری وریبل هست که حتما تب استایل در انتخاب باشد که در همان بخش اضافه بشود. (در ویدئو هم به صورت عملی بیان کرده‌ایم. ویدئو دوم همین جلسه).
موفق باشید.
سلام وقتتون بخیر
ممنون از اموزشتون 🙏🏻
چرا وقتی رنگ ها رو در fill ذخیره کردم در پروژهای دیگه رنگ ها در fill نیستش؟
درود بر شما. وقت بخیر. سپاس از شما.
استایل‌هایی که در فیگما استفاده می‌فرمائید صرفاً در همان پروژه قابل استفاده است. البته می‌توانید از پروژه خودتان Duplicate بگیرید. اینطوری پروژه جدید همه قبلی‌ها را دارد و نهایتا موارد اضافه را می‌توانید حذف کنید. راه‌های دیگری هم هست. مثلا با پلاگین هم می‌توان خیلی سریع استایل‌ها را ایجاد کرد که برخی از این پلاگین‌ها را در این جلسه نظیر Chroma colors توضیح داده‌ایم.
موفق باشید.
سلام خدمت استاد عزیز
خواستم تشکر کنم از لطفی که در حق دوستانی که از آموزش های بسیار خوب شما استفاده می کنند انشاله که همیشه توی زندگی تون سعادتمند باشید، من به‌شخصه از دوره‌های شما نهایت استفاده را می کنم. یاشاسین
یاورزاده از ارومیه
درود بر شما. وقت بخیر
سپاس از لطف و مهربانی و همراهی شما آقای یاورزاده، ارادتمندم.
موفق باشید.
سلام
اول اینکه ممنونم
دوم اینکه وقتی یک فایل کامل ui داریم از کجا بفهمیم از چه افزونه ای استفاده شده؟
من یه فایل ui دارم میخام بدونم از چه افزونه ای برای رنگ ها استفاده کرده
درود بر شما. وقت بخیر
این موضوع همیشه از داخل فیگما مشخص نیست. چون ممکن است طراح آن پروژه، تغییراتی بدهد و دیزاین نمایش استایل‌گایدها را تغییر بدهد. البته گاهی در سایدبار سمت راست اسم برخی پلاگین‌های فیگما را می‌نویسد که این موضوع نیز شامل همه پلاگین‌ها نمی‌شود.
موفق باشید.
سلام
همین یک خط ( ممکنه که لزوماً از همه 10 رنگ استفاده نشود) پاسخ شما کفایت کرد من شک داشتم روی مسئله و کمی شکاکم روی باورها. از این جهت پرسیدم. متشکرم از لطف شما و اینکه با حوصله پاسخ می‌دهید.
درود بر شما. وقت بخیر
سپاس از شما.
موفق باشید.
سلام
بله هر دو ویدئو رو دیدو اما متوجه نشدم از هر رنگ 10 تا ساخته شد اما در ادامه سایر ویدئوهای بعدی دیدم که فقط از یک رنگ استفاده شده است و از همه 10 رنگ ساخته شده استفاده نشده است. کمی برایم مبهم است.
درود بر شما. وقت بخیر
چرا از سایر رنگ‌ها نیز استفاده شده است. اگر استفاده نشده پس آن بک‌گراندهای آبی روشن چگونه انتخاب شده‌اند؟ ممکنه که لزوماً از همه 10 رنگ استفاده نشود اما کلا Scale کردن رنگ در پروژه‌های UI لازم است. مگر اینکه پروژه خیلی کوچک باشد. مثلا تک صفحه باشد. ما به این دید آموزش می‌دهیم که افراد بعدا uikit های بزرگتر بسازند. مثلا در خود کامپوننت دکمه حداقل 4 رنگ استفاده شده. حالت‌های default و hover و press هرکدام آبی‌های متفاوتی دارند. همچنین بگ‌گراندهای داخل طرح از 3 رنگ روشن استفاده شده است. یعنی در همین طراحی با صفحات کم، حداقل 7 رنگ استفاده شده است.
موفق باشید.
سلام
از هر رنگ 10 تا ساخته شده چرا؟ کجا از همه رنگ ها استفاده میشود؟
درود بر شما. وقت بخیر
ویدئو این جلسه را کامل مشاهده بفرمائید. کلا در جلسات پیش رو هم که پروژه طراحی می شود، این موضوع دیده خواهد شد. دلایل آنرا در همین جلسه نیز بیان کردیم. خصوصاً زمانی که با استفاده از دیزاین سیستم مثال زدیم که عمده این رنگ‌ها ممکن است در طراحی مورد استفاده قرار بگیرند. خصوصاً اگر تعداد صفحات بیشتر شوند. (دقت بفرمائید که این جلسه دو ویدئو دارد).
موفق باشید.
سلام با تشکر از اموزش جامعتان
سوال من این است که effect style هایی که اضافه کردیم را چطور باید به عکس ها یا نوشته های داخل پروژه نسبت بدهیم؟
درود بر شما. وقت بخیر
وقتی رنگ‌ها را به Local Style های فیگما اضافه فرمودید، هرجایی که بخواهید به متن، زمینه فریم، به استروک و یا هرچیزی که رنگ می‌گیرد، رنگی را اعمال کنید، کافی‌است روی گزینه استایل کلیک کنید. گزینه استایل همان آیکنی هست که چهار نقطه (به‌صورت مربعی) دارد. جلسه بعد که تایپوگرافی است دوباره از این موضوع استفاده میشود. آن را هم ببینید.
موفق باشید.
سلام وقتتون بخیر
ممنون برای این دوره و زمانی که بهش اختصاص دادین. دمتون گرم
سوالی که داشتم اینه که چرا وقتی با پلاگین‌هایی که گفتین پالتم رو می‌سازم هر دفعه Color Main یکی نمیشه. یعنی یک دفعه پنجمیه یک دفعه ششمی و …
دقیقا اگه بخوام بگم با Color Scale Generator این مشکل رو داشتم.
ممنون میشم بهم راهنمایی کنین که چطوری این مشکل رو حل بکنم که توی استایل‌کردنشون بتونم Main یکسانی داشته باشم.
درود بر شما. وقت بخیر
ممکن است رنگ پیشفرض انتخابی ما خیلی روشن و یا خیلی تیره باشد و لزوماً وسط نمودار ما نیفتد. افزونه‌های دیگری هم هستند. مثلا Color Compass هم هست. افزونه‌های دیگر را هم بررسی کنید. کلا عبارت Color scale رو جستجو کنید هم پلاگین فیگمای زیادی براش هست و هم ابزارهای تحت وب زیادی هستند که این کار را انجام می‌دهند.
موفق باشید.
سلام استاد وقت بخیر و ممنون بابت آموزش خوبتون و پاسخگویی به سوالات
میخواستم ببینم پالت رنگی رو که ساختیم کجاها استفاده میشه؟ علی رغم اینکه ما خودمون باتوجه به رنگ لوگو رنگ ها رو اسکیل میکنیم و رنگ میسازیم
درود بر شما. وقت بخیر
یکی از بهترین مزیت‌هاش دیدن و مسلط شدن به انتخاب رنگ است. گاهی می‌خواهیم نمونه‌کاری بسازیم که اصلا کارفرمای واقعی ندارد. گاهی هم خود کارفرما می‌خواهد که رنگ‌هایش را تغییر بدهیم. همچنین برخی لوگوها هم طراحی مینیمالی دارند و لزوماً رنگ‌های سایت در لوگو ممکن است وجود نداشته باشد. مثلا ممکن است لوگو خاکستری باشد اما در طراحی رنگی غیر از خاکستری هم استفاده بشود.
موفق باشید.
سلام به استاد عزیز
من با اینکه اواسط دوره هستم خواستم اینجا از الان تا بی نهایت ازتون تشکر کنم واقعا همه چیز عالی هست
از فیلم ها و دسته بندی و تایم و غیره گرفته تا متن کامل دروس و فایل دانلود و…
زنده باشید سلامت باشین شاد باشید موفق تر از از هر زمان.
خیلی دستتون داریم و بدونید قدردان زحمتاتتون هستیم.
امیدوارم تونسته باشم ذره ای از انرژی مثبت بی نهایتتون بهتون برگرونده باشم بازم تشکر فراوان
درود بر شما. وقت بخیر
سپاسگزارم از لطف و مهربانی شما. خوشحالم اگر مفید واقع شده است. عمیقاً مشتاقم و امیدوارم که شخص شما ادامه محتوا را هم ببینید. امیدوارم در ادامه نیز، محتوا مورد پذیرش و تائید شما قرار بگیرد.
ارادتمندم. موفق باشید.
سلام وقتتون بخیر 🙂
من به یک مشکل کوچیک برخوردم اونم اینه که وقتی اومدم رنگ هارو اضافه کنم مثل آموزش شما توی قسمت استایل اضافه میشد. ولی امروز اومدم بقیه شو ادد کنم chroma style رو میزنم میگه اد شد ولی توی استایل چیزی نمیاد. اگه رنگ رو دستی دونه دونه اضافه کنم میاد ولی اینطوری با پلاگین نمیاد. نمیدونم کجا میرن رنگا؟ :))
درود بر شما، وقت بخیر
اگر پیغام می‌دهد که اضافه شده، قطعا آن را اضافه کرده است. روی فضای خالی صفحه و بیرون فریم‌ها کلیک کنید. (چون زمانی که چیزی در حالت انتخاب نباشد، استایل‌های Add شده در فیگما، در سمت راست، به صورت لیستی نمایش داده می‌شوند).
موفق باشید.
خیلی ممنونم.
یه سوال دیگه این که برای رنگ‌ها و فواصل نمیتونیم از variable ها استفاده کنیم؟ میشه توضیح بدین در کاربرد چه فرقی با استایل دارن و اینکه ویدیویی راجع به variable ها هست در این دوره؟
درود بر شما. وقت شما بخیر.
چرا می‌توان استفاده کرد اما عملکرد استایل‌ها و وریبل‌ها با هم یکسان نیست. وریبل‌ها همانطور که از اسم آنها پیداست مانند متغیر عمل می‌کنند. مثلا برای مقادیری مثل عرض، انحنا، پدینگ، مارجین و… می‌توان آنها را به صورت متغیر تعریف کرد که به سهولت بتوان از آنها استفاده کرد. برخی از قابلیت‌های وریبل‌ها عمدتاً در نسخه پریمیوم معنی پیدا می‌کند.
موفق باشید.
سلام. من کلاس نقاشی رفتم که بتونم رنگ‌ها رو بهتر درک کنم. به نظرتون تاثیری در علم UI ندارد؟
درود بر شما. وقت شما بخیر.
بسیار مفید و کمک‌کننده است.
موفق باشید.
ممنون عالی بود. یه سوال در ورژن رایگان فیگما نمیشه بیشتر از سه تا page ساخت راهی برای حل این هست؟
درود بر شما. وقت شما بخیر
در نسخه رایگان می‌توانید بیش از 3 صفحه هم بسازید. فقط زمانی که پروژه شما تیم باشد، فقط 3 صفحه می‌توان ساخت. (پروژه‌های تیمی هم اغلب لازم نیستند. خصوصا در ابتدای یادگیری که هنوز پروژه‌ها خیلی بزرگ و گروهی نشدند).
برای رفع محدودیت یا بایستی اکانت فیگما را بخریم، یا اکانت Education بگیریم که نسخه پولی را 2 سال رایگان می‌دهد.
موفق باشید.
خیلی خیلی خوب تدریس کردید ممنون واقعا من هر درسی رو گوش میکنم کلی براتون دعا میکنم
درود بر شما. وقت بخیر
سپاسگزارم از لطف و مهربانی شما. امیدوارم که کمک کننده و مفید باشد.
عرض ادب. موفق باشید.
سلام وقت بخیر
1سوال دارم خدمتون برای هر پروژه لازمه که رنگ و متن را اضافه کنیم به این صورت یا خیر
چطور میشه 1 بار تو اکانت فیگما اضافه کرد و همیشه تو پروژه استفاده کرد؟
ممنون از وقتی که میزارین
درود بر شما. وقت بخیر
بله طبیعتا هر پروژه، رنگ‌بندی، تایپوگرافی و استایل‌های خاص خود را خواهد داشت. البته ممکنه مشترکاتی هم داشته باشند. مثلا ممکنه هر دو پروژه از فونت ایران‌سنس استفاده کنند. اما خب لزوماً همه استایل‌های آنها یکنواخت نیست.
هم می‌توانید استایل‌گایدهای طراحی شده در صفحه uikit را کپی کنید و در پروژه دیگر paste کنید و آنجا به فیگما add کنید. هم اصلا می‌توانید کنار فلش اسم پروژه کلیک کنید و کل پروژه را duplicate کنید. بعدا مورد کپی شده را صرفاً موارد اضافه اش رو حذف کنید و ازش استفاده کنید.
موفق باشید.
سلام و درود استاد عزیز
ممنون از محتوای عالی تون
من یه سوال دارم
اگه کارفرما بعد از ساخت پلت رنگی بخواد رنگ لوگوشو تغییر بده و یا جتی بعد از طراحی بگه رنگ هارو‌تغییر بدیم باید چیکار کرد
درود و سپاس از لطف شما
اگر کارفرما چنین تغییری بخواهد، قاعدتا ما باید مطابق با خواسته او، رنگ‌بندی و استایل‌های پروژه را تغییر بدهیم. در واقع نکته مثبت فیگما این است که اگر چنین تغییری رخ بدهد، راحت می‌توان استایل‌های پروژه که add شده‌اند را نیز تغییر داد. البته به هرحال همین کار هم زمان می‌گیرد از طراح و طبیعتاً کارفرما نباید بارها و بارها چنین درخواستی را مطرح بکند (می‌توان حجم تغییرات را در قرارداد آورد که مشکلی رخ ندهد).
موفق باشید.
سلام وقتتون بخیر.
امیدوارم حالتون خوب باشه اموزش های عالیتون رو دنبال میکنم و واقعا فوق العاده هست اموزش هاتون ممنون از شما.
درود و سپاس از شما آقای خسروی
خوشحالم که مفید واقع شده است.
ارادتمندم. موفق باشید.
سلام و عرض ادب
رنگ های استاندارد h1تاh6 و متن و پاراگراف چیه ؟
لطفا کد رنگیشون بگو
با سپاس
درود بر شما. وقت شما بخیر.
هیچوقت کد رنگی مشخص و دقیقی نمی‌توان گفت. پروژه‌ها با یکدیگر فرق دارند. اما اگر رنگ‌ها و استایل‌های همین پروژه را خواستید در فیگما وجود دارد. (داخل ویدئو هم البته مشخص هستند). برای مشاهده باید اکانت نسخه رایگان فیگما را داشته باشید و پس از لاگین، روی لینک زیر کلیک کنید و پروژه را به فیگمای خود اضافه کنید تا به محتوای داخل آن دسرتسی داشته باشید.
https://www.figma.com/community/file/1338620334447383992
موفق باشید.
سلام جناب حمدالهی وقتتون بخیر در کدام یک از سایت هایی معرفی کردین یا سایت های موجود، امکان این هست که ما یک کد رنگی به سایت بدهیم و رنگ هایی که بهش میاد رو در فرمت های مختلف به ما بده؟
درود بر شما. روز بخیر
از چرخه رنگی هم برای این کار میشه استفاده کرد. حتی از ابزارهای هوش مصنوعی هم می‌توانیم استفاده کنیم. مثلا رنگ مدنظر را بدهیم، رنگ مکمل رو از AI بگیریم.
موفق باشید.
آهان پیداش کردم خودم. راستی بابت آموزش خوبتون خیلی خیلی سپاسگزارم استاد.
درود بر شما، سپاس
خیلی هم عالی. موفق باشید.
سلام استاد. چطور فایلی که دانلود کردیم رو تو پروژه فیگمامون ایمپورت کنیم؟
درود بر شما. وقت بخیر
داخل همان صفحه اصلی فیگما بعد از لاگین، گزینه import وجود دارد.
موفق باشید.
سلام وققتون بخیر
ببینید بعضی وقتا neutral ها رو که با توجه به source kits ساختم قشنگ در نمیاد و رتگ های با saturation بالا در میاد در این گونه موارد باید چیکار کرد؟
و آیا میشه خودمون با سلیقه خودمون بسازیم؟
یا از نو ایجاد کنیم و به رنگ primary توجهی نکنیم؟
درود بر شما. وقت بخیر
ببینید اون شیوه ساخت رنگ که در دیزاین سیستم source starter kit وجود دارد خوب هست اما خب صرفا یک روش هست. ما هم می‌توانیم از پالت‌های آماده رنگی استفاده کنیم. هم می‌توانیم با توجه به تجربه شخصی و اصول و شناختی که از رنگ‌ها داریم آنها را انتخاب کنیم. افزون بر این، ممکن است برای برندی که کار میکنیم، از قبل برندبوک تهیه شده باشد و اصلا از رنگ‌های همان شرکت مستقیماً استفاده کنیم.
سلام رسامی های زحمت کش. آقا یه سوال اگر رنگ یه برندی، طیفی از طوسی همراه یه رنگ دیگه (با مثلا طلایی) باشه، تکلیف رنگ متن ها(خنثی ها) چی میشه و باید چیکار کنیم؟
درود و عرض ادب
سپاس از شما خانم ریحانی
حتی مواردی رخ می‌دهد که یک برند کلا سیاه و سفید و خاکستری است. یعنی هم لوگو بسیار ساده دارند و هم ترکیب رنگ استفاده شده، صرفا از همین رنگ‌ها استفاده شده. در اینگونه موارد طبیعتا هم neutral ها و هم رنگ‌های برند، از همان طیف ساده استفاده میشود. در موردی که بالا فرمودید البته یک رنگ برند وجود دارد و آن طلایی هست. در واقع الزامی وجود ندارد که در ساخت پالت رنگی، حتما بیش از یک رنگ برند وجود داشته باشد. ممکن است یک محصول دیجیتالی باشد که چندین رنگ برند اعم از primary و secondary و accent داشته باشد و همه این رنگ‌ها نیز خاکستری نباشند و مجزا هم برای neutral رنگ داشته باشد. ممکن هم است که یک محصول دیجیتال صرفا تک رنگ خاکستری، یا ترکیب خاکستری و یک رنگ برند داشته باشد. همه این موارد به تناسب نیاز و پرسونای آن محصول، وجود دارد. مثلا دیزاین سیستم base که برای شرکت اوبر هست تقریبا چنین وضعیتی دارد. تم رنگی اصلی آن همان سیاه و سفید و خاکستری هست و صرفا از semantic ها استفاده شده برای رساندن مفهوم.
موفق باشید.
با سلام وخسته نباشید خدمت شما و تشکر از شما بابت توضیحات کامل
من یه سوال برام پیش اومده فایلی که گذاشته بودید را ایمپورت کردم و تمام رنگ ها و سایه ها رو طبق ویدیو دسته بندی کردم حالا سوال من اینکه دقیقا استفاده این کار چیه؟ چون وقتی روی گزینه های اونا میزنم مثلا سایه یا رنگ ها اصلا تغییری در اون فریمی جدید درست کردم نمیاد؟
میشه راهنمایی کنید با تشکر
درود بر شما. وقت بخیر
سپاس از لطف و همراهی شما.
منظورتان فایل source starter kit هست و یا فایلی را که در ویدئو برای رنگ‌ها در فیگما درست کردیم؟ اگر اولی مدنظر هست باید عرض کنم که صرفاً یک راهنما بود برای آموزش بهتر و جا انداختن بحث رنگ‌ها در ui و شیوه استخراج آنها. اگر منظور خود فایلی هست که در فیگما ساختیم، آن فایل در جلسات بعدی نیز توضیح داده میشود. موضوعاتی مثل سایه‌ها، تایپوگرافی، گریدسیستم و… نیز بحث می‌شوند. (اگر سایه‌ای اعمال کردید و فریم شما آن سایه را نگرفت، به فریم خود fill بدهید درست میشود).
موفق باشید.
خیلی ممنونم ازتون
آره اون ویدئو رو دیدم و متوجه شدم اما سوال من چیز دیگریست!
فرض کنید
1280 کل عرضمون باشه. هر باکسمون عرضش 236 هست. 5 تا باکس داریم میشه 1180. گپ یا فاصله بین این ها 25 در میادو
حالا من میخام فاصله 24 در بیاد که استاندارند مضرب 8 باشه. من میام و عرض کلی رو 1276 میزارم.
آیا همچین عرضی استاندارد هست؟
عرض ادب مجدد
چرا متوجه فرمایش شما شدم.
ببینید شما وقتی مارجین را در حالت auto قرار می دهید دیگه اندازه کانتینر اصلی hug نیست و به صورت fixed هست. بنابراین دیگه اونجا فواصل بین آیتم ها مهم نیست. در واقع شما صرفا بین اندازه کانتینر اصلی و مارجین بین عناصر داخل کانتینر، صرفا یک مورد رو می تونید auto بگذارید. اگر باز شفاف نبود در تلگرام به من پیام بدید ویس ارسال کنم. آیدی بنده در فوتر هست. (در واقع اون عرض 1276 رو باید بکشید بشه 1280 و عیبی ندارد که گاترها یا شیارهای بین المان ها، بیشتر از 24 بشود).
ارادت. موفق باشید.
سلام بسیار ممنون از این که محتوای خوبتون و رایگان قرار بدین انشالله موفق تر باشید.
فقط یک سوالی
من میخام 5 تا باکس ایجاد کنم و هر باکس من عدد رند باشه و مثلا 237 باشه حالا اگر فواصل بین 5 تا باکس رو 24 در نظر بگیریم اونوقت عدد نهایی برای کانتینر 1281 میشه !
آیا مشکلی نیست که عدد کانتینر مرسوم در نیاد.
به طور خلاصه بگم:
ینی میخام ی عرضی باشه که فواصل بین اون عرض 24 باشه و من بتونم هم باکس های 4تایی در بیارم هم باکس های 5 تایی ؟شما چی پیشنهاد می کنید؟
درود و سپاس از لطف و همراهی شما
سپاسگزارم. انجام وظیفه میکنم.
نمیدونم جلسه 17 که بحث autolayout هست را دیدید یا خیر. چون آنجا مفصل به این موضوع پرداختم. اگر ندیدید و دارید به ترتیب پیش می‌روید حتما جلسه 17 را نیز ببینید.
اما من اینجا هم با اجازه‌تون توضیح بدهم. کلا این اتفاق که فرمودید رخ می‌دهد. چون اصلا ممکن است مثلا 7 باکس داشته باشیم و تعداد فرد باشد. چگونه آنها را در کل کانتینر قرار بدهیم؟ در اینجور مواقع شما margin را روی حالت auto بگذارید و اندازه (عزض) کل فریم اتولیاوت شده که آن 7 مورد داخلش هستند را به صورت دستی روی 1280 قرار دهید. اینطوری آن مقدار margin که به صورت auto هست، خودش فواصل بین آنها را تنظیم می‌کند. (البته توضیحات من با فرض این هست که autolayout رو کامل مسلط هستید. که اگر اینطور نبود حتما جلسه 17 رو مشاهده بفرمایید). باز بعدش اگر نکته‌ای یا سوالی بود بنده در خدمت هستم بپرسید.
ارادتمندم.
سلام
آموزش وردپرس و سئو کی آپلود میشه؟
درود بر شما. وقت بخیر.
هم دوره وردپرس و هم دوره سئو در حال تهیه هستند. این سری منتظر نمی‌مانم که همه کپچرهای وردپرس تدوین بشوند. سعی میکنم زودتر روی سایت آپلود کنم. از خردادماه درج دوره رایگان وردپرس را آغاز خواهم کرد. سئو نیز کمی دیرتر، به امید خدا اضافه خواهند شد.
سلام مجدد این پیام مربوط به در تایپوگرافی هست اما از اون قسمت ارسال نمیشه
اول از همه باز هم تشکر می کنم بابت ویدئوی خیلی خوبتون، کمال تشکر رو دارم.
خیلی ممنون که به سوال ها جواب میدین و رفع اشکال می کنین
این ویدئو یک مقدار من رو گیج کرد که خیلی ممنون میشم راهنمایی کنین، اگر که در ویدئو های بعد پاسخش هست دیگه زحمت جواب دادن رو نکشید فقط الان می پرسم که هر قسمت رو کامل یاد گرفته باشم
سوال اولم اینه که چرا با وجود پلاگین ها در آخر خودتون دستی همه رو تعیین کردین، آیا ما هم باید این کارو بکنیم؟
سوال دوم اینکه چرا برای هر عنوان چند تا هست؟ از h1 تا h6 مگه h1 تا h3 به خودی خود مخصوص عنوان و بقیه مخصوص پاراگراف و کپشن نیست؟ نوشتن یک سری برای هر کدام کافی نیست؟ و از کجا بدونیم به فرض مثال باید از h4 مربوط به عنوان استفاده کنیم یا h1 پاراگراف، به نوعی اصلا لزوم بودن چند تا از هر سری چیه؟
و سوال آخر اینکه پاراگراف اسم h1 و… ندارن و نوشتین small و… یعنی برنامه نویس نیاز نداره به پاراگراف تگ h بده و کلا پاراگراف تگ h نمیگیره؟ اگه نیاز داره از کجا متوجه بشه کدوم کدومه؟
خیلی عذر میخوام بابت طولانی بودن سوالات
با قرار دادن این شرایط برای ما به صورت رایگان و حتی رفع مشکل دیگه استادی رو تمام کردین و در واقع برادری کردین در حق ما.
خدا بهتون خیر بده.
درود و عرض ادب
من به صورت ناشناس کامنت گذاشتم در بخش تایپوگرافی، خوشبختانه مشکلی نبود.
کامنت شمارو منتقل کردم در صفحه تایپوگرافی. پاسخ را آنجا نوشتم در صورت تمایل مشاهده بفرمایید آن صفحه را.
سپاسگزارم.
خیلی لطف کردین استاد ممنون
سلام و خسته نباشید
امکانش هست پی دی اف source starter kit 2.0 یعنی ورژنی که از روش درس دادین رو بفرستین ؟
درود بر شما. وقت بخیر.
لینک ورژن 3 که در کامیونیتی فیگما هست را در این صفحه درج کردم.
https://rasam.agency/wp-content/uploads/source-starter-kit-v2.fig
فایل با فرمت fig از ورژن 2 را هم اینجا ارسال می کنم. بعد از دانلود باید در فیگما آن را ایمپورت کرد. (ورژن 2 در کامیونیتی فیگما وجود ندارد).
موفق باشید.
سلام و عرض ادب
سپاس از شما برای آموزش خوبتون
من یه مشکلی دارم پلاگین هارو که میخوام ران کنم خطا داده میشه چیکار کنم؟
متن خطا: an error occurred while loading the plugin environment
درود و سپاس از لطف و همراهی شما
برخی از پلاگین‌های فیگما ممکن است نیاز به vpn داشته باشند. یک بار هم با vpn روشن تست بفرمایید. اگر باز هم باز نشد و یا با خطا و مشکلی مواجه شدید، اسکرین شات آن خطا را برای بنده در تلگرام ارسال بفرمایید باز هم آنرا بررسی خواهم کرد.
موفق باشید.
سلام خیلی ممنون از وقتی که گذاشتید و زحمتی که کشیدید.
ببخشید فایلی که توی ویدیو فرمودید رو نزاشتید؟
درود بر شما دوست گرامی، وقت بخیر
سپاس از شما.
لینک دانلود فایل در همین صفحه درج شد. آنرا در فیگما import کنید. اگر سوالی بود بپرسید.
موفق باشید.