Studi Kasus: Studiogusto | Pelet Buah – Beragampengetahuan

Dari sponsor kami:

Dapatkan rekomendasi untuk meningkatkan konten, penargetan, dan otomatisasi pemasaran untuk membantu Anda meningkatkan pendapatan.

Sebagai institusi yang dinamis, kami menyadari pentingnya inovasi berkelanjutan untuk tetap menjadi yang terdepan. Dengan mengingat hal ini, kami memulai proyek desain ulang situs web untuk mencerminkan nilai-nilai kami dengan lebih baik dan memamerkan keahlian kami.

Meskipun kami telah mengerjakan desain ulang sejak musim gugur yang lalu, penundaan karena pengiriman pelanggan lainnya mendorong peluncuran kembali beberapa minggu yang lalu. Terlepas dari tantangan dan modifikasi yang tak terhitung jumlahnya, kami bekerja tanpa lelah untuk memastikan bahwa setiap aspek situs web dipoles dan profesional.

Dalam studi kasus ini, kami akan menguraikan kiat dan teknik yang kami gunakan untuk membuat situs baru, dan membagikan tantangan yang kami temui selama ini. Kami berharap dengan berbagi pengalaman kami, agensi dan bisnis lain dapat memperoleh wawasan tentang cara meningkatkan kehadiran online mereka sendiri dan terinspirasi untuk mengejar solusi kreatif mereka sendiri.

penutup berlendir

Saat pengunjung membuka situs web kami yang telah diperbarui, salah satu hal pertama yang mereka perhatikan adalah sampul hero interaktif. Kami ingin menciptakan pengalaman yang unik dan menarik bagi pengunjung kami, jadi kami memutuskan untuk menyertakan efek yang sangat kami sukai – efek berlendir.

Kami ingin memadukan efek lengket antara kursor, logo kami, dan gulungan tayangan video menggunakan shader yang dibuat dengan bantuan serat reaksi-tiga.

Kami pertama kali membuat gambar logo yang dibagi menjadi tiga saluran RGB

Saluran biru gambar digunakan sebagai alfa logo, sedangkan saluran hijau digunakan untuk logo lengkap. Saluran merah hanyalah versi buram dari logo yang kami gunakan untuk membuat efek lengket saat kursor diarahkan ke atasnya.

Jika Anda tertarik untuk melihat kode kami, kami telah membuat demo di Shadertoy yang menunjukkan penerapan efek lengket kami.

transisi halaman

Kami juga membuat transisi halaman unik menggunakan WebGL.

Efek ini melibatkan pembuatan kanvas di atas seluruh halaman, dan saat diklik memperluas lingkaran warna default halaman berikutnya, menutupi seluruh viewport. Setelah halaman berikutnya dimuat, kami menghitung ulang posisi mouse dan membuat lubang melingkar di area pandang yang melebar untuk menampilkan seluruh halaman. Transisi yang mulus dan menakjubkan secara visual ini menambah tingkat interaktivitas dan keterlibatan ekstra ke situs web, yang semakin meningkatkan pengalaman pengguna.

Penghargaan No.

Seperti yang kami sebutkan sebelumnya, kami adalah penggemar berat efek lengket dan kami ingin memamerkannya di situs web kami dengan membuat korsel yang menyoroti jumlah penghargaan yang telah kami menangkan. Untuk mencapai ini, kami menggunakan GSAP untuk menggerakkan bola kabur di sepanjang jalur dan menerapkan pemotongan kontras untuk menciptakan efek lengket.

Kami dapat membuat efek ini berdasarkan percobaan lama oleh Fabio di Codepen.

Kami beruntung mendapatkan umpan balik yang bagus tentang fitur ini, termasuk dekonstruksi kode Alex Trost di Frontend.horse sehingga Anda dapat dengan mudah memahami cara kerjanya.

jaringan tim

Untuk menyorot anggota tim kami, kami membuat petak kartu WebGL yang ditautkan ke efek flip pada gambar masing-masing individu. Efek ini dihasilkan menggunakan teknik pasca-pemrosesan yang merentangkan sinar UV berdasarkan jarak antara setiap orang dan menerapkan efek chromatic aberration untuk menambah daya tarik visual.

Efek unik dan menyenangkan ini menambah lapisan keterlibatan ekstra ke situs, memungkinkan pengunjung untuk berinteraksi dengan anggota tim kami dan mempelajari lebih lanjut tentang keahlian dan pengalaman mereka.

bagian bawah halaman

Untuk lebih meningkatkan interaktivitas situs web kami, kami juga membuat footer kami interaktif dengan mengintegrasikan logo kami ke dalam WebGL. Saat pengunjung menggerakkan mouse di atas footer, kami menciptakan efek distorsi UV dan chromatic aberration berdasarkan kecepatan gerakan mouse.

Kami membuat efek pengguliran baru untuk tautan terpenting di situs. Efek ini melibatkan penggunaan sapuan SVG dengan tepi membulat yang berputar di sekitar tautan pada gerakan mouse, menambahkan daya tarik visual ekstra dan interaktivitas ke situs.

Next.js + Strapi: Kisah Cinta Tanpa Kepala Baru Kami

Kami memutuskan untuk bermigrasi dari WordPress ke Strapi, memilih backend tanpa kepala. Ini memberi kami lebih banyak fleksibilitas untuk mengontrol sistem manajemen konten. Strapi juga menyediakan fitur perpustakaan media bawaan yang dapat dengan mudah dihosting di bucket S3 dan didistribusikan melalui AWS CloudFront, meningkatkan kinerja dan skalabilitas situs web kami.

Untuk ujung depan, kami menguji Next.js dan memutuskan untuk mengekspor situs secara statis untuk mempertahankan kinerja yang optimal. Kombinasi Strapi dan Next.js memungkinkan kami membuat situs web yang kuat dan berperforma tinggi yang mudah dikelola dan dapat diskalakan.

Dengan mengambil langkah ini, kami dapat membuktikan situs web kami untuk masa depan dan memastikannya akan terus memenuhi kebutuhan pengguna kami di tahun-tahun mendatang.

bungkus

Secara keseluruhan, mengembangkan situs web kami merupakan pengalaman yang sangat menyenangkan karena memberi kami kesempatan untuk mewujudkan ambisi kreatif kami.

Oleh karena itu, situs ini penuh dengan interaksi dan animasi kecil yang meningkatkan pengalaman pengguna, terutama saat menggulir. Ini akan sulit dicapai tanpa menggunakan GSAP dan Lenis Scroll. Kami bangga dengan apa yang kami buat dan percaya itu benar-benar mewakili esensi merek kami.

Ke depan, kami tidak sabar untuk menerapkan gaya dan pendekatan ini untuk berkolaborasi dengan merek lain guna menciptakan pengalaman web yang luar biasa bagi penggunanya.

Sebagai kejutan terakhir bagi penggemar kami yang paling berpengalaman, kami telah menambahkan fitur tersembunyi ke situs web kami. Jika pengunjung tidak berinteraksi dengan situs selama beberapa detik, favicon tidak aktif.

Tidurlah, teman-teman!