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

2-تشابه (Similarity) اشتراک در مشخصات بصری به صورت خود به خودی روابط می سازد. هر قدر اشیا شبیه تر به نظر بیایند، بیشتر امکان آن وجود دارد که به عنوان یک گروه دیده شوند. قابل ذکر است تشابه بر اساس شکل اشیا است نه بر اساس چیستی آنها. تشابه را می توان از طرق مختلف به دست آورد. به عنوان مثال، اندازه، رنگ و شکل. اشیا با ابعاد و اندازه یکسان با یکدیگر تشابه دارند. شکل و رنگ هم تاثیر مشابه دارند. این اصل را به صورت ساده می توان در تصویر بالا مشاهده نمود 👤 Mobi 💎 Channel: @DevelopixDesign

1- مجاورت (proximity) مجاورت اشاره به اشیایی دارد که در کنار یکدیگر قرار دارند و به عنوان یک گروه در نظر گرفته می شوند. مجاورت زمانی رخ می دهد که اشیا به یکدیگر نسبت به اشای دیکر نزدیکتر هستند. قدرتمند ترین رابطه مجاورت زمان است که اشیا همپوشی دارند، در این حالت شکی باقی نمی ماند که آنها به یکدیگر بستگی و یا تعلق دارند. یکی از شیوه هایی دیگر ایجاد مجاورت استفاده از خطوط و شکل ها می باشد که اشیا داخلی را محصور کنند. حتی می توان از خطوط و شکل ها به گونه ای استفاده کرد که از میان اشیا رد شوند و بدین شیوه آنها را به یکدیگر مرتبط و مجاور نمایش دهند. 👤 Mobi 💎 Channel: @DevelopixDesign

🔶روانشناسی گشتالت چیست؟ روانشناسی گشتالت توسط یک گروهی از روانشناسان آلمانی در سال ۱۹۲۰ به جهت شناخت و توصیف چگونگی درک اطلاعات بصری توسط انسان ها و فرآیند های مربوط به آن ایجاد گردیده است. گشتالت به معناهای کل، شکل و فرم ترجمه می شوند و بر اساس این تئوری کل بزرگتر از مجموع اعضاست این جمله به این معنا است که با وجود اینکه هر قسمت خاص دارای معنای ویژه خود می باشد ساختار کل می تواند به آن معنای کامل ببخشد. این توضیح به این معناست که ذهن ما به طور خود به خودی سعی دارد تا داده های بصری را ساده کرده و به عنوان نتیجه معنای کل جایگزین بخش های مجزا دیده خواهد شد. در حالی که بخش های مجزا می توانند دربرگیرنده معانی کاملا متفاوتی باشند کل قادر است تا به یک معنای کاملا جدیدی از معانی اجزا منحرف شود. 🔸اصولی و یا قوانینی که می توان از مکتب گشتالت استخراج نمود به صورت زیر می باشند: ▫️مجاورت (proximity) ▫️تشابه (Similarity) ▫️تداوم یا پیوستگی (Continuity) ▫️بستار (Closure) ▫️تصویر - زمینه (Figure-ground) ▫️تقارن (Symmetry) ▫️سرنوشت مشترک (common fate) ▫️فراپوشانندگی (inclusiveness) ▫️قانون موازات (Parallelism) ▫️منطقه مشترک (Common Region) ▫️عنصر متصل (Element Connectedness) 👤 Mobi 💎 Channel: @DevelopixDesign

🔖 طراحی تک‌ستونه را هم امتحان کنید کاربران همیشه می‌خواهند راحت‌تر روی مطالب تمرکز کنند و آن‌ها را بخوانند، به عبارتی دیگر از چیزهای اضافی خوششان نمی‌آید! با استفاده از طراحی تک‌ستونه، در اصل شما کاربران را به سمت مطلب خود هدایت کرده‌اید، در حالی که یک لی‌اوت چندستونه، می‌تواند کاربر را از هدف اصلی خود منحرف کند و نتواند آن چیزی را که در وب سایت شما می‌خواست، بدست بیاورد، مطلب خود را در لی‌اوت تک‌ستونه به اشتراک بگذارید به همراه یک دکمه‌ی Call To Action مناسب! 👤 Mobi 💎 Channel: @DevelopixDesign

💥نقشه حرارتی چه کاربردی برای سایت ها دارد؟ این نکته را به یاد داشته باشید هر چه زمان بیشتری را صرف جمع‌آوری اطلاعات از کاربران سایت خود کنید هیت مپ سایت شما دقیق تر خواهد بود. هنگامی که هیت مپ سایت شما ایجاد می‌شود،الگویی را در دسترس خواهید داشت که معمولاً نقاط زرد و قرمز نشان‌دهنده توجه بیشتر کاربران به آن قسمت ها است. باید نهایت استفاده از این نقاط استفاده کنید زیرا این داده‌ها به شما کمک می‌کند که در طراحی و چینش بخش های مختلف صحیح تصمیم گیرید. مطالب مهم یا تبلیغات را در نقاط صحیح قرار دهید. هنگامی که بدانید که کدام نقاط سایت شما بیشتر مورد توجه قرار می‌گیرد،تصمیم‌گیری برای بهبود سایت بسیار راحت و آسان خواهد بود. بیشتر از نقشه حرارتی برای قرار دادن تبلیغات در مکان های بهتر و استفاده می‌شود. بررسی و تحلیل هیت مپ سایت های گوناگون نشان می‌دهد که سمت چپ بالای سایت یکی از بهترین مکان ها برای قرار دادن تبلیغات است. سمت راست هم توجه زیادی را به سوی خود جذب می‌کند و در خصوص هیت مپ های به دست آمده از موبایل ها و تبلت ها نیز صادق است. با بررسی هیت مپ آگاه خواهید شد که نرخ کلیک در کدام بخش از سایت شما بیشتر است. اگر فروشگاه دارید بهتر است دکمه سبد خرید و پرداخت یا پیشنهاد های ویژه را در آنجا قرار دهید. قسمت های که توجه کمتری دارند را شناسایی کرده و اصلاح نماید. کاربرد نقشه حرارتی تنها مختص سایت ها نیست. اگر اپلیکیشن نیز طراحی می‌کنید باید به هیت مپ توجه کنید و بخش های مهم تر را در نقاط که توجه بیشتری جلب می‌کند قرار دهید. 👤 Mobi 💎 Channel: @DevelopixDesign

🗂 ۵ ابزار برای بررسی کنتراست رنگ‌ها "کنتراست رنگ یعنی تفاوت درخشندگی رنگ اشیا که باعث میشه بتونیم اونها رو از هم تشخیص بدیم مثلا سیاه و سفید بیشترین کنتراست رنگی رو نسبت به هم دارند" وقتی طراحی می‌کنیم بهتره حواسمون باشه رنگ اجزایی که روی هم هستند نسبت به هم کنتراست خوبی داشته باشند تا همه‌ی کاربر‌ها راحت بتونن اونها رو از هم تشخیص بدن ولی معلوم نیست کاربرهامون چه طوری و در چه شرایطی طرح ما رو می‌بینند 🤔 مثلا، شاید بعضی از کاربر‌ها مشکل کوررنگی داشته باشند یا مجبور باشند زیر نور آفتاب از محصول ما استفاده کنند 🤷🏼‍♀ پس بهتره از یک ابزار برای چک کردن کنتراست این رنگ‌ها کمک بگیریم. اینجا ما ۵ تا از ابزارهای خوب این کار رو براتون لیست کردیم https://color.review http://colorsafe.co https://whocanuse.com https://usecontrast.com https://www.getstark.co ✨ چون Stark برای XD و Sketch پلاگین داره احتمالا استفاده ازش براتون راحت‌تر باشه، می‌تونید مستقیم از قسمت پلاگین های XD هم پیداش کنید. 😊 #رنگ #معرفی_سایت #ابزار_طراحی 👤 Mobi 💎 Channel: @DevelopixDesign

💢 معرفی Heart Framework فریم‌ورک Heart به ما کمک می‌کند که تجربه‌ کاربری خود را در مقیاسی وسیع‌تر بسنجیم. در واقع کلمه‌ HEART سرواژه‌ای از کلمات زیر است: Happiness، Engagement، Adoption و Task Analysis - واژه‌ Happiness به معنای درک، رضایت و خشنودی کاربر از تجربه‌ی کاربری است. - واژه‌ Engagement به معنای میزان درگیر شدن کاربر و فعالیت او در محیط کابری است. اینستاگرام یک مثال زنده است که این روزها تقریبا اکثر افراد جامعه با آن در تعامل هستند. Engagement در این برنامه این چنین بررسی می‌شود که هر کاربر در مدت یک روز و یا یک هفته چه تعداد عکس آپلود می‌کند. - واژه‌ی Adaption به این معنی‌ است که تعداد کاربران جدیدی را که از محصولات شما استفاده می‌کنند، زیر نظر داشته باشید و یا اینکه تعداد حساب‌های کاربری جدید ایجاد شده در طول یک هفته در وبسایت‌تان را بررسی کنید. - عمل Retention به شما این امکان را می‌دهد که فعالیت کاربران فعال را بین یک بازه‌ زمانی مشخص دنبال کنید. - و در آخر Task Success یا Task Analysis را داریم که شامل بررسی قدرت، زمان مورد نیاز برای اتمام یک کار و مؤثر بودن آن می‌شود که درصدی از وظایف تکمیل شده و نرخ خطاهای آن است. 👤 Mobi 💎 Channel: @DevelopixDesign

✨ ترفند و آموزش کوتاه Illustrator با استفاده از ابزار Draw inside که کلید ترکیبی آن Shift + D است می‌توان رنگ آمیزی‌ را درون محدود و شکل خاصی انجام دهیم، این ابزار به طور پیش‌فرض و تا وقتی که یک نگهدارنده انتخاب نکرده باشید غیر فعال است. به‌هنگام انتخاب یک نگهدارنده ( شئی که بتوان داخل آن طراحی و رنگ‌آمیزی انجام داد ) این ابزار فعال می‌شد و یک خط چین چهار گوشه اطراف نگهدارنده انتخاب شده کشیده می‌شد تا فضای مربوطه را نمایش دهد و هر ترسیم و رنگ‌آمیزی انجام شود از این محدوده خارج نمی‌شود و می‌‌توان به راحتی یک شئی را رنگ‌آمیزی و طراحی کنید. 🪄 منبع و طراح ویدیو #Illustrator 👤 Maryam 💎 Channel: @DevelopixDesign

یک متد خیلی خوب برای به کارگیری در رابط کاربری، responsive enabling هست. برای کمک‌ کردن به کاربرها در انجام دادن یک پروسه (مثلا احراز هویت)، این‌ که کاربران بدونند کل‌تسک‌ها چی هست می‌تونه مفید باشه ولی به شرطی که طراحی اون صفحه به شکلی باشه که تمرکز کاربر رو روی اون تسکی قرار بده که فعلا داخلش هست. در این فایل، بنیاد طراحی تعاملی توضیح داده که چطور می‌تونیم تمرکز کاربر رو روی تسک فعلی قرار بدیم و در عین حال، به یوزر یک‌دید کلی از کل فرآیندهایی که در پیش داره نشون بدیم. #IxDF #UI 👤Mobi 💎 Channel: @DevelopixDesign

💢 هارمونی متساوی الساقین - Split-Complementary این رنگ‌بندی نوعی تغییر در رنگ‌بندی مکمل است با این تفاوت که به جای استفاده از رنگ مقابل از دو رنگ کناری رنگ مکمل استفاده می‌شود. برای مثال رنگ سبز و قرمز مکمل یک‌ دیگر هستند ولی Split-Complementary رنگ قرمز برابر با دو رنگ کناری رنگ سبز در چرخه رنگی است. 📽 برای درک بهتر Split-Complementary می‌توانید این ویدیو را هم مشاهده کنید. 📍در مطالب بعدی به بررسی چند مثال از Split-Complementary و سایر هارمونی رنگ‌ها می‌پردازیم. 🎨 همچنین اگر با هارمونی رنگ و تعاریف مربوط به رنگ آشنایی ندارید بهتر است این مطلب را هم بخوانید. همچنین مطلب اهمیت رنگ‌ها هم می‌تواند برای‌تان مفید باشد. 👤 Maryam 💎 Channel: @DevelopixDesign

📚 معرفی کتابی در حوزه روان‌شناسی رنگ و شناخت رنگ‌ها کتاب روان‌شناسی رنگ اثر ماکس لوشر یکی از بهترین کتاب‌ها در حوزه شناخت رنگ‌ها و مفاهیم روان‌شناسی رنگ است که نسخه فارسی آن هم توسط آقای حمیدرضا بلوچ ترجمه شده و قابل تهیه کردن است. سر فصل‌های این کتاب شامل موارد زیر است: - روانشناسی رنگ‌ها - روانشناسی عملکردی - رنگ‌های اصلی و کمکی - تضاد رنگ‌ها - معنا و مفهوم رنگ‌های اصلی - تفسیر و تجزیه تحلیل تست رنگ #کتاب 👤 Maryam 💎 Channel: @DevelopixDesign

🎨 مثالی از هارمونی مکمل - Complementary 👤 Maryam 💎 Channel: @DevelopixDesign

💢 هارمونی مکمل - Complementary در رنگ‌بندی مکمل، رنگ‌هایی که در چرخهٔ رنگی مخالف هم هستند و دقیقاً مقابل یکدیگر قرار دارند انتخاب می‌شوند. طبق فرضیه رنگ‌ها، دو رنگ زمانی مکمل هم می‌شوند که از ترکیب آن‌ دو یک رنگ خنثی مثل سفید، خاکستری و مشکی ایجاد می‌شود. برای مثال رنگ قرمز و سبز طبق چرخه رنگی مکمل همدیگر هستند. 🔺 این مدل رنگ‌بندی برای ایجاد طرح‌هایی با کنتراست بالا مورد استفاده قرار می‌گیرد؛ بنابراین از این نوع رنگ‌بندی هرگز برای متن‌ها استفاده نکنید. 📽 برای درک بهتر Complementary می‌توانید این ویدیو را هم مشاهده کنید. 📍در مطالب بعدی به بررسی چند مثال از Complementary و سایر هارمونی رنگ‌ها می‌پردازیم. 🎨 همچنین اگر با هارمونی رنگ و تعاریف مربوط به رنگ آشنایی ندارید بهتر است این مطلب را هم بخوانید. همچنین مطلب اهمیت رنگ‌ها هم می‌تواند برای‌تان مفید باشد. 👤 Maryam 💎 Channel: @DevelopixDesign

🎨 مثالی از هارمونی هم‌جوار - Analogous Color 👤 Maryam 💎 Channel: @DevelopixDesign

💢 هارمونی هم‌جوار - Analogous هارمونی هم‌جوار به مجموعه 3 الی 5 دسته‌ای از رنگ‌ها گفته می‌شود که در چرخه رنگی در کنار هم قرار دارند برای مثال رنگ سبز، زرد و نارنجی برای درک بهتر Analogous می‌توانید این ویدیو را هم مشاهده کنید 📍در مطالب بعدی به بررسی چند مثال از Analogous و سایر هارمونی رنگ‌ها می‌پردازیم 🎨 همچنین اگر با هارمونی رنگ و تعاریف مربوط به رنگ آشنایی ندارید بهتر است این مطلب را هم بخونید همچنین مطلب اهمیت رنگ‌ها هم می‌تواند برایتان مفید باشد 👤 Maryam 💎 Channel: @DevelopixDesign

🎨 مثالی از هارمونی تک‌رنگ - Monochromatic 👤 Maryam 💎 Channel: @DevelopixDesign