Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Design Theory

Merancang untuk Web Responsif

by
Read Time:8 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Adam Saputra (you can also view the original English article)

Web seperti yang kita tahu sedang berubah. Di masa lalu, desainer dan developers hanya perlu memusatkan perhatian pada satu media: layar komputer. Namun, dalam beberapa tahun terakhir, sejumlah besar perangkat yang mendukung sepenuhnya internet dengan sejumlah bentuk dan kemampuan berbeda telah muncul, yang berarti bahwa kita sekarang harus merancang situs web agar sesuai dengan nyaman dalam sebanyak mungkin ukuran layar, bentuk, dan resolusi yang Anda bisa mungkin dipikirkan.

Pendekatan fixed-width lebar tetap kita yang lama tidak lagi menjadi pertanyaan. Jadi apa yang dilakukan? Jawabannya, pembaca yang budiman, terletak pada Desain Web Responsif.


Apa itu Desain Web Responsif?

Ide Desain Web Responsif, istilah yang diciptakan oleh Ethan Marcotte, adalah bahwa situs web kita harus menyesuaikan tata letak dan desain mereka agar sesuai dengan perangkat apa pun yang memilih untuk menampilkannya.

Dalam bukunya, yang tepat berjudul "Desain Web Responsif" ia menguraikan tiga bagian ke situs web responsif:

  1. Kotak fluida
  2. Gambar cairan
  3. Queri media

Karena artikel ini ditujukan untuk desainer bukan developers, dan karena saya tidak ingin menginjak konten jari kaki Ethan, saya tidak akan membahas tiga hal ini.

Namun, penting bagi Anda, sebagai perancang, untuk memahami konsep dasar RWD agar dapat mendesain situs web yang lebih baik yang akan menjadi responsif ketika dikodekan. Saya sangat menyarankan Anda membaca tiga artikel ini oleh Ethan: Fluid Grids, Fluid Images, dan Responsive Web Design.

GridsGridsGrids
Ilustrasi oleh Kevin Cornell

Jika Anda hanya membaca salah satunya, buatlah yang terakhir, yang ditulis pada bulan Mei tahun lalu. Membacanya mengubah cara saya, dan saya curiga banyak orang lain seperti saya, melihat internet. Karya Ethan tidak kurang dari kejeniusan, dan saya percaya setiap orang yang mencari nafkah dari web harus diminta untuk membaca artikel ini.


Peran Desainer

Jika Anda seorang desainer yang hanya mendesain, yang berarti Anda tidak bertanggung jawab atas HTML dan CSS situs tempat Anda bekerja, banyak dari ini mungkin hanya akan menguasai pikiran Anda. Anda bahkan mungkin bertanya-tanya mengapa sebenarnya Anda perlu tahu tentang Desain Web Responsif.

Saya selalu percaya bahwa siapa pun yang merancang situs web harus menjadi orang yang nantinya menghidupkan kedalamnya, melalui HTML dan CSS. Saya mengerti bahwa ini jelas bukan kasus banyak proyek, dan saya akan menghargai kemampuan seseorang seandainya mereka memilih untuk hanya menyusun desain atau hanya menulis kode.

Sangat penting untuk memahami bahwa situs web bukan satu atau yang lain, itu adalah perkawinan antara desain dan kode, masing-masing bergantung satu sama lain untuk menciptakan pengalaman yang mulus. Untuk benar-benar mempelajari cara mendesain situs web, Anda harus memahami bagaimana desain nantinya akan diimplementasikan dalam kode, meskipun itu hanya pemahaman yang belum sempurna.

Saya akan mengingatkan Anda lagi: artikel ini untuk para desainer. Dalam paragraf yang akan datang, saya akan membahas dengan tepat bagaimana, sebagai desainer, kita harus mengubah cara kita mendesain agar lebih sesuai dengan proses desain web responsif.


Sistem Grid dan Anda

GridsGridsGrids
The Grid System, contoh sempurna dari desain berbasis grid yang kaku yang harus Anda perjuangkan.

Bahkan jika Anda tidak merancang untuk Desain Web Responsif, Anda harus mendesain dengan semacam sistem grid. Sebagai desainer modern dan terdidik, Anda seharusnya sudah memiliki pemahaman tentang apa artinya menggunakan kisi, jadi saya akan melewatkan bagian berenda.

Salah satu pilar Desain Web Responsif adalah The Fluid Grid. Pada dasarnya, ini berarti bahwa kisi Anda, yang secara tradisional diukur dalam piksel sekarang harus dipertimbangkan dalam hal persen dari total lebar halaman. Lebar sebenarnya dihitung dari setiap kolom di situs web responsif berubah setiap kali jendela browser berubah ukuran, dan tidak dapat dijamin sama di seluruh perangkat yang berbeda.

Inilah sebabnya mengapa Anda harus menggunakan kisi saat mendesain untuk Desain Web Responsif. Itu suatu keharusan, bukan kerendahan hati. Anda tidak dapat membuat situs web responsif tanpa desain berbasis grid; itu hanya keluar dari pertanyaan, itu tidak akan berhasil.

Mengetahui bahwa desain Anda tidak akan memiliki ukuran piksel yang sama persis untuk setiap kolom seperti di comp desain Anda, ada beberapa langkah lain yang harus Anda ambil untuk memastikan bahwa skala jaringan Anda tanpa masalah.

  1. Cobalah untuk tidak menggunakan perbatasan bertekstur di kolom Anda, seperti ini:

    Textured BordersTextured BordersTextured Borders

    Hal-hal semacam ini akan sulit bagi developers Anda untuk digunakan di situs web responsif, karena mereka tidak akan skala dengan baik secara horizontal. Jika Anda membuat kolom lebih lebar atau lebih tipis, perbatasan bertekstur akan kesulitan.

  2. Gradien horisontal adalah larangan lain.

    Horizontal GradientsHorizontal GradientsHorizontal Gradients

    Untuk alasan yang sama dengan poin sebelumnya, yaitu ketidakmampuan untuk skala secara horizontal, jangan lakukan ini. Ya, itu mungkin dengan properti CSS3 baru, tetapi jika Anda menargetkan audiens pengguna yang kurang mengerti teknologi, banyak yang tidak akan memiliki browser yang kompatibel dan efeknya akan sia-sia.

  3. Jika Anda memiliki background bertekstur dalam sebuah kolom, pastikan itu adalah salah satu yang dapat dengan mudah dipasang. Lakukan: gunakan gandum, grunge, apa pun. Jangan: gunakan foto, ilustrasi, atau gambar yang tidak dapat dimiringkan.


Berpikir Dengan Proporsi

Dalam menurunkan desain Anda secara horizontal untuk mengakomodasi layar yang lebih kecil, akan ada titik di mana beberapa teks pada halaman tersebut akan terlalu besar. Tentu, tajuk 100pt terlihat hebat di psd Anda, tetapi itu tidak akan berfungsi pada layar iPhone, misalnya: itu akan terlalu besar dan teks harus membungkus beberapa baris, mengurangi dampak dari keputusan awal Anda .

Di sini developer, menggunakan queri media CSS, akan menyesuaikan ukuran font agar lebih sesuai dengan layar. Ini adalah keputusan desain, jadi sebagai desainer, Anda harus memiliki suara di dalamnya, kan?

Untuk membantu developer dan juga untuk menjaga integritas desain asli Anda, Anda harus memutuskan teks apa pada halaman yang harus tetap konstan, yaitu, tetap dengan ukuran yang sama di setiap lebar layar, dan teks apa yang harus disesuaikan. Contoh yang baik dari teks berukuran konstan adalah salinan tubuh, atau header kecil yang bertindak sebagai versi yang lebih besar dari salinan tubuh.

Anda juga harus memutuskan, mengenai teks yang akan disesuaikan, bagaimana harus disesuaikan.

Inilah cara yang salah untuk melakukannya: x harus selalu 20pt lebih besar dari y. Pemikiran ini tidak hanya merepotkan pengembang, tetapi juga tidak masuk akal dalam kanvas responsif, karena Anda memfaktorkan konstanta, nilai yang tidak akan pernah berubah, apa pun ukuran layarnya. Untuk RWD, ini adalah kesalahan besar, karena tidak memperhitungkan fluiditas yang melekat pada web.

Inilah cara yang tepat untuk melakukannya: x harus selalu 1.5 kali lebih besar dari y. Dengan cara ini menerima bahwa satu-satunya arti sebenarnya desain keluar dari ukuran font adalah seberapa besar atau kecil teks dibandingkan dengan teks lain pada halaman. Nilai konstan, seperti 24pt atau 67pt, tidak ada artinya.

Setelah Anda mengetahui semua ini, pastikan untuk menyampaikan informasi ini kepada developer. Itulah satu-satunya cara untuk memastikan bahwa keputusan Anda, sebagai perancang, ditampilkan di halaman web aktual yang akan dimuat oleh pengunjung ke browser mereka dan nikmati.


Jadikan Modular 

Bagian terakhir dari teka-teki Responsif adalah Queri Media. Jika Anda tidak terbiasa, Queri Media adalah cara untuk menerapkan aturan CSS ke halaman berdasarkan (untuk tujuan kita) ukuran browser yang menampilkan.

Kekuatan luar biasa dari hal ini adalah Anda dapat menyesuaikan, dan memang mendesain ulang, seluruh tata letak situs web Anda agar sesuai dengan peramban yang lebih kecil atau lebih besar dari yang awalnya Anda desain.

Untuk desain terbaik untuk kemungkinan ini, Anda harus mulai berpikir tentang berbagai bagian dari desain Anda, seperti konten utama, sidebar, header, dan navigasi, bukan sebagai potongan puzzle yang harus tetap di tempat yang sama relatif satu sama lain, tetapi sebagai modul yang dapat diatur ulang, ukuran ulang, dan dikocok tanpa arti aslinya hilang.

Berikut ini sebuah contoh: bayangkan Anda mendesain situs web yang terlihat seperti ini (saya yakin Anda pernah bekerja dengan tata letak yang sama sebelumnya):

A modular approachA modular approachA modular approach

Bagian penting dari contoh ini adalah identifikasi kelompok elemen yang harus tetap bersama untuk tata letak apa pun. Misalnya, semua tautan navigasi harus tetap bersama, karena jika tidak, mereka tidak akan masuk akal. Ini adalah modul, bagian informasi yang dapat dipindahkan di antara modul-modul lain tanpa kehilangan artinya.

Membangun situs Anda dengan modul-modul ini dalam pikiran membuatnya mudah untuk membayangkan bagaimana tata letak Anda akan beradaptasi untuk berbagai ukuran viewport. Contohnya:

An alternate layout

Lihat bagaimana meskipun modul-modul berada di tempat yang berbeda, mereka masih menampilkan informasi yang sama seperti aslinya, hanya dalam bentuk yang lebih mudah dicerna oleh perangkat seluler atau peramban lain yang berukuran berbeda.

Tidak ada sesuatu yang harus Anda ubah dalam tata letak Anda untuk membuat modularitas ini berfungsi, itu hanya cara berbeda untuk melihat gambar yang sama. Semoga perspektif baru ini akan membantu Anda membuat keputusan yang lebih tepat saat Anda mengerjakan proyek desain masa depan Anda.


Kesimpulan 

Seperti banyak di internet, Desain Web Responsif adalah evolusi, bukan revolusioner. Ini hanyalah langkah alami berikutnya untuk web, bukan memikirkan kembali semuanya. Sebagai desainer, kita harus terus-menerus menyesuaikan workflow kita, dan kali ini tidak berbeda.

Desain Web Responsif adalah masa depan, atau setidaknya, itu akan terjadi ketika pengembang dan desainer menerimanya. Sebagai perancang dan developers web, kita adalah satu-satunya yang memiliki kekuatan untuk melihat standar baru yang luar biasa ini membuahkan hasil. Wujudkan, untuk Anda, untuk saya, untuk internet pada umumnya!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.