سلام 🙂↕️من اومدم بهتون یه چیزی که اون اوایل همیشه باهاش درگیر بودم رو اینجا باهاتون به اشتراک بذارم.
اگر همیشه براتون سوال بوده که هر کجای یک سایت چی به چیه و چه اسمی داره، این پست مخصوص خودته و تا آخر بخونش😉👇
اگر همیشه براتون سوال بوده که هر کجای یک سایت چی به چیه و چه اسمی داره، این پست مخصوص خودته و تا آخر بخونش😉👇
🌐 آناتومی یک وب‌سایت از صفر تا صد:
✶ Logo (لوگو):
پلاک و هویت اصلی سایت که معمولاً بالا خودنمایی می‌کنه تا بفهمیم تو سایتِ چه کسی هستیم.
✶ Header / Main Menu (هدر و منوی اصلی):
زمانی که شما وارد یک وب سایت می شید، اولین چیزی که می‌بینید، هدر سایته. به همین دلیل نحوه چیدمان این قسمت ، اهمیت زیادی داره.
هدر سایت باید شامل موارد زیر باشه:
•لوگوی سایت
•منوی خدمات و یا محصولات سایت
•دکمه های ضروری مانند سبد خرید، آیکون شبکه های اجتماعی، تماس با ما، آیکون جستجو و… است.
✶ Upper Navigation (منوی ثانویه):
لینک‌های کوچیک‌تر و فرعی که معمولاً بالای منوی اصلی قرار دارن (مثل اطلاعات تماس یا دسترسی‌های سریع).
✶ Hamburger / Mobile Menu (منوی همبرگری):
منوی همبرگری (☰)برای طراحی‌های موبایل یا مینیمالیستی محبوب هستن چون هدرها رو تمیز نگه می‌داره و هنگام کلیک، لینک‌های بیشتری رو نشون میده.🤓
✶Drop Down Menu (منوی آبشاری):
منویی که وقتی موس رو میبری روش، مثل آبشار گزینه‌هاش باز میشه و کلی زیرمجموعه جلوت سبز میشه.
✶ Hero Section (بخش قهرمان!):
همون بنر بزرگِ اول صفحه که با یک عکس پس‌زمینه خفن، شعار اصلی کسب‌وکار و یک دکمه جذاب، حسابی خودنمایی می‌کنه.
✶ Button / CTA (دکمه دعوت به اقدام):
همون دکمه‌های وسوسه‌کننده‌ای مثل «دریافت مشاوره» یا «خرید کن» که کاربر رو ترغیب به کلیک کردن می‌کنه.
✶ Section (بخش):
هر بلوک مستطیلی و جداگانه تو صفحه که یک بخش کامل از خدمات، ویژگی‌ها یا مطالب سایت رو تو خودش جا داده.
✶ Footer (فوتر / پانویس):
تهِ تهِ سایت! جایی که اطلاعات تماس، آدرس، ساعت کاری و کلی لینک‌های قانونی و مهم رو اونجا میذارن.
✶ Link (لینک):
کلمات یا گزینه‌هایی که تا روشون می‌کنی کلیک، پرتت می‌کنن به یک صفحه دیگه!
✶Breadcrumbs (بردکرامب / مسیر راهنما):
اون لینک‌های کوچیکی که معمولاً بالای صفحه محصولات یا مقالات هستن (مثلاً: خانه > فروشگاه > دیجیتال > گوشی). به کاربر می‌گن الان دقیقا کجای درختِ ساختار سایت قرار داره و به راحتی می‌تونه برگرده عقب.
✶ Sidebar (سایدبار / نوار کناری):
ستون عمودی که سمت راست یا چپ صفحات (مخصوصاً بلاگ‌ها یا فروشگاه‌ها) قرار می‌گیره و توش فیلتر محصولات، دسته‌بندی‌ها، مقالات محبوب یا بنرهای تبلیغاتی رو میذارن.
✶Pop-up / Modal (پاپ‌آپ یا مودال):
همون پنجره‌های خوشگلی که ناگهان وسط صفحه می‌پرن رو هوا! معمولاً برای خبرنامه، تخفیف‌های ویژه، یا اخطارهای مهم استفاده میشن.
✶ Floating Button / Back to Top (دکمه‌های شناور):
دکمه‌هایی که به صفحه «چسبیدن» و با اسکرول کردن کاربر بالا و پایین نمیرن؛ مثل همون دکمه معروفِ فلش رو به بالا (برای برگشتن سریع به بالای صفحه) یا دکمه چت آنلاین و پشتیبانی.
✶ Pagination (صفحه‌بندی):
توی لیست‌های طولانی (مثل محصولات فروشگاه یا مقالات)، اون شماره صفحات (۱، ۲، ۳...) یا دکمه «بارگذاری بیشتر» که ته صفحه میذارن تا مطالب قطره‌چکانی و مرتب لود بشن.
✶Cookie Banner (بنر کوکی):
اون نوار یا کادری که معمولاً پایین صفحه ظاهر میشه و به کاربر اطلاع میده که این سایت از کوکی‌ها استفاده می‌کنه (تو سایت‌های بین‌المللی خیلی واجبه).
✶ Logo (لوگو):
پلاک و هویت اصلی سایت که معمولاً بالا خودنمایی می‌کنه تا بفهمیم تو سایتِ چه کسی هستیم.
✶ Header / Main Menu (هدر و منوی اصلی):
زمانی که شما وارد یک وب سایت می شید، اولین چیزی که می‌بینید، هدر سایته. به همین دلیل نحوه چیدمان این قسمت ، اهمیت زیادی داره.
هدر سایت باید شامل موارد زیر باشه:
•لوگوی سایت
•منوی خدمات و یا محصولات سایت
•دکمه های ضروری مانند سبد خرید، آیکون شبکه های اجتماعی، تماس با ما، آیکون جستجو و… است.
✶ Upper Navigation (منوی ثانویه):
لینک‌های کوچیک‌تر و فرعی که معمولاً بالای منوی اصلی قرار دارن (مثل اطلاعات تماس یا دسترسی‌های سریع).
✶ Hamburger / Mobile Menu (منوی همبرگری):
منوی همبرگری (☰)برای طراحی‌های موبایل یا مینیمالیستی محبوب هستن چون هدرها رو تمیز نگه می‌داره و هنگام کلیک، لینک‌های بیشتری رو نشون میده.🤓
✶Drop Down Menu (منوی آبشاری):
منویی که وقتی موس رو میبری روش، مثل آبشار گزینه‌هاش باز میشه و کلی زیرمجموعه جلوت سبز میشه.
✶ Hero Section (بخش قهرمان!):
همون بنر بزرگِ اول صفحه که با یک عکس پس‌زمینه خفن، شعار اصلی کسب‌وکار و یک دکمه جذاب، حسابی خودنمایی می‌کنه.
✶ Button / CTA (دکمه دعوت به اقدام):
همون دکمه‌های وسوسه‌کننده‌ای مثل «دریافت مشاوره» یا «خرید کن» که کاربر رو ترغیب به کلیک کردن می‌کنه.
✶ Section (بخش):
هر بلوک مستطیلی و جداگانه تو صفحه که یک بخش کامل از خدمات، ویژگی‌ها یا مطالب سایت رو تو خودش جا داده.
✶ Footer (فوتر / پانویس):
تهِ تهِ سایت! جایی که اطلاعات تماس، آدرس، ساعت کاری و کلی لینک‌های قانونی و مهم رو اونجا میذارن.
✶ Link (لینک):
کلمات یا گزینه‌هایی که تا روشون می‌کنی کلیک، پرتت می‌کنن به یک صفحه دیگه!
✶Breadcrumbs (بردکرامب / مسیر راهنما):
اون لینک‌های کوچیکی که معمولاً بالای صفحه محصولات یا مقالات هستن (مثلاً: خانه > فروشگاه > دیجیتال > گوشی). به کاربر می‌گن الان دقیقا کجای درختِ ساختار سایت قرار داره و به راحتی می‌تونه برگرده عقب.
✶ Sidebar (سایدبار / نوار کناری):
ستون عمودی که سمت راست یا چپ صفحات (مخصوصاً بلاگ‌ها یا فروشگاه‌ها) قرار می‌گیره و توش فیلتر محصولات، دسته‌بندی‌ها، مقالات محبوب یا بنرهای تبلیغاتی رو میذارن.
✶Pop-up / Modal (پاپ‌آپ یا مودال):
همون پنجره‌های خوشگلی که ناگهان وسط صفحه می‌پرن رو هوا! معمولاً برای خبرنامه، تخفیف‌های ویژه، یا اخطارهای مهم استفاده میشن.
✶ Floating Button / Back to Top (دکمه‌های شناور):
دکمه‌هایی که به صفحه «چسبیدن» و با اسکرول کردن کاربر بالا و پایین نمیرن؛ مثل همون دکمه معروفِ فلش رو به بالا (برای برگشتن سریع به بالای صفحه) یا دکمه چت آنلاین و پشتیبانی.
✶ Pagination (صفحه‌بندی):
توی لیست‌های طولانی (مثل محصولات فروشگاه یا مقالات)، اون شماره صفحات (۱، ۲، ۳...) یا دکمه «بارگذاری بیشتر» که ته صفحه میذارن تا مطالب قطره‌چکانی و مرتب لود بشن.
✶Cookie Banner (بنر کوکی):
اون نوار یا کادری که معمولاً پایین صفحه ظاهر میشه و به کاربر اطلاع میده که این سایت از کوکی‌ها استفاده می‌کنه (تو سایت‌های بین‌المللی خیلی واجبه).
🔥6❤2
✦برای اینکه هدر موبایلِ سایت‌تون تمیز و کارآمد بمونه، این چند تا نکته رو رعایت کنید:
★از «منوی همبرگری» استفاده کنید:
این آیکون (☰) به شما کمک می‌کنه تا گزینه‌های منوی اصلی را به‌طور منسجم و مرتب در فضایی کوچک جا بدید.
←فقط حواستون باشه که موقعیتش توی “ناحیۀ دسترسی انگشت شست” (Thumb Zone) باشه تا کاربر راحت بتونه روش کلیک کنه و انیمیشن باز شدنش هم از لحاظ بصری، نرم و استاندارد باشه.
★لوگو رو کوچک ولی واضح نگه دار:
لوگو باید هم تو چشم و خوانا باشه، هم قابل کلیک کردن که کاربر هر موقع خواست بره صفحه اصلی.
★فقط روی یک «دعوت به اقدام» (CTA) تمرکز کن:
زیاده‌روی نکنید؛ فقط یک موردِ کلیدی، مثلاً «تماس فوری»، «رزرو» یا آیکون سبد خرید کافیه! بقیه رو توی همون منوی همبرگری قرار بدید.
★از هر سانتی‌متر فضا درست استفاده کنید:
اضافات رو بریزید دور! آیکون‌های شبکه‌های اجتماعی، لینک‌های فرعی یا کادر جستجو، جاشون توی هدرِ اصلی نیست؛ اون‌ها رو بفرستید داخل همون منوی همبرگری تا هدر خلوت بمونه.
★از «منوی همبرگری» استفاده کنید:
این آیکون (☰) به شما کمک می‌کنه تا گزینه‌های منوی اصلی را به‌طور منسجم و مرتب در فضایی کوچک جا بدید.
←فقط حواستون باشه که موقعیتش توی “ناحیۀ دسترسی انگشت شست” (Thumb Zone) باشه تا کاربر راحت بتونه روش کلیک کنه و انیمیشن باز شدنش هم از لحاظ بصری، نرم و استاندارد باشه.
★لوگو رو کوچک ولی واضح نگه دار:
لوگو باید هم تو چشم و خوانا باشه، هم قابل کلیک کردن که کاربر هر موقع خواست بره صفحه اصلی.
★فقط روی یک «دعوت به اقدام» (CTA) تمرکز کن:
زیاده‌روی نکنید؛ فقط یک موردِ کلیدی، مثلاً «تماس فوری»، «رزرو» یا آیکون سبد خرید کافیه! بقیه رو توی همون منوی همبرگری قرار بدید.
★از هر سانتی‌متر فضا درست استفاده کنید:
اضافات رو بریزید دور! آیکون‌های شبکه‌های اجتماعی، لینک‌های فرعی یا کادر جستجو، جاشون توی هدرِ اصلی نیست؛ اون‌ها رو بفرستید داخل همون منوی همبرگری تا هدر خلوت بمونه.
❤5
✦نکته :
حتماً لینکِ صفحه اصلی (Home) رو روی لوگو بذارید، چون این یکی از عادت‌های قدیمیِ همه کاربرهاست. همچنین، هدر رو «استیکی» (Sticky) کنید تا وقتی کاربر داره صفحه رو اسکرول می‌کنه و می‌ره پایین، هدر همیشه اون بالا در دسترسش بمونه.
حتماً لینکِ صفحه اصلی (Home) رو روی لوگو بذارید، چون این یکی از عادت‌های قدیمیِ همه کاربرهاست. همچنین، هدر رو «استیکی» (Sticky) کنید تا وقتی کاربر داره صفحه رو اسکرول می‌کنه و می‌ره پایین، هدر همیشه اون بالا در دسترسش بمونه.
❤6