سیستم‌های لوگوی واکنشگرا: چگونه لوگویی بسازیم که در هر اندازهای کار کند
راهنمای کامل طراحی لوگوی واکنشگرا. نردبان چهارسطحی که هر برند مدرن به آن نیاز دارد، قواعد ساده‌سازی که نشان را در ۱۶ پیکسل خوانا نگه می‌دارند، و فهرست فایل‌هایی که طراحان واقعاً باید تحویل دهند.
سیستم‌های لوگوی واکنشگرا: چگونه لوگویی بسازیم که در هر اندازهای کار کند
لوگویی که فقط در یک اندازه تحویل داده میشود، در همه‌ی اندازه‌های دیگر خراب میشود.
این اغراق نیست. هر برند هم‌زمان در ده‌ها مقیاس زندگی میکند: یک تب مرورگر ۱۶ پیکسلی، یک آیکون اپ ۳۲ پیکسلی، یک تصویر بندانگشتی محصول ۲۰۰ پیکسلی، و یک بنر سه‌متری روی ساختمان. برندهایی که در همه‌ی این اندازهها تیز به نظر می‌رسند، یک سیستم دارند. برندهایی که در نیمی از این اندازهها کدر و گل‌آلود دیده می‌شوند، یک فایل تحویل داده‌اند و گفته‌اند تمام.
این راهنمای ساختن همان سیستم است.
لوگو یک سیستم است، نه یک فایل
کار لوگو این است که برند را در هر اندازهای که قرار است ظاهر شود شناسایی کند، و یک SVG تنها بدون مصالحه نمی‌تواند این کار را بکند. یک لاکآپ کامل با وردمارک و شعار که در ۳۰۰ پیکسل زیبا خوانده میشود، در ۳۲ پیکسل به لکه‌ای درهم تبدیل میشود. یک مونوگرام بهینه‌شده برای فاویکون که در تب مرورگر جا می‌افتد، روی سربرگ خالی و ناقص به نظر میرسد.
مصالحه همیشه هست. تنها سؤال این است که آن را آگاهانه طراحی می‌کنید یا وقتی برنامهنویس آیکون اپ می‌خواهد و شما فایل چاپی را می‌فرستید، تصادفی کشفش می‌کنید.
طراحی لوگوی واکنشگرا مد یا امتیاز اضافه نیست. صنعتگری پایه است. برندهایی که این را درست انجام می‌دهند یک نردبان ساخته‌اند: چهار سطح که هرکدام در یک بازهی مشخص از مقیاس کار مشخصی انجام می‌دهند.
نردبان چهارسطحی لوگوی واکنشگرا
لاکآپ کامل، نشان اصلی، نشان سادهشده، و مونوگرام یا فاویکون. هر سیستم لوگوی واکنش‌گرای کارآمد نسخه‌ای از همین چهار سطح است. شکل دقیق‌شان از برندی به برند دیگر فرق میکند، اما منطق ساختاری ثابت است: هر پله‌ی پایین‌تر پیچیدگی را حذف میکند تا خوانایی حفظ شود، و هر پله‌ی بالاتر زمینه اضافه میکند تا اقتدار را حمل کند.
این نردبان مجموعه‌ای از اضافات اختیاری نیست. حداقل سیستم لوگوی قابل‌قبول برای هر برندی است که در بیش از دو اندازه ظاهر میشود. اگر دارید برای یک برند مدرن لوگو می‌سازید یا بریف می‌دهید و خروجی کمتر از چهار سطح است، سیستم ناقص است.
| سطح | نام رایج | بازهی کاربرد معمول | شامل چه چیزی است |
|---|---|---|---|
| 1 | لاکآپ کامل | ۲۰۰ پیکسل به بالا، چاپ، تابلو | نشان + وردمارک + شعار |
| 2 | نشان اصلی | ۸۰ تا ۳۰۰ پیکسل، بیشتر نقاط تماس دیجیتال | نشان + وردمارک |
| 3 | نشان سادهشده | ۳۲ تا ۸۰ پیکسل، اجزای UI، تصاویر بندانگشتی | نشان سادهشده به‌تنهایی یا با وردمارک مخفف |
| 4 | مونوگرام / فاویکون | ۱۶ تا ۳۲ پیکسل، تب مرورگر، آیکون اپ | یک گلیف، حرف اول، یا تقلیل هندسی |
سطح یک: لاکآپ کامل
لاکآپ کامل نسخهی رسمی برند است، یعنی نشان به‌علاوه‌ی وردمارک به‌علاوه‌ی شعار (اگر باشد)، و فقط در چاپ، تابلو و جایگاه‌های هیرو استفاده میشود. همان نسخه‌ای است که روی کارت ویزیت، هدر صفحه‌ی اصلی در مقیاس دسکتاپ و کنار کامیون حمل بار می‌بینید. بیشترین اطلاعات را حمل میکند و برای این کار بدون شلوغی به بیشترین فضا نیاز دارد.
قاعده‌ی لاک‌آپ‌های کامل این است که هرگز نباید به زور در اجزای UI دیجیتال چپانده شوند. لوگو در نوار ناوبری موبایل جایگاه لاکآپ کامل نیست. فاویکون هم جایگاه لاکآپ کامل نیست. وقتی برندها سعی میکنند لاکآپ کامل را در این بسترها کوچک کنند، شعار حل میشود، وردمارک ناخوانا میشود و نشان با متنی که هرگز برای کنار نشستن در آن تراکم طراحی نشده بود سر فضا دعوا میکند.
لاکآپ یک ترکیب رسمی است و ترکیب‌های رسمی حداقل اندازه دارند. آن حداقل را تعریف کنید، در دستورالعمل‌های برند بنویسید و اجرایش کنید.
سطح دو: نشان اصلی
نشان اصلی نسخه‌ای است که بیشتر مردم بیشتر وقت‌ها می‌بینند، و نسخه‌ای است که همه‌ی سطوح دیگر از آن مشتق می‌شوند. نشان به‌علاوه‌ی وردمارک است، بدون شعار، و گسترده‌ترین بازهی بسترها را پوشش میدهد: هدر وب‌سایت، امضای ایمیل، بیوی شبکه‌های اجتماعی، UI محصول در مقیاس متوسط، اسلایدهای ارائه، و فریم آغازین یک انیمیشن لوگو.
درست درآوردن نشان اصلی پرپیامدترین تصمیم سیستم است. رابطه‌ی فضایی میان نشان و وردمارک در اینجا منطق تناسبی را تعیین میکند که همه‌ی سطوح دیگر به ارث میبرند. اگر فاصله‌شان زیاد باشد، نشان سادهشده بی‌ارتباط به نظر میرسد. اگر خیلی فشرده باشد، مونوگرام خفه میشود.
تصمیم‌های تایپوگرافی هم همین‌جا قفل می‌شوند. اگر وردمارک از اصلاحات فاصله‌گذاری نوری استفاده میکند، آن اصلاحات باید در همین سطح داخل فایل وکتور پخته شوند، نه اینکه به‌صورت یادداشتی در دستورالعمل‌ها رها شوند.
سطح سه: نشان سادهشده
نشان سادهشده جزئیات را کنار می‌گذارد تا در اندازه‌های کوچک UI دوام بیاورد، و قاعده‌ی سرانگشتی این است که هر چیزی را که زیر ۳۲ پیکسل ناپدید میشود حذف کنید. این نسخهی کوچک‌شده‌ی نشان اصلی نیست. نسخه‌ای بازطراحی‌شده است که عمداً فداکاری میکند تا شناخته‌شده‌ترین ویژگی‌های برند را حفظ کند.
تصمیم‌ها همیشه ناخوشایندند. خطوط نازک به سطوح پر تبدیل می‌شوند. سریف‌ها به کنده‌هایی کوتاه بدل می‌شوند یا کاملاً ناپدید می‌شوند. فضاهای داخلی حروف که در ۲۰۰ پیکسل ظریف بودند، در ۴۰ پیکسل به گل نوری تبدیل می‌شوند. طراحانی که در برابر این تصمیم‌ها مقاومت میکنند نشان‌های ساده‌شده‌ای تحویل می‌دهند که در Figma با بزرگ‌نمایی 1x خوب به نظر می‌رسند و روی دستگاه واقعی از هم می‌پاشند.
در این سطح، وردمارک‌ها معمولاً حذف یا با یک مخفف کوتاه جایگزین می‌شوند. اگر نشان به‌تنهایی نتواند برند را در ۴۰ پیکسل حمل کند، این اطلاعات مفیدی درباره‌ی قدرت نشان است، نه دلیلی برای نگه‌داشتن وردمارک در یک کامپوننت ۴۰ پیکسلی.
سطح چهار: مونوگرام یا فاویکون
کوچک‌ترین سطح یک کاراکتر، گلیف یا تقلیل هندسی است که باید در ۱۶ پیکسل در تب مرورگر خوانده شود. این چالشی با حاشیه‌ی خاکستری زیاد نیست: یا در آن اندازه خوانده میشود یا نمی‌شود.
مونوگرام یا فاویکون معمولاً یکی از سه چیز است: حرف اول نام برند، یک شکل نمادین از نشان، یا تقلیلی هندسی که رنگ و تناسب برند را بدون هیچ جزئیاتی حمل میکند. G گوگل، سر Freddie در Mailchimp، هشتگ Slack، و N در Notion. هرکدام در ۱۶ پیکسل بی‌درنگ خوانا هستند و بهروشنی به نشان سطح دویی که از آن آمده‌اند گره خورده‌اند.
رایج‌ترین شکست در سطح چهار این است که طراحان نشان ساده‌شده‌ی سطح سه را به جایگاه فاویکون می‌فرستند و امیدوارند کار کند. در ۱۶ پیکسل، هر چیزی که برای خوانده‌شدن به ۳۲ پیکسل نیاز داشت دیگر خوانا نیست. فاویکون به یک دور طراحی جداگانه نیاز دارد.
قواعد ساده‌سازی
کوچک‌کردن لوگو برای اندازه‌های کم تابع چهار قاعده است: خطوط مویی را حذف کنید، فاصله‌ی فضاهای داخلی را بیشتر کنید، منحنی‌ها را ساده کنید، و توده را بر خط دورِ توخالی ترجیح دهید. این‌ها سلیقه‌ی زیبایی‌شناختی نیستند. فیزیک خوانایی‌اند.
خطوط مویی را حذف کنید. هر خطی که در اندازهی هدف زیر ۱ پیکسل باشد یا اصلاً رندر نمی‌شود یا به‌صورت یک آرتیفکت نوری درمی‌آید. آن را حذف کنید یا به شکل پری با وزن نوری حداقل ۲ پیکسل در اندازهی هدف تبدیل کنید.
فاصله‌ی فضاهای داخلی را بیشتر کنید. فضای منفی درون حروف بسته در اندازه‌های کوچک بسته میشود. در نسخهی سادهشده آن را عمداً باز کنید وگرنه حروف پر می‌شوند و در لکه‌هایی ناخوانا یکی می‌شوند.
منحنی‌ها را ساده کنید. منحنی‌های بزیه با نقاط کنترل زیاد در اندازه‌های کوچک با آرتیفکت‌های ظریف گردشدگی رندر می‌شوند. نقاط کنترل را کم کنید. هرچه مسیر ساده‌تر باشد، رندر تیزتر است.
توده را بر خط دور ترجیح دهید. شکل توخالی در اندازه‌های کوچک به حلقه‌ای باریک تبدیل میشود. شکل پر در همان اندازه خوانا می‌ماند. هر جا برند اجازه میدهد، خطوط دور را برای سطوح سه و چهار به پر تبدیل کنید.
این قواعد در هر دو جهت کاربرد دارند: مشتق‌گیری از بزرگ به کوچک در طول سطوح پیش می‌رود، اما قواعد ساده‌سازی را باید برای ممیزی فایل‌های سطح یک و دو هم به کار برد تا مسیرهایی که اگر سیستم بدون تفکیک درست سطوح تحویل شود مشکل رندر ایجاد میکنند پیدا شوند.
قواعد لاکآپ
بزرگ‌کردن لوگو از قواعد دیگری پیروی میکند: وردمارک فضای تنفس بیشتری می‌گیرد، شعار اختیاری میشود، و هر پرداخت عکاسی یا بافتی باید جایگاهش را ثابت کند. منطق حاکم در مقیاس بزرگ اقتدار است، نه خوانایی.
در مقیاس بیلبورد، خوانایی محدودیت نیست. هیچ‌کس لوگوی روی ساختمان را از ده متری اشتباه نمی‌خواند. محدودیت حضور است. لوگوهایی که روی صفحه خوب به نظر می‌رسند ممکن است در قطع بزرگ ضعیف باشند، چون تناسب‌هایی که در ۲۰۰ پیکسل خوب خوانده می‌شوند در سه متر ترسو به نظر می‌رسند. تراکینگ وردمارک اغلب باید در مقیاس بزرگ باز شود، و رابطه‌ی نشان و وردمارک گاهی باید جابهجا شود.
مقصود ساختن سطح پنجم نیست. مقصود این است که به لاکآپ کامل هم حداقل و هم حداکثر مقیاس مورد نظر بدهید، با راهنمای صریح درباره‌ی اینکه وقتی از آن حداکثر فراتر می‌رود چه چیزی تغییر میکند.
هفت برندی که درستش کردند
Google، Mailchimp، Slack، Notion، Vercel، Linear و Stripe هرکدام نردبان لوگوی واکنشگرا را به شکلی متفاوت حل کرده‌اند و هرکدام ارزش مطالعه دارند.
Google این سیستم را از سر ضرورت ساخت. فاویکون G یک تقلیل هندسی کامل از منطق رنگی وردمارک کامل است. هیچ پیچیدگی حرفی ندارد، فقط تقسیم رنگی ربع‌ها و وزن تناسبی G. در ۱۶ پیکسل خوانا است چون برای ۱۶ پیکسل طراحی شده، نه اینکه کسی که تا جمعه آیکون لازم داشت آن را از وردمارک بیرون کشیده باشد.
Mailchimp از Freddie، ماسکوت شامپانزه‌اش، بهعنوان تقلیل سطح چهار استفاده میکند. آیکون Freddie یک برش از صورت است که بدن را حذف میکند، جزئیات کلاه را حذف میکند و فقط ویژگی‌هایی را نگه می‌دارد که در شبکه‌ی ۳۲ در ۳۲ خوانا هستند. وردمارک کامل Cavendish هرگز زیر سطح دو ظاهر نمی‌شود.
Slack نشانی را که در اندازه‌های کوچک شکست می‌خورد، یعنی ستاره‌ای با یازده رنگ، با یک شکل هندسی چهاررنگ و چهارتکه جایگزین کرد که از ۱۶ پیکسل تا بیلبورد تیز می‌ماند. این ساده‌سازی ظاهری نبود. ساختاری بود.
Notion از گلیف N بهعنوان آیکونی تک‌وزن و تمیز استفاده میکند که از آیکون اپ تا هدر چاپی در هر اندازهای کار میکند. وردمارک و نشان با فاصله‌ی فضایی کافی طراحی شده‌اند، به‌طوری که برش فقط به N هرگز ناقص به نظر نمی‌رسد.
Vercel مثلثی دارد که هندسه‌ی محض است: بدون خط، بدون جزئیات، بدون مشکل فضای داخلی. در اندازه‌های کوچک نمی‌شود خرابش کرد چون جزء شکستنی ندارد. وردمارک در هر سطح تمیز جدا میشود.
Linear از نشان L استفاده میکند، شکلی هندسی با تناسب‌های کمی غیرمعمول که در هر اندازهای بی‌درنگ متمایز است. بدون خط مویی، بدون فضای داخلی که بسته شود، بدون منحنی که بد ساده شود.
Stripe سیستم را متفاوت حل میکند: وردمارکش عملاً نشانش است. در اندازه‌های کوچک، S مثل یک گلیف مستقل با وزن کافی برای خوانایی روشن عمل میکند. موتیف راه‌راه در کاربردهای برند جدا از خود لوگو مقیاس می‌گیرد.
سه برندی که خرابش کردند
برخی برندهای بزرگ لوگوهایی تحویل می‌دهند که در اندازه‌های کوچک از هم می‌پاشد، و شکست‌ها تقریباً همیشه در سطح سه یا چهار است.
FedEx یکی از ستایش‌شده‌ترین لوگوهای تاریخ طراحی را دارد، و مشکل سیستم واکنشگرا دارد. پیکان فضای منفی میان E و X در مقیاس فاویکون کاملاً نامرئی است. آگاهی از برند آن‌قدر قوی است که یک وردمارک ساده‌ی «FedEx» در تب مرورگر فقط با شناخت کار میکند، اما سیستم لوگو بهعنوان یک ساختار رسمی زیر حدود ۸۰ پیکسل فرو می‌ریزد چون هیچ ساده‌سازی سطح سه یا چهاری از نشان نمی‌تواند پیکان را حفظ کند. آن جزئیات ستایش‌شده‌ی طراحی ویژگی‌ای مخصوص اندازهی بزرگ است و سیستم هرگز برای اینکه صادقانه این را بپذیرد ساخته نشد.
Citi یک نشان کمانی را کنار وردمارک اجرا میکند، و کمان آن‌قدر نازک است که در ۳۲ پیکسل و کمتر به خطی مویی تبدیل میشود که روی هر چیزی جز یک زمینهی خشک سفید ناپدید میشود. فاویکون آن‌ها از قدیم فقط وردمارک بوده، یعنی جایگاه سطح دو که در شکاف سطح چهار انداخته شده. برند با شناخته‌شدگی زنده است، نه با طراحی سیستم.
Hilton لاکآپ سپری با جزئیات تایپوگرافیک داخل سپر ارائه میدهد. زیر ۶۴ پیکسل، متن داخل سپر ناخوانا میشود. زیر ۳۲ پیکسل، سپر مثل شکلی بی‌تمایز خوانده میشود. هیچ نشان ساده‌شده‌ی منتشرشده‌ی معروفی نیست که تایپ داخلی را برای استفاده در مقیاس کوچک حذف کند، یعنی هر نقطه‌ی تماس دیجیتال کوچک نسخه‌ای تنزلیافته از لاکآپ کامل را اجرا میکند و اسمش را لوگو می‌گذارد.
الگو در هر سه یکی است: لوگو برای قطع‌های بزرگ طراحی شد، رفتار در مقیاس کوچک به عهده‌ی هرکسی گذاشته شد که آن را جایگذاری می‌کرد، و هیچ کار رسمی ساده‌سازی برای ساختن سطوح سه و چهار انجام نشد.
یک سیستم لوگو می‌خواهید که از بیلبورد تا فاویکون بدون مصالحه دوام بیاورد؟ Brainy را استخدام کنید تا سیستم لوگوی واکنش‌گرای شما را با هر چهار سطح، مجموعه‌قواعد ساده‌سازی و فهرست کامل فایل‌هایی که برنامه‌نویس‌ها و چاپخانه‌ها بدون پرسیدن سؤال تکمیلی می‌توانند تحویل بگیرند طراحی کند.
فهرست فایل‌هایی که هر سیستمی لازم دارد
یک سیستم لوگوی واکنش‌گرای کارآمد پانزده تا بیست فایل تحویل میدهد، نه سه تا، و فهرست زیر همان چیزی است که واقعاً باید تحویل دهید.
| # | فایل | فرمت | اندازه / کاربرد | نسخه‌های رنگی |
|---|---|---|---|---|
| 1 | لاکآپ کامل | SVG | چاپ، تابلو، هیرو (۲۰۰ پیکسل به بالا) | رنگی، معکوس، تکرنگ |
| 2 | لاکآپ کامل | تولید چاپی | رنگی، معکوس، تکرنگ | |
| 3 | لاکآپ کامل | PNG | حداقل ۲۰۰۰ پیکسل عرض | رنگی، معکوس، تکرنگ |
| 4 | نشان اصلی | SVG | UI دیجیتال، استفاده‌ی عمومی | رنگی، معکوس، تکرنگ |
| 5 | نشان اصلی | PNG | ۸۰۰ پیکسل عرض | رنگی، معکوس، تکرنگ |
| 6 | نشان اصلی | PNG | ۴۰۰ پیکسل عرض | رنگی، معکوس، تکرنگ |
| 7 | نشان اصلی | PNG | ۲۰۰ پیکسل عرض | رنگی، معکوس، تکرنگ |
| 8 | نشان سادهشده | SVG | اجزای UI در ۳۲ تا ۸۰ پیکسل | رنگی، معکوس، تکرنگ |
| 9 | نشان سادهشده | PNG | ۸۰ پیکسل | رنگی، معکوس، تکرنگ |
| 10 | نشان سادهشده | PNG | ۴۰ پیکسل | رنگی، معکوس، تکرنگ |
| 11 | فاویکون | ICO | چندسایزه 16x16، 32x32، 48x48 | — |
| 12 | فاویکون | PNG | 32x32 | رنگی |
| 13 | آیکون اپ | PNG | 1024x1024 (پلتفرم کوچک‌ترش میکند) | رنگی |
| 14 | آواتار شبکه‌های اجتماعی | PNG | 400x400 | رنگی |
| 15 | نشان تصویر OG | PNG | برای قالب‌های کارت اشتراک اجتماعی | رنگی |
این حداقل است. برای برندهایی که پالت رنگی برند تعریف‌شده دارند، هر SVG در همه‌ی ترکیب‌های رنگی تأییدشده تحویل میشود، نه فقط رنگ اصلی. برندی با دو حالت رنگی (روشن و تیره) تعداد را دوبرابر میکند. برندی که نسخهی فقط‌وردمارک دارد آن را جداگانه تحویل میدهد.
قرارداد نام‌گذاری فایل به اندازهی تعداد فایل مهم است. brand-logo-primary-color.svg فایلی است که برنامهنویس بدون سؤال میتواند جایش بگذارد. Logo Final v3.ai فایلی است که قبل از استفاده سه ایمیل و یک رشته‌ی Slack تولید میکند. فایل‌ها را تحویل دهید. واضح نام‌گذاری‌شان کنید. یک مشخصات یک‌صفحه‌ای بنویسید که حداقل اندازهها، قواعد فضای خالی و سه کاری را که اجازه ندارید با نشان بکنید مستند کند. آن مشخصات هسته‌ی هر سند دستورالعمل‌های هویت برند کارآمد است، و همان است که فهرست فایل‌ها را به یک سیستم واقعی تبدیل میکند.
قواعد کارگردانی هنری برای محرک‌های اندازه
اینکه یک سطح چه زمانی جای سطح دیگر را می‌گیرد تصمیم طراحی است، نه فکر دیرهنگام CSS، و سه نقطه‌ی شکست رایج ۶۴ پیکسل، ۳۲ پیکسل و ۱۶ پیکسل‌اند. در ۶۴ پیکسل، نشان اصلی با نشان سادهشده عوض میشود. در ۳۲ پیکسل، نشان سادهشده با فاویکون عوض میشود. در ۱۶ پیکسل فقط فاویکون رندر میشود و هر چیز پیچیده‌تر حذف شده است.
این‌ها آستانه‌اند، نه قانون سخت. نشانی با خوانایی قوی در اندازه‌های کوچک میتواند نشان اصلی را تا ۴۰ پیکسل نگه دارد. نشانی با جزئیات شکننده شاید باید در ۸۰ عوض شود. آستانه‌ها تصمیم‌های طراحی‌اند که باید کنار فهرست فایل‌ها در مشخصات مستند شوند، نه اینکه هنگام پیاده‌سازی به قضاوت برنامهنویس سپرده شوند.
پیاده‌سازی CSS سرراست است. تصمیم طراحی همان کار اصلی است.
چگونه لوگوی تک‌فایلی را ارتقا دهیم
اگر برندتان از قبل یک لوگو دارد، مسیر ارتقا این است که چهار سطح را تعریف کنید، هر سطح را از نشان موجود مشتق کنید و فهرست فایل‌ها را تحویل دهید. این ریبرندینگ نیست. ساختن یک سیستم روی نشانی است که از قبل وجود دارد.
با ممیزی نشان موجود در ۱۶ پیکسل، ۳۲ پیکسل، ۶۴ پیکسل و ۲۰۰ پیکسل شروع کنید. هر عنصری را که در هر گام شکست می‌خورد یادداشت کنید. آن فهرست شکست‌ها بریف نشان سادهشده و فاویکون است. نشان موجود میشود نشان اصلی و، با بازگرداندن شعار، لاکآپ کامل.
بیشتر لوگوهای تک‌فایلی همه‌ی مواد خام لازم برای ساختن سیستم را دارند. کار، جداسازی، ساده‌سازی و مستندسازی است، نه ابداع دوباره. یک طراح متمرکز میتواند هر چهار سطح را از یک نشان موجود در دو روز بسازد. نمونه‌های هویت برند را ببینید تا بفهمید قبل و بعد در سیستم‌های واقعی چه شکلی است.
مانع هرگز فنی نیست. آمادگی برای این است که لوگو را مسئله‌ی سیستم ببینید، نه مسئله‌ی یک فایل.
FAQ
طراحی لوگوی واکنشگرا چیست؟
طراحی لوگوی واکنشگرا یعنی ساختن لوگو بهعنوان یک سیستم چندسطحی که هر سطح برای یک بازهی اندازهی مشخص بهینه شده است. لاکآپ کامل در مقیاس بیلبورد کار میکند. فاویکون در ۱۶ پیکسل کار میکند. نشان سادهشده و نشان اصلی میانه را پر میکنند. جایگزین آن، یک فایل لوگوی واحد که در هر اندازهای استفاده میشود، در بیشتر اندازهها نتیجهی تنزلیافته میدهد.
یک برند واقعاً به چند نسخهی لوگو نیاز دارد؟
حداقل چهار سطح: لاکآپ کامل، نشان اصلی، نشان سادهشده، مونوگرام یا فاویکون. هر سطح در نسخهی رنگی، معکوس و تکرنگ تحویل میشود که دوازده فایل پایه میدهد. PNGهای مخصوص اندازه را اضافه کنید و مجموع برای یک سیستم کامل بین پانزده و بیست فایل میشود. این عدد بزرگ به نظر میرسد تا وقتی که برنامهنویس آیکون اپ بخواهد و شما لاکآپ چاپی را برایش بفرستید.
تفاوت لوگوی واکنشگرا و لوگوی تطبیقی چیست؟
یک مفهوماند که با واژههای متفاوت توصیف میشود. لوگوی واکنشگرا، لوگوی تطبیقی، سیستم لوگوی مقیاسپذیر: همه به لوگویی اشاره دارند که در چند سطح ساخته شده و بر اساس زمینهی اندازه جابهجا میشود. برخی طراحان «تطبیقی» را برای تأکید بر نیت طراحی به کار میبرند (هر سطح عمداً متفاوت است) در برابر «واکنشگرا» که میتواند رفتار خودکار CSS را تداعی کند. در عمل این دو اصطلاح قابلجایگزینیاند.
آیا برندهای کوچک به سیستم لوگوی واکنشگرا نیاز دارند؟
بله. یک برند کوچک در تب مرورگر، روی آیکون اپ موبایل، در آواتار شبکه‌های اجتماعی و روی کارت ویزیت ظاهر میشود. همین چهار بستر به‌تنهایی سه سطح از چهار سطح را لازم دارند. تنها بستری که لوگوی تک‌فایلی واقعاً در آن کافی است برندی است که هرگز در بیش از یک اندازه ظاهر نمی‌شود، که توصیف هیچ برند واقعی‌ای نیست.
نشان سادهشده چه زمانی باید جای نشان اصلی بیاید؟
زیر ۶۴ پیکسل، یا زودتر اگر نشان اصلی جزئیات ریزی دارد که شروع به بسته‌شدن یا محو شدن میکند. آستانه‌ی دقیق تصمیم طراحی است که هنگام ساخت سیستم گرفته میشود، بر پایه‌ی آزمودن نشان اصلی در اندازه‌های کاهنده تا اولین نقطه‌ی شکست خوانایی. آن آستانه به محرک مستند تعویض سطح تبدیل میشود، نه حدسی که به دست برنامهنویس سپرده شده باشد.
آیا مونوگرام میتواند فقط حرف اول وردمارک با فونت برند باشد؟
میتواند، و برای بسیاری از برندها انتخاب درستی است. محک این است که آن حرف، با آن فونت، در ۱۶ پیکسل بهطور متمایز خوانا و بهروشنی مرتبط با برند باشد. اگر بله، تحویلش بدهید. اگر شبیه مونوگرام چند برند دیگر است، بهجایش یک حرف سفارشی یا یک تقلیل هندسی را در نظر بگیرید.
آیا طراحی لوگوی واکنشگرا ریبرندینگ لازم دارد؟
نه. ساختن سیستم لازم دارد، که تمرین دیگری است. لوگوی موجود یکی از سطوح سیستم میشود و سطوح دیگر از آن مشتق می‌شوند. خود نشان تغییر نمی‌کند. خروجی از یک فایل به پانزده تا بیست فایل گسترش می‌یابد.
تغییری که لوگوهای واکنشگرا واقعاً ممکن میکنند
سیستم لوگوی واکنشگرا یک خروجی تحویلی نیست، یک مزیت رقابتی در هر اندازهی صفحه است، و برندهایی که این را درست انجام می‌دهند هویتشان را در مقیاس‌هایی که لوگوهای تک‌فایلی به آن‌ها نمی‌رسند دست‌نخورده نگه می‌دارند.
برندهایی که این را غلط انجام می‌دهند اشتباه طراحی نمی‌کنند. اشتباه سیستمی میکنند. یک نشان طراحی کردند، نه یک سیستم. یک فایل تحویل دادند، نه یک فهرست. لوگو را با ظاهرش در یک اندازه تعریف کردند و بقیه‌ی چیزها به تقریبی با بهترین تلاش تبدیل شد.
این تغییر قبل از اینکه عملی باشد مفهومی است. وقتی لوگو را بهعنوان سیستمی ببینید که از تب مرورگر ۱۶ پیکسلی تا بنر ساختمان امتداد دارد، نردبان چهارسطحی بدیهی میشود. قواعد ساده‌سازی از فیزیک رندر در مقیاس کوچک می‌آیند. فهرست فایل‌ها از بسترهایی می‌آید که برند واقعاً در آن‌ها حضور دارد.
سیستم را بسازید. فهرست را تحویل دهید. هر اندازهای که برند در آن ظاهر میشود به نتیجهی طراحی‌شده تبدیل میشود، نه مصالحه.
یک سیستم لوگو می‌خواهید که از بیلبورد تا فاویکون بدون مصالحه دوام بیاورد؟ Brainy را استخدام کنید تا سیستم لوگوی واکنش‌گرای شما را با هر چهار سطح، مجموعه‌قواعد ساده‌سازی و فهرست فایل‌هایی که برنامه‌نویس‌ها و چاپخانه‌ها بدون پرسیدن سؤال تکمیلی می‌توانند تحویل بگیرند طراحی کند.
Want a logo system that holds up from billboard to favicon without compromise? Brainy designs responsive logo systems with all four tiers, the simplification ruleset, and the file inventory developers and printers can ship without asking follow-up questions.
Get Started
