https://virgool.io/feed/@AdelonMedia به مرکز ایده و الهام گرفتن خوش آمدید. اینجا ادلون است، نمایشگاه آنلاین طرح‌های گرافیکی! fa 2026-06-19 14:46:08 https://files.virgool.io/upload/users/688599/avatar/52rtRP.jpeg?height=120&width=120 https://virgool.io/@AdelonMedia https://virgool.io/@AdelonMedia/review-header-filimo-sodnfv2p0wqo قسمت اول: ساختارفکر میکنم ساده ترین هدر در سرزمین ادلون، همین هدر فیلیمو هست. البته این border زرد رنگ رو بالای هد گذاشتن تا زیادی هم ساده نباشه!فیلیمو به دلیل رسته کاریش که پخش فیلم هست، بیشترین تمرکزش را بر روی تصاویر و کارت‌های جذاب گذاشته تا هدر و فکر میکنم اینجوری با مخاطبانش ارتباط برقرار می‌کنه.اگه بخواهیم ساختار فیلیمو رو بررسی کنیم:با یک هدر تک ردیفه روبرو هستیم. که از سمت راست بخواهیم امان‌هایش را نام ببریم، یک لوگو png، منو، یک سرچ باکس، دکمه کال تو اکشن (دکمه فیلیمو مدرسه)، یک فضای بسیار خالی و آیکون پروفایل کاربری که اگر در این سیستم لاگین باشیم و هنگامی که روی این آیکون hover می‌کنیم )روی آن می‌ایستیم( یک سری موارد کاربردی و جالب به صورت منو ظاهر می‌شود.لوگو:لوگو فیلیمو یک فایل png است که می‌توانست برای بالابردن کیفیت از svg استفاده کند. البته همین لوگویی که استفاده کرده هم بی کیفیت نیست و از کیفیت مناسبی برخوردار است.دکمه سرچ:یک دکمه خیلی ساده برای زمانی که چیزی پیدا نکردیم همیشه مورد نیاز هست و فیلیمو هم این دکمه را درون خودش تعبیه کرده؛هنگام کلیک کردن روی این دکمه یک مودال تمام صفحه با ترنزیشن جذاب باز میشه که تمام چیزهای دیگر روی صفحه را می‌پوشاند تا کاربر چشمش به موارد دیگه خیره نشود و با تمرکز کلیدواژه‌ای را که به آن فکر می‌کند را برای جستجو وارد کند.تنها مورد اضافیی که در صفحه‌ی بازشده قابل مشاهده است جستجوهای اخیر کاربران هست و دیگر هیچ! که به نظر من این مورد الزامیست.دکمه CTA فیلیمو مدرسه:این دکمه call to action مارا به مجموعه‌ای دیگر از فیلیمو راهنمایی می‌کند که در روزهای کرونایی و بدون کلاس درس حضوری خیلی هم پرطرفدار شده.دکمه پروفایل کاربر / ورود به سایت:برای افرادی که وارد فیلیمو نشدند و میهمان هستند دکمه‌ی ورود به سایت نمایش داده می‌شود ولی برای افرادی که وارد شدند پروفایل کاربری را نشان می‌دهد که با ایستادن روی این دکمه یک منو زیر آن ایجاد می‌شود که موارد زیر را شامل می‌شود:۱- مقدار زمان باقی مانده از عضویت و تمدید۲- مشخصات کاربری و تغییر آن۳- انتخاب زمینه که می‌توان darkmod و یا lightmod را انتخاب کنید و برای همیشه ذخیره شود برایتان.۴- فیلم و سریال های قبلا دیده شده۵- قفل کودک۶- خرید اشتراک۷- سوابق پرداخت۸- خروجقسمت دوم: واکنشدر حالت لپتاپ:هنگامی که اسکرول می‌کنیم فقط نوار زرد رنگ بالای هدر محو می‌شود و هدر همیشه بالای صفحه به صورت fix باقی میماند.در حالت تبلت:هنگامی که با شبیه ساز آیپد این سایت رو بررسی کردیم موضوع کمی متفاوت تر بوده و تغییراتی داشته همچون دو ردیفه شدن ساختار هدر؛درحالت موبایل:در حالت موبایل به دلیل تشخیص درست این سایت از نوع مرورگر و دستگاه، بالای هدر یک پیشنهاد برای نصب وب اپلیکیشن برای دستگاه‌های آیفون و آیپد و نصب اپلیکیشن اندروید پیشنهاد می‌شود.قسمت سوم: سخن آخرفیلیمو از فونت ایران سنس استفاده کرده و از رنگ‌های سفید و مشکی (#۱۵۱۵۱۵) و نارنجی و زرد به عنوان رنگ‌های اصلی برندش همه‌جا استفاده کرده؛خیلی سرعت لود بالایی داره بر روی سرورهای ایران گرچه کلی فیلم درون این سایت وجود دارد و این نکته قابل ملاحضه این سایت است.فیلیمو کاملا ساده طراحی شده و در عین سادگی خیلی خوب و کاربردی طراحی شده و اگه کسی چیزی رو در فیلیمو بخواد به راحتی میتونه پیدا کنه! https://www.aparat.com/v/VNsCk Adelo | ادلون Adelo | ادلون Fri, 12 Mar 2021 23:38:11 +0330 https://virgool.io/@AdelonMedia/review-header-vitrin-net-b2ay6n8p0yp3 قسمت اول:ساختارهدر این سایت از چهار ردیف ساخته شده که:ردیف اول: در این ردیف یک تبلیغ گذاشته که کل صفحه رو پوشونده.ردیف دوم: محصولات پرفروش وبسایت در این ردیف گذاشته شده که با owl-slider ساخته شده و قابل اسکرول کردن هست این ردیفردیف سوم: شامل لوگو، سرچ باکس، فضای خالی، یک دکمه ورود و دکمه سبد خرید میشهردیف چهارم: از یک مگامنو خیلی ساده و جمع و جور استفاده کردهپرفروش‌ترین محصولات:از یک اسلایدر استفاده شده و لیستی از محصولات رو به صورت اسلاید برای مشتری لیست کرده که البته این مورد فقط در صفحه‌ی نخست قابل نمایش هست.به نظر ما اگه پس زمینه خاکستری با سفید جابجا بشه خیلی بهتر هست که توی ویدیو نسخه اصلی یه نسخه خیلی زیبا رو طراحی کردیم و به نمایش گذاشتیم.لوگو:یک لوگوتایپ فارسی و علامت VN مفهومی که آیکون و خیلی از چیزهای این سایت رو از قبیل اسم محصولات، استایل فونت و… را باهاش نامگذاری کردن. نکته‌ای که داره این هست که لوگو تماماً SVG هست و دچار افت کیفیت نمیشه!سرچ باکس:وقتی روی سرچ باکس کلیک میشه یک باکس نسبتاً بزرگ با یک ترنزیشن خوب باز میشه و صفحه اصلی وب سایت خیلی تیره‌تر میشه تا کاربر بتونه تمرکز بهتری روی جستجوی خودش داشته باشه.در این سرچ باکس فقط جستجوهای اخیر پراستفاده رو لحاظ کردن و حتی سابقه سرچ کاربران نادیده گرفته شده.البته موارد زیبایی در این باکس تماماً رعایت شده است و مورد آزاردهنده خاصی در آن وجود ندارد.در سرچ باکس از ایجکس استفاده شده و در لحظه هر کلمه‌ای را شما وارد کنید موتور جستجوی فروشگاه بزرگ اینترنتی سعی می‌کند تا بهترین دسته مربوط به چیزی که سرچ کردین و بهترین اقلامی که ممکن است به کارتون بیاد رو نشونتون میده.اما یه تفاوت جالب داره اون هم اینه که، قیمت رو در کنار موارد جستجویی نشان میده و مخاطب دیگه نیاز به ورود نداره که خیلی جالب بود از نظر من.مگامنو:یک مگامنو ساده و بامفهوم استفاده شده در این قسمت از وب‌سایت با hoverهای قرمزدکمه ورود و دکمه سبدخرید:خیلی جالبه که دکمه سبد خرید از یک گاری حمل وسایل سنگین استفاده شدهالبته بعد از بررسی متوجه شدم از آیکون اختصاصی خودشون استفاده می‌کنن که این نکته هم جالبه!قسمت دوم:واکنشدر حالت لپتاپ:درحالت لپتاپ مشکل خاصی مشاهده نشد و بنظر میومد همه چیز سر جای خودش هست.در حالت تبلت:نمایش این سایت در حالت آیپد با مشکل خاصی مواجه نبود، که شامل سه ردیف هست و در ردیف اول یک تبلیغ، ردیف دوم اسلایدر محصولات پرفروش، ردیف سوم از یک دکمه همبرگری استفاده شده، یک لوگو، یک سرچ باکس، دکمه ورود و سبد خرید تشکیل شده است.یک نکته خوبش منوهای ساده و جالبش هستن توی تبلت و موبایل که مجموعه و زیرمجموعه‌های ساده و قشنگی استفاده کردن.بعد از کلیک روی دکمه همبرگری بک گراند رو سایه کرده و توجه رو بر خود منوها گذاشته.درحالت موبایل:حالت موبایل هم شبیه حالت تبلت هست و نکته خاصی درونش نیست که نیاز به توضیح باشه.قسمت سوم:سخن آخراگه بخوایم یه جمع بندی انجام بدیم، خیلی خوب شده که پرفروش‌ها رو فقط توی صفحه اول گذاشتن و نه توی تمام صفحات!ویترین‌نت از فونت ایران یکان استفاده میکنه و کد رنگ‌های این فروشگاه از رنگ‌های سفید و خاکستری و قرمز استفاده کرده. https://aparat.com/v/xDyAq Adelo | ادلون Adelo | ادلون Fri, 05 Mar 2021 21:06:50 +0330 https://virgool.io/@AdelonMedia/review-header-digikala-j7jfed3k66xr تجربه کاربری هدر دیجیکالاقسمت اول:ساختاراگه بخوایم خیلی ساده درمورد ساختار دیجیکالا صحبت کنیم، هدر دیجیکالا از دو ردیف تشکیل شده که:ردیف اول شامل لوگو، سرچ باکس، یک مقدار فاصله، دکمه ورود به حساب کاربری و سبد خرید میشه.ردیف دوم هم شامل مگامنو، یه مقدار فاصله و موقعیت یابالبته موقعیت یاب هنوز کار آنچنان خاصی رو فعلا کار مفید خاصی رو انجام نمیده بجز یکی دو مورد که در نسخه کامل مورد بررسی قرار گرفت. احتمالا در آینده تغییراتی در این گزینه رخ بده که کاربردش برای کاربرها خیلی بهتر از الان باشه.لوگو:یک لوگوتایپ انگلیسی که خیلی ساده و شکیل طراحی شده و البته تماماً SVG هست که باعث شده خیلی سبک‌تر باشه(توی سرعت بارگزاری خیلی تاثیر خوبی داره) و خلاصه هرچی زوم کنین تار نشه!سرچ باکس:وقتی روی سرچ باکس کلیک میشه یک باکس نسبتاً بزرگ با یک ترنزیشن خوب باز میشه و صفحه اصلی وب سایت کمی تیره‌تر میشه تا کاربر بتونه تمرکز بهتری روی جستجوی خودش داشته باشه.مواردی که در این باکس لحاظ شده شامل: جستجوهای اخیر ما، جستجوهای اخیر و پرتکرار تمام کاربران و یک تبلیغالبته موارد زیبایی در این باکس تماماً رعایت شده است و مورد آزاردهنده خاصی در آن وجود ندارد.در سرچ باکس از ایجکس استفاده شده و در لحظه هر کلمه‌ای را شما وارد کنید موتور جستجوی فروشگاه بزرگ اینترنتی سعی می‌کند تا بهترین دسته مربوط به چیزی که سرچ کردین و بهترین اقلامی که ممکن است به کارتون بیاد رو نشونتون میده.مگامنو:منوهای فروشگاهی اکثرا به دلیل وجود تعداد اقلام خیلی زیاد مجبور به استفاده از مگامنو هستن که دیجیکالا هم از این نوع منو استفاده کرده است.ساختار زیر منوهای چند سطحی به خوبی رعایت شده البته به دلیل تعداد زیادی اقلام کمی ممکنه در ابتدا سردرگم شویم.در مگامنو هم تبلیغات متناسب با اون منو باز هم تکرار شده است.یکسری برندهای پرفروش هم درون مگامنو جا داده شده تا کاربر با دیدن اون برند اگه نیازی به بررسی تمام محصولات اون برند داره میتونه با کلیک روی برند مورد نظر به هدفش برسه.hoverها در منوها رعایت شده به طوری که اگه روی منوهای اصلی بایستیم زیر هر منو یک خط قرمز ظاهر می‌شود ولی انتخاب زیر منوهای این مگامنو باعث می‌شود خود منوی مورد نظرتون قرمز شود و این تجربه لذت بخشی رو برای مشتریان می آفرینه.موقعیت یاب:زمانی که این گزینه را انتخاب می‌کنین یک فرم modal به صورت popup باز میشه که میتونین توی اون استان و شهرتون رو انتخاب کنین تا فروشگاه بر اساس استان و شهر شما پیشنهادهای بهتری را به شما نشان دهد.قسمت دوم: واکنشاگه به طور خلاصه بخوام واکنش هدر دیجیکالا رو نسبت به صفحات نمایش بگم، میتونم بگم که همه چیز عالی هست بجز صفحه نمایش تبلت که انگار کمی مشکل داره!در حالت لپتاپ:در این حالت هنگام اسکرول به پایین قسمت منوها برای بهتر دیده شدن مخفی می‌شوند.بهتر است بقیه موارد را بهتر است در تصویر زیر مشاهده نمایید.در حالت تبلت:در این حالت ورود به حساب، سبد خرید و موقعیت یابی سایت برای من محو شد البته با استفاده از اینسپکت المنت این مورد رو بررسی کردم و اتفاق عجیبی که افتاد این بود کمی نمایش در این حالت مشکل داشت که بهتر است برای اطمینان خودتون هم بررسی کنین.درحالت موبایل:هدر برای این حالت را در زیر میتونین مشاهده کنین از هر دو حالت ساده‌تر و البته یه گزینه پشتیبانی هم اضافی شده که نیاز مشتریان هم هست این آیکون!قسمت سوم: سخن آخردیجیکالا از فونت ایران یکان استفاده میکنه و کد رنگ‌های این فروشگاه معروف رو میتونین در زیر مشاهده کنین.هدر دیجیکالا خیلی شسته و رفته شده به اصطلاح ‌Clean شده.البته از رنگبندی‌های شاد این فروشگاه نباید گذشت و بنظر هدف شادابی و دادن حس خوب به مشتریست!خیلی ازتون ممنونم که مقاله رو تا پایان خوندید خیلی دوستون داریم این مقاله رو برای همه‌ی دوستان خودتون و تمام افرادی که به نوعی با وب‌سایت سر و کار دارن بفرستین تا بتونن توی انتخاب نوع قالب و طراحی هدر بهشون کمک ویژه‌ای بشه.بررسی تخصصی طراحی سایت فروشگاهی دیجی‌کالا (نسخه کامل طراحی هدر)اگر تمایل دارید این ویدیو را در آپارات مشاهده کنید لطفا از لینک زیر مشاهده نمایید. https://www.aparat.com/v/Hwa4j ویدیو بررسی تخصصی طراحی سایت فروشگاهی دیجی‌کالا (نسخه کامل طراحی هدر)بررسی تخصصی طراحی سایت فروشگاهی دیجی‌کالا (نسخه خلاصه شده طراحی هدر)اگر تمایل دارید این ویدیو را در آپارات مشاهده کنید لطفا از لینک زیر مشاهده نمایید. https://www.aparat.com/v/Psk5b ویدیو بررسی تخصصی طراحی سایت فروشگاهی دیجی‌کالا (نسخه خلاصه شده طراحی هدر) Adelo | ادلون Adelo | ادلون Wed, 03 Mar 2021 12:38:09 +0330