Panduan Anda untuk Pengguliran Paralaks

Pengguliran paralaks tidak perlu diperkenalkan saat membahas praktik desain yang paling menarik. Umumnya, Parallax Scrolling banyak disaksikan di situs WordPress. Ini adalah efek di mana gambar latar belakang bergerak lebih lambat daripada elemen latar depan. Ini memberikan ilusi memiliki tiga dimensi di permukaan dua dimensi yang datar. Banyak game telah menggunakan tren ini untuk waktu yang lama. Namun, tren ini telah muncul dalam desain web relatif baru-baru ini dan mendapatkan popularitas besar-besaran. Ini sangat tersebar luas sehingga kemungkinan besar Anda pernah melihatnya di suatu tempat ketika Anda menjelajahi web, bahkan jika Anda tidak tahu apa itu. Konsep parallax scrolling bekerja untuk menciptakan ilusi yang terlihat menarik dan unik. Ini menambah nilai estetika pada desain web dan menarik perhatian ke konten pada gulir paralaks, yang membantu menyoroti konten berharga dari kekacauan.

Tren desain ini bermula ketika tren desain flat mulai meningkat. Sebelum tren desain datar, desain realisme menjadi tren. Dengan tren ini, penekanannya adalah pada bayangan jatuh, pantulan, dan trik lainnya untuk menciptakan kesan kedalaman dan tampilan tiga dimensi. Desain datar terlalu dua dimensi, dan trik semacam itu tidak akan berhasil untuk menciptakan tampilan tiga dimensi. Melihat celah ini, pengguliran paralaks muncul sebagai konsep untuk memperkenalkan tiga dimensi ke desain datar.

Untuk memahami pengguliran paralaks secara lebih rinci, pertama-tama kita harus melihat mengapa praktik ini layak untuk diinvestasikan.

1. Pengalaman pengguna meningkat secara signifikan:

Pin

Beberapa orang berpendapat bahwa pengguliran paralaks adalah fitur tambahan yang menambah kerumitan pada UI tanpa kontribusi apa pun. Namun, itu tidak benar karena interaksi mikro dan animasi membuat perbedaan besar untuk membuat antarmuka pengguna yang menarik dibandingkan dengan wajah pengguna datar. Ini memegang nilai yang sangat baik adalah pengalaman pengguna (UX).

2. Membantu proses mendongeng:

Pin

Jika kita harus menceritakan sebuah cerita kepada orang lain, kita bisa melakukannya dengan mudah. Namun, memiliki kemudahan dan alur cerita yang sama dalam desain situs web bisa sangat menantang. Untuk menghubungkan titik-titik dan memudahkan transisi dan membuat penonton tetap ketagihan seringkali rumit. Pengguliran paralaks membantu mengatasi masalah ini dengan menciptakan pengalaman yang menarik dan mendalam agar cerita dapat mengalir. Karena ada perbedaan dalam kecepatan elemen latar belakang dan latar depan, mengatur kecepatan elemen secara efisien dapat meningkatkan pengalaman bercerita secara signifikan.

3. Pengurangan signifikan dalam rasio pentalan:

Pin

Rasio pentalan mengacu pada jumlah orang yang mengeklik situs web dan mengeklik tombol kembali pada tab sebelum menelusuri situs web secara menyeluruh. Rasio pentalan yang sering dan tinggi dapat memengaruhi peringkat SEO secara signifikan. Situs web pengguliran paralaks memiliki rasio pentalan yang jauh lebih rendah karena kebanyakan dari mereka adalah situs pengguliran satu halaman. Pengalaman dinamis yang diperoleh pengguna dari menyaksikan pengguliran paralaks membuat mereka tetap terlibat.

Sekarang kita telah membahas keuntungan menggunakan pengguliran paralaks, kita dapat mendiskusikan berbagai jenis teknik pengguliran paralaks yang tersedia untuk desainer web. Ada dua kategori luas untuk efek paralaks. Efek paralaks berbasis gulir dan efek paralaks berbasis Mouse.

Efek paralaks berbasis scrolling adalah efek paralaks yang akan Anda alami saat menggulir ke bawah melalui situs web. Setiap jenis pengguliran paralaks memenuhi kebutuhan dan tujuan yang berbeda. Beberapa efek pengguliran paralaks adalah –

1. Gulir Latar Belakang Paralaks:

Ini adalah salah satu cara tertua namun efektif menggunakan gulir paralaks. Menggunakan ini, ketika pengguna akan menggulir situs web, gambar latar belakang akan berubah. Ini membantu menceritakan kisah yang menarik dengan gaya.

2. Gulir Vertikal Paralaks:

Parallax Vertical Scroll sangat ideal untuk situs web di mana Anda ingin pengguna merasa bahwa situs web bergerak bersama mereka, dengan menggunakan elemen mengambang yang akan bergerak dengan kecepatan berbeda. Ini dapat dilakukan dalam beberapa lapisan juga.

3. Efek Transparansi Paralaks:

Parallax Transparency Effect adalah efek smooth di mana teks atau gambar perlahan memudar saat pengguna menggulir ke bawah. Itu juga akan memudar kembali ketika pengguna akan menggulir ke atas.

4. Gulir Horisontal Paralaks:

Parallax Horizontal scroll menciptakan rasa gerakan horizontal ketika pengguna menggulir ke bawah situs web. Unsur-unsur di sebelah kiri datang lebih dekat ke tengah. Ini menciptakan rasa gerakan.

5. Efek Skala Paralaks:

Efek Skala Paralaks memungkinkan pengguna membuat efek zoom in dan zoom out terowongan. Zoomnya proporsional dengan rasio aspek, sehingga menciptakan ilusi unik yang terlihat keren. Rasanya seperti efek melengkung yang membawa pengguna ke dimensi lain.

Sekarang kita telah membahas berbagai variasi efek pengguliran paralaks, kita dapat beralih ke pembahasan praktik desain penting yang perlu diingat saat merancang efek pengguliran paralaks untuk situs web Anda:

1. Selalu ingat tujuan utama situs web Anda:

Pin

Pengguliran paralaks menyenangkan dan bisa menawan. Tidak hanya untuk pemirsa tetapi juga desainer. Ini seharusnya tidak berarti memiliki situs web yang memiliki efek pengguliran paralaks yang mengesankan dan tidak fokus pada konten. Pengguliran paralaks seperti elemen desain lainnya harus berfungsi sebagai isyarat visual yang akan memandu pengunjung ke tempat yang Anda inginkan. Ini harus membantu mencapai tujuan bisnis seperti menjual produk, menyebarkan konten atau menghasilkan arahan.

Jika Anda terlalu sering menggunakan pengguliran paralaks tanpa mempertimbangkan konteks atau tujuan apa pun, Anda mungkin mendapatkan penonton yang terkesan di situs Anda, tetapi mereka tidak akan menerjemahkan ke prospek atau konversi yang efektif. Manfaatkan pengguliran paralaks untuk meningkatkan kemungkinan apa yang Anda ingin pengguna lakukan. Peretasan yang sangat baik untuk ini adalah menyematkan CTA yang menarik namun halus di bagian bawah halaman. Dengan cara ini, ketika pengguna menggulir situs, mereka akan melihat pengguliran paralaks beraksi. Mereka juga akan memiliki satu atau dua tombol konstan yang statis dan ada di mana-mana. Ini akan menarik pengunjung untuk mengklik tombol untuk melihat apa yang terjadi.

2. Jangan terlalu sering menggunakan efek gulir paralaks:

Pin

Efek gulir paralaks memiliki faktor wow tertentu yang melekat padanya. Itu rusak karena sifat duniawi dan stagnan dari situs web apa pun yang menciptakan minat tiba-tiba di mata pengunjung. Karena menggunakan pengguliran paralaks membuat elemen situs web bergerak pada kecepatan yang berbeda, menemukan keseimbangan yang tepat antara kesenangan dan kekacauan sangat penting saat menggunakan pengguliran paralaks. Jika situs web memiliki banyak elemen yang bergerak cepat atau terlalu banyak elemen yang bergerak juga, itu bisa membuat pengunjung kewalahan untuk mengikutinya. Itu akan membuang panduan visual mereka ke seluruh situs web dan membuat kebingungan.

3. Buat efek gulir paralaks prototipe dan ujilah:
Pin

Itu selalu merupakan ide yang baik untuk membangun prototipe interaktif sebelum menyelesaikannya dalam tahap pengembangan. Ini membantu para desainer menguji efek pengguliran paralaks mereka sebelum membuatnya hidup. Perancang harus menguji efeknya pada kegunaan dan pengalaman pengguna. Karena paralaks sangat fleksibel dan berbeda dalam pendekatannya, paralaks dapat mempengaruhi orang yang berbeda dengan cara yang berbeda. Sangat mudah untuk menyimpang dari paralaks yang berguna untuk menciptakan efek pengguliran paralaks yang menyebabkan gangguan. Oleh karena itu uji secara menyeluruh dengan pengguna nyata yang objektif dan memiliki rasa desain web. Juga, ujilah dengan audiens umum karena merekalah yang Anda beri efek.

4. Rencanakan konten untuk penggunaan seluler:

Pin

Berselancar di internet tidak lagi terbatas pada komputer. Sebaliknya, lebih dari separuh pengguna lebih suka menjelajah di ponsel cerdas dan tablet mereka. Google juga telah mengubah hasil mesin pencarinya berdasarkan yang mengatur dan memberi peringkat situs web secara berbeda untuk seluler dibandingkan dengan desktop. Ini berarti bahwa jika situs web Anda memiliki peringkat yang baik pada penjelajahan desktop, tetapi memiliki desain seluler yang tidak ramah, situs tersebut tidak akan mendapat peringkat tinggi di Google saat Anda mencarinya melalui ponsel. Pengguliran paralaks tidak ramah seluler. Tablet memang mendukungnya sampai batas tertentu tetapi tidak untuk ponsel. Solusi praktis untuk ini adalah tidak menggunakan efek paralaks untuk situs seluler Anda.

Tata letak dasar situs Anda harus dirancang sedemikian rupa sehingga mudah diterjemahkan ke seluler. Setiap bagian yang tumpang tindih dan meluap harus diwaspadai. Latar belakang tidak boleh bertentangan dengan keterbacaan konten. Untuk situs seluler, pertahankan hanya elemen desain yang diperlukan. Ini akan membantu Anda dalam dua cara – pengguna yang menggunakan browser di ponsel mereka mungkin menggunakan data seluler. Memiliki situs yang lebih ringan akan membantu mereka memuat situs lebih cepat dan menghabiskan lebih sedikit data untuk menjelajahi situs Anda. Itu juga tidak akan mempengaruhi peringkat SEO Anda seperti itu.

5. Daya tanggap situs web Anda:

Pin

Kami tidak lagi memiliki koneksi jaringan yang membutuhkan waktu beberapa menit atau jam untuk memuat situs web. Setiap orang memiliki akses ke internet dengan kecepatan di mana pengguna bisa berada di satu situs web selama satu detik dan beralih ke situs lain dalam hitungan detik. Dengan kemudahan kecepatan ini muncul kemudahan pilihan. Orang menelusuri beberapa situs web setiap hari. Jika situs web Anda tidak memuat relatif cepat, mereka tidak akan bertahan menunggu situs web Anda dimuat dan menunjukkan efek paralaksnya yang luar biasa. Parallax adalah trik berat dan bahkan ketika Anda mengoptimalkannya; itu akan mengambil hit pada waktu pemuatan halaman. Menjadi tugas Anda untuk mengoptimalkannya semaksimal mungkin jika Anda merasa ingin agar parallax scrolling memberikan kontribusi yang signifikan bagi situs web Anda.

Sekarang setelah kita memahami semua aspek pengguliran paralaks dan cara memanfaatkannya, mari kita lihat beberapa situs web yang telah berhasil menerapkan pengguliran paralaks dalam desain situs web mereka secara efisien:

1. Kisah The Goonies:

Pin

Situs web ini menggunakan efek pengguliran paralaks khusus untuk menyoroti film klasik The Goonies. Ini menggunakan pengguliran paralaks yang mendalam untuk membicarakan plot film dan detail lainnya seperti nama sutradara, tanggal rilis, profil karakter, dan banyak lagi. Itu dibuat menggunakan WebFlow dan berfungsi sebagai penghargaan untuk film klasik. Saat Anda mengunjungi situs web, interaksi pertama menggunakan Parallax Scale Effect yang membantu pengguna merasa seolah-olah mereka bepergian di dalam cerita dengan situs web. Setiap efek paralaks digunakan untuk mengarahkan isyarat visual kepada pengunjung, dan itu dilakukan dengan mudah. Ini juga menggunakan audio untuk pengalaman mendongeng yang imersif.

2. Studio Anjing:

Pin

Dogstudio adalah studio kreatif yang memadukan seni, teknologi, dan desain. Untuk menunjukkan, ini mereka dengan cerdik merancang situs web mereka. Pusat situs web memiliki anjing yang akan menskala dan berputar saat pengguna terus menggulir situs web. Lampu pada anjing juga terus berubah saat Anda mengarahkan Mouse ke proyek terbaru mereka. Ada juga efek paralaks berbasis mouse. Di awal halaman web, jika Anda mengarahkan Mouse ke kiri, anjing akan condong ke kanan dan sebaliknya. Ini adalah penggunaan pengguliran paralaks yang efektif.

3. Pemadam Kebakaran:

Pin

Firewatch adalah game yang dibuat oleh Campo Santo. Ada situs web untuk mempromosikan game ini yang menggunakan pengguliran paralaks yang halus namun paling mengesankan. Saat Anda mengunjungi situs tersebut, Anda akan disuguhi dengan gambar spanduk yang terlihat imersif apa adanya. Saat Anda menggulir situs web ke bawah, gambar dan konten bergerak ke atas, menciptakan efek pengguliran paralaks yang sederhana namun efektif. Situs web menggunakan 6 lapisan untuk membuatnya semulus itu. Sisa situs web statis, tempat semua konten berada. Ini membantu Anda membaca konten dan mengenal permainan tanpa merasa mabuk laut dengan efek paralaks yang berlebihan. Mereka menggunakan efek paralaks untuk menarik perhatian, kemudian memberikan informasi yang relevan untuk menarik minat pengunjung.

Sekarang Anda tahu mengapa scrolling paralaks menjadi tren desain yang begitu populer di zaman sekarang. Ini memiliki banyak keuntungan yang dapat dimanfaatkan oleh desainer web. Tidak ada ruang lingkup pengulangan dengan situs web lain karena banyaknya variasi pengguliran paralaks yang tersedia. Situs web yang disebutkan dalam daftar ini juga mencakup bagaimana efeknya dapat digunakan sepenuhnya untuk tujuan bercerita atau sebagai elemen tambahan untuk meningkatkan nuansa situs web. Pahami mengapa dan di mana Anda perlu menggunakan pengguliran paralaks di situs web Anda dan manfaatkan itu. Jangan dipaksakan hanya untuk nilai estetika.