گرافیک و برندینگ

ریسپانسیو لوگو: طراحی لوگوی متغیر

انتخاب نسخه لوگو از کاربرد واقعی، حفظ هویت، اصلاح optical، حداقل اندازه و فضای امن، SVG و favicon و تحویل روشن بدون تعداد نسخه اجباری.

1404/12/10 1 دقیقه مطالعه 940 بازدید

اندازهٔ کاربرد، جزئیات قابل دیدن را عوض می‌کند

نشانه‌ای که روی جلد بزرگ خواناست، ممکن است در avatar کوچک فقط یک لکهٔ فشرده دیده شود. کم شدن اندازه، فاصله‌های داخلی و جزئیات متن را تحت تأثیر قرار می‌دهد. Responsive Logo مجموعه‌ای از نسخه‌های مرتبط برای کاربردهای متفاوت است. هدف، حفظ تشخیص برند در محدودهٔ واقعی استفاده است. این کار با کوچک کردن یک فایل وکتور به هر اندازه یکسان نیست؛ مسیر وکتور مقیاس می‌گیرد، اما همهٔ جزئیاتش در هر اندازه قابل تشخیص نمی‌مانند.

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

ابتدا فهرست کاربردها را بنویسید

هدر سایت، کارت ویزیت، بسته‌بندی، avatar و favicon زمینهٔ یکسان ندارند. هر کدام شکل محدوده، اندازهٔ دیداری و رنگ زمینهٔ متفاوتی دارند. برای هر کاربرد بنویسید چه چیزی باید شناخته شود: نام کامل، نشانه یا ترکیب هر دو. اگر برند تازه است، نمایش نشانهٔ تنها شاید برای مخاطب کافی نباشد. تصمیم نسخه باید با میزان آشنایی و نیاز کاربرد هماهنگ باشد. زیبایی یک نماد کوچک، دلیل کافی برای حذف نام در تمام موقعیت‌ها نیست.

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

هویت مشترک باید قابل تشخیص بماند

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

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

نسخهٔ کوچک نیاز به اصلاح optical دارد

خط باریک، فضای منفی تنگ و گوشهٔ پیچیده در اندازهٔ کم می‌توانند ناپدید یا بسته شوند. ممکن است ضخامت، فاصله و بعضی جزئیات نیاز به اصلاح داشته باشند. این اصلاح نباید با حدس دربارهٔ یک اندازهٔ جهانی انجام شود؛ اندازهٔ کاربردی را مشخص کنید. مقالهٔ اصول طراحی آیکون دربارهٔ grid و optical balance توضیح می‌دهد. ساختار یک لوگو و آیکون کاملاً یکسان نیست، ولی محدودیت تشخیص جزئیات در اندازهٔ کوچک، مسئلهٔ مشترکی است.

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

حداقل اندازه را برای هر نسخه جدا ثبت کنید

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

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

نسخهٔ رنگ و نسخهٔ اندازه دو محور متفاوت‌اند

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

رنگ نباید تنها عامل شناخت نسخه باشد. فرم تک‌رنگ را هم بررسی کنید و محدودیت چاپ تک‌رنگ را در کاربرد مربوط ثبت کنید. رنگ چاپ و نمایشگر ممکن است رفتار متفاوت داشته باشند؛ مقالهٔ CMYK و RGB این زمینه را توضیح می‌دهد. همچنین سایه، gradient و texture می‌توانند در اندازهٔ کوچک یا چاپ محدود اطلاعات را تغییر دهند. هویت باید نسخهٔ مناسب آن زمینه را داشته باشد، نه اینکه همهٔ effectها در همهٔ فایل‌ها اجباری بمانند.

SVG اندازه‌پذیر است، ولی تصمیم طراحی را نمی‌گیرد

SVG محدودهٔ viewBox و مختصات مسیر را نگه می‌دارد و می‌تواند در اندازه‌های مختلف نمایش داده شود. مرجع viewBox این رفتار را بیان می‌کند. مقیاس‌پذیری فنی به معنی ساده شدن خودکار جزئیات نیست. اگر نسخهٔ compact مسیر متفاوت دارد، باید به صورت دارایی یا قرارداد جدا تهیه شود. Browser نمی‌داند کدام جزء نام برند را در اندازهٔ کوچک حذف کند.

خروجی تمیز باید محدودهٔ مناسب و elementهای لازم داشته باشد. Object دورافتاده یا فضای خالی نامشخص می‌تواند alignment را خراب کند. اگر متن زنده در SVG باقی مانده، فونت و رفتار مقصد باید روشن باشد. اگر متن به مسیر تبدیل شده، معنی متنی برای کاربرد رابط باید جدا حفظ شود. مقالهٔ Illustrator و خروجی لوگو دربارهٔ این تصمیم‌ها توضیح می‌دهد. Format وکتور، قرارداد accessibility یا شناخت نام را به تنهایی ایجاد نمی‌کند.

Favicon یک کاربرد خاص است

Favicon با هدر و avatar یکسان نیست. فضای کوچک، شکل ساده و تشخیص در کنار آیکون‌های دیگر مهم است. نیاز فنی browser یا موتور جست‌وجو هم باید از مرجع مقصد خوانده شود. راهنمای favicon در Google Search شرایط نمایش در نتیجهٔ جست‌وجو را توضیح می‌دهد. رعایت فایل مناسب هم نمایش قطعی در همهٔ نتیجه‌ها را تضمین نمی‌کند. عدد ۱۶ پیکسل را به عنوان تنها اندازهٔ لازم همهٔ مقصدها معرفی نکنید.

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

لوگوی لینک‌شده باید مقصد را هم بیان کند

لوگویی که در هدر لینک صفحهٔ اصلی است، یک تصویر صرفاً تزئینی نیست. نام یا توضیح مناسب باید نقش آن را برای فناوری کمکی روشن کند. راهنمای Functional Images در W3C این تفاوت را بیان می‌کند. تغییر نسخهٔ ظاهری نباید نام دسترس‌پذیر را بی‌دلیل حذف کند. همچنین اندازهٔ تصویر با سطح قابل کلیک لینک یکسان نیست؛ رفتار control باید در پیاده‌سازی حفظ شود.

در RTL، آینه کردن خودکار نشانه معمولاً تصمیم امنی نیست. جهت navigation ممکن است عوض شود، اما هویت برند قرارداد خودش را دارد. نوشتهٔ Logical Properties نشان می‌دهد تغییر جهت layout همهٔ دارایی‌ها را بازطراحی نمی‌کند. اگر هویت واقعاً نسخهٔ زبانی متفاوت دارد، آن را با نام و روش مصرف صریح تحویل دهید. تشخیص نسخه نباید به حدس توسعه‌دهنده از عرض یا زبان وابسته بماند.

قواعد انتخاب نسخه را به مصرف‌کننده بدهید

برای هر کاربرد مشخص کنید کدام ترکیب، چه رنگ و چه محدوده‌ای مناسب است. Breakpointهای سایت از layout واقعی می‌آیند و لازم نیست دقیقاً با نام‌های full، medium و small برابر شوند. در چاپ هم عرض محدود یک محل استفاده ممکن است نسخهٔ دیگری بخواهد. فایل‌ها و guideline باید همین تصمیم را قابل اجرا کنند. Responsive Logo زمانی مفید است که نسخه‌ها هویت مشترک و قرارداد استفادهٔ روشن داشته باشند؛ تعداد فایل‌های بیشتر به تنهایی حرفه‌ای بودن مجموعه را نشان نمی‌دهد.

واکنش به این مقاله

اشتراک‌گذاری این مقاله:
دیدگاه‌ها 0
۰ / ۲۰۰۰

هنوز دیدگاهی ثبت نشده

اولین نفری باشید که نظر می‌دهد!