6 Tools Extensions Google Chrome Ini Yang Saya Gunakan Untuk Mempermudah Design Web

Dengan memanfaatkan Leverage (daya ungkit) dalam setiap pekerjaan, pastinya bisa mempermudahkan kita dalam melakukan pekerjaan apapun.

Termasuk dalam design web.

Pagi ini saya akan berbagi 6 Tools Extensions Google Chrome yang saya gunakan untuk mempermudah Design Web.

Langsung saja, lets go !

1. Bootstrap Grid

bootstrap grid
Sumber : http://pabrikthemes.com/the-magz

Bootstrap merupakan salah satu framework CSS yang sering bahkan paling banyak digunakan oleh web developer saat ini.

Karena kemudahannya dalam membuat layout sebuah website, seakan-akan kita sebagai pemula pun tidak perlu banyak ikut campur akan hal design, seperti responsive, karena sudah disediakan.

Tetapi, untuk mempermudah mendesain web menggunakan Bootstrap, kita sebagai pemula tentu saja memerlukan alat bantu lainnya.

Salah satunya adalah saya menggunakan Bootstrap Grid.

Dengan memahami setiap grid yang ada, bisa mempermudah saya untuk mengukur sudah seberapa lebar layout yang dibuat.

2. Bootstrap 3 Offline

Bootstrap 3 Offline
Sumber : Screenshot pribadi (Bootstrap 3 Offline)

Tentunya tidak selamanya kita bisa menemukan jaringan internet yang baik, bahkan tidak ada sama sekali. Maka dari itu, sebisa mungkin saya mencari alat bantu untuk mempermudah informasi dan pengetahuan saya mengenai web design.

Salah satunya saya menggunakan Bootstrap 3 Offline. Extensions Chrome yang satu ini memberikan fasilitas Bootstrap 3 yang lengkap banget.

Jadi kalau kamu mau belajar dan menggunakan Bootstrap 3 (sekarang sudah masuk ke versi 4), kamu bisa menggunakan ekstension yang satu ini.

3. Breakpoint Tester

Breakpoint Tester
Sumber : Screenshot Pribadi (Breakpoint Tester)

Tools yang satu ini mermpemudah saya dalam menentukan ukuran responsive pada browser Google Chrome.

Misalkan saya ingin melihat seberapa bagusnya design web saya dalam ukuran Tablet, maka saya tinggal menekan ke ukuran 768px.

Jadi ketika ada kesalahan dalam ukuran 768px ini dalam tampilannya, maka saya tinggal mendesainnya lagi 🙂

4. CollorZilla

CollorZilla
Sumber : Screenshot Pribadi (WordPress.org)

Sebagai web designer, tentunya kita ingin mendapatkan inspirasi dari setiap design web orang lain. Dan daripada itu, ada sifat keinginan untuk menciptakan tema yang sama.

Bukannya mau bermaksud plagiat, desain layoutnya mungkin berbeda, tetapi nuansa pada warnanya saja yang ingin saya ambil.

Maka dari itu, saya menggunakan CollorZilla sebagai alat bantunya.

Contoh :

Saya ingin mengambil warna pada halaman utama situs web WordPress.org pada bagian headernya. Maka saya tinggal mengaktifkan CollorZillanya, dan mengklik bagian Header WordPress.org yang ingin saya ambil warnanya.

Simple !

5. WhatFont?

What Fonts ?
Sumber : Screenshot Pribadi (WordPress.org)

Font apa sih yang dipakek oleh web itu ? baru-baru ini saya menggunakan WhatFont sebagai alat bantu untuk mengetahui font apasih yang dipakek web tersebut ?

Dulunya untuk mengetahui font yang digunakan oleh salah satu website inspirasi, hanya mengandalkan Chrome Developer Tools. Dan mulai mencari fontnya.

Sekarang, simple banget, aktifkan WhatFotnya, dan klik tulisan pada artikel web yang digunakan.

6. Lorem Ipsum Generator

Lorem Ipsum Generator
Sumber : Screenshot Pribadi (Lorem Ipsum Generator)

Penggunaan teks dummy pada sebuah design sangat penting untuk dihadirkan. Mengapa ? karena saya sedang menghadirkan kepada pembaca bahwa teksnya nanti akan jadi seperti ini loh.

Tampilan teksnya kek gini. Namun jika saya menggunakan Bahasa Indonesia atau bahasa yang baku banget untuk hanya sebuah tampilan teks, pengunjung bukan dapat merasakan experiencenya dalam mempengaruhi jiwa mereka dalam teks.

Tetapi nanti mereka malah baca teksnya.

Contohnya :

Curabitur aliquet quam id dui posuere blandit. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Donec rutrum congue leo eget malesuada.

Atau ?

Setelah lama menolak konsep pernikahan, saya memutuskan menjalani ikatan yang konon sakral ini karena alasan berbeda

Sekarang kamu sebagai pembaca artikel ini. Apa yang kamu rasakan ketika ada demo pada sebuah website menggunakan Bahasa Indonesia sebagai teks dummynya ?

Boleh sih, tapi sedikit merasa kejanggalan. Dan saya akan mencoba untuk merubahnya 🙂

Nah, saat ini hanya 6 Tools Extensions Google Chrome Ini Yang Saya Gunakan Untuk Mempermudah Design Web.

Jika kamu juga ingin menggunakannya, silahkan saja. Gratis kok !

Semoga bermanfaat, dan bantu SHARE ya ^_^

Leave a Reply

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