Praktik & Tip Terbaik Desain Web Responsif

Karena Google terus memprioritaskan situs ramah seluler, memiliki situs web responsif untuk bisnis Anda menjadi semakin penting. Ketika situs web Anda responsif, itu akan terlihat bagus di semua perangkat (seluler, tablet, desktop, dll.)

Meskipun mungkin tampak menakutkan untuk merombak situs Anda yang sudah ada, desain situs web responsif tidak harus sulit. Di bawah ini adalah beberapa tip praktis dan praktik terbaik yang akan membantu Anda menghasilkan produk situs web yang hebat dan dapat digunakan dengan mudah dan dengan sedikit keributan.

Tentukan Gaya Anda

Membuat Palet Warna

Baik Anda bekerja dengan palet warna merek yang telah ditentukan sebelumnya atau membuat sendiri, ingatlah untuk menyertakan warna kontras yang cukup sehingga Anda dapat membuat hierarki visual yang terdefinisi dengan baik. Menambahkan berbagai nuansa warna netral akan memberi Anda banyak fleksibilitas dalam desain Anda.

Pikirkan ponsel dulu

Pikirkan tentang bagaimana elemen web Anda akan terlihat di perangkat seluler kecil terlebih dahulu, lalu terapkan ke ukuran area pandang yang lebih besar. Misalnya, apakah tombol Anda cukup besar untuk menekan jari dan berjarak cukup jauh dari elemen lain yang dapat diklik?

Buat panduan gaya Anda setelah tata letak awal Anda, bukan sebelumnya

Beberapa orang suka membuat panduan gaya dan menentukan gaya elemen web mereka sebelum memulai prototipe atau mockup fidelitas tinggi. Namun, setelah elemen diposisikan pada halaman, dan dilihat relatif satu sama lain, keseluruhan desain halaman mungkin hilang. Buat beberapa maket untuk memulai, buat gaya Anda, lalu lengkapi halaman Anda yang tersisa jika perlu.

Konsisten tidak harus berarti membosankan

Heuristik kegunaan penting tetapi begitu juga menonjol dari miliaran situs web lain di web. Jangan takut untuk mencoba sesuatu yang berbeda, agar lebih berkesan dan membantu merek situs web Anda menonjol dari yang lain. Situs web Anda bisa menjadi kreatif dan juga sangat bermanfaat. Seorang desainer UI atau direktur seni digital yang hebat harus dapat menyeimbangkan kedua elemen ini.

Beberapa elemen yang mungkin ingin Anda gaya dan standarkan meliputi:

• Level Judul: H1, H2, H3…
• Citra Utama atau Pahlawan
• navigasi utama
• Navigasi Sekunder
• salinan tubuh
• Daftar bernomor dan berpoin
• Panggilan atau lencana
• Perawatan untuk gambar konten
• Gaya kutipan tarik
• Widget (rotator, sematan sosial, kalender, dll.)
• Tombol ajakan bertindak yang besar
• Tombol sekunder atau tautan teks
• Elemen bentuk
• Catatan kaki dan jenis tikus legal
• Berbagi Sosial

Jenis

Salin Blok

Mainkan dengan spasi huruf (pelacakan), margin, dan spasi baris (terdepan) untuk membantu mendefinisikan ulang hierarki Anda. Semakin rapat spasinya, semakin berat dan klaustrofobia teks akan muncul.

Ingatlah bahwa blok teks panjang yang membentang dari sisi kiri ke kanan layar desktop Anda bisa sangat sulit dilihat. Gunakan blok salinan yang lebih sempit jika memungkinkan. Namun, terlalu banyak jarak dapat menciptakan perasaan gersang dan berserakan.

Jangan takut putus

Jika Anda memiliki halaman web yang kontennya sangat berat, pisahkan konten sedikit dengan kutipan tarik, info, gambar, daftar gaya, tabel, dll. Anda juga dapat menggabungkan akordeon, drop down, dan komidi putar untuk menjaga halaman tetap menarik dan informatif .

Ya, orang-orang Gulung ke bawah

Jangan jatuh ke dalam jebakan kuno dengan pemikiran bahwa semua yang ada di halaman web Anda harus muncul di atas flip digital. Simpan konten yang paling penting atau menarik di dekat bagian atas halaman untuk mengarahkan pengguna lebih jauh ke bawah. Ini bisa berupa judul yang kreatif namun deskriptif, kalimat pembuka yang menarik, atau gambar yang kuat.

TERKAIT

Tren Desain Terkemuka 2020

Mengukur Jenis

Secara umum, gunakan ukuran font 14 -18 piksel untuk situs web yang responsif. Secara umum, gunakan font sans atau serif sederhana untuk blok salinan yang lebih besar dan simpan di latar belakang yang terang dengan warna jenis huruf yang cukup kontras. Judul utama bisa lebih besar tetapi perlu diingat bahwa mungkin perlu ditata sedikit lebih kecil setelah breakpoint berukuran seluler ditemukan.

Jenis Warna

Trik dengan warna tipe adalah bahwa itu harus memiliki kontras yang cukup dari latar belakang sehingga Anda dapat melihatnya dengan mudah tetapi yang tidak diketahui oleh banyak desainer adalah bahwa terkadang tipe dapat memiliki terlalu banyak kontras dan kasar pada mata, membuatnya tampak bergetar ketika dilihat. Cobalah untuk menggunakan jenis yang lebih terang pada latar belakang yang lebih gelap dengan hemat dan hanya untuk blok teks yang lebih kecil.

Jenis Berat

Gaya font yang lebih berat bisa sulit dibaca dalam ukuran yang lebih kecil dan mungkin membuat halaman terasa gelap dan berat pada ukuran yang lebih besar. Gaya font tipis dan ringan terlihat bagus pada layar tipe retina dan retina tetapi dapat terlihat redup pada banyak layar resolusi standar.

Navigasi

Hamburger!

Navicon adalah ikon yang juga terlihat seperti sandwich atau hamburger kecil dengan tiga garis susun. Jika Anda merasa demografi pengguna umum Anda tidak terlalu paham dengan teknologi online—selalu sertakan kata “menu” di atas atau di samping Navicon . Studi pengguna hingga saat ini menunjukkan bahwa pengguna lebih cenderung menelusuri situs Anda jika Anda menyertakan kata Menu atau Navigasi di samping atau di atas Navicon.

Sertakan tombol 'Kembali ke Atas' di bagian bawah halaman gulir panjang

Penelitian memberi tahu kami bahwa banyak pengguna perangkat seluler tidak tahu cara melompat dengan mudah ke bagian atas halaman web dalam browser web seluler mereka. Untuk mengatasi ini, berikan tombol 'kembali ke atas' di bagian bawah halaman web Anda. Ini akan memungkinkan pengguna akses mudah ke navigasi situs jika tidak dicerminkan di footer.

Pilihan lain adalah membuat nav lengket. Ini adalah bilah navigasi situs teratas yang selalu menempel di bagian atas layar Anda tidak peduli seberapa jauh ke bawah halaman yang Anda gulir. Jika Anda memilih untuk mengikuti rute ini, pastikan untuk membuat sticky nav Anda tidak lebih dari 100px tinggi atau Anda mungkin kehabisan ruang untuk konten halaman Anda pada ukuran viewport yang lebih kecil.

Glosarium Desain:

Memanggil
sepotong teks pendek diatur dalam perlakuan yang lebih kuat daripada bagian halaman lainnya dan dimaksudkan untuk menarik perhatian.

Salin Blok
paragraf yang dikelompokkan atau serangkaian paragraf teks.

Lipatan (digital)
digunakan dalam desain situs web (bersama dengan " di atas gulir") untuk merujuk ke bagian halaman web yang terlihat tanpa menggulir. Karena ukuran layar bervariasi secara drastis, tidak ada definisi yang ditetapkan untuk jumlah piksel yang menentukan lipatan .

Serif
proyeksi kecil yang menyelesaikan goresan huruf dalam tipografi tertentu.

Sans Serif
a sans – serif , sans serif , gothic, san serif atau hanya sans jenis huruf adalah salah satu yang tidak memiliki fitur proyeksi kecil yang disebut " serif " di akhir goresan. Istilah ini berasal dari kata Perancis sans , yang berarti "tanpa" dan " serif " dari kata Belanda schreef yang berarti "garis".

Jenis (Tipografi) Berat
kegelapan relatif karakter dari jenis font yang dihasilkan dari ketebalan relatif goresan, dinyatakan sebagai terang, tebal, ekstra tebal, dll.

Pengguna
seseorang yang menggunakan atau mengoperasikan sesuatu, terutama komputer, perangkat, atau mesin lain.

Area pandang
area berbingkai pada layar tampilan untuk melihat informasi.

Ruang Putih
dalam tata letak halaman, ilustrasi dan patung, ruang putih sering disebut sebagai ruang negatif. Ini adalah bagian dari halaman yang dibiarkan tanpa tanda: margin, talang, dan spasi di antara kolom, jenis baris, grafik, gambar, atau objek yang digambar atau digambarkan.