Bagaimana kami merancang dan membangun Pahlawan Halaman Beranda beragampengetahuan.com – Beragampengetahuan

Terkadang beranda perusahaan adalah pengenalan pertama merek kepada calon pelanggan. Ini adalah ruang yang sangat penting. Pada awal tahun 2025, kami mendesain ulang beranda kami sebagai bagian dari desain ulang situs web secara menyeluruh.

Beranda lama kami, Hero, secara teknis menampilkan semua platform yang kami dukung – tetapi terasa terlalu korporat, seperti daftar fitur yang mengenakan jas hujan.

Pahlawan sebelumnya menampilkan judul animasi yang diputar di seluruh platform media sosial yang didukung beragampengetahuan. Meskipun menyelesaikan pekerjaannya, tidak terasa terlalu “terbebani”. Kami ingin memberikan kesan pertama yang lebih kuat – lebih jelas dan lebih menyenangkan.

Jadi kami mulai merancang dan merekayasa hero beranda baru dan memvalidasinya dengan pengujian A/B sederhana. Inilah yang terjadi.

Mengembangkan konsep desain

Tujuan desain utama bagian Pahlawan baru masih untuk menunjukkan berapa banyak platform media sosial yang didukung beragampengetahuan, namun untuk menambah kesenangan dan minat.

Perancang UX pemasaran kami yang berbakat, Kate Baldrey, mendapatkan ide untuk menata ubin mengambang pada kisi-kisi dengan kedalaman yang berbeda-beda (penggambaran halus pada kisi-kisi sosial).

Ubin tersebut akan menampilkan berbagai ikon platform media sosial serta emoji untuk membangkitkan pengalaman keterlibatan media sosial.

Dengan ide desain awal di tangan, kami segera mulai merancang hal yang nyata.

Membangun desain

Semua proyek beragampengetahuan.com kami sangat bergantung pada kerja sama desainer dan insinyur.

Artinya, alih-alih secara formal membuat desain dengan ketelitian tinggi di Figma dan kemudian menyerahkannya kepada teknisi untuk dibuat, kami menghabiskan waktu bersama melalui telepon untuk mendiskusikan ide desain, mengeksplorasi pendekatan, mengatasi tantangan, dan melakukan perbaikan.

Pendekatan ini mengurangi artefak dan penyerahan desain ad-hoc, menghemat waktu secara signifikan dan meningkatkan kualitas pekerjaan.

Untuk memfasilitasi pemasangan, kami menjalankan pratinjau langsung lingkungan pengembangan lokal sejak awal proyek. Ini memberi kita URL produksi langsung bersama yang diperbarui setiap kali kode berubah dan memperlakukan media akhir (halaman web) sebagai satu-satunya sumber kebenaran.

desain pecah

Desain bagian pahlawan menampilkan sejumlah “ubin” yang ditempatkan pada kotak di belakang konten bagian pahlawan.

Beberapa ubin ini menampilkan emoji dan menambah kedalaman desain dengan ukurannya yang lebih kecil, tidak terlalu buram, dan sedikit buram, memberikan kesan bahwa ubin tersebut jauh dari atau di bawah konten lain.

Ubin yang tersisa menampilkan ikon untuk berbagai saluran media sosial yang didukung oleh beragampengetahuan, termasuk Bluesky, Facebook, Google Business Profile, Instagram, LinkedIn, Mastodon, Pinterest, Threads, TikTok, X (Twitter), dan YouTube. Ubin ini lebih besar, lebih buram, dan tanpa buram, tampak lebih dekat ke pemirsa.

Kisi visual membentuk “unit” berukuran ubin saluran dan dipusatkan pada bagian pahlawan.

Desain dan rekayasa yang mengutamakan aksesibilitas

Saya mengikuti proses desain dan rekayasa yang saya sebut “aksesibilitas yang utama”. Ini berarti pekerjaan kami dimulai dengan fondasi yang dapat diakses, yang kami pertahankan selama proses desain dan pembangunan.

Untuk bagian pahlawan ini, kisi-kisi visual dan ubin bersifat dekoratif, jadi kami menyembunyikannya dari teknologi pendukung agar tidak diumumkan kepada orang-orang yang mencoba menemukan dan berinteraksi dengan konten dan fitur penting. Hal ini dicapai dengan membungkus desain dekoratif aria-hidden=”true”.

Kedua, desainnya menampilkan animasi dan fitur interaktif, yang dapat menyebabkan ketidaknyamanan bagi orang-orang dengan gangguan vestibular atau sensitivitas gerakan. Untuk menghindari hal ini, semua animasi dinonaktifkan secara default dan hanya diaktifkan saat kami mendeteksinya prefers-reduced-motion: no-preference Dalam CSS dan JavaScript.

Setelah mengambil pendekatan ini, kita bisa mulai menata letak dan membuat animasi.

Menerapkan tata letak grid

Menerapkan tata letak ini terbukti menjadi tantangan yang menarik, karena grid perlu merespons semua ukuran layar dengan memungkinkan kami memposisikan ubin sesuai dengan ruang yang tersedia. Itu juga perlu memiliki simetri horizontal yang dipantulkan dari pusat bagian pahlawan.

Untuk mencapai hal ini, kami sebenarnya membuat dua container grid CSS terpisah, satu untuk separuh horizontal bagian hero, yang kami sebut container “terdepan” dan “terakhir”.

Setiap wadah akan memiliki kolom dan baris otomatis yang diatur sesuai ukuran ubin. Agar dapat dikelola, kami membuat properti kustom CSS (variabel): --_tile-size: 3rem; (Awalan garis bawah adalah konvensi yang kami gunakan untuk menunjukkan bahwa variabel bersifat pribadi untuk kelas ini, bukan variabel global/bendera desain). Variabel ini juga memungkinkan kita mengubah ukuran ubin di seluruh breakpoint untuk desain responsif. Kita kemudian dapat menggunakan variabel ini di grid CSS:

.decorationGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--_tile-size));
  grid-template-rows: repeat(auto-fill, var(--_tile-size));
}

ini repeat(auto-fill, var(--_tile-size)); Deklarasi ini akan membuat kolom/baris sebanyak mungkin dengan ukuran yang ditetapkan (dalam hal ini ukuran ubin kita).

Dengan kedua wadah grid CSS, kita mempunyai masalah: grid CSS mengikuti arah teks halaman. Untuk bahasa Inggris, mode penulisannya adalah “ltr” (kiri ke kanan), tetapi ini berbeda-beda menurut bahasa dan budaya.

Ini berarti jika grid “terdepan” kita tidak pas dengan kolom lainnya, maka akan ada ruang kosong di sebelah kanannya. Ruang kosong ini berakhir di tengah-tengah bagian hero dan membuat layout menjadi tidak simetris.

Untuk mengatasi masalah ini, kita bisa menggunakan atribut arah di CSS. Karena kami menggunakan aria-hidden=”true” untuk konten visual dekoratif ini, orientasinya dapat diubah dengan aman tanpa memengaruhi konten teks sebenarnya. Pertama, kita perlu mengaturnya direction: ltr; Pada .decorationGrid untuk mencegah orientasi berubah ketika halaman diterjemahkan. Selanjutnya kita perlu mengaturnya direction: rtl; Pada grid pemimpin kami, ini memungkinkan grid untuk memulai dari tepi kanan dan menempatkan ruang kosong di sebelah kiri. Ini menciptakan simetri horizontal yang kita perlukan untuk cermin.

tempatkan ubin

Dengan grid yang simetris dan tumbuh secara otomatis, kita dapat menempatkan ubin ke dalam sel khusus.

Karena grid kita dicerminkan, ini akan menyebabkan kolom grid juga dicerminkan. Menggunakan grid terdepan kami, Kolom Grid: 2; akan menempatkan item di kolom kedua Dari tengah bagian pahlawan.

Untuk menghindari kebingungan kita dapat membuat a --_column-from-center Variabel yang digunakan dengan ubin kami:

.tile {
  grid-column: var(--_column-from-center, 0);
}

Variabel ini memudahkan untuk menentukan kolom yang diinginkan untuk setiap ubin, dan kita dapat menggunakan grid-row sebagai posisi baris sesuai yang diharapkan.

Desain responsif

Kami memulai mobile-first dengan desain responsif dan mulai menempatkan ubin berdasarkan ruang yang tersedia. Kami menyembunyikan banyak ubin secara default, memprioritaskan ikon media sosial, dan kemudian dengan hati-hati menempatkan ubin yang terlihat untuk menghindari gangguan dengan konten teks dan formulir email di Hero.

Seiring bertambahnya ukuran layar, kami cukup menambahkan breakpoint kueri media baru di CSS untuk membuat lebih banyak ubin terlihat dan mengatur ulang sesuai ruang yang tersedia.

Setelah kami mencapai titik henti sementara maksimum sekitar 1344 piksel, semua ubin terlihat dan memiliki posisi khusus yang tidak berubah dengan layar yang lebih besar.

animasi dan interaksi

Saat kami bekerja sama dalam desain dan pembuatan, kami mendiskusikan kemungkinan animasi untuk bagian dan ubin pahlawan. Kami mendapatkan gagasan bahwa ketika kursor bergerak ke bagian pahlawan, ubin bereaksi terhadap kursor dengan ditarik ke arahnya.

Untuk memvalidasi ide dan pendekatan teknis, pertama-tama kami membuat prototipe animasi dan interaksi masing-masing ubin.

Untuk mencapai hal ini, kita menentukan “zona aktivasi”, atau seberapa dekat kursor dengan ubin sebelum ubin mulai bergerak ke arah kursor.

Kami menggunakan animasi pegas untuk menganimasikan ubin ke arah kursor ketika kursor berada dalam area aktivasi. Animasi pegas meniru pegas fisik di kehidupan nyata, sehingga memungkinkan kita menentukan parameter seperti seberapa kaku atau longgar animasi yang terasa, jarak maksimum yang dapat dipindahkan ubin, dan seberapa cepat ubin kembali ke posisi semula saat kursor meninggalkan area aktif.

Pembuatan prototipe menggunakan satu ubin memungkinkan kami memvisualisasikan dan dengan cepat menyesuaikan parameter ini hingga terasa tepat dan kami yakin bahwa pendekatan teknis akan berhasil.

Jika satu ubin berfungsi, kami membuat komponen fungsi ini untuk diterapkan ke ubin lainnya. Setelah semuanya siap, kita dapat menikmati animasi penuh dari bagian pahlawan, dengan segala sesuatunya bergerak dan bereaksi dengan anggun.

Pertimbangkan interaksi non-kursor

Karena animasi bergantung pada kursor, maka animasi bergantung pada mouse, stylus, atau perangkat input serupa. Untungnya, area aktivasi juga berfungsi dengan peristiwa klik, yang berarti klik pada layar sentuh juga akan mengaktifkan animasi.

Untuk perangkat layar sentuh, hal ini memungkinkan orang menemukan interaksi ketika mereka mengetuk input email atau tombol mulai. Ini juga merupakan detail tersembunyi yang menarik yang mungkin akan ditemukan orang pada awalnya.

Buat garis kisi visual

Detail terakhir yang kami masukkan adalah garis kisi, yang secara visual memperkuat susunan ubin. Kita memerlukan garis kisi yang cocok dengan ukuran ubin dan menskalakannya dengan baik dengan kisi responsif yang digunakan untuk tata letak ubin.

Untuk mencapai hal ini, kami membuat latar belakang gradien linier berulang menggunakan beberapa trik pengukuran cerdas. Gradien linier menciptakan garis 1px di sepanjang bagian bawah dan salah satu tepi latar belakang, yang bila diulang akan menghasilkan kotak persegi. Ia juga menggunakan variabel –_tile-size untuk memastikan ukurannya sama dengan ubin:

.decorationGridLinesLeading {
  /* 1px side and bottom grid lines */
  background-image:
    linear-gradient(to left, var(--grid-color) 0.0625rem, transparent 0.0625rem),
    linear-gradient(to bottom, var(--grid-color) 0.0625rem, transparent 0.0625rem);
  /* Match the repeating background to the tile size */
  background-size:
    var(--_tile-size) var(--_tile-size),
    var(--_tile-size) var(--_tile-size);
  /* Position the background in the top right (center of the hero section) */
  background-position:,
   right top,
   right top;
}

Separuh grid lainnya dicerminkan, jadi kita cukup menukar kata kunci kiri dan kanan.

Untuk menyelesaikan pekerjaan, kami ingin memudarkan tepi grid bagian pahlawan agar menyatu dengan halaman lainnya. Kita dapat mencapainya dengan gradien linier tambahan dari transparan ke warna latar belakang halaman:

.decorationGridLinesLeading {
  /* Add top, side, and bottom fades */
  background-image:
    linear-gradient(to top, var(--background-color) 0%, transparent 20%, transparent 80%, var(--background-color) 100%),
    linear-gradient(to right, var(--background-color) 0%, transparent 20%),
    linear-gradient(to left, var(--grid-color) 0.0625rem, transparent 0.0625rem),
    linear-gradient(to bottom, var(--grid-color) 0.0625rem, transparent 0.0625rem);
  /* Stretch the fades to 100% of the element's size */
  background-size:
    100% 100%,
    100% 100%,
    var(--_tile-size) var(--_tile-size),
    var(--_tile-size) var(--_tile-size);
  background-position:
    initial,
    initial,
    right top,
    right top;
}

Setelah berada di tempatnya, kita selesai dengan bagian pahlawan:

hasil

Seperti disebutkan di awal artikel ini, kami meluncurkan desain bagian pahlawan baru ini sebagai bagian dari pengujian A/B untuk memvalidasi dampak desain dan interaksi baru.

Dua minggu setelah percobaan berlangsung, kami sangat gembira saat mengetahui bahwa desain baru ini telah meningkatkan jumlah pendaftaran dan bahkan memicu beberapa perayaan di media sosial. Kami sangat yakin dengan arah baru sehingga kami meluncurkan bagian Pahlawan Halaman Beranda baru dan mencapai lalu lintas 100%.

Bekerja sama dengan Kate dalam proyek ini sangat menyenangkan dan semakin mengembangkan keterampilan teknik desain saya dengan banyak tantangan tata letak, animasi, dan interaksi yang menarik.

Desain ini masih ada sampai sekarang, tapi kami selalu punya ide baru untuk memasak dan akan terus mengulanginya dari sini.