سبک طراحی بروتالیسم (Brutalism)

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

سبک بروتالیستم در طراحی چیست؟

سبک بروتالیسم ریشه در معماری داره؛ واژه «بروتالیسم» از فرانسوی béton brut به‌معنای «بتن خام» گرفته شده. این سبک بعد از جنگ جهانی دوم رواج پیدا کرد و هدفش ساخت سریع و کم‌هزینه ساختمون‌های کاربردی بود. در طراحی وب، بروتالیسم به یک رویکرد خام و مینیمال گفته می‌شه که کارکرد رو به زیبایی ترجیح می‌ده. ویژگی‌های اصلیش عبارتند از:

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

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

چه زمانی از طراحی بروتالیسم استفاده می‌شود؟

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

• محصول به شفافیت و سرعت نیاز داره

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

• مخاطب، جوان و طرفدار تکنولوژیه

کاربرهایی که با فضای اینترنت دهه ۹۰ آشنا هستن و به اصالت و نوستالژی علاقه دارن، معمولا با سایت‌های بروتالیستی ارتباط خوبی برقرار می‌کنن.

• نیاز به تمایز وجود داره

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

کاربردها و اهمیت بروتالیسم

• تمایز برند

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

• تمرکز بر محتوا

حذف تزئینات و استفاده از ساختارهای ساده کمک می‌کنه کاربر راحت‌تر روی محتوای اصلی تمرکز کنه.

• کاهش زمان توسعه

استفاده از HTML خام و CSS کمتر، زمان و هزینه پیاده‌سازی وب‌سایت رو پایین میاره.

• افزایش شفافیت

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

نکات کلیدی در طراحی بروتالیسم

برای اینکه سبک بروتالیسم رو به‌خوبی در تجربه کاربری اجرا کنی، می‌تونی از این نکات کمک بگیری:

• انتخاب تایپوگرافی مناسب

از فونت‌های ساده و درشت مثل monospace یا sans-serif استفاده کن تا حس خام و صنعتی منتقل بشه.

• استفاده از شبکه و الگوهای تکرارشونده

صفحه‌ها رو با ساختار شبکه‌ای منظم بچین تا با وجود ظاهر خشن، کاربر بتونه راحت‌تر با چیدمان ارتباط بگیره.

• رنگ‌های متضاد و تک‌رنگ

ترکیب رنگ‌های تند یا حتی سیاه‌و‌سفید به هویت بروتالیسم کمک می‌کنن.

• ناوبری ساده اما غیرمتعارف

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

• به‌کارگیری عناصر خام

تصاویر بدون حاشیه، دکمه‌های بدون تزئین و شکل‌های هندسی ساده، حس خام‌بودن طراحی رو بیشتر می‌کنن.

• توجه به دسترس‌پذیری

با اینکه تضاد رنگی شدیده، باید مطمئن بشی کنتراست برای خوانایی کافی باشه و عناصر با استانداردهای دسترس‌پذیری هماهنگ باشن.

تفاوت بروتالیسم و نئوبروتالیسم

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

چالش‌ها و اشتباهات رایج در بروتالیسم

• بی‌توجهی به نیازهای کاربر

اگه طراحی بروتالیستی بدون درنظر گرفتن انتظارات و ذهنیت کاربر انجام بشه، ممکنه کاربر گیج بشه و سایت رو رها کنه.

• کنتراست آزاردهنده

استفاده نادرست از رنگ‌های تند و تضاد زیاد می‌تونه باعث خستگی چشم یا اضطراب بصری بشه.

• مشکلات دسترس‌پذیری

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

• پیچیدگی بیش‌ازحد

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

• عدم تناسب با برند

این سبک برای همه برندها جواب نمی‌ده. اگه هویت برند بر پایه ظرافت، لوکس بودن یا حرفه‌ای بودن باشه، بروتالیسم ممکنه پیام اشتباهی برسونه.

مثال‌هایی معروف از بروتالیسم و نئوبروتالیسم

• Whitney Museum

وب‌سایتی با تایپوگرافی درشت، ساختار شبکه‌ای واضح و طرح‌بندی خام که باعث می‌شه بازدیدکننده راحت‌تر روی آثار هنری تمرکز کنه.

• Drudge Report

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

• Figma

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

• Gumroad

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

نتیجه‌گیری

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

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

منابع

• DesignLab
• cccreative.design
• NNgroup
• onething.design
• Bejamas
• Medium
• elementor.com