Desainer membuat keputusan spasial setiap hari dari ketinggian tombol hingga ruang di sekitar ikon. Sistem spasial adalah seperangkat aturan tentang cara mengukur, dan memberi ruang pada elemen website. Keseragaman pada tingkat spasial memungkinkan produk menjadi lebih konsisten, tim berkomunikasi lebih baik, dan mengurangi jumlah keputusan yang harus dibuat desainer dalam sehari. Salah satu contoh sistem spasial adalah "grid 8pt." Namun, ada banyak variasi dan konfigurasi untuk dipilih.

Sebagai contoh, perhatikan bagaimana sebuah form login ketika tidak memiliki pola spasial yang langsung dapat dikenali. Bagi pengguna, desain bisa terasa murah, tidak konsisten, dan umumnya tidak dapat dipercaya. Prediktabilitas adalah ritme visual yang menyenangkan dan sesuatu yang harapkan dari merek yang dipercayai. Ketika formulir login yang sama ini disesuaikan untuk mengikuti sistem spasial 8pt, ritme menjadi dapat diprediksi dan menyenangkan secara visual. Bagi pengguna, pengalaman dipoles dan dapat diprediksi. Hal ini meningkatkan kepercayaan dan kasih sayang untuk merek.

Tidak peduli siapa yang mengerjakan desain, sekarang ada bahasa spasial yang konsisten dan pilihan yang harus dibuat sangat berkurang. Kita dengan mudah melanjutkan di mana desainer lain berhenti atau dengan nyaman membangun secara paralel. Karena keputusan ini juga ditangkap dalam basis kode, maka akan menghemat waktu untuk para insinyur.

Mendefinisikan unit dasar akan memungkinkan untuk membuat skala ukuran yang didukung dalam sistem spasial. Melihat produk yang berbeda di seluruh web, akan melihat beberapa pendekatan berbeda untuk ini. Kita akan melihat sistem kenaikan 4pt, 5pt, 6pt, 8pt, 10pt.

Bersikaplah masuk akal tentang kebutuhan saat menjelajahi membangun sistem spasial. Berikut adalah beberapa hal yang perlu dipertimbangkan:

Pikirkan tentang pengguna desain dan estetika merek umum yang dituju. Apakah menginginkan website yang luas dengan gaya font yang besar dan jumlah tindakan yang terbatas? Apakah perlu membangun kepadatan informasi dengan tabel data yang rumit dan banyak tindakan untuk pengguna teknis.

Memilih unit dasar yang lebih kecil seperti 4pt, 5pt, atau 6pt dapat membuka terlalu banyak variabel di sistem. Menjadi lebih sulit untuk melihat perbedaan antara perbedaan padding 12pt dan 16pt, yang dapat menyulitkan untuk menegakkan konsistensi di seluruh tim. Bahwa kenaikan 8pt adalah keseimbangan yang tepat untuk jarak visual sementara memiliki jumlah variabel yang masuk akal. Saya juga menggunakan setengah unit 4pts untuk mengatur jarak ikon atau menyesuaikan blok teks kecil.

Memperkenalkan angka ganjil, seperti 5pt, ke dalam aturan spasial dapat mempersulit pemusatan elemen tanpa memisahkan piksel. Misalnya, menempatkan teks dan ikon di tengah dalam tombol setinggi 25 piksel dapat membuat piksel terpisah yang kabur untuk beberapa pengguna. Di sisi yang sama, penskalaan website untuk layar seluler dan desktop berbeda yang memerlukan skala 1,5x akan menghasilkan keburaman piksel.

Menerapkan skala spasial ke elemen website dapat berupa definisi padding, margin, tinggi, dan lebar. Dalam pendekatan ini, ukuran elemen padat diprioritaskan saat dicocokkan dengan sistem spasial yang ditentukan sebelumnya. Ini termasuk hal-hal seperti tombol dan input formulir. Elemen-elemen ini cenderung memiliki konten yang dapat diprediksi dan merupakan kunci untuk menciptakan ritme dalam komposisi keseluruhan.

Sistem spasial menentukan aturan ukuran dan spasi sementara kisi membantu mengatur konten ke dalam proposisi terstruktur. Desainer cetak awal menggunakan kisi untuk mengatur blok teks dan gambar ke dalam hierarki visual yang menyenangkan yang membantu keterbacaan. Seiring berkembangnya desain, prinsip dasar yang sama masih berlaku untuk organisasi informasi dua dimensi.

Kisi kolom membantu untuk mengatur konten ke dalam kolom vertikal dengan jarak yang sama. Ruang antar kolom disebut sebagai ukuran talang. Menerapkan aturan sistem spasial ke talang akan membantu menghasilkan ritme yang konsisten dalam desain. Contoh umum adalah kisi 12 kolom karena memungkinkan untuk membagi area yang diberikan menjadi setengah, pertiga, keempat, keenam.

Kotak modular memperhitungkan kolom dan baris untuk mengatur konten ke dalam struktur matriks. Kisi modular ideal untuk tata letak format yang ketat seperti buku tetapi dapat rusak untuk tata letak web responsif berukuran relatif. Ingatlah bahwa ini tidak harus mencakup seluruh tata letak halaman.

Secara tradisional dalam desain grafis, grid baseline digunakan untuk mengatur awal dari satu baris teks ke baris berikutnya. Namun, di web akan menempatkan teks menurut tinggi garis, bukan garis dasar. Ini perbedaan yang halus tetapi kita harus menyadarinya saat mendesain lintas platform. Terlepas dari bagaimana tipografi diukur, prinsip dasar yang sama berlaku, mengatur tipografi ke dalam grid yang konsisten akan lebih mudah diatur, menciptakan ritme vertikal, dan secara estetika menyenangkan.

Menyusun tata letak

Tata letak adalah puncak dari aturan spasial yang ditetapkan dan organisasi konten menjadi satu komposisi tunggal. Menyatukan konten ke dalam struktur yang bijaksana adalah bagian yang mudah, membuat semuanya mengalir bersama dengan hierarki yang jelas, namun untuk melintasi lautan platform yang berubah dan ukuran layar adalah bagian yang sulit.

Mendefinisikan logika penskalaan sekarang menjadi persyaratan untuk aplikasi asli dan web. Dari desktop hingga seluler dan semua yang ada di antaranya, ukuran dan skala layar dapat sangat bervariasi. Ada tiga konsep utama untuk menyusun tata letak yang dapat diatur dengan anggun. Beberapa desain akan memanggil ketiga konsep ini sekaligus.

1.       Adaptif, Tata letak adaptif adalah tata letak yang berubah sepenuhnya berdasarkan format yang disajikan. Misalnya, memuat pengalaman yang berbeda berdasarkan desktop, tablet, dan perangkat seluler. Hal ini mempromosikan pengalaman yang lebih disesuaikan untuk perangkat pengguna tetapi bisa menjadi mahal untuk membangun kembali fungsionalitas yang sama ke dalam berbagai format.

2.       Responsif, tata letak responsif lancar dan dapat beradaptasi dengan ukuran format yang berubah. Hal ini adalah praktik umum di web dan telah menjadi kebutuhan bagi aplikasi asli karena variasi ukuran layar telah meningkat. Hal ini memungkinkan untuk membuat fitur satu kali dan mengharapkannya berfungsi di semua ukuran layar. Kelemahannya adalah interaksi sentuh dan mouse sangat berbeda dan mahal untuk memperhitungkan semua perangkat dan kasus penggunaan.

3.       Tetap atau Ketat, tata letak ini tidak akan fleksibel dengan ukuran format yang berubah. Tata letak tetap sering digunakan untuk mempromosikan interaksi tertentu atau tata letak informasional yang akan diturunkan ke ukuran yang lebih kecil. Tabel dan grafik data akan sering membuat tata letak ketat yang dapat digulir pada ukuran tertentu karena keterbacaan dan interaksi akan menurun secara signifikan di bawah ukuran tertentu.

Memulai dari awal itu mudah. Tantangannya adalah memperbaiki serangkaian desain yang ada. Langkah pertama adalah membawa kolaborator yang lain ke dalam perancangan. Meyakinkan anggota tim dan pemangku kepentingan untuk mengubah proses pengembangan produk.

Mulai dari yang kecil. Membangun kembali semuanya agar sesuai dengan sistem spasial yang baru didefinisikan bisa tampak menakutkan. Cari komponen sederhana untuk dikonversi, seperti tombol, lalu sebarkan ke elemen yang sama, seperti bidang formulir. Bangun momentum dan pengertian dengan tim di sepanjang jalan.

Normal 0 false false false IN X-NONE AR-SA /* Style Definitions */ table.MsoNormalTable {mso-style-name:"Table Normal"; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-priority:99; mso-style-parent:""; mso-padding-alt:0cm 5.4pt 0cm 5.4pt; mso-para-margin-top:0cm; mso-para-margin-right:0cm; mso-para-margin-bottom:8.0pt; mso-para-margin-left:0cm; line-height:107%; mso-pagination:widow-orphan; font-size:11.0pt; font-family:"Calibri",sans-serif; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:Arial; mso-bidi-theme-font:minor-bidi; mso-fareast-language:EN-US;}