Sorotan Pengembang: Lorenzo Dossi | – Beragampengetahuan

Kami memulai seri Sorotan Pengembang bersama Lorenzo, seorang pengembang web berbakat yang proyek kreatif dan keahlian teknisnya menginspirasi kita semua. Seri ini adalah cara kami menampilkan pengembang yang mendobrak batasan dan membawa ide segar ke komunitas pengembangan web.

Halo semuanya, komunitas beragampengetahuan, saya Lorenzo Dossi, seorang desainer gerak dan pengembang front-end dari Bristol, Inggris, yang saat ini bekerja dalam tim berbakat di Lusion.

Saya telah mengerjakan beberapa proyek selama setahun terakhir yang belum saya bagikan, itulah sebabnya saya bersemangat untuk mengungkapkan beberapa detail di balik layar.

Ini adalah proyek pribadi terbaru saya. Saya belum membagikannya secara publik, tapi sepertinya ini adalah panggung virtual yang sempurna untuk melakukannya. Ini adalah situs portofolio mantan kolega super berbakat yang berbagi meja dengan saya selama tiga tahun di Basilico (salah satu agen web terbaik di Italia).

Kritik umum terhadap situs web yang diposting di Awwwards adalah situs tersebut cenderung lambat, penuh dengan animasi yang tidak perlu, dan memiliki pengalaman pengguna yang terlalu kompleks. Situs ini mencoba membuktikan bahwa kita tidak boleh menyerah pada animasi tanpa membiarkannya mengalihkan perhatian dari konten.

Karena desainnya sangat sederhana, saya menghabiskan banyak waktu memikirkan bahasa desain gerak yang cocok untuk proyek ini. Pada akhirnya, saya menyimpulkan bahwa penyebutnya harus berupa serangkaian gerakan vertikal yang lembut dan percaya diri. Pendekatan ini membantu menghubungkan halaman-halaman bersama-sama bahkan tanpa transisi halaman:

Navigasi rumah

Logikanya adalah setiap proyek memiliki sejumlah gambar atau video tertentu di halaman beranda. Saat diarahkan, hanya gambar milik item yang tetap fokus, sementara semua gambar yang tidak relevan kehilangan fokus:

Transisi studi kasus tanpa hambatan

Kemudahan navigasi adalah kunci untuk pengalaman pengguna yang luar biasa: saat Anda membuka halaman detail, Anda dapat menelusuri gambar dan video, dan setelah mencapai bagian akhir, Anda dapat berpindah dengan lancar ke studi kasus berikutnya – halaman berikutnya secara otomatis dimuat tanpa hambatan:

DMS (Sistem Manajemen Desain)

Tidak hanya konten, tetapi juga desain situs web dapat dikonfigurasi sepenuhnya melalui CMS (Sistem Manajemen Konten), mulai dari tata letak gambar di beranda hingga jumlah paralaks yang ditambahkan ke gambar studi kasus:

Scrollbar membuat konten menari (dengan cara yang buruk)

Halaman beranda tidak memiliki bilah gulir, sedangkan halaman lainnya memilikinya, menyebabkan tata letak bergerak secara horizontal setiap kali Anda bernavigasi di antara keduanya.

Saya memperbaiki masalah ini sehingga siapa pun yang menjelajah dengan bilah gulir tidak akan melihat lompatan kecil itu lagi:

Navigasi seluler

Di perangkat seluler, situs ini sangat sederhana:

Wowtapes adalah proyek besar pertama saya, diproduksi oleh Margherita Fortuna yang berbakat untuk studio produksi video terkemuka di Roma. Sekarang sudah berjalan selama setahun penuh, mengingatnya kembali masih membuat saya sangat bangga dengan hasilnya karena saya juga memiliki kendali penuh atas sistem pergerakannya.

Di luisaruzzenenti.com, aksinya minimal dan searah—selalu naik dari bawah, seolah-olah berjalan di atas rel—di sini, transisi halaman diagonal menentukan suasananya: setebal fontnya, Sehalus transisi video di wowtapes’ bekerja.

Fitur luar biasa

Salah satu fitur favorit saya pada situs ini adalah sebagai solusi terhadap masalah yang disebabkan oleh transisi halaman. Meskipun transisi halaman menarik secara visual, namun terasa cukup berat. Untuk mengurangi gesekan saat menjelajahi portofolio, saya perlu menemukan cara untuk mencegah pengguna dipaksa melakukan transisi halaman setiap kali mereka berpindah-pindah antara halaman Portofolio dan halaman Detail Proyek.

Solusi yang saya temukan adalah menggunakan overlay untuk setiap item. Namun, hal ini menimbulkan tantangan baru: karena proyek sekarang hanya dapat ditampilkan melalui overlay, saya masih perlu menemukan cara untuk membuat halaman tersebut berdiri sendiri, sehingga link halaman proyek dapat dibagikan secara independen.

Untuk mengatasi masalah ini, saya menerapkan fitur di mana URL berubah secara dinamis ketika overlay dibuka. Dengan cara ini, jika tautan dibagikan, atau bahkan jika Anda hanya menyegarkan laman saat hamparan terbuka, item tersebut akan dimuat sebagai laman mandiri.

Nildo adalah proyek freelance pertama saya dan saya sangat menyukainya.

Itu dibuat sekitar tahun 2022 dengan Margherita Fortuna, itu adalah proyek pertama saya bersamanya. Kami tidak mengenal satu sama lain pada saat itu, namun dia tetap percaya pada saya dan memberi saya kesempatan untuk membuktikan bahwa saya dapat menyelesaikan proyek full-stack dari awal hingga selesai.

Saya juga sangat menikmati proyek ini karena saat itu (saya berumur 21 tahun) saya merasa untuk pertama kalinya bisa bersaing dengan pemain besar dan memenangkan penghargaan individu pertama saya: FWA.

Fitur luar biasa

Tantangan kecilnya adalah menangani entri data dan penautan halaman dalam berbagai bahasa, terutama karena saya masih baru mengenal mekanisme backend pada saat itu. Faktanya, situs web ini mendukung entri data dalam bahasa Italia dan Inggris, yang berarti bahwa setiap tautan dan semua metadata terkait tersedia dalam kedua bahasa.

bagaimana saya bekerja

Dua komponen utama website yang saya bangun adalah gerak dan desain. Fokus saya adalah pada gerakan – gerakan membenarkan suatu desain, memperkuat pilihan desain, dan jika dilakukan dengan baik, membantu mengarahkan perhatian pengguna.

Saat saya memulai proyek baru, saya tidak pernah mengikuti pendekatan langkah demi langkah yang ketat. Sebaliknya, saya mendekatinya dari sudut yang berbeda: tampilan teks, animasi hover, transisi halaman, dan banyak lagi. Setelah salah satu elemen ini selaras dengan corak desain, saya menyesuaikan semua elemen lainnya.

Apa yang harus dilakukan selanjutnya?

Tujuan saya saat ini adalah meningkatkan keterampilan saya menggunakan WebGL API, dan saya yakin Lusion adalah tempat yang tepat untuk melakukan hal ini. Pada saat yang sama, saya tidak ingin berhenti mencoba alat lain: Blender, Houdini dan After Effects adalah alat pilihan saya.

pemikiran terakhir

Saya telah menjadi pembaca setia situs ini selama bertahun-tahun, menggunakannya untuk mengeksplorasi dan meneliti teknologi baru, jadi saya merasa sangat terhormat mendapat kesempatan untuk membagikan beberapa karya saya di sini.

Jika Anda ingin menghubungi saya, silakan hubungi saya di X @lorenzodossi

Terima kasih banyak kepada tim beragampengetahuan dan seluruh komunitas!