Mengapa Berpikir ke Depan Sangat Penting dalam Desain Web

Perbedaan antara membangun situs web yang bagus dan yang biasa-biasa saja biasanya ditentukan sejak dini. Seringkali masalah desainer web mengecat proyek mereka menjadi "sudut" virtual. Di situlah sebuah desain menjadi tidak fleksibel dan tidak mampu mengakomodasi berbagai use case.

Hal ini cenderung terjadi pada fase prototyping. Kami menghabiskan banyak waktu dan energi kreatif untuk sebuah ide yang terlihat mengagumkan. Klien kami mungkin menyukainya sama seperti kami. Tetapi hanya ketika kita benar-benar mulai membangunnya, kita mulai sepenuhnya memahami konsekuensinya.

Mockup desain berfungsi sebagai kompas untuk proyek situs web kami. Jika kita gagal untuk berpikir ke depan mengenai apa yang dibutuhkan oleh elemen-elemen tertentu, itu bisa berarti terjebak dalam situasi yang buruk. Hasil akhirnya adalah situs yang harus membuat beberapa kompromi serius agar dapat bekerja pada perangkat dan browser yang berbeda. Itu dapat berdampak negatif pada aksesibilitas, kinerja, dan kepatuhan terhadap praktik terbaik.

Untungnya, beberapa perencanaan akan membantu Anda menghindari proses pembuatan yang berantakan. Mari kita lihat beberapa item utama yang perlu dipertimbangkan sebelum membagikan ide Anda dengan klien.

Bagaimana Elemen Beradaptasi dengan Layar Berbeda

Ada alasan mengapa ada begitu banyak pembicaraan tentang pendekatan "mobile first" untuk desain web. Intinya, ini memungkinkan kita untuk memulai dengan hal-hal mendasar dari sebuah situs web. Dari sana, kita dapat menambahkan dan meningkatkan saat viewport menjadi lebih besar.

Namun, masing-masing dari kita memiliki preferensi sendiri untuk membangun prototipe. Bagi mereka yang masih menggunakan pendekatan berbasis desktop, penting untuk memikirkan bagaimana semua elemen desain mewah itu akan bekerja di telepon.

Jika Anda berencana untuk menerapkan CSS Grid atau Flexbox, mereka akan banyak membantu dalam hal memanfaatkan real estat layar yang tersedia dengan sebaik-baiknya. Tetapi elemen lain mungkin memerlukan lebih banyak upaya untuk bekerja.

Slider besar, misalnya, bisa menjadi sangat sulit digunakan pada layar kecil. Gambar yang rumit mungkin tidak terlalu berpengaruh dan teks mungkin melampaui batas. Performa juga mungkin tertinggal.

Dalam hal ini, Anda mungkin harus memutuskan apakah penggeser layak ditampilkan di seluler. Atau mungkin bisa di-refactored untuk beradaptasi lebih baik untuk bekerja di semua situasi.

Dampak Aksesibilitas

Desain dimulai dengan memilih font dan warna yang sesuai. Keduanya sangat terkait dengan branding dan aksesibilitas.

Font harus tajam dan berukuran untuk keterbacaan. Meskipun skrip mewah dan tipe dekoratif dapat terlihat indah, skrip tersebut harus cukup besar untuk dibaca dan dibatasi untuk penggunaan dalam heading. Jika persyaratan tersebut tidak dapat dipenuhi secara wajar, mungkin yang terbaik adalah menghapusnya dari proyek Anda sama sekali.

Selain itu, kontras warna juga harus menjadi perhatian utama. Warna latar belakang dan latar depan harus mencapai rasio kontras yang dapat diterima agar dianggap dapat diakses. Plus, itu hanya latihan yang baik.

Jika Anda tidak yakin tentang palet Anda, gunakan alat online untuk menentukan kesesuaiannya. Terkadang, hanya sedikit penyesuaian yang diperlukan untuk melewati standar WCAG AA.

Di luar dua item itu, ada baiknya juga memiliki rencana tentang bagaimana Anda akan menampilkan elemen seperti ikon. Apakah mereka intuitif? Apakah mereka akan disertai dengan teks?

Kompatibilitas Mundur

Tidak setiap situs web harus sepenuhnya kompatibel dengan, katakanlah, Internet Explorer 9. Dan browser lawas tidak serta merta menghalangi kita untuk menggunakan CSS atau JavaScript terbaru. Tetapi beberapa pemikiran harus dimasukkan ke dalam kompatibilitas ke belakang.

Perhatian khusus adalah elemen desain yang akan membuat situs web sama sekali tidak dapat digunakan dalam perangkat lunak lama. Bahkan jika browser tertentu membuat sebagian kecil pengunjung situs Anda, itu masih menyisakan beberapa konversi potensial di atas meja.

Ada baiknya mempertimbangkan apa efek keputusan desain terhadap pengguna ini. Fallback yang tersedia untuk teknologi tertentu mungkin cukup untuk membuat segala sesuatunya terlihat layak dan dapat digunakan. Bahkan lebih baik adalah bahwa mereka bisa cukup sederhana untuk diterapkan.

Dulu desainer diharapkan untuk memastikan elemen tampak dan berfungsi persis sama di semua browser. Itu mungkin permintaan yang terlalu berlebihan akhir-akhir ini. Selama pengguna dapat menavigasi dan mengkonsumsi konten pada beberapa perangkat lunak yang lebih kuno, itu mungkin sudah cukup.

Skenario yang Belum Terjadi

Bahkan situs web terkecil pun akan memiliki kebutuhan untuk berkembang seiring waktu. Saat jenis konten baru ditambahkan, mereka harus diperhitungkan dalam desain. Jika Anda tidak siap, menerapkan item ini dapat bertentangan dengan apa yang sudah ada.

Pikirkan untuk menambahkan serangkaian video, misalnya. Meskipun proses menambahkan konten itu mungkin cukup mudah – bagaimana hal itu cocok dengan tampilan yang sudah Anda buat? Apakah Anda akan menggunakan UI browser default atau membuat sesuatu yang sesuai dengan merek Anda?

Meskipun Anda tidak selalu dapat memprediksi masa depan, Anda dapat merencanakan segala macam kemungkinan. Ini adalah bagian dari apa yang sistem desain memungkinkan Anda capai. Dengan menetapkan beberapa pedoman default sejak awal, Anda akan lebih mudah menangani penambahan di masa mendatang.

Kenyataannya, apa yang kita rancang hari ini kemungkinan besar akan berubah di masa depan. Oleh karena itu, ada baiknya bersiap untuk kemungkinan itu.

Membangunnya dengan Benar untuk Pertama Kalinya

Membuat mockup pertama itu lebih dari sekadar membuat segala sesuatunya terlihat bagus. Bahkan lebih dari sekadar membuat klien Anda terkesan. Memang, ini adalah latihan yang memaksa kami untuk melihat proyek kami secara keseluruhan.

Estetikanya harus enak dipandang. Namun desainnya juga harus dapat diakses dan mampu beradaptasi dengan berbagai layar. Plus, itu mungkin harus mengakomodasi berbagai jenis konten seiring perkembangannya.

Jika itu terdengar berlebihan – tarik napas dalam-dalam. Di sinilah pengalaman dan keahlian Anda dapat membantu. Alat yang tepat juga dapat digunakan.

Pikirkan tentang apa yang berhasil (dan apa yang tidak) dalam proyek Anda sebelumnya. Cari cara untuk menerapkan fitur yang tangguh. Lakukan itu dan Anda akan menuju proyek yang sukses!