Aplikasi pilihan untuk Web designer dan Developer

Banyak sekali aplikasi-aplikasi yang bermunculan dan mempermudah dalam menyelesaikan pekerjaan bagi seorang web designer ataupun developer. Tool-tool kecil dan sederhana kadang bisa sangat membantu dalam proses pengerjaan suatu project. Berikut ini adalah tool-tool/ aplikasi pilihan yang paling sering digunakan oleh para web designer dan developer modern.

1. Macaw

Macaw adalah aplikasi untuk mendesain web dan hasil akhirnya berupa HTML & CSS, semuanya dilakukan dengan metode drag & drop, Sebelumnya saya telah mereview macaw di artikel Mencicipi Kemudahan Macaw

Aplikasi pilihan web designer: Macaw
Macaw
Download Trial (mulai $99)

2. Sketch 3


Sketch 3 bisa disebut pengganti Photoshop atau illustrator untuk mendesain web/user interface. Tool-tool yang disediakan oleh sketch tidaklah selengkap Photoshop/Illustrator, tapi kebanyakan yang kita butuhkan dalam mendesain ada disana.

Download Trial (mulai $79.9)

3. Slicy (Mac) Cut and Slice Me (Mac, Windows)

Slicy ini adalah tool untuk melakukan slicing secara cepat, Anda tinggal menandai elemen desain mana saja yang ingin di slice dalam dokumen Photoshop. Nantinya anda tinggal mendrag file Photoshop ke dalam slicy dan gambar-gambar hasil slicingpun siap digunakan.

Aplikasi pilihan untuk web designer: Slicy
Download Slicy Trial ($29)

Slicy hanya tersedia untuk Mac, tapi ada alternatif lain untuk melakukan hal yang sama, yakni Cut and Slice Me.

Aplikasi pilihan untuk web designer: Cut and slice me

Cut and Slice me adalah extension untuk Photoshop CS6 dan cara kerjanya hampir sama, yang perlu anda lakukan ada menandai beberapa elemen desain yang ingin diexport, lalu dalam panel Cut and Slice Me anda tinggal click cut all assets.

Download Cut and Slice Me (Free)

Tool ini pernah saya bahas dalam artikel Kenapa layer-layer photoshop anda harus terorganisir

4. SpriteRight

Penggunaan Image sprite memang sangat berpengaruh terhadap kecepatan website, namun pembuatannya yang cukup melelahkan. Mudah saja jika ukuran gambar yang akan digabung sama, Kalau beda-beda kan repot juga.

SpriteRight ini akan membantu anda untuk membuat image sprite dengan mudah. Anda tinggal memilih gambar-gambar yang ingin digabungkan menjadi image sprite, drag ke dalam aplikasi spriteright, dan secara otomatis aplikasi ini akan menggabungkan seluruh image dan membuat kode cssnya.

Aplikasi pilihan untuk web designer: spriteright
Download ($4.99)

Sayangnya spriteright hanya tersedia untuk Mac, sedangkan untuk windows anda bisa menggunakan aplikasi web seperti:

5. Ghostlab

Ghostlab adalah tool yang sangat membantu pengujian web responsif. Ghostlab akan membuat sebuah web server dan anda bisa membukanya dalam berbagai device yang terhubung dalam satu wifi.


Uniknya seluruh aktifitas yang kita lakukan pada web, akan secara otomatis tersynchonise di deveice-device yang terhubung. Misalnya ketika anda melakukan scroll, maka device lain pun akan ikut scroll, ketika anda mengklik button/link maka device lain pun akan mengikutinya.

Sangat membantu sekali jika anda sering melakukan pengujian web responsif.

Ghostlab ini juga hanya tersedia untuk mac, Untuk pengguna windows bisa menggunakan live reload untuk mengecek perubahan yang terjadi pada file-file tertentu dan merefresh browser secara otomatis.

Download Trial

6. Sass & Compass

Sass dan Less adalah css preprocessor yang membuat proses pengetikan kode CSS berbeda dari yang biasanya. Dengan CSS Preprocessor kita bisa menghemat waktu dengan memanfaatkan fitur Variabel, Mixin, Nesting dan lain sebagainya. Untuk lebih jelasnya Anda dapat membaca artikel yang telah saya posting dengan judul Mengenal CSS Preprocessors dan sass dan Kolaborasi manis antara Sass dan Compass

Aplikasi pilihan untuk web developer: sass & compass
SASS Compass

7. Grunt & Gulp

Grunt adalah Aplikasi Task Runner, maksudnya fungsi grunt ini hanyalah menjalankan tugas-tugas tertentu yang telah kita definisikan sebelumnya.

Aplikasi pilihan untuk web developer: grunt & gulp

Misalnya seperti ini: Dalam proses development, anda biasanya akan melakukan hal-hal seperti penggabungan beberapa script js, me-minify/mengkompress file-file js atau css, mengoptimasi Image, atau mungkin mengcompile file-file sass,less, jade.

Jika anda melakukannya secara manual dan satu-satu memang cukup ribet. Dengan grunt kita tinggal mendefinisikan tugas-tugas tersebut, dan dengan sekali perintah, grunt secara otomatis melakukan semuanya untuk anda.

Bahkan anda dapat menambahkan tugas untuk mengawasi file-file seperti html,css,js jika ada perubahan maka anda bisa langsung merefresh browser.

Sama halnya dengan Grunt, Gulp juga memiliki fungsi yang sama, tapi performa yang diberikan relatif lebih cepat dari grunt. Baik Grunt ataupun gulp membutuhkan node.js terinstall dalam komputer anda.

Grunt Js Gulp Js




8. [Extension] Awesome Screenshot

Aplikasi pilihan untuk web designer: Awesome Screenshot

Ingin mebambil screenshot sebuah web? atau keseluruhan halaman web? Awesome Screenshot bisa dijadikan extensi andalan anda. Awesome Screenshot adalah extensi untuk Google Chrome, fitur utama selain mengambil screenshot adalah anda bisa langsung share file hasil screenshot.

Awesome Screenshot

9. [Extension] Lorem Ipsum Generator

Aplikasi pilihan untuk web designer: lorem ipsum generator

Untuk membuat teks dummy memang banyak caranya, namun saya lebih suka menggunakan ekstensi lorem ipsum generator. Kita tinggal mengklik iconnya dan teks dummy pun siap digunakan.

Anda juga dapat mengatur banyaknya kalimat dan paragraf dari teks dummy yang akan dibuat.

Lorem Ipsum Generator

10. [Extension] Perfect Pixel

Extension ini sangat diperlukan oleh para front-end Developer yang kerjaannya melakukan slicing desain photoshop dan menerjemahkannya ke dalam kode HTML & CSS. Agar lebih presisi antara desain dan hasil akhir, maka diperlukan tool seperti Perfect Pixel ini.

Aplikasi pilihan untuk web designer: pixel perfect

Extensi ini akan membuat layer baru di halaman web, dan mengisinya dengan file gambar desain asli. Jadi anda bisa mengecek dengan mudah apakah hasil konversi yang dilakukan mendekati desain yang diinginkan atau tidak.

Perfect Pixel

11. [Extension] ColorPick EyeDropper

Aplikasi pilihan untuk web designer: colorpick eyedropeer

Terkadang kita ingin mengetahui kode warna yang digunakan dalam suatu web. Jika dalam Photoshop kita bisa dengan mudah mengambil informasi warna yang diinginkan dengan eye dropper tool, maka Ekstensi ini memberikan fitur yang sama. Anda bisa mengambil informasi warna di halaman web yang sedang anda buka. Tidak hanya warna dari image, tapi dari elemen-elemen web yang ada pun bisa kita liat informasi warnanya.

Colorpick Eyedropper

Kesimpulan

Itulah beberapa aplikasi pilihan untuk web designer dan developer yang paling sering digunakan, Jika anda punya aplikasi pilihan yang sering digunakan dan mempermudah dalam pekerjaan anda tuliskan di kolom komentar

Category HTML & CSS, Photoshop, Review, Tips & TricksTag , , , , , ,

12 Komentar untuk “Aplikasi pilihan untuk Web designer dan Developer

  1. wah, kebanyakan program yang ada memang hanya di peruntukkan untuk MAC atau WINDOWS saja, yang competible dengan LINUX jarang banget -_-

    1. Memang, soalnya kebanyakan app developer lebih betah bikin app buat windows/mac melihat pasar pengguna.

      Kalau saja pengguna linux banyak dan ada permintaan dari user makin banyak pula aplikasi yang dibangun untuk linux.

Tinggalkan Komentar Anda