Skip to content

برند و هویت بصری

هویت بصری یک سیستم است، نه فقط یک لوگو

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

تحریریهٔ Enough Studio5 دقیقه مطالعه
هویت بصری یک سیستم است، نه فقط یک لوگو — تصویرسازی اختصاصی از ساختار رابط
تصویرسازی و نمونهٔ تعاملی اختصاصی؛ اجزای نمایشی، محصول واقعی نیستند.

این مقاله با کمک هوش مصنوعی تهیه شده است. نمونه‌های UI اختصاصی و فرضی‌اند؛ نتیجهٔ تست کاربری یا عملکرد مشتری ادعا نمی‌شود.

تصمیم بعدی را هم طراحی کنیم

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

یک آزمون کاربردی این است: فرمتی بدهید که در ارائهٔ اولیه نبوده. آیا فرد می‌تواند بدون کپی‌کردن یک چیدمان قبلی، خروجیِ هم‌خانواده بسازد؟ اگر تنها راهنما «لوگو را بزرگ‌تر کن» باشد، شاید مجموعه‌ای از کاربردها ساخته‌ایم، نه یک سیستم قابل استفاده.

چه چیزی ثابت می‌ماند و چه چیزی تغییر می‌کند؟

برای یک برند فرضیِ یادگیری، می‌توانیم لوگوتایپ فشرده، سلسله‌مراتب قویِ متن، ریتم فاصله‌گذاری و یک قاب متمایز را ثابت نگه داریم. رنگ تأکیدی و مقیاس تصویر هم می‌توانند بر اساس موضوع تغییر کنند. این‌ها قواعد پیشنهادیِ نمونهٔ مقاله‌اند، نه گایدلاین یک برند مشتری.

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

برای رنگ، نقش تعریف کنیم

پالت به‌تنهایی توضیح نمی‌دهد رنگ چطور باید رفتار کند. نقش‌هایی مثل پس‌زمینه، متن، اقدام اصلی، تأکید و خطا را مشخص کنید. بعد بگویید کدام نقش در تم یا کمپین تغییر می‌کند. مستندات رنگ Carbon میان توکنِ مبتنی بر نقش و مقداری که تم به آن می‌دهد تفاوت می‌گذارد. [1] این تفاوت فراتر از یک کتابخانهٔ کامپوننت هم کاربرد دارد.

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

ایده در تصویرنمونهٔ مفهومی
لوگو بدون قواعد مشترک: هر قالب، رنگ و ترکیب‌بندی و سلسله‌مراتب متفاوتی دارد. / یک سیستم هویت منسجم: قواعد مشترک رنگ، تایپ، نشانه و چیدمان در وب، اپ و چاپ.
سمت چپ

لوگو بدون قواعد مشترک

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

سمت راست

یک سیستم هویت منسجم

قواعد مشترک رنگ، تایپ، نشانه و چیدمان در وب، اپ و چاپ.

تصویرسازی با کمک AI برای توضیح ایدهٔ مقاله؛ رابط محصول واقعی یا نتیجهٔ تست کاربری نیست. نمونهٔ قابل امتحان در ادامه آمده است.

یک سیستم هویت کوچک

کنترل‌ها را امتحان کنید. این نمونهٔ تعاملی با دادهٔ فرضی، فقط داخل مرورگر کار می‌کند.

WEBآموزش را از نو ببینرنگ تأکیدی مشترک، سلسله‌مراتب مشترک، قالب متفاوت.
APPمسیر یادگیری تورنگ تأکیدی مشترک، سلسله‌مراتب مشترک، قالب متفاوت.
PRINTفضای رشدرنگ تأکیدی مشترک، سلسله‌مراتب مشترک، قالب متفاوت.

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

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

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

تصویر و حرکت باید کاری انجام دهند

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

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

سیستمی بسازیم که دیگران هم بتوانند اداره‌اش کنند

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

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

سیستم را بیرون از منطقهٔ امن امتحان کنیم

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

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

منابع و یادداشت‌های تحریریه

  1. IBM Carbon — Color overview
  2. GOV.UK — Government Design Principles

منابع در ۲۲ اکتبر ۲۰۲۶ بررسی شدند. پیشنهادهای اجرایی و نمونه‌های این مقاله، تفسیر تحریریه‌اند؛ تأیید یا همکاری صاحبان منابع با ما را القا نمی‌کنند.

برای طراحی یک تجربهٔ روشن‌تر، از مسئلهٔ واقعی شروع کنیم.

دربارهٔ پروژه صحبت کنیم