Mendekati Proses Desain Situs Web dari Browser

“Ini untuk yang gila, yang tidak cocok, pemberontak, pembuat onar, pasak bundar di lubang persegi… mereka yang melihat sesuatu secara berbeda — mereka tidak menyukai aturan… Anda bisa mengutipnya, tidak setuju dengannya, memuliakan atau menjelek-jelekkan mereka, tetapi satu-satunya hal yang tidak dapat Anda lakukan adalah mengabaikannya karena mereka mengubah banyak hal…” — Kampanye Think Different Apple, Steve Jobs, 1997.

Sebagian besar waktu, desainer masih membuat mock-up layar statis menggunakan alat desain tradisional selama proses desain situs web. Tetapi beberapa desainer mengambil lompatan besar dan melewatinya, langsung ke kode, membangun dan menyesuaikan desain di browser, dan menguji desain mereka seperti yang terlihat oleh orang-orang secara real-time. Apakah mereka yang gila, yang tidak cocok, para pemberontak?

Biasanya, proses pengembangan situs web tradisional melibatkan banyak fase, termasuk perencanaan, strategi konten, perancangan, wireframing, pembuatan prototipe, pengujian, pengembangan, penerbitan, dan sebagainya. Namun selama fase desain, mungkinkah ada cara lain untuk menghasilkan desain situs responsif yang “sempurna piksel” dan mengabaikan alat desain sama sekali?

Dengan munculnya desain responsif dan berbagai perangkat yang digunakan (ponsel, tablet, laptop, desktop, jam tangan), jauh lebih sulit untuk menjaga semuanya tetap konsisten—dan dengan lebih banyak bagian yang bergerak untuk dipertimbangkan, pendekatan untuk merancang situs web dan antarmuka sedang berubah.

Meskipun desainer tidak perlu menjadi pembuat kode ahli, salah satu solusinya adalah desainer mulai bekerja secara langsung dengan kode yang menggerakkan situs web. Desainer yang dapat memecahkan kode hanya dengan sedikit HTML dan CSS akan menemukan diri mereka sebagai aset besar bagi tim mana pun dan memiliki keuntungan besar secara keseluruhan.

Mengapa? Saat melibatkan proyek desain situs web responsif dengan segala kerumitannya, desainer biasanya tidak punya waktu untuk membuat desain statis dari satu komponen (misalnya header atau footer) di 10 resolusi dan viewport yang berbeda. Meskipun mendesain hanya untuk perangkat paling populer, mereka tetap harus mempertimbangkan 4-5 layar dengan rasio aspek, kepadatan layar, dan dimensi layar yang berbeda. Tidak ada tugas kecil untuk sedikitnya.

Menyelesaikan Tantangan Desain Situs Web dengan Pena dan Kertas Terlebih Dahulu

Mari kita jelajahi pendekatan desain situs web dan proses perencanaan yang berbeda.

Fase pertama dimulai dengan kuesioner klien yang menanyakan tentang tujuan proyek umum dari perspektif bisnis, audiens target, strategi konversi, berbagai ekspektasi kinerja, dan sebagainya. Ini dilakukan sebelum fase desain aktual diluncurkan untuk lebih memahami kebutuhan klien dan proyek secara keseluruhan dan agar lebih efisien di masa mendatang.

Langkah selanjutnya adalah menulis garis besar proyek untuk memastikan bahwa ringkasan telah dipahami. Ini berguna ketika mengerjakan proyek di ceruk di mana Anda mungkin tidak memiliki banyak pengalaman atau keahlian. Sebut saja spesifikasi fungsional—tetapi kurang teknis.

Ini membantu dengan mendefinisikan terminologi, kata kunci, dan proses. Bergantung pada kerumitan proyek, sebaiknya lakukan beberapa skenario dan alur pengguna—biasanya, alur orientasi, penelusuran dan navigasi situs, atau alur “tambahkan ke troli” dan checkout jika itu adalah situs eCommerce.

Wireframing dan Prototyping

Prototyping adalah fase selanjutnya dalam proses desain website. Membangun wireframes cepat untuk berbicara tentang tata letak halaman, fungsi, dan bagaimana halaman situs akan terlihat pada perangkat yang berbeda adalah awal yang baik. Tidak perlu banyak waktu untuk membangun lusinan gambar rangka dari berbagai templat dan komponen. Prototipe situs web sederhana dapat dibuat dari ini, dan tergantung pada kerumitan proyek, alat pembuatan prototipe seperti InVision, Adobe XD, Balsamiq, Moqups, atau Axure dapat digunakan.

Papan Suasana Hati dan Inventaris Antarmuka

Langkah selanjutnya adalah menyusun papan suasana hati: kumpulan hal-hal yang mungkin disukai oleh perancang, klien, dan pemangku kepentingan lainnya di situs web lain—tata letak, tampilan dan nuansa, warna atau font, ikon, gambar, dan sebagainya. Ini akan membantu menentukan tampilan dan nuansa situs secara keseluruhan. Jika klien memiliki panduan gaya branding, itu harus dipertimbangkan dan dimasukkan ke dalam desain situs baru.

Setelah berbagai artefak disetujui—gambar rangka, prototipe, maket, papan suasana hati, dll.—ada baiknya untuk melakukan inventaris antarmuka.

Inventaris antarmuka adalah kumpulan lengkap dari potongan-potongan yang membentuk antarmuka Anda.

Brad Frost

Jika melakukan desain web responsif dari awal, maka mulailah dengan menuliskan semua komponen dan elemen dari mana proyek akan dibangun. Daftar yang tidak diurutkan akan baik-baik saja dan jelas lebih baik daripada tidak sama sekali. Misalnya tabel, tombol, gambar, tipografi, media, formulir, navigasi, komponen, dll.

Mendesain di Browser

"Merancang di browser" adalah istilah yang menjadi populer dengan munculnya desain web responsif. Untuk meminimalkan waktu yang dihabiskan dalam program desain seperti Sketch, desainer didesak untuk memindahkan fase desain ke browser, dan menggunakan CSS untuk tata letak dan gaya. Pendekatan desain situs web ini terbukti lebih efisien karena memotong banyak langkah.

Dengan berfokus pada mockup HTML, dan menguji ide desain "dalam browser" dengan CSS, waktu yang biasanya dihabiskan untuk membuat mockup statis halaman di alat desain lain seperti Sketch dapat dihemat. Merupakan ide bagus bagi desainer untuk mendapatkan editor kode yang bagus dan menghasilkan metode penyegaran browser yang baik sehingga mereka dapat melihat perubahan secara real time. Sublime Text dan Codekit, misalnya, adalah kombinasi yang hebat.

HTML dan CSS, terstruktur sebagaimana adanya, memaksa Anda untuk memikirkan pola dan membuat Anda tetap terkendali. Lebih mudah untuk memikirkan modularitas saat membangun komponen HTML yang dapat dengan mudah disalin, diduplikasi, dan diisi dengan data dinamis sambil mempertahankan struktur yang sama. Jika Anda ingin membuat modifikasi tertentu, Anda harus secara eksplisit menargetkan elemen itu, atau menambahkan kelas CSS lain.

Saat Anda menata judul, kecuali jika diganti, judul tersebut akan konsisten di seluruh situs. Hal yang sama berlaku untuk elemen lainnya. Jenis pemikiran ini memaksa Anda untuk membakukan, mengelompokkan elemen umum, menggunakan kembali elemen yang sudah ditata sebanyak mungkin, dan yang terpenting, menjaga semuanya tetap modular.

Dengan satu deklarasi CSS, Anda dapat mengubah bantalan pada tombol untuk target sentuh yang lebih baik, dan menguji langsung di ponsel, tablet, dan desktop. Ini tidak mudah dilakukan di Photoshop atau Sketch karena elemen lain tidak menyadari satu sama lain dalam tata letak, dan Anda harus mengatur ulang objek setiap kali Anda mengubah ukuran sesuatu.

Ingin mencoba skema warna header yang berbeda? Dengan bekerja hanya dengan beberapa baris kode CSS, perubahan terlihat di semua template HTML secara instan, di semua perangkat dan layar. Fleksibilitas semacam itu tidak dapat ditiru dengan mudah ketika Anda memiliki 20 mockup statis. Memang, Anda dapat menggunakan "simbol" di Sketch atau Adobe XD untuk komponen yang dapat digunakan kembali, tetapi mereka tidak serbaguna seperti CSS.

Pada fase ini, beberapa keputusan teknis perlu dibuat. Pertanyaan yang perlu dijawab adalah:

• Apakah Anda akan menggunakan praprosesor CSS? (direkomendasikan)
• Jenis kisi responsif apa yang akan Anda gunakan untuk tata letak?
• Apakah font yang ingin Anda gunakan tersedia untuk dibeli? Apakah klien memiliki anggaran untuk font web premium, atau apakah Anda akan kembali menggunakan font web gratis yang tersedia?
• Apakah Anda akan menggunakan ikon multiwarna atau satu warna? Apakah ukurannya akan bervariasi di seluruh situs? Berikut, apakah Anda mengandalkan ikon yang digambar khusus, atau pada paket ikon yang sudah ada? Ukuran apa yang perlu diakomodasi oleh ikon Anda?

Masalah dengan Font dan Desain Web Responsif

Memilih font untuk proyek desain web responsif bisa jadi menantang. Ada banyak kemungkinan dan banyak jebakan. Karena desain akan digunakan di browser, ini adalah tempat terbaik untuk mencobanya. Keterbacaan font dapat bervariasi berdasarkan ukuran, berat, warna, dan rendering, jadi dengan mencoba font langsung di browser, desainer dapat memastikan semuanya terlihat benar, dan harapan yang diinginkan terpenuhi.

Ada banyak alat online untuk memilih dan menguji font dan mencoba kombinasi jenis huruf. Pada Typetester dan Typecast, font yang berbeda dari berbagai layanan dan pengecoran dapat ditemukan dan diuji. Saat bekerja dengan layanan berlangganan font tertentu seperti Typekit atau Fonts.com, desainer dapat membuat font dan menguji templat halaman mereka secara langsung. Menghasilkan paket Typekit dengan font baru sederhana dan cepat, dan Anda dapat dengan mudah melihat bagaimana font tertentu akan mempengaruhi kinerja halaman web.

Ikon yang Sesuai dengan Gaya Merek

Jika menggambar ikon khusus, ukuran, kisi, dan gaya perlu ditentukan. Bekerja di Illustrator, setiap artboard akan mewakili satu ikon, misalnya. Ikon dapat dengan mudah diekspor dari Illustrator sebagai SVG atau PNG, yang nantinya dapat diubah menjadi font ikon dengan layanan seperti Icomoon. Disarankan untuk menggunakan ikon vektor (SVG) karena vektor tidak bergantung pada resolusi, jadi tidak ada kekhawatiran tentang bagaimana mereka ditampilkan pada layar definisi tinggi (Retina).

Panduan Gaya dan CSS untuk Menjaga Proses Desain Situs Web tetap Terkendali

Bahkan jika kita mendesain di browser, dengan lusinan template dan komponen, kita berpotensi kehilangan jejak di mana sesuatu digunakan, dan dengan cara apa. Merupakan ide bagus untuk membuat panduan gaya dari semua komponen sebagai repositori pusat. Templat halaman tertentu akan dibuat dari panduan gaya ini dengan menggabungkan komponen dan elemen UI ke dalam halaman web.

Komponen UI dapat berupa hal-hal seperti pagination, daftar produk, galeri gambar, jendela modal, elemen formulir, dll., dan digunakan sebagai blok penyusun untuk templat. Menyimpan semuanya di satu tempat sangat berguna saat tiba waktunya untuk menguji build komponen UI tertentu.

Dengan CSS, merupakan praktik terbaik untuk memisahkan gaya komponen ke dalam file terpisah. Misalnya, penataan pagination akan berada di _pagination.scss , elemen formulir di _form.scss , dan semua file ini akan disertakan dalam satu file SCSS dengan file lain (variabel, mixin, dll.).

Meskipun style.scss mungkin terdiri dari lusinan "file kecil", ketika beberapa orang mengerjakan proyek yang sama, lebih mudah untuk melacak perubahan (apakah menggunakan kontrol sumber atau tidak) jika semuanya dipisahkan menjadi potongan yang lebih kecil. Sangat penting untuk terus mempertahankan panduan gaya setelah proyek desain situs web dalam produksi, karena tim perlu melacak setiap komponen situs.

Menggunakan Stylesheet – CSS Modular

Dari sudut pandang pengembangan, ada banyak pendekatan untuk menulis CSS modular. Paling dikenal adalah SMACSS (Scalable and Modular Architecture for CSS), BEM (Block, Element, Modifier), dan OOCSS (Object Oriented CSS). Ada cukup banyak untuk dipelajari, bahkan jika Anda akhirnya mengembangkan pendekatan Anda sendiri. Pada titik ini, Anda harus memiliki koleksi komponen UI dan halaman web yang bagus, yang akan memungkinkan Anda membuat halaman web baru dengan mudah. Anda dapat menyalin dan menempelkan elemen dari panduan gaya, dan mengatur ulang sesuai kebutuhan.

Karena semuanya modular, Anda tidak perlu khawatir tentang desain dan konsistensi kode; tetapi jangan lupa bahwa jika Anda menyesuaikan seluruh sistem komponen UI, Anda harus memperbarui panduan gaya dengan perubahan (atau menambahkan komponen baru). Untuk menjaga semuanya tetap teratur, yang terbaik adalah menggunakan semacam pendekatan templating/otomatisasi untuk bekerja di halaman web seperti Gulp atau Grunt.

Apa berikutnya? Mendesain di Browser

Sekarang Anda memiliki repositori pusat komponen UI, setiap elemen didokumentasikan dan halaman web dibuat dari komponen tersebut. Mulai saat ini, kemungkinan besar desainer tidak perlu lagi membuka alat desain favorit mereka karena sebagian besar "desain" akan dilakukan langsung dalam kode, dan dipratinjau di browser.

Tidak yakin bagaimana perubahan spesifik akan berdampak pada desain? Sekarang Anda dapat melihat pratinjau desain Anda pada perangkat dan browser yang berbeda secara bersamaan untuk melihat bagaimana font berubah pada heading, atau mengubah ukuran dan warna tombol akan memengaruhi desain.

Saat menggunakan font web khusus, bagaimana menambahkan lebih banyak bobot font memengaruhi kinerja pemuatan halaman? Kami dapat menguji kinerja halaman web yang sedang dalam proses menggunakan layanan seperti WebPageTest, dan membuat keputusan berdasarkan hasil yang sebenarnya. Kami pasti tidak bisa melakukannya di Photoshop atau Sketch.

Bekerja dengan HTML dan CSS, dan bekerja di browser mungkin tidak untuk setiap desainer selama proses desain situs web. Tetapi jika desainer benar-benar peduli dengan tampilan pekerjaan mereka di berbagai perangkat dan ukuran layar, mereka perlu memastikan bahwa itu sempurna setiap saat. Sesuatu yang tampak luar biasa sebagai mockup desain statis mungkin terlihat kurang diinginkan saat dilihat di browser web pada perangkat seluler. Desainer yang cerdas harus membangun dan menguji desain web di lingkungan di mana semua orang akan melihatnya… di browser.

Bacaan lebih lanjut di Blog Desain Toptal:

• Desain Responsif – Praktik Terbaik dan Pertimbangan
• Cara Mendesain Halaman Arahan yang Efektif
• Panduan Utama untuk Desain Situs Web eCommerce
• Dasar-dasar Desain Ulang Situs Web – Studi Kasus
• Kekuatan Penggerak Desain – Studi Kasus Desain Ulang Situs Web