طراحی پارالاکس یکی از جالب ترین روش هایی است که می تواند سطح جدیدی از تجربه کاربری را ارائه کند و برای افزودن عمق و حرکت در طراحی سایت آن را بکار برد.
جذابیت هایی که می توان با این افکت در وب سایت ایجاد کرد، کاربران را به وجد می آورد و باعث می شود که با کنجکاوی بیشتری به دنبال مطالب و موارد دلخواه خود باشند.
هر چند این نوع طراحی برای همه وب سایت ها توصیه نمی شود. پس برای اینکه مطمئن شوید می تواند برای سایت شما بکار بیاید یا بر سئو شما تاثیر بگذارد و همچنین نحوه ایجاد آن چطور می تواند باشد در ادامه مقاله همراه ما باشید.
- طراحی پارالاکس چیست
- اسکرول پارالاکس چطور کار می کند
- اسکرول پارالاکس چه تاثیری بر سئو وب سایت دارد
- اسکرول پارالاکس را برای چه سایت هایی استفاده نکنیم
- 10 نمونه از اسکرول پارالاکس
طراحی پارالاکس چیست
پاراکس در لغت به معنی اختلاف منظر ( جابه جا شدن ظاهری شیء نسبت به زمینه که نتیجه جابه جا شدن بازدیدکننده باشد ) است. اسکرول پارالاکس تکنیکی درطراحی گرافیک رایانه ای به حساب می آید که تصاویر پس زمینه با حرکت کندتری از نمای بیرونی حرکت می کند و باعث ایجاد حس عمق در صحنه به صورت 2بعدی می شود.
اسکرول پارالاکس چطور کار می کند
در حقیقت پارالاکس مبتنی بر توهم نوری پایه ریزی می شود. از آنجا که چشم انسان به گونه ای می بیند که اشیاء نزدیک به خود را بزرگتر از چیزهایی که دور هستند، تصور می کند.
اولین بار این تکنیک در انمیمیشن سنتی دهه 1930 بود که در سفید برفی دیزنی ، هفت کوتوله و همچنین در بازی ویدئویی سوپر ماریو استفاده شد.
همچنین اولین اسکرول پارالاکس آنلاین در سال 2011 به شکل پارالاکس موج به عنوان یک روند طراحی وب جدید به نمایش درآمد. این تکنیک نسبت به بسیاری از مواردی که وارد اینترنت شدند و از بین رفته اند به عنوان یکی از المان اساسی باقی مانده و همچنان استفاده می شود.
اسکرول پارالاکس چه تاثیری بر سئو وب سایت دارد
موتورهای جستجو تمایل به مشاهده وب سایتهایی دارند که چندین صفحه پر از محتوا را برای کاربران ارائه می دهند. در حالی که سایت های دارای اسکرول پارالاکس حداکثر فقط یک یا دو صفحه هستند. هممچنین استفاده از چندین هدر H1 در همان صفحه نمی تواند خوب باشد و بر رتبه نتایج سایت تاثیر منفی می گذارد.
اسکرول پارالاکس را برای چه سایت هایی استفاده نکنیم
در واقع اسکرول پارالاکس بیشتر برای وب سایت های شخصی ( رزومه کاری ) ، فروشگاهی با تعداد محدودی کالا، رستوران ها، سازمان های دولتی و غیره استفاده می شود و می تواند تاثیر خوبی بر مخاطبان بگذارد.
ولی سایت های تجاری بزرگ مثل فروشگاه های اینترنتی که دسته بندی زیاد دارند توصیه نمی شود و می تواند جستجو ربات های گوگل را کاهش بدهد و رتبه سایت را پایین آورد. به طور کلی توصیه می شود وب سایت های بزرگی که بیش از دو یا سه صفحه مهم دارند از این روش کمتر استفاده کنند.
10 نمونه طراحی پارالاکس
وب سایتی که در حال طراحی است می تواند گزینه های زیادی را در طراحی پارالاکس خود قرار دهد و درنظر داشته باشد. پس می توانید به کمک این نمونه ها با توجه به نوع وب سایتی که دارید استراتژی قوی در دست داشته باشید.
1. Mild Design
این طراحی توسط امیلی گلوسبویس اهل مونترال، بنیانگذار Mild Design طراحی شده است. نمونه کار وب سایت بازدیدکنندگان را با استقبال چشم گیری مواجه می کند و مجموعه ای تصاویر پیچیده را در یک اسکرول طولانی نمایش می دهد.
این طراحی پارالاکس نه تنها انتقال فضا را از یک تصویر به تصویر دیگر یکدست می کند بلکه حس عمقی در فضا ایجاد می کند، مثل اینکه تصاویر پیوسته و به یکدیگر چسبیده اند.
2. Nolan Omura
نولان اومورا عکاس و فیلمبردار ساکن هاوایی است که در زمینه عکاسی زیر آب تخصص دارد. ابتکار عمل او در طراحی اسکرول پارالاکس، عمق و حرکت را ایجاد کرده وباعث شده طراحی صفحه اصلی جذابیت فوق العاده ای پیدا کند و نگاه هر بیننده ای را به خود خیره کند.
حال اگر بیاییم پارالاکس این صفحه را بررسی کنیم. مشاهده می کنید که تقسیم صفحه به نوارهای تمام عرض، حرکت بازدیدکنندگان را به سمت پایین (برای دیدن آبزیان بیشتر) جذب می کند.
نوارهای پارالاکس به آرامی به دنبال هم قرار می گیرند و در پایان این نوار ها (بیشتر به پایین سایت اسکرول کنید)، گالری نولان توانسته عکس های پارالاکس را دنبال کند. باعث تلفیق فضای سایت شود که برای یک سایت شخصی (دارای چند گالری) استراتژی خوبی است. پیشنهاد می شود که عکس های بیشتری را به پارالاکس خود اضافه کنید. هر چند این کار باعث می شود عکس ها مثل انیمیشن های یک دقیقه ای شود. ولی صفحه اصلی سایت جلوه ای بهتر پیدامی کند و بنظر زنده می آید.
3. Chris Covert
با یک اسکرول در وب سایت مهندس هوافضا کریس کاورت می توانید مشاهده کنید که یک وب سایت کاملا حرفه ای و ابتکاری طراحی کرده است. طراحی و تعامل این سایت می تواند، بخش زیادی از شخصیت کریس را در لیستی از مهارت ، تجربه و سوابق تحصیلی نشان دهد.
کریس عکس های CV چاپی و کارت ویزیت بیزینس خود را در مرکز صفحه قرار داده است. با استفاده از اسکرول پارالاکس مشاهده تصاویر پس زمینه به سرعت تغییر می کند و بخش دیگری از رزومه را نشان می دهد
با حرکت کردن در سایت می توانید به جزئیات بیشتری از روزمه کریس دست پیدا کنید، با وارد شدن به قسمت رزومه PDF قابل دانلود رزومه را با یک کلیک دریافت کنید.
4. Ivy Chen
سایت آیوی چن طراح و تصویرگر یک وب سایت نمونه کار است که نمونه های منحصر به فردی را ایجاد کرده است وسعی کرده آثار خود را با حرکت جادویی نشان دهد.
استفاده از پیچک در تغییر فضای وب سایت محتوای صفحه را تقویت می کند و نمونه کار ها را با تغییر توضیح می دهد. آیوی چن به عنوان یک طراح چند رشته ای در کنار تصویرسازی، در طراحی گرافیک هم فعالیت دارد. به همین خاطر ایده های خود را راحت تر توانسته به فضای سایت اضافه کند.
اگر شما به دنبال ایجاد یک سایت نمونه کار هستید می توانید از افزونه نمونه کار وردپرس کمک بگیرید.
5. Industrial Jewellery
در وب سایت طراح جواهرات هیلا کارنی از پارالاکس مناقض استفاده شده است تا یک تجربه کاربری جالب و چندجانبه را ایجاد شود. در فضای این سایت به نظر می رسد با قرار دادن تصاویر و متن بر روی یکدیگر و حرکت آنها با سرعت های مختلف، تغییرات زیادی ایجاد می شوند.
با اینکه این وب سایت یک فروشگاه اینترنتی است اما به خوبی از اسکرول پارالاکس استفاده کرده تا کاربر دچار مشکل نشود و بتواند دسترسی خوبی به صفحات مختلف داشته باشد.
در صفحه اصلی وب سایت عکس فرد در جای خودش باقی مانده و فقط عناصر ( جواهرات) هستند که تغییر می کنند. این عکس در نهایت از صفحه نمایش خارج می شود، فضایی دیگر از بخش های سایت پیش روی شما قرار می گیرد. این تغییر فضا یک احساس پویا و خوبی را به وب سایت می بخشد.
6. Barco Sorriso
استفاده از تصاویر شاد و یک پالت رنگی زنده وب سایت باعث شده استقبال پر هیجانی در ورود وب سایت ایجاد شود. البته برای فضای این سایت متناسب با فعالیت خیرخواهانه از رنگ های بسیار متنوع و شادی استفاده شده.
همین طور که میبینید قایقی در اقیانوس فضایی متناسب به اسم وب سایت ( قایقی به نام لبخند ) را نشان می دهد. این موسسه با پارالاکس امکان بازی تا مشاهده آموزش موارد پزشکی و گزارشی از فعالیت های خود در چند زبان را فراهم کرده است.
که با تغییر نما ( اقیانوس به پشت فضای سبز دوم پنهان می شود ) به قسمت های دیگر سایت وارد می شوید.در واقع طراحی پارالاکس فضای سایت را به لایه ها و فیلم های متحرک متفاوت می تواند تغییر دهد.
7. Karlie kloss
این وب سایت نمونه کار مدلینگ کارلی کلوز است که در طرح خود از رنگ های سفید، خاکستری و سیاه ( تم ساده ) استفاده کرده است. برای نمای بیشتر عکس ها فضاهای خالی سایت را بیشتر کرده است.
در عین حال با قرار دادن دکمه های کوچک سایت را از سادگی بیش از حد آن را دور نگه داشته است، استفاده از کمی از رنگ صورتی، قلم بزرگ و سیاه، همچنین با کمک اسکرول پارالاکس و فیلم ها حس حرکت را انتقال می دهد.
8. Hana Knizova
وب سایت عکاسی هانا نیزوا که ساکن لندن است یک اسکرول بسیار طولانی در وب سایت آن ایجاد شده که بتواند تصاویری بیشتری را قرار دهد، منظرهای آشکار و مبهم را نشان دهد.
عکس هایی که شما در صفحه اصلی سایت مشاهده می کنید مقدمه ای از پروژه های هانا به حساب می آید. ویژگی های خاص عکاسی او را نشان می دهد.
در این وب سایت عکس ها به صورت همزمان با اسکرولی در نمایش خود جابجا می شوندو یک سیستم منحصر به فردی را پدید می آورند تا هر تصویری به یک صفحه داخلی متفاوتی منتهی شود.
9. Protea
وب سایت رستوران پروتی از یک طرح مبتنی بر جعبه ( Box-Based ) برای نمایش عکس های مختلف غذاهای کارائیب و محل دره نپا (جایی که رستوران قرار دارد) استفاده می کند. به طوری که هر چه به سمت پایین سایت حرکت می کنیم با تغییر عکس ها ، محتوای سایت با سرعت بیشتری حرکت می کند ونمایش داده می شود.
این احساس می تواند، کاربران را به سرعت به رستوران و محیط آن بازگرداند. در واقع استفاده از اسکرول پارالاکس برای چنین وب سایت هایی ( مثلا رستوران ها ) بسیار مناسب است.
به خاطر اینکه به صفحات زیادی نیازی ندارد. منو ،معرفی رستوران واطلاعات کار ( شروع وپایان کار ، لوکیشن و موارد دیگر ) و بیشتر جذب مخاطب و ایجاد فضای دلنشین اهمیت دارد.
10. Frankie Ratford
وب سایت شخصی فرانکی رادفرود طراح گرافیک وکارآفرین که همیشه در سفر است، از رنگ های شادی استفاده شده ، پرجنب وجوش و جذاب است. عکس و مقاله های سفر رادفرود بعد از پرتره او و توضیحاتی از رزومه کاری در سایت به نمایش در می آید.
در این وب سایت از عکس صاحب سایت به طور ثابت و چندین اسکرول پارالاکس در طراحی گرافیکی سایت استفاده شده است.
سوالات متداول :
یک تکنیک درطراحی گرافیک رایانه ای به حساب می آید که تصاویر پس زمینه با حرکت کندتری از نمای بیرونی حرکت می کند.
به طور کلی توصیه می شود وب سایت های بزرگی که بیش از دو یا سه صفحه مهم دارند از این روش کمتر استفاده کنند.
موتورهای جستجو تمایل به مشاهده وب سایتهایی دارند که چندین صفحه پر از محتوا را برای کاربران ارائه می دهند. در حالی که سایت های دارای اسکرول پارالاکس حداکثر فقط یک یا دو صفحه هستند.
پایان
طراحی پارالاکس اسکرولینگ یکی از روش های است که سطح جدیدی از تجربه کاربری را ایجاد می کند و می تواند به صفحات عمق ، حرکت و درنهایت زیبایی خوبی دهد. اگر وب سایت شخصی ، فروشگاه اینترنتی ( با دسته بندی محدود)، و مواردی مشابه اینها دارید می توانید از پارالاکس در طراحی خود استفاده کنید تا تجربه کاربری بهتری را به کاربران هدیه دهید.
