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

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

در این ویدئو چه چیزهایی یاد می‌گیرید؟

بارگذاری لوگوی اصلی، لوگوی نسخه موبایل و لوگوی حالت تاریک

انتخاب فونت فارسی مناسب و تنظیم اندازه فونت‌ها

تعیین رنگ اصلی، رنگ ثانویه، رنگ پس‌زمینه و رنگ متن

طراحی دکمه‌ها شامل رنگ، گوشه‌ها، حاشیه و حالت هاور

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

ساخت ظاهر هماهنگ برای کل سایت با چند کلیک

چرا تنظیم هویت بصری اهمیت زیادی دارد؟

ظاهر سایت از همان ابتدا یکپارچه و حرفه‌ای می‌شود

هیچ بخشی به‌صورت تصادفی یا ناهماهنگ ظاهر نمی‌شود

تجربه کاربری روان‌تر و خواناتر ایجاد می‌شود

در طراحی صفحه اصلی سرعت کار چند برابر می‌شود

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

کمک بزرگ به سئو از طریق استانداردسازی ساختار بصری

نکات کلیدی که در این قسمت توضیح داده شد

لوگو را در دو نسخه روشن و تیره آپلود کنید تا در نسخه Dark Mode به‌درستی نمایش داده شود.

در انتخاب فونت، خوانایی در موبایل بسیار مهم است؛ بهتر است اندازه پایه فونت را بین 15 تا 17 پیکسل تنظیم کنید.

رنگ اصلی (Primary Color) باید با هویت برند هماهنگ باشد؛ این رنگ در دکمه‌ها و لینک‌ها به‌صورت گسترده استفاده می‌شود.

اگر می‌خواهید ظاهر مدرن‌تری بسازید، رنگ ثانویه را کمی ملایم‌تر انتخاب کنید.

بخش دکمه‌ها یکی از عناصر مهم UX است؛ بهتر است برای هاور دکمه یک تغییر ظریف ایجاد کنید تا حس تعامل بهتر شود.

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

بعد از این تنظیمات چه کار کنید؟

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

نسخه موبایل سایت را بررسی کنید

وارد المنتور شوید و مطمئن شوید المان‌ها با استایل جدید مطابقت دارند

حالا آماده‌اید طراحی صفحه اصلی را شروع کنید (از قسمت 9 به بعد)