بررسی تخصصی طراحی سایت فیلیمو – filimo (طراحی هدر) + ویدیو

قسمت اول: ساختار

فکر میکنم ساده ترین هدر در سرزمین ادلون، همین هدر فیلیمو هست. البته این border زرد رنگ رو بالای هد گذاشتن تا زیادی هم ساده نباشه!

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

اگه بخواهیم ساختار فیلیمو رو بررسی کنیم:

با یک هدر تک ردیفه روبرو هستیم. که از سمت راست بخواهیم امان‌هایش را نام ببریم، یک لوگو png، منو، یک سرچ باکس، دکمه کال تو اکشن (دکمه فیلیمو مدرسه)، یک فضای بسیار خالی و آیکون پروفایل کاربری که اگر در این سیستم لاگین باشیم و هنگامی که روی این آیکون hover می‌کنیم )روی آن می‌ایستیم( یک سری موارد کاربردی و جالب به صورت منو ظاهر می‌شود.

لوگو:

لوگو فیلیمو یک فایل png است که می‌توانست برای بالابردن کیفیت از svg استفاده کند. البته همین لوگویی که استفاده کرده هم بی کیفیت نیست و از کیفیت مناسبی برخوردار است.

دکمه سرچ:

یک دکمه خیلی ساده برای زمانی که چیزی پیدا نکردیم همیشه مورد نیاز هست و فیلیمو هم این دکمه را درون خودش تعبیه کرده؛

هنگام کلیک کردن روی این دکمه یک مودال تمام صفحه با ترنزیشن جذاب باز میشه که تمام چیزهای دیگر روی صفحه را می‌پوشاند تا کاربر چشمش به موارد دیگه خیره نشود و با تمرکز کلیدواژه‌ای را که به آن فکر می‌کند را برای جستجو وارد کند.

تنها مورد اضافیی که در صفحه‌ی بازشده قابل مشاهده است جستجوهای اخیر کاربران هست و دیگر هیچ! که به نظر من این مورد الزامیست.

دکمه CTA فیلیمو مدرسه:

این دکمه call to action مارا به مجموعه‌ای دیگر از فیلیمو راهنمایی می‌کند که در روزهای کرونایی و بدون کلاس درس حضوری خیلی هم پرطرفدار شده.

دکمه پروفایل کاربر / ورود به سایت:

برای افرادی که وارد فیلیمو نشدند و میهمان هستند دکمه‌ی ورود به سایت نمایش داده می‌شود ولی برای افرادی که وارد شدند پروفایل کاربری را نشان می‌دهد که با ایستادن روی این دکمه یک منو زیر آن ایجاد می‌شود که موارد زیر را شامل می‌شود:

۱- مقدار زمان باقی مانده از عضویت و تمدید

۲- مشخصات کاربری و تغییر آن

۳- انتخاب زمینه که می‌توان darkmod و یا lightmod را انتخاب کنید و برای همیشه ذخیره شود برایتان.

۴- فیلم و سریال های قبلا دیده شده

۵- قفل کودک

۶- خرید اشتراک

۷- سوابق پرداخت

۸- خروج

قسمت دوم: واکنش

در حالت لپتاپ:

هنگامی که اسکرول می‌کنیم فقط نوار زرد رنگ بالای هدر محو می‌شود و هدر همیشه بالای صفحه به صورت fix باقی میماند.

در حالت تبلت:

هنگامی که با شبیه ساز آیپد این سایت رو بررسی کردیم موضوع کمی متفاوت تر بوده و تغییراتی داشته همچون دو ردیفه شدن ساختار هدر؛

درحالت موبایل:

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

قسمت سوم: سخن آخر

فیلیمو از فونت ایران سنس استفاده کرده و از رنگ‌های سفید و مشکی (#۱۵۱۵۱۵) و نارنجی و زرد به عنوان رنگ‌های اصلی برندش همه‌جا استفاده کرده؛

خیلی سرعت لود بالایی داره بر روی سرورهای ایران گرچه کلی فیلم درون این سایت وجود دارد و این نکته قابل ملاحضه این سایت است.

فیلیمو کاملا ساده طراحی شده و در عین سادگی خیلی خوب و کاربردی طراحی شده و اگه کسی چیزی رو در فیلیمو بخواد به راحتی میتونه پیدا کنه!

بررسی تخصصی طراحی سایت فیلیمو (نسخه کامل طراحی هدر)

اگر تمایل دارید این ویدیو را در آپارات مشاهده کنید لطفا از لینک زیر مشاهده نمایید.

ویدیو بررسی تخصصی طراحی سایت فیلیمو (نسخه کامل طراحی هدر)

پادکست