الهام از طراحی رابط کاربری آیا به بافت های خود فکر می کنید؟

کمی بیش از ده سال از زمانی که «طراحی مسطح» به سبک طراحی پیش‌فرض و غالب تبدیل شده است – و البته دلیل خوبی هم دارد. پس از تمام سطوح براق و سایه‌های «web 2.0»، همه ما به عناصر طراحی نیاز داشتیم که در طرح‌بندی‌های جدید واکنش‌گرایمان واضح و خوانا باقی بمانند. اما این خطر وجود دارد که این همه طرح رنگی مسطح کمی «یکسان» به نظر برسد. اما به جای اضافه کردن یک رنگ یا فونت جدید، گاهی اوقات ترکیب برخی بافت های اضافی می تواند به طراحی UI شما ارتقای لازم را بدهد. بیایید به چند نمونه قاتل نگاه کنیم. 5 بهترین گواهینامه طراحی وب برای تقویت مهارت های شما

افزودن دانه کاغذ

در سال 2019، Google یک پروژه جانبی جالب به نام «A-Z منتشر کرد. از AI» که برای توضیح مفاهیم اولیه هوش مصنوعی طراحی شده است. استایل مدرن و دوستانه است، با استفاده از صفحات رنگی گسترده، تصاویر ساده کتاب کودکان، و تایپوگرافی بزرگ و رسا.

اما با دقت به نواحی رنگی صاف نگاه کنید، متوجه دانه‌بندی کاغذی خواهید شد. من ناحیه کوچکی را در تصویر زیر بزرگ‌نمایی کردم، اما ممکن است لازم باشد بررسی کنید چیز واقعی برای درک کامل این بافت. آنقدر ظریف است که فکر می‌کنم اکثر کاربران آگاهانه متوجه آن نمی‌شوند، اما فکر می‌کنم از سبک ساده کتاب کودکان کاملاً پشتیبانی می‌کند.

بینگو! من به جای اشتباهی نگاه می کردم.

اگر HTML را بررسی کنید، یک :after عنصر شبه با CSS پیوست شده:

._3rV4LQ0BePEq9V1dxEjhEF::بعد از {
    پس زمینه: url(/static/noise.jpg);
    محتوا: ""؛
    ارتفاع: 100%;
    سمت چپ: 0;
    Opacity: 0.05;
    اشاره گر رویدادها: هیچکدام.
    موقعیت: مطلق;
    بالا: 0;
    عرض: 100%؛
    z-index: 201;
}

این لایه از تصویر دانه (noise.jpg) به عنوان پس‌زمینه کاشی‌کاری استفاده می‌کند و آن را برای پوشش کل صفحه (width:100%، height) قرار داده‌اند. : 100%، top:0، left:0 و z-index:201).

همانطور که ما گمان می‌کردیم، کدورت روی تقریباً شفاف تنظیم می‌شود (opacity: 0.05)، به‌طوری که تنها چیزی که باقی می‌ماند نشانه‌ای از دانه‌های ناهموار است. تنها مشکل بالقوه پوشاندن صفحه با این “لایه لنز” (حتی اگر شفاف باشد) این است که دسترسی مکان نما به تمام پیوندها، ورودی ها و سایر تعاملات کاربر در زیر آن را مسدود می کند.

خوشبختانه، این مشکل با افزودن pointer-events: none به راحتی حل می‌شود، که این لایه لنز را برای مکان‌نمای کاربر نامرئی می‌کند.

من فکر می کنم این یک تکنیک واقعا مفید است. با استفاده از بیش از یک گرافیک کوچک و ده ها خط CSS، تأثیر بصری در سراسر سایت ارائه می دهد. این هزینه بسیار خوبی است.

رنگ، مداد و سایر رسانه های سنتی

کامپیوترها به گونه‌ای ساخته شده‌اند که دقیق و تمیز باشند، و برخلاف اکثر رسانه‌های سنتی، رنگ‌های دیجیتال به‌طور تصادفی اجرا نمی‌شوند، لکه نمی‌شوند، خونریزی یا لکه نمی‌کنند. این برای تمیز نگه داشتن میزتان عالی است، اما همچنین به این معنی است که رسانه‌های واقعی، شل، ارگانیک و طبیعی مانند رنگ و مداد زمانی که بتوانید تنظیمات مناسب را برای آن‌ها پیدا کنید، واقعاً برجسته می‌شوند.

اگرچه برنامه نشان داده شده در بالا از آن زمان منقضی شده است، آژانس نیوزلند Resn یک مثال جدید و کامل را به ما ارائه داد که به طور واقعی یک چینی سنتی را بازتولید می کند. سبک آبرنگ برای ترویج تجربیات AirBNB در روستاهای چین.

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

خاطرات محو شده

وقتی آژانس Obys ادای دینی دیجیتالی به نیکی لائودا باس فرمول یک کرد، رویکرد طراحی آنها متمایل شد. به شدت در کوه های عکس های آرشیو فوق العاده و فیلم هایی از حرفه نیکی.

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

نگاه یکپارچهسازی با سیستمعامل دیجیتال