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

⁉️طراحی بروتالیست چیست؟ 🔰طرح‌های بروتالیست ظاهر و زیبایی را کاملاً رد می‌کنند و کارکرد را به زیبایی ترجیح می‌دهند. طراحان بروتالیست به اجرای طرح ها با حداقل تلاش و ارزان ترین مواد موجود افتخار می کنند تا به نتیجه صادقانه تر دست یابند.🫠 ⭕️در طراحی وب بروتالیست ،قاعده طراحی بر پایه خشونت و یا ری اکشن های امروزی نسل جوان است .بر خلاف مینیمالیست ناهمواری و عدم نگرانی برای راحت یا آسان به نظر رسیدن طرح صفحات وب وجود دارد 💠نمای بصری سایت Craigslist از نظر زیبایی شناسی خوشایند نیست و هرگز در www.awwwards.com نمایش داده نمی شود. متن سیاه، لینک های آبی، پس زمینه سفید. زیبا نیست ولی کار می کند و واقعاً خوب کار می کند. آنچه را که برای خرید یا فروش نیاز دارید، بدون هیچ سر و صدا و هیاهو و بدون هیچ گونه محتوای متحرک اضافی پیدا می کنید. ⚜این سایت از زمان تأسیس خود در سال 1996 محبوبیت خود را با وجود ضعف در زیبایی حفظ نموده است و طراحی در بیش از 20 سال گذشته به هیچ وجه تغییر نکرده است. 👤 Mobi🧸🎈 💎 Channel: @DevelopixDesign

طراحی وب مینیمالیست ⁉️چه قواعدی در طراحی مینیمال اثر بخش است؟ ▫️استفاده صحیح از رنگ ها ▫️حذف محتوای کم ارزش ▫️تمرکز روی محتوایی که حداکثر توجه را نیاز دارند ▫️حذف نویز های طراحی ▫️استفاده مطلوب از فضای سفید ▫️طراحی بصری سفارشی سازی شده از عنوان و یا شعار 🔸مزیت: با توجه به اینکه کاربران در حال حاضر همیشه در حال استفاده از اینترنت هستند و به نوعی دسترسی به اینترنت همه گیر شده است ، طراحان محصول باید بر ارائه آنچه که در شرایط لحظه ای کاملاً ضروری است تمرکز کنند 💠اساسی ترین ویژگی استفاده از موبایل است که اکنون بیش از نیمی از بازدیدکنندگان وب را تشکیل می دهد و این میزان در آینده افزایش خواهد یافت. 👤 Mobi🧸🎈 💎 Channel: @DevelopixDesign

#News ابزار جدید فیگما به نام Figma Acquires Diagram مبتنی بر هوش‌مصنوعی که به زودی در دسترس قرار می‌گیرد. برخی از قابلیت‌های این ابزار: - تولید متن - تولید المان‌ها بر اساس محتوای شما - تولید کدهای قابل استفاده برای هر المان و قابلیت‌های دیگر. توضیحات بیشتر را می‌توانید از این لینک بخوانید. 👤 MHReza 💎 Channel: @DevelopixDesign

دوستان شرایطی براتون فراهم کردیم که بتونید اصول طراحی رابط کاربری و فیگما رو در یک کلاس عمومی انلاین با هزینه ۵۰ هزار تومان ثبت نام کنید. ظرفیت این هزینه محدود گذاشتیم و بعدش برمیگرده به هزینه اصلیش. اگر مایل بودین شرکت کنید از طریق لینک بالا در ایسمینار سرفصل ها و تاریخ برگزاری رو مشاهده کنید. https://eseminar.tv/wb109849

۸- فراپوشانندگی (Inclusiveness) به عبارتی گشتالت‌های بزرگ‌تر گشتالت‌های ممکن است از چندین گشتالت کوچک تشکیل شده باشد که زیرمجموعه‌هایی برای گشتالت‌های بزرگ‌تر محسوب شوند. این گشتالت بزرگ‌تر از پراگنانس قوی تری نسبت به گشتالت‌های کوچک‌تر برخوردار است 👤 Mobi 💎 Channel: @DevelopixDesign

7- سرنوشت مشترک (common fate) اين اصل به جنبش عناصر موجود در يک گشتالت مربوط است. از اين رو در يک ساختار بصري، عناصري که با هم و در يک راستا به جنبش در مي‌آيند، به‌عنوان يک گروه واحد يا يک مجموعه ديده مي‌شوند. در هنرهايي که از تصاوير يا علايم متحرک بهره مي‌گيرند، اين اصل کاربرد ويژه اي مي‌يابد. 👤 Mobi 💎 Channel: @DevelopixDesign

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

5- تصویر - زمینه (Figure-ground) قانون تصویر - زمینه بر اساس رابطه میان شی و فضای مجاور آن بنا شده است. تصویر - زمینه را گاهی فضای مثبت و منفی نیز می نامند، مثبت به شی اطلاق شده و منفی به فضای دربرگیرنده شی اطلاق می شود. دو نکته حائز اهميت است: 🔹اول آنکه همواره زمينه، همان پس زمينه نيست و در مواردي ميان اين دو تفاوت‌هايي وجود دارد. 🔹دوم آنکه در مواردي تشخيص ميان شکل و زمينه چندان هم آسان به نظر نمي‌رسد. اشکال دو هويتي از اين گونه اند. اشکال دو هويتي، اشکالي هستند که در آنها شکل و زمينه به طور مداوم جاي خود را عوض مي‌کنند زيرا داراي خصوصيات و امکانات مشابه هم‌اند. در اين گونه از اشکال، شکل و زمينه همديگر را تعريف مي‌کنند. به‌عبارتي شما با کشيدن يک شکل، زمينه را نيز مي‌کشيد، از اين رو اين دو غيرقابل تفکيک از هم اند. اين پديده در نماد آييني و بسيار کهن «يين و يانگ» ريشه دارد. 👤 Mobi 💎 Channel: @DevelopixDesign

4- بستار (Closure) بستار با تداوم از آن جهت که چشم را وادار به کامل کردن مسیر می کند مرتبط می باشد. تا زمانی که اطلاعات ضروری کافی وجود داشته باشد، ذهن قطعه گمشده از شی را تدارک می بیند. بستار با اشکالی که قابل تشخصی هستند به بهترین حالت عمل می کند. اما اشکال پیچیده برای تکمیل در ذهن دشوار تر می باشند. طراح باید میان بخش های حذف شده و موجود یک تعادل برقرار کند. اگر بخش های حذف شده بیش از حد زیاد باشند، ذهن قادر نخواهد بود تا شکل را بست دهد. بر اساس اين اصل، چنانچه بخشي از تصوير يک شکل پوشانده شده يا جا افتاده باشد، ذهن به‌طور خودکار آن را تکميل مي‌كند و به صورت يک شکل کامل مي‌بيند. به بياني ديگر، چشم ما اشکال ناقص و ناتمام را به صورت کامل و يکپارچه مي‌بيند. اين اصل فقط به حس بينايي محدود نيست، فرض بر اين است که همين اصل در تمام حواس عمل مي‌کند. شاید آشناترین نمونه گرافیکی این قانون را می توان در لوگوی FedEx مشاهده نمود. 👤 Mobi 💎 Channel: @DevelopixDesign

✅🖋لیستی از فونت‌های فارسی محبوب و رایگان 💙فونت تیتر : فدرا ، گرافیک ، دیودروم عربیک (بولد) ، غریتا ، جمهوریه ، ساحل(بولد) ، اردیبهشت ، دین عربیک(بولد) ، بیروت ، رادین ، کارا ، تراشین ، کرافت ، لاله زار ، میخک (بولد) ، یکان بوم (بولد) ، دیما برف ❤️فونت زیر متن : گندم ، وزیر ، شبنم ، دین عربیک ، بهداد ، ساحل ، دیودروم عربیک ، استعداد ، یکان ، میخک ، یکان بوم 💛خوشنویسی : ایران نستعلیق ، دیما شکسته فری ، شکسته بتا 💜دستنویس : فونتهای سایت دیجی [نوژا ، شکوه ، پائیز ، نوفر] ، شکاری ، سایه ، خودکار 🤍اگه شما هم فونت خوب رایگان دیگه‌ای می‌شناسید، کامنت کنید 😅 👤 Drwcsi 💎 Channel: @DevelopixDesign

3- تداوم یا پیوستگی (Continuity) قواعد تداوم بیان میکنند زمانی که چشم شروع به دنبال کردن چیزی می کند، این دنبال کردن در مسیر تا رسیدن به شی دیگری ادامه پیدا می کند. راه دیگری که چشم را به دنبال کردن وا می دارد جهت چشم در تصویر و یا تصویر سازی می باشد. به عنوان یک قاعده ی مشترک طراحی در نظر گرفته می شود که اگر از عکس فردی استفاده می شود باید دقت داشت که جهت چشمان فرد به سمت ادامه ی طرح باشد. یکی از مهم ترین مسائل در تداوم توجه به فرهنگ نوشتاری جامعه هدف می باشد. به عنوان مثال در جوامع غربی، با توجه به آن که جهت نوشتار از چپ به راست می باشد، به صورت خودکار، چشم بیننده از سمت چپ شروع به خواندن (نگاه کردن) به سمت راست می کند. اما در جوامعی که نوشتار از سمت راست به چپ می باشد، بیننده از سمت راست به چپ تصویر را نگاه می کنند. طبق اصل تداوم، محرک‌هايي که داراي طرح‌هاي وابسته به يکديگرند به صورت واحد ادراکي دريافت مي‌شوند. 👤 Mobi 💎 Channel: @DevelopixDesign

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