مهدیه عطائی
مهدیه عطائی
خواندن ۶ دقیقه·۴ ماه پیش

درس‌هایی از «پیت موندریانِ» نقاش برای طراحان محصولات دیجیتال!

سلام! امروز اومدم براتون بگم که «نجات دهنده» همچین هم که خانم فروغ میگه همیشه در گور نخفته! گاهی لای کتابی چیزی داره چرت میزنه و نیاز داره که تکونی بهش بدیم!

چند سال پیش، سرِ کلاسِ طرحِ 4 معماری، وقتی که مداد رو لای موهام میچرخوندم ( تصویر آشنا از سینمای تینیجری! ) و دربه در دنبال یک چیزِ الهام‌بخش برای طراحی یه استادیوم ورزشی بودم! یهو جرقه‌ای در ذهنم روشن شد؟! نه نه! دیگه اینقدرا هم نه! – شروع به ناله و فغان کردم که این که اسمش زندگی نیست، ایده از کجا باید بیاریم، اصلا من رو چه به طراحی و من انسان خلاقی نیستم و آه خدایا! استاد که از آه و ناله‌ی من کلافه شد بود (جا داره از همین تریبون از همه‌ی اساتید عزیزی که طی سالیان متمادی متحمل شنیدن این شکوه‌ها بودن کمال تشکر رو به جای بیارم) پیشنهاداتی برای باز شدن گره کوری که در مغزم زده بودم داد!

با راهنمایی استاد، سری به کتابخونه‌ی فقیرِ دانشگاه زدم و داشتم چند تا کتاب قطور تاریخ هنر و معماری رو ورق می‌زدم و افسوس میخوردم که من اینجا چیکار میکنم و این چه رشته‌ی مسخره ای بود و اینا چه جوری به مغزشون رسیده که اینا رو بکشن و من رو چه به طراحی استادیوم! مگه من زاها حدیدم و نور به قبر عبدالعزیزشون بباره که یه چیزی برامون گذاشته؛ که چشمم خورد به نقاشی دوست عزیزی که داشت چرت میزد وسط کتاب تاریخ هنر! ما که نه این طرف رو میشناختیم و نه میدونستیم این خط خطی ها یعنی چی، رفتیم پیش استاد. القصه با راهنمایی های استاد، سه چهارتا از نقاشی‌های ایشون رو که بعد فهمیدم اسمشون موندریانه یافتیم و طی یک پروسه‌ی آشنای دانشجویی، کارهاش رو روی هم گذاشتیم و با استفاده از تلاقی خطوط و نسبت و تناسباتی که از کلاژ کردن این بزرگوارا دستمون رو گرفت، یه پلان استادیوم درآوردیم و تحویل استاد دادیم!

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

رابطه‌ی پر از عشق و نفرت من با آقای موندریان محدود به اون کلاس نشد. راستش من هر از گاهی به خاطر خاطره ی شیرین و موفقی که در طراحی برام رقم زده بود هی وامیستادم جلوی نقاشیاش و همچنان سعی میکردم بفهمم که استاد چی با این خطوط به جهان عرضه کرده که من نمی‌‍تونم! هرجا که اسم موندریان میومد گوشم رو تیز می‌کردم یا هرجا ( به خصوص توی این فضاهای کار اشتراکی که دوست دارن چیدمان‌هاشو توی چشممون فرو کنن) چیزی ازش میدیدم یه بادی به غبغب مینداختم که ایشون کراشِ منه! و بگی نگی یه حس مالکیت ریزی هم بهش داشتم! خلاصه سرتون رو درد نیارم امشب نشسته بودم داشتم زندگیم رو زیر و رو میکردم و نشدن هامو لیست میکردم یهو چشمم خورد به یکی از نقاشی های استاد! گفتم برم ببینم حالا که دیگه معمار نیستم و به قولی یه طراح محصول دون‌پایه‌م، استاد چه راهنمایی‌هایی برای من داره و چجوری میتونه من رو از منجلابِ رخوتی که توش گیر کردم بیرون بیاره!

من این نقاش بدبخت رو هی از اینجا به اونجا میکشونم که بهم بگه راز این خطوطِ بی سر و تهی که همه تحسینش میکنن چیه!


پنج درس از ناجیِ محترمم « پیت موندریان» برای طراحی محصول استخراج کردم به آن امید که به کار ببندیم و خروجی خوب بگیریم.

درس اول: سادگی

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

کاربرد درس اول در طراحی:

• رابط کاربری مینیمالیستی: موندریان از فرم‌های حداقلی استفاده میکنه. کمتر کردن شلوغی‌های رابط کاربری، باعث تقویت کاربردپذیری (Usability) محصول میشه.

• سلسله مراتب واضح: موندریان یک سلسله مراتب بصری واضح با شکل‌ها و رنگ‌های اولیه ایجاد می‌کنه. ما می‌تونیم با سازماندهی محتوا به نحوی که توجه کاربر رو به سمت مهم‌ترین عناصر هدایت کنه به یه تعامل کارآمد برسیم (efficient interaction).

درس دوم: تعادل و هماهنگی

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

کاربردش در طراحی رابط کاربری:

- سیستم‌های شبکه‌ای یا همون گریدبندی‌ها که خیلی‌هامون باهاش کار میکنیم مستقیما میتونه به تراز کردن عناصرو یکپارچگیشون کمک کنه و چیدمانمون رو هم از نظر زیبایی‌شناختی و هم به لحاظ کاربردی، بهبود بده.

- باید یاد بگیریم که چطور وزن بصری رو در صفحه متعادل کنیم. مکان‌های استراتژیک صفحه رو بشناسیم، تناسبات رنگی و همنشینی اشکال رو بدونیم که چشم کاربر به درستی در صفحه هدایت بشه.

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

درس سوم: قدرت رنگ‌ها

اگه قدرت رنگ‌ها رو دست کم بگیریم سوختیم! لازم نیست n تا رنگ استایل کنیم تا کارمون جذاب بشه! کارهای موندریان بهمون میگه رنگ‌ها اگه محدود باشه اما استراتژی پشتش باشه میتونه تصاویر به یادماندنی ایجاد کنه.

کاربردش در طراحی رابط کاربری:

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

- تاثیر احساسی: رنگ‌ها به سرعت احساسات افراد رو برانگیخته می‌کنن و میتونن بر رفتارشون تاثیر بذارن. موندریان در استفاده از رنگ‌ها جسارت داشته!

محصولات دیجیتالی رو که اینقدر جسورانه از رنگ استفاده می‌کنن تو ذهنتون دارید؟ 😊

Piet Mondrian: Composition A: Composition with Black, Red, Gray, Yellow, and Blue - 1920 / Galleria Nazionale d'Arte Moderna e Contemporanea
Piet Mondrian: Composition A: Composition with Black, Red, Gray, Yellow, and Blue - 1920 / Galleria Nazionale d'Arte Moderna e Contemporanea


درس چهارم: تفکر انتزاعی

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

کاربردش در طراحی رابط کاربری:

- شمایل‌نگاری! (حقیقتا دارم با زبان فارسی به چالش میخورم! منظور همون آیکن‌گرافیه): انتزاع میتونه برامون آیکن‌های ساده‌تر و قدرتمند تر ایجاد کنه که ایده‌های پیچیده رو حتی سریع‌تر انتقال بده.

- راه‌حل‌های نوآورانه: اگه تفکر انتزاعی رو بپذیریم، وادار میشیم که خارج از چارچوب‌های رایج فکر کنیم، پس نوآور میشیم! جدا شدن از الگوهای مرسوم برای پیدا کردن رویکردهای منحصر به فرد نسبت به چالش‌هایی که در طراحی داریم، یکی دیگه از نکاتیه که از کارهای استاد میتونیم یاد بگیریم!

درس پنجم: سازگاری و تکامل

کارهای موندریان، اصول خودش رو حفظ و دنبال کرد، در عین حال از نوآوری تهی نشد. خیلی مهمه که یه خط ثابت رو دنبال کنیم و در عین حال در هر مرحله، نوآوری رو (به قول آقای محتشمیان!) چاشنی کار کنیم.

کاربردش در طراحی رابط کاربری:

- دیزاین سیستم: اوصیکم به دیزاین سیستم! استفاده از دیزاین سیستم مثل استفاده از یک سبک هنریِ در حال تکامله که کمک میکنه یکپارچگی پلتفرم‌هامون در طوفان‌های به روزرسانی‌های متعدد حفظ بشه.

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


اما کلام آخر!

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

رابط کاربریطراحی محصولات دیجیتالپیت موندریانمینیمالیسم دیجیتالتئوری رنگ ها
Product Designer
شاید از این پست‌ها خوشتان بیاید