Bersih Template Kodebiner 2014

Readability adalah tujuan utama dari re-desain template blog ini. Bersih dari pengganggu mata (eye distractor), dan tampil lebih konsisten pada 3 system operasi populer: Linux, Mac OSX dan Windows. Beberapa teori desain, seperti penggunaan skala dalam menentukan dimensi elemen desain, juga cross-compatible font dipaparkan pada tulisan ini.

Huruf & Karakter-nya

Jenis dan ukuran huruf harus ditentukan terlebih dahulu. Ini penting, karena dia akan digunakan sebagai unit satuan dalam menentukan skala ukuran elemen desain. Jarak baca umum saat membaca buku, poster, atau koran, bisa dijadikan acuan untuk menentukan ukuran dan jenis huruf.

Lakukan trial and error ukuran pada huruf yang ingin digunakan. Karena pada ukuran tertentu, suatu huruf belum tentu tampil sesuai dengan yang seharusnya. Misal: Century Schoolbook L berukuran 16px keatas, tampil dengan proporsi yang lebih baik dibanding dengan ukuran yang lebih kecil.

Huruf serif lebih baik ditampilkan dalam ukuran yang besar—diatas 14px. Karena dia memiliki kurva pada ujungnya, sehingga kurang mudah dibaca dalam ukuran yang kecil—dibawah 12px. Huruf serif banyak digunakan untuk menampilkan nilai estetik tertentu—misalnya: kesan elegan.

Huruf sans-serif, memiliki karakter yang sederhana, lurus, tidak banyak lekukan, sehingga memiliki readbility yang baik dalam berbagai macam ukuran.

Konsistensi Tampilan Huruf

Tiga sistem operasi dijadikan acuan dalam desain, yaitu: Linux, Mac OSX, dan Windows. Ketiganya belum tentu memiliki huruf yang sama. Misal: Helvetica, secara default hanya ada di Linux, tetapi tidak ada di dua sisanya.

Cross-compatible font adalah upaya untuk menentukan kumpulan nama huruf yang memiliki kesamaan antara ketiga sistem operasi tersebut. Helvetica memiliki kesamaan bentuk dengan Arial, yang ada di Mac dan Windows.

Komparasi Huruf

Contoh group huruf yang memiliki kesamaan bentuk antara satu dengan lainnya:

  • Serif: "Century Schoolbook L", Georgia
  • Sans-Serif: Helvetica, "Nimbus Sans L", Arial
  • Monospace: "Nimbus Mono L", "Courier New", Courier

Kontras Warna

Kombinasi warna huruf dan latar dipilih sedemikian sehingga tidak menyebabkan mata menjadi lelah. Karena hasil render suatu jenis huruf pada ukuran tertentu menghasilkan kontras yang tinggi sehingga membuat mata cepat lelah.

Untuk warna latar belakang putih #FFFFFF, gunakan warna huruf #222222, supaya menjadi lebih menyatu antara huruf dengan latarnya. Atau dibalik, jika ingin menggunakan warna huruf #000000 (true black), maka background dibuat agak "redup", yaitu #EEEEEE. Lakukan trial and error untuk mendapatkan hasil yang pas.

Layout & Story Board

Story board memudahkan dalam menentukan layout. Story board dibuat berdasarkan apa fungsi website tersebut. Karena tidak semua keinginan bisa dipenuhi oleh suatu desain, jika dipaksakan, maka akan timbul inkonsistensi desain.

Blog, bisa dibuat sebagai catatan apa saja, tentang beberapa hal atau spesifik tentang suatu topik. Selain berfungsi sebagai catatan, apakah blog akan berfungsi sebagai media yang mempromosikan penulis?

Contoh alur cerita sebuah blog sekaligus menjadi media promosi penulisnya:

  • Salam
  • Deskripsi siapa saya
  • Apa yang saya kerjakan
  • Achievement saya
  • Tulisan saya
  • Kontak
  • lain-lain (site map)

Ukuran, Dimensi

Proporsi antar elemen desain bisa menjadi kekuatan desain yang tidak terlihat. Contoh: desain logo Apple, yaitu buah apel yang tergigit, ternyata dibuat dari beberapa lingkaran yang saling berpotongan dengan diameter bervariasi dalam proporsi tertentu.

Terkait dengan desain visualisasi tulisan, menentukan ukuran normal text dan element lain juga bisa dibuat dalam bentuk proporsi rasio, anggap menggunakan 1:1.618. Contoh aplikasinya:

  • Normal text = 16px (acuan, didefinisikan sendiri)
  • Heading 3 = 1,618 x Normal text = 25,888px
  • Heading 2 = 1,618 x Heading 3 = 41,886px
  • Title = 1,618 x Heading 2 = 67,772px
  • Small text = Normal text / 1.618 = 9.888px

Terlihat gap yang sangat besar antara normal text dan heading 3. Untuk mengisi skala yang terlalu "kosong" dan supaya tidak kaku, bisa membuat dua buah skala menggunakan dua angka penting, yaitu angka kecil dan angka besar. Ambil 16 sebagai angka kecil dan 120 sebagai angka besar, buat skala untuk keduanya, lalu gabungkan.

Cara paling mudah adalah menggunakan modular scale.

skala proporsi

Menentukan ukuran dengan metode skala ini akan menghemat waktu proses desain, terkait menentukan ukuran suatu elemen desain.

Ruang Istirahat Untuk Mata

Pemandangan jalan Sudirman saat car free day dibandingkan dengan pemandangan di tempat yang sama, pada saat hari senin pagi semua orang berangkat ke kantoor. Sama-sama ramai, tetapi mana yang lebih pusing? Tanyakan mengapa.

Line height & font size

Mata membutuhkan ruang istirahat. Menempatkan elemen desain dengan jeda jarak yang cukup lega, akan membuat mata tidak cepat lelah. Gunakan line-height minimal 1,5x ukuran huruf, dan berikan jarak antar paragraf minimal sama dengan line-height, maka akan tercipta ruang yang cukup lega bagi mata untuk beristirahat.

Bacaan Terkait

No comments :

Post a Comment