Extension and Apps

Mengintip Tampilan Material Design pada Chrome Browser (Update)

Google mengumumkan desain material pada perhelatan Google I/O pada 25 Juni 2104 lalu. Desain material merupakan bahasa desain yang dikembangkan oleh Google. Google menyatakan bahwa bahasa desain baru mereka didasarkan pada kertas dan tinta. Desain material secara bertahap akan meluas ke seluruh berbagai produk web dan mobile Google, memberikan pengalaman yang konsisten di semua platform dan aplikasi. Dikutip dari Wikipedia bahwa desain material sekarang telah diterapkan pada sebagian besar aplikasi mobile Google untuk Android termasuk Gmail, YouTube, Google Drive, Google Docs, Google Sheets,Google Slides, Google Maps, Inbox, dan semua aplikasi Google Play, dan sebagian kecil di Chrome Browser dan Google Keep serta dalam antarmuka web desktop Google Drive, Docs, Sheets, Slide dan Inbox.

Desain material belum diterapkan pada versi stabil pada Chrome Browser. Desain material sudah mulai diterapkan pada Chrome Browser versi developer, namun belum digunakan secara default. Tidak tahu kenapa implementasi desain material pada chrome sangat lambat. Jika ingin mencoba silakan download Chrome Browser versi Canary atau Developer. Yuk kita intip apa saja perubahannya

Desain Material Pada Halaman Settings

Halaman settings ini belum bisa diatur agar default, namun kamu bisa melihatnya dengan mengetikkan ini pada address bar

chrome://md-settings/

Berikut tampilan setting yang lama dan yang versi desain material

Settings Old
Sebelum
Chrome Setting Page Material Design
Sesudah

Desain Material Pada Halaman Extensions & Apps

Untuk melihat perubahan desain material pada halaman Extensions & Apps, kamu harus merubahnya di Chrome Flags, ketikkan URL berikut pada address bar

chrome://flags/#enable-md-extensions

Ubah menjadi enable seperti gambar berikut

extensions setting

Berikut tampilan sebelum dan sesudah diubah

Extension and Apps Old
Sebelum
Extension and Apps
Sesudah

Desain Material Pada Toolbar

Untuk mengubahnya harus diaktifkan terlebih dahulu melalui Chrome Flag. Ketikkan URL berikut pada address bar

chrome://flags/#top-chrome-md

Kamu dapat melihat ada 3 pilihan pada menu selection, non material, material dan material hybrid. Untuk mengaktifkan desain material pilih material atau material hybrid, kemudian restart Chrome browser.

chrome flag

Perbedaan material dan material hybrid hanya besar ukuran font-nya. Berikut tampilan toolbar sebelum diaktifkan dan sesudah diaktifkan.

chrome toolbar old
Sebelum
chrome toolbar-md
Sesudah

Beberapa perubahan pada versi material yang dapat kamu lihat yaitu

  • Ukuran padding pada toolbar lebih lebar
  • Kotak address bar terlihat lebih besar
  • Jarak lebih lebar antara tombol / elemen
  • URL font tidak lagi ‘cetak tebal’
  • Ukuran font lebih kecil ( hanya ‘material’)
  • Icon baru tombol navigasi dan bookmarks
  • Tombol navigasi terlihat lack ketika ditekan

Sepertinya efek ripple pada tombol belum terlihat, kemungkin developer sedang mengerjakannya.

Desain Material pada Halaman History Download

Sama dengan cara sebelumnya, untuk mengaktifkannya harus masuk ke Chrome flag berikut alamat link-nya

chrome://flags/#enable-md-downloads

Klik enable kemudian restart

chrome flag

Berikut perbedaan sebelum dan sesudah diaktifkan

Chrome Download History
Sebelum
Chrome Download History Material Design
Sesudah

Pada tampilan setelah diaktifkan terlihat mime icon dan tampilan cards khas dari desain material. Hanya beberapa saja tampilan desain material yang telah diterapkan pada Chrome Browser dan mungkin untuk selanjutnya masih dalam tahap pengembangan. Seperti halam History (chrome://flags/#enable-md-history), Halaman Policy (chrome://md-policy) dan halaman Incognito seperti berikut ini.

SPEC - incognito - NTP

Tetap stay tune di chromplex akan kita update ketika ada informasi terbaru.

3 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *