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
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.
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.
Slicy hanya tersedia untuk Mac, tapi ada alternatif lain untuk melakukan hal yang sama, yakni 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.
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.
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.
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
7. Grunt & Gulp
Grunt adalah Aplikasi Task Runner, maksudnya fungsi grunt ini hanyalah menjalankan tugas-tugas tertentu yang telah kita definisikan sebelumnya.
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.
8. [Extension] 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.
9. [Extension] 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.
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.
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.
11. [Extension] ColorPick EyeDropper
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.
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
0 comments:
Post a Comment