10 ekstensi Google Chrome untuk desainer

Diterbitkan: 2015-06-11

Jika Anda seorang desainer web yang mengikuti proses desain standar, tugas Anda mencakup hal-hal seperti:

  • Meneliti
  • Gambar rangka
  • Memilih skema warna
  • Memilih font yang tepat
  • Menguji beberapa variasi
  • Berkolaborasi dengan klien dan rekan tim

Dan beberapa lagi…

Tahukah Anda bahwa Anda dapat melakukan semua ini dan lebih banyak lagi di dalam browser Anda? Ya, jika Anda seorang Google Chrome pro, maka Anda dapat melakukan semua tugas ini melalui ekstensi Chrome. Kebanyakan dari mereka hanya dengan beberapa klik.

Jadi, hemat banyak waktu dan cobalah 10 ekstensi Google Chrome ini untuk desainer.

1. Penguji Desain Web Responsif

Posting pembaruan ramah seluler Google, responsif adalah kata kuncinya! Jadi, inilah ekstensi yang memungkinkan Anda menguji situs web Anda di semua perangkat seluler Android dan Apple utama.

Ini bekerja secara offline juga, jadi ini adalah pilihan yang bagus bahkan saat Anda sedang mengerjakan desain Anda secara lokal. Ini memiliki preset untuk semua perangkat populer, tetapi Anda juga dapat menambahkan dimensi khusus Anda.

Setelah Anda memilih perangkat untuk dipratinjau, tab saat ini terbuka di jendela sembulan yang menunjukkan bagaimana halaman Anda akan terlihat di perangkat itu.

chromeEx1

2. KetikWonder

Font benar-benar mengatur suasana situs, tetapi memilih yang tepat adalah tugas yang cukup berat. Anda tahu latihannya – kembali ke kode Anda, membuat perubahan, dan melihat pratinjau. Dan semua ini berulang-ulang.

Tapi di sinilah ekstensi font yang berguna ini masuk. TypeWonder memungkinkan Anda mengubah font situs web apa pun di browser Anda.

Cukup kunjungi situs web Anda dan klik ikon ekstensi. Anda diberikan beberapa opsi font. Mengklik salah satu hampir secara instan membuat pratinjau situs web Anda dalam font itu. Jika Anda senang dengan pratinjaunya, Anda bisa mendapatkan kode yang relevan untuk ditambahkan ke situs Anda dan file CSS-nya.

chromeEx2

3. Pembungkus Tab

Meneliti adalah masalah besar. Dan jika Anda seorang desainer yang melakukan penelitian dengan serius, saya dapat dengan aman mengatakan bahwa pada titik mana pun, Anda memiliki setidaknya tujuh hingga sepuluh tab yang terbuka.

Bagaimana jika Anda harus mendapatkan pendapat dari teman desainer atau rekan setim Anda tentang situs yang Anda maksud? Anda akan menandai semua halaman dalam folder, mengekspor semuanya, dan kemudian memilih set untuk dikirim, tentu saja, setelah membuka program email Anda. Cukup banyak pekerjaan!

Untungnya, Anda tidak perlu bekerja sekeras ini. Tab Packager memungkinkan Anda mengemas semua tab yang terbuka. Dan kemudian Anda dapat mengirim tautan paket hanya dengan satu klik. Anda dapat berbagi melalui email, Twitter, dan banyak layanan lainnya.

chromeEx3

4. TrackDuck

Komunikasi yang efektif ada di balik setiap proyek yang sukses. Tapi itu bisa memakan waktu untuk bolak-balik dengan email yang mencoba menyelesaikan perubahan kecil atau untuk membuat perubahan besar.

Sekarang ini mungkin terdengar sedikit berlebihan, tetapi TrackDuck seperti mini-Asana, khusus untuk desainer.

TrackDuck adalah alat kolaborasi visual yang memungkinkan Anda menambahkan situs web sebagai proyek. Setelah Anda menambahkan proyek, Anda dapat mengundang rekan tim Anda untuk itu. Setiap kali Anda meninggalkan komentar pada proyek ini (atau situs web – yang dapat Anda lakukan hanya dengan mengeklik ikon ekstensi), tugas tentang komentar akan dibuat. Anda dapat menetapkan tugas ini ke rekan satu tim Anda, menambahkan lampiran dan tangkapan layar, dan mengintegrasikannya dengan banyak alat kolaborasi seperti Trello dan Basecamp.

chromeEx4

5. ColorZilla

Anda tidak pernah tahu kapan Anda akan melihat warna indah yang akan menginspirasi palet proyek web Anda berikutnya.

Jadi, bagaimana Anda menangkap warna apa pun di web?

Nah, inilah ColorZilla – ini adalah barang Chrome favorit setiap desainer dengan mudah. Fitur paling dasar dan populernya adalah mendapatkan kode untuk warna apa pun di halaman web.

Fitur lainnya adalah memungkinkan Anda mendapatkan skema warna situs web mana pun. Anda harus mengklik opsi Penganalisis Warna Halaman Web , dan palet yang menunjukkan semua warna pada halaman web itu akan muncul.

chromeEx5

6. ApaFont

Sering kali Anda menemukan situs web yang menggunakan font, warna, dan ukuran yang sempurna. Bahkan, mungkin sangat bagus sehingga Anda ingin menggunakan kombinasi yang tepat di situs Anda.

Tetapi Anda tidak perlu lagi mengambil rute Inspect Element – ​​WhatFont membedah font apa pun di halaman web dengan satu klik.

Cukup klik pada ikon ekstensi dan arahkan kursor ke bagian teks yang Anda minati. WhatFont menghasilkan jenis font, ukuran, tinggi, warna, dan keluarga.

chromEx6

7. Bingkai Gambar Instan

Jika Anda menentukan hierarki informasi situs web Anda sebelum mendesainnya, Anda akan membuat situs yang ramah pengguna. Dan wireframing adalah cara terbaik untuk melakukannya.

Ekstensi Wireframe Instan memungkinkan Anda melihat gambar rangka halaman web yang cukup bagus. Ini masih dalam versi beta tetapi melakukan pekerjaan yang adil.

Jika Anda menemukan situs yang ingin Anda lihat gambar rangkanya, cukup klik ikon ekstensi di bilah alamat. Layak untuk dicoba!

chromeEx7

8. Penggaris Halaman

Ada beberapa cara untuk mengukur dimensi elemen halaman web. Tetapi kebanyakan dari mereka melibatkan beberapa langkah dan membutuhkan waktu.

Page Ruler adalah cara termudah untuk melakukan ini. Penggaris Halaman memungkinkan Anda melihat tinggi, lebar, dan posisi relatif elemen. Anda juga dapat menganalisis elemen div-bijaksana.

Dan ini sangat baik untuk membuat spanduk sempurna piksel, gambar unggulan, dan jaminan pemasaran lainnya.

chromeEx8

9. Palet untuk Chrome

Situs web penuh dengan gambar, dan Anda tidak dapat mengatakan kapan Anda akan melihat gambar yang cukup bagus untuk menginspirasi palet warna.

Namun Anda tidak perlu khawatir karena Palet untuk Chrome selalu siap membantu Anda. Cukup klik kanan pada gambar yang menurut Anda menarik, dan pilih opsi ekstensi ini. Ini akan langsung membuat palet warna yang terinspirasi dari gambar yang dipilih. Anda dapat menentukan jumlah warna yang ingin Anda hasilkan untuk skema warna.

Saya akan lebih menyukainya jika ada cara untuk mengekspor skema warna. Namun ekstensi tetap harus dimiliki.

chromeEx9

10. ExtensionMuzli – Desain Sarapan

Anda tahu, ketika Anda baru memulai, Anda berlangganan semua blog teratas dalam niche Anda. Umpan RSS Anda semua bersemangat. Tetapi ketika pekerjaan Anda menumpuk, Anda agak terputus. Dan bukan karena Anda tidak membutuhkan inspirasi, hanya saja sulit untuk mengejar ketinggalan.

ExtensionMuzli dibuat untuk menebus ini. Ini mengkurasi cerita dari sekitar 12-15 sumber daya desain teratas. Ada juga bagian pekerjaan mendesain web jika Anda ingin beralih.

Setelah Anda menginstal ekstensi ini, tab baru Anda akan menampilkan beberapa kisah desain inspirasional atau pendidikan terbaru dari seluruh internet. Ini menawarkan cara yang rapi untuk mengawasi yang terbaru dalam niche Anda.

chromeEx10

Jadi, begitulah. Perkuat Chrome Anda dengan ekstensi desainer web yang luar biasa ini, dan saksikan produktivitas Anda meroket. Bagaimana Anda memecah proses perancangan Anda, dan ekstensi apa yang Anda gunakan untuk tugas apa? Saya ingin belajar lebih banyak.