Teknologi baru terus bermunculan dan berkembang sangat pesat. Salah satunya yaitu teknologi di bidang Front-End Development. Tidak jarang teknologi baru muncul untuk menggantikan teknologi lama yang mungkin terlalu rumit, tidak efisien, dan berbagai kekurangan lainnya. Pada intinya kemunculan teknologi baru bertujuan menjadikan teknologi terdahulu menjadi lebih baik. Salah satu teknologi baru yang sedang berkembang (sudah lama namun baru populer) di bidang Front-End Development adalah Layout Flexbox.

 

Flexbox adalah salah satu jenis layouting (pengaturan tata letak) CSS. CSS memiliki banyak jenis layouting seperti layouting jenis lama terdapat table layout, position, float hingga jenis layout yang terbaru yaitu Grid dan Flexbox. Flexbox termasuk salah satu jenis layouting CSS yang relatif baru. Flexbox akhir-akhir ini banyak digunakan karena kemudahannya dalam mengatur layout atau tata letak dalam satu dimensi, baik secara baris maupun kolom. Kemudahan yang dibawa Flexbox harus dicoba oleh para Web Developer. Terdapat berbagai resource untuk mempelajari teknologi Flexbox, dan salah satu yang menarik adalah Flexbox Froggy.

 

Flexbox Froggy merupakan salah satu situs untuk mempelajari teknologi Flexbox. Situs ini terlihat sangat berbeda dalam menyajikan materi mengenai Flexbox. Flexbox Froggy mengajarkan kita bagaimana memahami konsep Flexbox melalui simulasi Game. Kita dapat belajar tentang dasar-dasar flexbox dengan menyenangkan yang disimulasikan dalam bentuk game. Dalam game ini terdapat katak dan bunga teratai dimana kita harus menempatkan katak di atas teratai yang sudah disediakan, menarik bukan?
Game Flexbox Froggy terdiri dari level 1 hingga level 24. Di setiap level terdapat materi mengenai Flexbox dan tantangan berupa menempatkan Katak di atas Teratai menggunakan konsep Flexbox. Flexbox Froggy tersedia dalam 20 lebih bahasa termasuk bahasa Indonesia. Jika kamu seorang web developer, kamu harus coba mengunjungi Flexbox Froggy untuk belajar atau sekedar iseng menyelesaikan tantangannya. Katak-katak kecil yang imut ini akan setia menemani kita dalam belajar Flexbox dari awal sampai akhir.

 

Sumber:
Flexbox Froggy
Hongkiat

Published in Artikel

Setiap Web Developer pasti mengalami situasi dimana perlu membuat keputusan desain visual agar desain kita akan disukai. Mungkin kita sering mendapat proyek untuk memperbaiki desain website agar terlihat lebih menarik dan lebih baik dari situs-situs lainnya.

Dalam membuat atau memperbaiki desain ternyata ada banyak trik yang bisa digunakan tanpa perlu memiliki latar belakang dalam desain grafis.

Berikut ini tujuh ide sederhana yang dapat digunakan untuk meningkatkan desain:

  1. Gunakan Color dan Weight untuk membuat hirarki, bukan Size.
    Kesalahan umum dalam membuat teks pada desain, kebanyakan mereka terlalu bergantung pada ukuran font (size) untuk mengendalikan hirarki pada desainnya. Dalam membuat desain, color dan weight dapat digunakan untuk menentukan hirarki pada desain.

  2. Jangan gunakan teks abu-abu pada latar belakang yang berwarna.
    Membuat teks abu-abu adalah cara yang bagus untuk tidak menekankannya pada latar belakang putih, tapi tidak terlihat bagus pada latar belakang yang berwarna. Karena jika teks dengan warna abu-abu dengan background putih akan membuat teks menjadi lebih dekat dengan warna latar belakang, hal inilah yang sebenarnya membantu menciptakan hirarki, sehingga membuatnya tidak berwarna abu-abu.

  3. Seimbangkan Shadow (bayangan).
    Dari pada menggunakan nilai blur dan spread yang besar untuk membuat bayangan kotak lebih terlihat, tambahkan offset vertikal. Hal ini akan terlihat jauh lebih alami karena mensimulasikan sumber cahaya yang bersinar turun dari atas seperti yang biasa kita lihat di dunia nyata.

  4. Gunakan Borders (batasan) yang lebih sedikit.
    Saat kita membuat pemisah antara dua elemen, cobalah untuk tidak menggunakan borders pada kedua elemen tersebut. Karena Borders bukan satu-satunya cara untuk membedakan dua elemen. Cara lain untuk membedakan dua elemen dengan menggunakan Box Shadow, menggunakan dua warna latar belakang yang berbeda, atau dengan menambahkan spasi tambahan.

  5. Jangan membesarkan ikon yang kecil.
    Jika mendesian sesuatu yang membutuhkan ikon besar, mungkin secara naluri akan memperbesar ikon yang kecil sesuai dengan kebutuhan. Bagaimanapun ikon merupakan gambar vector yang jika diperbesar kualitasnya tidak akan menurun. Sebaiknya jangan perbesar ikon tersebut tetapi gunakan cara lain dengan membuat bentuk bulat dan memberinya dengan warna latar belakang. Hal ini memungkinkan kita tetap membiarkan ukuran ikon dengan ukuran aslinya, sambil mengisi bentuk bulat tersebut.

  6. Gunakan aksen Border untuk menambahkan warna pada desain yang hambar.
    Jika kita bukan seorang desainer grafis, bagaimana kita menambahkan sedikit bakat visual ke UI kita yang bisa didapatkan dari fotografi cantik atau ilustrasi warna-warni? Salah satu trik sederhana yang bisa kita lakukan adalah dengan membuat perbedaan besar adalah dengan menambahkan batas aksen warna-warni ke bagian antarmuka agar desainnya tidak hambar.

  7. Tidak semua tombol membutuhkan warna latar belakang.
    Bila ada beberapa tombol yang dapat dilakukan pengguna terhadap sebuah halaman, designer sering terjebak dalam merancang tombol murni berdasarkan pada semantik. Semantik adalah bagian penting dari desain tombol, namun ada dimensi yang lebih penting yang biasanya terlupakan yaitu hirarki.
    Tombol Primary harus jelas, gunakan warna yang solid, warna background kontras yang tinggi untuk. Untuk tombol Secondary harus bersih tapi tidak menonjol, gunakan warna background kontras yang lebih rendah. Untuk tombol Tertiary harus dapat ditemukan namun tidak menggangu, gunakan style seperti teks biasa tanpa harus memiliki warna backgroud.

Sumber: Medium.com

Published in Artikel