You Are Here: Home > Blog > Blog Detail

Blog

Article of Karisma Academy Blogpage

6 Chrome Extensions Pilihan Desainer Web

Pengguna Chrome pastinya menyukai kecepatan serta kemudahan yang dimiliki browser besutan Google tersebut. Namun cepat atau lambat, Anda pastinya tergoda untuk menambahkan beberapa fungsi tambahan yang bisa membantu pekerjaan supaya lebih produktif. Berikut ini adalah beberapa pilihan Extension yang mungkin bisa berguna untuk Anda para desainer web.

1. Overlay/Wireframe Extensions

Grid atau wireframe overlay bisa membantu desainer web memastikan bahwa website tersebut telah mengikuti aturan main dari grid atau wireframe yang digunakan. Beberapa extension yang dapat melakukan hal ini adalah Bootstrap Overlay, Perfect Pixel dan Instant Wireframe.

Bootstrap Overlay

step1-bootstrap-overlay

Bootstrap Overlay hanya berfungsi pada website yang menggunakan framework bootstrap dan mendukung tampilan mobile. Sesuai namanya, extension ini bekerja dengan cara menampilkan ‘overlay’ dari bootstrap grid diatas tampilan website yang sedang dibuka oleh Chrome. Dengan begini, desainer web bisa mendeteksi apakah web yang mereka bangun dengan bootstrap sudah sesuai dengan grid nya.

PerfectPixel

step2-perfect-px

Idenya adalah melalui jendela Chrome, kita bisa membandingkan desain mockup dengan kode html yang sedang dibuat. Jadi Anda tinggal memasukkan gambar jpg atau png dari desain mockup yang telah dibuat (misalnya dari photoshop) ke dalam PerfectPixel,atur posisinya supaya pas dengan desain yang telah dibuat dengan kode HTML dalam jendela browser, lalu kunci posisinya dan kurangi opacitynya sesuai kebutuhan. Dengan begini, Anda bisa membandingkan secara langsung apakah kode html Anda memberikan hasil yang serupa dengan desain mockup, terutama dalam hal posisi, warna dan ukuran.

Instant WireFrame

step3-instant-wireframe

Instant Wireframe dapat menunjukkan wireframe (kerangka) suatu website. Gunakan extension ini bila Anda ingin melihat kerangka website secara visual.

2. Stylebot

Merupakan extension yang memungkinkan kita untuk memilih suatu elemen lalu mengubah font, warna, margin dan lainnya menggunakan CSS style. Style yang Anda ubah bisa disimpan supaya bisa digunakan lagi nanti, bahkan Anda bisa berbagi style dengan user lainnya melalui stylebot.me.

step4-stylebot

.

3. CSS3 Generator

CSS3 generator merupakan solusi alternatif pembuatan CSS secara langsung dari browser. Melalui jendela editornya, Anda bisa membuat sebagian besar style CSS yang umum digunakan seperti :

  • Border Radius
  • Gradient Colors
  • Box Shadow
  • Text Effects
  • Text Columns
  • CSS Transitions
  • RGBA
  • Text Shadow
  • Outline

Memang tidak semua property bisa di-generate oleh extension ini, tapi setidaknya sebagian besarnya sangat umum digunakan saat ini.

step5-css3-generator

4. Link Checkers

Skenarionya begini, Anda ingin mengecek apakah semua link yang ada pada sebuah web page masih aktif atau ada tidak. Tentunya mengecek link satu persatu secara manual akan sangat tidak efektif, solusinya adalah menggunakan extension ini, namanya Check My Links.

step6-check-my-link

Sebenarnya ada banyak tool lain dengan fungsi serupa, namun extension ini bekerja mengecek link dengan sangat cepat. Bahkan dengan ratusan link dalam satu halaman bisa dicek dalam hitungan detik, bukan menit.

5. Screen Measurement Tools

Satu lagi extension Chrome yang simpel tapi bermanfaat, namanya adalah ruul Screen ruler. Fungsi extension ini adalah mengukur jarak elemen pada layar. Bagi pengguna Firefox, bisa menemukan add on serupa bernama MeasureIt, namun ruul.Screen ruler memiliki lebih banyak opsi yang mungkin anda perlukan.

step7-screen-ruler

Berikut ini adalah beberapa fitur yang dimiliki oleh ruul Screen ruler:

  • horizontal and vertical draggable rulers
  • pixel and picas measurements
  • drop down overlay
  • type measurements
  • line height guides
  • stroke widths
  • move ruul with arrow keys, one pixel at a time
  • use multiple ruul together
  • 4 different coloured ruul included
  • steel and wooden ruul included
  • turn on and off with position memory
  • long rule included
  • works on local files*

6. Font Extensions

Firefox memiliki banyak sekali add-ons kategori font untuk desainer web. Dilain pihak, Chrome tidak memiliki banyak extension di kategori yang sama, namun beberapa diantaranya cukup memberi pilihan yang beragam, diantaranya adalah:

Font Playground

Bila sering menggunakan Google Web font, maka Anda wajib menginstall extension bernama Font Playground ini. Dari jendela font playground, anda bisa memilih font, menambahkan efek, preview hasilnya dan seketika itu juga menyalin kodenya. Kabar bagusnya lagi, jumlah font yang bisa digunakan semakin bertambah banyak setiap hari.

step8-font-extension

TypeDNA

TypeDNA merupakan extension yang menampilkan preview Google Web fonts dari list yang tersedia. Aplikasi ini juga bisa meng-generate kode font yang bisa dengan mudah disalin ke dalam proyek web desain Anda.

step9-type-dna

Font Inspector.

Extension berikutnya adalah Font Inspector. Sesuai namanya, setelah menginstall extension ini maka Anda bisa mengetahui nama jenis font yang digunakan pada suatu website. Bukan hanya itu, Anda juga bisa mengetahui propertynya seperti line-height dan size. Sangat membantu bukan? Namun ada kalanya extension ini gagal melacak jenis font dikarenakan beberapa faktor, salah satunya disebabkan oleh struktur kode html yang rumit.

step10-font-inspector

Itulah 6 macam extension pilihan untuk desainer web yang mungkin bisa bermanfaat. selamat mencoba!

Comments

comments

Tentang Penulis

jayan saputra

Keeping a finger on trends or helping people in 140 characters, Matt is a part of the team actively working on our blog social and community forums.