Materialize : Sebuah Modern Responsif Front-End Framework Dengan Konsep Material Desain

materialize

Materialize merupakan salah satu framework front-end yang mengimplementasikan material desain dari Google. Framework ini menggunakan CSS dan Javascript sebagai dasar visual language.

Framework ini seperti bootstrap dan mudah sekali untuk digunakan. Framework diciptakan untuk mempercepat proses development UI, sehingga interface lebih fokus ke user experience.

Gambar-A-5

Ilustrasi Materialize via materializecss.com

Selain mudah diintegrasikan dengan back-end, Framework mempunyai susunan yang sederhana seperti proses development website pada umumnya. Untuk melihat lebih dekat tentang framework ini yuk kita lihat reviewnya.

Setup dan Instalasi

  1. Menggunakan CDN

  1. Instalasi menggunakan NPM (Node.js)

  1. Instalasi menggunakan Bower

  1. Susunan Project

  1. HTML Setup

Materialize mempunyai banyak komponen yang sudah siap untuk digunakan untuk desain user interface anda. Berikut ini beberapa komponen dasar yang perlu diketahui sebagai dasar dari materialize Framework.

Komponen Dasar

  1. Navbar
    Navbar merupakan tempat untuk main menu sebuah website, penempatannya selalu diatas.

  1. Card Panel
    Card Panel merupakan komponen pembentuk body yang diciptakan oleh materialize, kita dapat mengatur warna, ukuran, dan shadow dari card panel ini.

  1. Grid
    Grid merupakan pengaturan kolom dan baris, seperti pada HTMl dikenal dengan tabel, namun materialize seperti bootstrap, dia memiliki ukuran yang mudah dipahami oleh developer.

  1. Button dan Form
    Pada material desain umumnya button menggunakan effect wave ktika di klik.

Untuk form material desain juga memiliki ciri khas khusus, disesuaikan dengan penggunaan form tersebut.

  1. Shadow dan Coloring
    Seperti konsep material desain, konsep pencahayaan sebuah elemen sangat diperhatikan, materialize menerapkannya dengan mengubah z-index dari sebuah komponen.

Untuk coloring materialize menyediakan collor pallete sesuai konsep Google material design, biasanya kode warna yang berbentuk hexa sudan diubah ke bahasa keseharian penamaan warna.

Untuk lebih jelas collor palete pada materialize silahkan kunjungi link ini : http://materializecss.com/color.html

  1. Icon
    Materialize mempunyai format icon yang didopsi menggunakan SVG seperti fontawesome. Menggunakan format SVG bisa menjaga ukuran pixel ketika layar sebuah device berubah ukuran.

  1. Footer
    Bagian terakhir adalah footer, komponen ini mempunyai peran untuk penempatan copyright, child menu, atau biasanya informasi kontak atau info tentang website tersebut.

Itulah beberapa penjelasan teknis mengenai materialize, selain itu materialize juga mempunyai starting up template yang bisa di download untuk memulai project anda. Contoh template ini disediakan agar kita lebih mudah dalam membuat tampilan website menggunakan Framework front-end ini.

Anda bisa mendownloadnya di http://materializecss.com/getting-started.html

Inspirasi Artikel :

  1. Materializecss
  2. Scotch
  3. 9lessons
Aulia Arif Wardana

Post A Reply

Translate »