Sorotan Pengembang: Mario Sanchez Maselli – Beragampengetahuan

Halo semuanya, saya senang berada di sini. Sudah sepuluh tahun sejak saya mulai membaca majalah ini. Saya benar-benar merasa terhormat untuk berbagi pengalaman saya dengan Anda.

Nama saya Mario dan saya seorang pengembang Guatemala yang tinggal di Tallinn, Estonia. Saya berspesialisasi dalam menciptakan pengalaman digital yang dipesan lebih dahulu dan selama dekade terakhir saya mendapat hak istimewa untuk mengembangkan situs web yang telah diakui oleh Awwwards, FWA, Latin American Design Awards, European Design Awards, dan banyak lagi. Saat ini, saya studio nonliniersaya berlari berdampingan Penginapan Quentin.

Bersama-sama kami menjalankan studio independen yang didedikasikan untuk menciptakan pengalaman digital yang menghubungkan merek, desain, dan teknologi. Selama tiga tahun terakhir, kami telah bekerja sama untuk membangun sebuah studio di mana kebutuhan unik setiap klien memandu pendekatan kami. Tentu saja, pengalaman yang kami ciptakan sama uniknya dengan pelanggan yang kami layani.

item yang dipilih

Di bawah ini adalah kumpulan proyek yang dengan senang hati saya bagikan kepada Anda, beberapa di antaranya baru, yang lainnya adalah favorit lama, dan satu lagi telah diperbarui dan akan segera tersedia. Ditambah lagi, saya tidak bisa menolak promosi diri yang tidak tahu malu 🙈: portofolio studio kami sendiri! Kami akhirnya meluncurkannya tahun lalu dan saya bangga memilikinya sebagai bagian dari pameran ini.

Grup Desain Elwha

Mari kita mulai dengan proyek lama: Elvaakan selesai pada tahun 2022. Elva adalah grup desain yang berspesialisasi dalam menciptakan pengalaman e-commerce bermerek, yang berspesialisasi dalam strategi digital, UX, UI, dan gerak. Mereka memiliki proposal sederhana namun menarik untuk kita di tahun 2022: “Buat situs web yang keren, seperti untuk studio Anda sendiri.”

Pada saat itu, kami bahkan belum memiliki situs web sendiri, jadi kami mengerahkan banyak upaya dan antusiasme dalam proyek ini dan kami sangat menyukai hasilnya. Tidak setiap hari klien memberi Anda begitu banyak kebebasan berkreasi dan mengatakan “lakukan apa yang menurut Anda keren”, jadi kami mengambil kesempatan untuk menjadikannya istimewa.

Pada awal tahun 2022, tumpukan pengembangan kami mencakup alasan Untuk backend dan 11 tahun Untuk ujung depan. Untuk transisi kami menggunakan jalan raya studio anjingmeskipun oglu Memberikan dukungan untuk fungsionalitas WebGL. Untuk animasi umum kami mengandalkan rencana induk perencanaan. Semua ini diterapkan dengan mulus Jaringan.

Menariknya, kami masih menggunakan pendekatan yang sangat mirip saat ini, namun akan dibahas lebih lanjut nanti.

Sampai saat ini, saya adalah satu-satunya pengembang studio, yang berarti tidak banyak peninjauan kode atau struktur “ketat” apa pun. Kebebasan ini memungkinkan saya mengembangkan cara unik saya sendiri dalam bekerja dan menyusun proyek.

Bahkan sekarang, saya tidak 100% yakin apa cara yang “benar” untuk melakukan sesuatu, namun saya telah belajar bahwa konsistensi, pengorganisasian, dan komunikasi yang erat dengan desainer Anda dapat memberikan keajaiban bagi karier pengembangan Anda.

penalaran yang komprehensif

Proyek kedua adalah penalaran yang komprehensifsebuah startup YCombinator, mendefinisikan ulang lanskap optimasi kombinatorial (jangan khawatir jika Anda tidak terbiasa dengan istilah tersebut).

Faktanya, penalaran terintegrasi tidak menggunakan metode komputasi kuantum untuk memecahkan masalah matematika yang kompleks, tetapi menggunakan metode komputasi klasik yang merupakan terobosan. Mereka sedang mengembangkan perangkat keras dan perangkat lunak khusus untuk mengatasi tantangan ini. 🤯🤯🤯

Bagaimana cara menggambarkan kompleksitas masalah yang ditangani dengan penalaran terpadu? Pendekatan kami adalah menggunakan seni garis geometris yang dikombinasikan dengan tipografi elegan yang tak lekang oleh waktu untuk menciptakan pengalaman yang menginspirasi rasa ingin tahu dan mencerminkan akar matematika dari masalah NP-complete yang ingin mereka pecahkan.

Ilustrasi dan beberapa animasi dibuat oleh orang-orang berbakat Rocco Dipopakami menggunakan Lottie Ubah menjadi animasi interaktif yang halus.

Proyek ini selesai pada awal tahun 2024, dan hal ini mendorong kami untuk melakukan beberapa penyesuaian kecil namun bermakna pada tumpukan teknologi kami. Seperti yang saya sebutkan sebelumnya, tumpukan kami sebagian besar tetap sama, dengan beberapa pembaruan. alih-alih menggunakan jalan raya Untuk konversi halaman kami memilih taksi.js Dari Studio Tak Terlihat.

Kami juga memulai dari oglu tiba Tiga.js Untuk WebGL. temanku Robert Bogosi Didorong untuk fokus pada Three.js, saya telah berupaya meningkatkan keterampilan saya sejak awal tahun lalu, meskipun mengikuti Robert jelas merupakan sebuah tantangan!

Ini adalah salah satu proyek favorit saya sejauh ini, ia memiliki segalanya: WebGL, Lottie, gulir animasi (Terima kasih ScrollTrigger dan GSAP❤️).

Saya tidak yakin apakah ini terjadi pada semua orang yang membaca ini, tetapi ketika Anda sedang mengerjakan sebuah proyek yang benar-benar Anda sukai, Anda akan mudah tersesat dalam prosesnya dan waktu berlalu begitu saja saat Anda mendalami kodenya!

atrium

Atria telah menjadi klien yang berharga, mempercayakan kami dengan berbagai proyek selama bertahun-tahun. Mereka mendorong gerakan layanan kesehatan preventif proaktif yang didukung oleh ilmu pengetahuan dan teknologi mutakhir.

Salah satu proyek yang mereka tugaskan adalah situs web untuk tahun 2023. Kami berhasil meluncurkan situs web dan mereka senang dengan hasilnya. Namun, seiring dengan pertumbuhan dan kematangan model bisnis mereka, kebutuhan akan situs web baru pun muncul. Versi yang diperbarui ini akan segera hadir dan kami menantikannya ditayangkan! (Anda akan dapat melihat beberapa animasi dan pratinjau situs web. 👀)

Di situs Atria versi pertama, kami menggunakan tumpukan yang sama dengan Elva, yang akan menjadi tumpukan “default” kami pada tahun 2022/2023. Namun, untuk situs Atria baru, kami meluncurkan peningkatan tumpukan terbaru. Perubahan yang paling signifikan adalah adopsi Astro. Templat dasar kami sekarang didukung oleh Astro dan kami sangat gembira dengan transisi ini.

Mengapa beralih ke Astro? Ya, React tampaknya mendominasi ruang ini dengan kerangka kerja seperti Next.js, tapi saya sangat yakin bahwa React tidak selalu diperlukan untuk jenis situs web yang kami bangun. (Saya harap ini tidak membuat marah siapa pun, teruslah membaca! 😅) Untuk menjelaskan pemikiran saya dengan lebih baik, berikut adalah video yang secara sempurna mencerminkan sudut pandang saya.

Seperti yang saya katakan, meskipun React mungkin tidak diperlukan, terkadang kita memerlukan beberapa fungsi dinamis. Di sinilah Astro bersinar: ia berfokus pada pembuatan situs web statis, namun memungkinkan jumlah interaktivitas yang tepat dan sedikit keajaiban ekstra untuk menyatukan semuanya.

Front-end dan back-end situs web baru dibuat seluruhnya dari awal. Kami masih menggunakannya alasan Untuk backend (jika Anda bertanya-tanya, Anda dapat melihat pengaturan Sanity “default” kami di sini).

Perombakan ini menghilangkan beberapa elemen “menyenangkan” dari versi sebelumnya dan mencerminkan nada yang lebih dewasa dan serius, konsisten dengan fokusnya pada industri perawatan kesehatan. Kami juga telah memperbarui pengalaman pengguliran. Meskipun biasanya kami menggunakan milik kami sendiri pengguliran halus Di sebagian besar proyek kami, kami memilih situs web ini Leniskarena lebih mudah diakses, yang merupakan pertimbangan penting bagi platform terkait layanan kesehatan.

studio nonlinier

Terakhir, mari kita bicara tentang situs web dan portofolio produk kita sendiri. Seperti yang saya sebutkan sebelumnya, saya studio nonliniersebuah studio independen kecil (saat ini kami memiliki 3 💪) yang didedikasikan untuk menciptakan pengalaman digital.

Membuat situs web Anda sendiri selalu merupakan tantangan. Keterbatasan waktu, perbedaan pendapat, perbedaan selera antar tim, dan pertanyaan yang mengganggu itu, Apakah ini cukup? Semua ini membuat prosesnya lebih rumit dari yang terlihat.

Proyek ini sebenarnya dimulai sejak lama dan memakan waktu cukup lama panjang Saatnya bersiap untuk produksi. Dalam prosesnya, saya akhirnya membuat dua beranda berbeda, dan kami bahkan mengubah warna merek kami.

Mengingat perpanjangan waktu dan perubahan persyaratan, rangkaian teknologi proyek menjadi sedikit hibrid, yang mencerminkan berbagai fase yang dilalui seiring berjalannya waktu.

Bagian belakang proyek ini konsisten dengan pilihan biasa kami: alasan. Untuk frontend kami menggunakan 11 tahunDan Tiga.js Mendukung animasi WebGL. Untuk konversi halaman yang kami andalkan taksi.jsmeskipun rencana induk perencanaan adalah hal yang konstan di semua proyek tempat kami menangani animasi. Untuk situs ini kami juga menggunakan milik kami sendiri pengguliran halusyang secara dinamis mengubah bagian halaman saat terlihat.

Salah satu bagian paling menarik dari proyek ini adalah efek pikselasi. Karena ini adalah portofolio kami sendiri, kami dapat bereksperimen lebih bebas dari biasanya dan menjelajahi berbagai cara untuk membuat visual berpiksel. Kami akhirnya menemukan solusi hebat Diagram perpindahan. Peta perpindahan adalah tekstur yang terdiri dari persegi panjang acak yang kita impor dan kemudian distorsi menggunakan noise dan pemosisian acak.

Tujuan utama dari situs web kami adalah untuk memamerkan karya yang kami lakukan dan diharapkan terhubung dengan perusahaan yang ingin menciptakan produk unik dan inovatif di ruang digital. Tujuan kami adalah menginspirasi mereka untuk menghubungi kami dan berkolaborasi.

Ya, itu dia! Ini semua adalah proyek yang ingin saya bagikan dan saya harap Anda menikmatinya! Jika Anda memiliki pertanyaan atau ingin informasi lebih lanjut, jangan ragu untuk menghubungi kami. Anda dapat menemukan saya di media sosial dan saya ingin terhubung!

latar belakang

Saya memulai karir saya lebih dari 13 tahun yang lalu di sebuah studio branding kecil di Valencia, Spanyol, tempat saya bekerja terutama dengan WordPress. Setelah beberapa tahun, saya pindah ke Tallinn, Estonia, untuk bekerja di agen pemasaran yang lebih besar. Selama masa ini, saya berganti pekerjaan beberapa kali, sebagian besar demi mendapatkan kesempatan yang lebih baik dan gaji yang lebih tinggi.

Sekitar lima tahun dalam karir saya, saya mulai menjadi pekerja lepas di samping pekerjaan tetap saya. Saya segera menyadari bahwa saya lebih memilih proyek lepas daripada pekerjaan penuh waktu. Hal ini mendorong saya untuk mulai merencanakan transisi ke pekerjaan lepas penuh waktu, meskipun idenya terasa sedikit menakutkan.

Saat saya siap mengambil langkah itu, saya menerima undangan menarik untuk bergabung linksebuah studio Finlandia yang karyanya saya kagumi. Saya memutuskan untuk menunda rencana saya untuk menjadi pekerja lepas dan memanfaatkan kesempatan ini. Waktu saya di Bond sangat bermanfaat, saya belajar banyak tentang desain dan tipografi dan saya sangat menikmati pengalaman tersebut.

Namun, setelah setahun berada di sana, ide freelance mulai muncul kembali di kepala saya. Akhirnya, pada tahun 2019, setelah satu setengah tahun di Bond, saya memutuskan untuk berkomitmen penuh menjadi pekerja lepas.

Setelah sekitar satu tahun menjadi pekerja lepas, saya bertemu Penginapan Quentinpasangan saya saat ini studio nonlinier. Quentin telah mendirikan studio dan mengundang saya untuk berkolaborasi dengannya dalam beberapa proyek. Setelah bekerja sama, tanpa pernah bertemu dengannya, dia mengajak saya untuk menjalankan studio bersamanya sebagai partner (ya, dia hebat!).

Ini adalah awal perjalanan saya ke studio non-linier.

kata-kata terakhir

Perkembangan front-end telah banyak berubah dalam 10 tahun terakhir. Saat ini, semakin banyak informasi tentang pengembangan kreatif dan cara menghasilkan animasi yang hebat. Namun saya tetap percaya bahwa menguasai dasar-dasar inti adalah kuncinya.

Jika saya memberi Anda saran, sarannya adalah ini: fokuslah pada penguasaan tata letak dan sistem grid dan prioritaskan pembelajaran vanila JS Beyond Frames, Yang Perlu Diketahui Jika Anda Menyukai Animasi Lepp Dan coba buat fungsi easing kustom Anda sendiri.

Yang terpenting, jangan takut merusak barang! Bersenang-senanglah dan coba antarmuka pengguna yang berbeda, meskipun antarmuka tersebut tidak “ramah pengguna”. Menguji, bereksperimen, dan membuat kesalahan adalah cara terbaik untuk belajar dan berkembang.

Itu dia, teman-teman! Semoga harimu menyenangkan!