طراحی لوگوی واکنش‌گرا: چگونه لوگویی بسازیم که در هر اندازه‌ای کار کند

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

اکثر لوگوها با اندازه مناسب ۵۰۰ پیکسل طراحی می‌شوند، در یک ارائه تایید می‌شوند و تحویل داده می‌شوند. سپس واقعیت خود را نشان می‌دهد: یک فاوآیکون ۱۶x۱۶، یک تب مرورگر ۳۲ پیکسلی، یک آیکون برنامه ۶۴ پیکسلی، یک نشان اعلان ۲۵۶ پیکسلی. نشان کلمه در نویز حل می‌شود. برند قبل از اینکه کاربر حتی روی صفحه فرود بیاید، از بین می‌رود.

واکنش‌گرا طراحی لوگو یک روند نیست. این انتظار اولیه برای هر علامتی است که باید در اینترنت زنده بماند.

یک لوگو یک علامت واحد نیست، یک سیستم است.

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

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

طراحانی که این را نادیده می‌گیرند، همان SVG پیچیده را به یک فاویکون ۱۶ پیکسلی و یک هدر قهرمان ۱۲۰۰ پیکسلی تبدیل می‌کنند. هر دو سطح آسیب می‌بینند. علامت کوچک به گل تبدیل می‌شود. علامت بزرگ نازک به نظر می‌رسد زیرا هرگز برای تنفس در مقیاس طراحی نشده است.

چهار لایه یک سیستم لوگوی واکنش‌گرا

هر هویت برند بالغ به چهار لایه کاری تقسیم می‌شود:

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

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

آستانه‌های اندازه: زمانی که هر ردیف نمایش داده می‌شود

اندازه محرک اصلی است. این آستانه‌ها در اکثر موارد استفاده صدق می‌کنند:

| عرض پیکسل | ردیف | چرا | |------------|------|-----| | 16-32px | فقط آیکون | هیچ نشان کلمه‌ای در اینجا وجود ندارد. شکل و رنگ تنها ابزارها هستند. | | 32-64px | آیکون یا مونوگرام | بستگی به پیچیدگی علامت دارد. در 1x و 2x آزمایش کنید. | | 64-128px | مونوگرام یا نشان کلمه ساده شده | محدوده اول که در آن متن در شرایط عادی خوانا می‌شود. | | 128-256px | نشان کلمه ساده شده یا کامل | اگر نسبت‌ها درست باشند، علامت کلمه کامل از اینجا شروع به کار می‌کند. | | 256px+ | نشان کلمه کامل | طراحی شده برای این محدوده. تمام جزئیات عمدی هستند. |

اینها نقاط شروع هستند، نه قوانین. یک لوگو با وزن سنگین و حروف فشرده ممکن است در ۴۸ پیکسل به طور واضح خوانده شود. یک لوگوتایپ نوشتاری ممکن است در ۱۲۸ پیکسل از هم بپاشد.

هر ردیف را در اندازه هدف، در متن، روی پس‌زمینه هدف آزمایش کنید. کنتراست مشکل را پیچیده‌تر می‌کند: علامتی که در ۲۵۶ پیکسل روی سفید خوب عمل می‌کند، می‌تواند در ۳۲ پیکسل روی یک منوی ناوبری تیره شکست بخورد.

سیستم لوگوتایپ به نماد Notion

آن را به صورت زنده در concept.so ببینید

سیستم لوگوی Notion یک ساده‌سازی کنترل‌شده است. لوگوتایپ کامل از فونت sans-serif سفارشی آنها با یک لوگوی "N" ضخیم و دندانه‌دار استفاده می‌کند. در اندازه‌های کوچک‌تر، حروف کوچک‌تر می‌شوند و حرف «N» مستقل جای آن را می‌گیرد، یک شکل حروف بلوکی که در مقیاس فاویکون به طور واضح خوانده می‌شود.

چیزی که باعث می‌شود این طرح جواب بدهد این است که «N» ابتدا برای اندازه‌های کوچک طراحی شده است، نه اینکه پس از اجرا از علامت نوشتاری جدا شود. این یک علامت گسسته با هندسه خاص خود است، نسبت‌هایی که برای زمینه‌هایی که بیشتر عمر خود را در آن می‌گذراند، تنظیم شده‌اند.

این جایی است که اکثر برندها آن را به عقب برمی‌گردانند: آنها علامت نوشتاری را طراحی می‌کنند، سپس سعی می‌کنند نماد را از آن استخراج کنند. Notion این روند را معکوس کرد. نماد، لنگر است.

طرح Belo از Airbnb و آنچه به صنعت آموخت

به صورت زنده در airbnb.com ببینید

Airbnb طرح Belo را در سال ۲۰۱۴ معرفی کرد و تقریباً به یک مطالعه موردی در طراحی نماد تبدیل شد. این شکل چهار معنی (افراد، مکان‌ها، عشق و حرف A) را با استفاده از یک خط پیوسته رمزگذاری می‌کند. این سادگی هندسی دلیل تغییر مقیاس آن بدون از دست دادن چیزی است.

در اندازه ۱۶ پیکسل، belo یک حلقه قابل تشخیص است. در اندازه ۲۵۶ پیکسل، عمق، حضور و هدف دارد. علامت تجاری "Airbnb" در کنار belo به عنوان یک عنصر مجزا قرار دارد: آنها در اندازه کامل با هم حرکت می‌کنند، و در اندازه کوچک‌تر جداگانه. هیچ یک از این دو سطح به عنوان یک مصالحه به نظر نمی‌رسد.

درس صنعت: نمادی که به اندازه کافی قوی باشد تا به تنهایی در اندازه ۳۲ پیکسل قرار گیرد، از هر علامت تجاری وابسته به wordmark بهتر عمل می‌کند. اگر لوگوی شما در اندازه‌های کوچک به عنوان یک سیلوئت قابل شناسایی نباشد، نماد کار خود را انجام نمی‌دهد.

ساخت یک برند از ابتدا یا ممیزی برندی که کمتر از ۶۴ پیکسل می‌شود؟ Brainy سیستم‌های لوگو طراحی می‌کند، نه فقط لوگو.

استراتژی مونوگرام Spotify

پخش زنده را در open.spotify.com ببینید

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

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

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

طراحی مجدد Slack و دلیل برنده شدن نشان ساده شده

پخش زنده را در slack.com ببینید

لوگوی اصلی Slack یک هشتگ ۴۵ درجه‌ای بود که از اشکال رنگی ساخته شده بود. در اندازه‌های کوچک، به یک لکه‌ی کدر تبدیل می‌شد: رنگ‌های مشابه بسیار زیاد، شکل‌هایی که به صورت جداگانه قابل خواندن نبودند.

در سال ۲۰۱۹، Slack دوباره طراحی شد. علامت جدید همان مفهوم را حفظ کرد اما کنتراست بین بخش‌های رنگی را افزایش داد، پیچیدگی بصری را کاهش داد و هر شکل را به اندازه‌ای بزرگ کرد که در ۳۲ پیکسل جا شود. علامت کلمه به یک sans-serif تمیزتر تغییر یافت. طراحی مجدد کاملاً به دلیل شکست سطح نماد انجام شد، زیرا Slack در نشان‌های اعلان و آیکون‌های داک، سطوحی که نیاز به علامتی با اندازه‌ی ۳۲ پیکسل دارند، وجود دارد.

مورد Slack در سال ۲۰۱۹ ارزش یادآوری دارد: طراحی‌های مجددی که به دلیل شکست در اندازه‌ی کوچک ایجاد می‌شوند، مشروع هستند، نه بیهوده. اگر علامت ۳۲ پیکسلی شما نمایانگر برند شما نباشد، برند هر روز که خراب می‌ماند، سطح خود را از دست می‌دهد.

چک لیست طراحی یک لوگوی واکنش‌گرا از ابتدا

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

در طول طراحی:

• ابتدا لایه آیکون را با ابعاد 32x32 پیکسل طراحی کنید. اگر در آنجا کار کرد، مقیاس را افزایش دهید.

• وزن خط دور را به اندازه‌ای سنگین نگه دارید که هیچ چیز در حداقل اندازه کمتر از 2 پیکسل رندر نشود.

• نماد را به سه رنگ یا کمتر محدود کنید. بیش از سه رنگ در 16 پیکسل غیرقابل تشخیص است.

• مونوگرام را در یک زمینه آیکون برنامه واقعی آزمایش کنید: اشکال تطبیقی ​​دایره‌ای iOS و اندروید.

قبل از تحویل:

• در 16 پیکسل روی پس‌زمینه‌های سفید و سیاه رندر کنید. سخت‌ترین آزمایش.

• در 32 پیکسل در یک تب آزمایشی مرورگر رندر کنید. آیا به عنوان متمایز یا عمومی خوانده می‌شود؟

• علامت کلمه کامل را در 600 پیکسل رندر کنید. آیا حضور کافی برای توجیه فضا دارد؟

• برای هر مورد استفاده، یک فایل در هر ردیف صادر کنید. هرگز یک SVG را تحویل ندهید و به توسعه‌دهنده نگویید که آن را مقیاس‌بندی کند.

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

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

1. کنتراست در 16 پیکسل. فاویکون را در حالت‌های روشن و تاریک در یک تب مرورگر کپی کنید. آیا اصلاً دیده می‌شود؟ رایج‌ترین خطا.

2. تشخیص در 32 پیکسل. آیا کسی که برند را می‌شناسد می‌تواند آن را در این اندازه، خارج از متن، تشخیص دهد؟ اگر نه، ردیف نماد نیاز به کار دارد.

3. تمایز در 64 پیکسل. آیا علامت به طور خاص شبیه این برند است یا یک لوگوی فناوری عمومی؟ در 64 پیکسل جایی برای تمایز وجود دارد.

4. حضور در 256 پیکسل. اندازه کامل علامت کلمه. علامت باید عمدی، وزن‌دار و طراحی‌شده به نظر برسد. نازک یا نامتعادل بودن به این معنی است که بزرگ‌نمایی شده است، نه برای این محدوده طراحی شده است.

عدم موفقیت در مراحل ۱ و ۲ به این معنی است که لایه آیکون نیاز به طراحی مجدد دارد. عدم موفقیت در مرحله ۴ به این معنی است که لوگو به سرمایه‌گذاری طراحی بیشتری نیاز دارد. این‌ها مشکلات جداگانه‌ای با راه‌حل‌های جداگانه هستند.

سوالات متداول

لوگوی واکنش‌گرا چیست؟

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

یک برند واقعاً به چند نسخه لوگو نیاز دارد؟

حداقل تعداد مورد نیاز چهار است: لوگو با اندازه کامل، لوگو با اندازه ساده، مونوگرام یا نماد مستقل، و یک نماد جدا شده برای کوچکترین اندازه‌ها. برندهایی که حضور فیزیکی دارند اغلب برای استفاده در قالب بزرگ، یک لایه پنجم اضافه می‌کنند.

آیا باید ابتدا نماد یا لوگو را طراحی کنم؟

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

آیا می‌توان یک لوگوی موجود را بدون طراحی مجدد کامل، واکنش‌گرا کرد؟

گاهی اوقات. اگر نشان کلمه در ابعاد ۱۲۸ پیکسل و بالاتر باقی بماند، ممکن است قابل نجات باشد. سطوح آیکون و مونوگرام تقریباً همیشه باید هدفمند ساخته شوند. تلاش برای استخراج آنها از علامت کامل، مسیر اشتباهی است.

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

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

|---------|-----------|

| SVG | همه سطوح بالاتر از ۶۴ پیکسل (نشان کلمه و نشان کلمه ساده شده) |

| PNG | سطوح آیکون و مونوگرام، با خروجی ۱x و ۲x |

| ICO | فقط Favicon |

از توسعه‌دهنده نخواهید که فرمت‌ها را تغییر دهد.

این چگونه به یک هویت برند گسترده‌تر مرتبط می‌شود؟

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

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

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

برندهای بالا، Notion، Airbnb، Spotify، Slack، علامت‌ها را به صورت تصادفی عوض نمی‌کنند. آنها سیستم‌هایی با مسیرهای کاهش عمدی ساخته‌اند.

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

این تصمیم که یک بار در مرحله طراحی گرفته می‌شود، از آن نقطه به بعد روی هر نشان اعلان، هر تب مرورگر، هر آیکون برنامه، هر تصویر پروفایل شبکه‌های اجتماعی که ارائه می‌شود، تأثیر می‌گذارد. این نتیجه‌ی یک تصمیم وردمارک در مقابل لترمارک با طراحی خوب است که در مراحل اولیه گرفته شده و به درستی ساخته شده است. استخدام ⟦برند ۰⟧ برای ساخت یک سیستم لوگو که در هر اندازه‌ای قابل استفاده است.