Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Prototyping
Webdesign

Alat untuk Menjembatani Kesenjangan Antara Desainer dan Pengembang

by
Difficulty:BeginnerLength:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Dalam artikel ini saya akan mengumpulkan dengan cepat beberapa alat yang akan membantu Anda mengkomunikasikan desain Anda ke pengembang yang bertugas menghidupkan mereka. Saya akan mendata beberapa tutorial untuk membantu Anda memulainya–jadi mari kita terjebak di dalamnya!

Kapur dan Keju

Pengembang bisa dibilang fokus pada perhitungan dan logika, sedangkan desainer bersandar jauh lebih banyak pada proses kreatif. Seperti yang mungkin Anda bayangkan hal ini dapat membuat masalah komunikasi antara dua pihak yang benar-benar mencoba untuk bekerja bersama-sama. Pada akhirnya, pilihan saluran komunikasi untuk menjembatani kesenjangan ini harus menjadi alat yang membawa kedua belahan pihak, yang memungkinkan mereka untuk berkomunikasi dalam bahasa mereka sendiri, sambil mempertahankan kesetiaan pada proyek.

Untungnya, ada solusi untuk masalah ini, banyak solusi yang sebenarnya, dan saya telah memilih beberapa pilihan populer dengan pemikiran pada fitur terbaik mereka.

InVision (Integrasi Sketch & Photoshop)

InVision adalah salah satu yang paling populer di industri alat prototyping.

Sign up dan Anda akan mulai dengan satu proyek secara gratis, dengan langganan berbayar yang saat ini mulai dari $15/bulan untuk tiga proyek. Jumlah plugin dan integrasi dengan InVision berlimpah, jadi di luar dari tujuan kami (komunikasi yang lebih baik), Anda dapat menemukan beberapa fitur tambahan untuk meningkatkan alur kerja Anda.

Fitur inti meliputi:

  • InVision memimpin paketnya dengan fitur prototyping berjumlah besar seperti pengujian mobile secara langsung dan kemungkinan untuk menanamkan prototype Anda di mana saja untuk pengujian pengguna.
  • Integrasi dengan begitu banyak alat-alat lain yang saya tidak bisa menyebutkan nama mereka semua di sini. Industri ini telah diterima sebagai standar dan oleh karena itu banyak plugin yang telah dibuat untuk bekerja dengan InVision.
  • Sinkronisasi kontrol versi dengan file Anda dalam Sketch atau Produk dari Adobe.
  • Meskipun dalam versi beta pribadi (dan di mana Zeplin/Avocode sedang kuat) InVision juga memiliki alat ekspor untuk penciptaan stylesheet dan pembuatan kode untuk setiap elemen. Terlalu dini untuk memberitahukan sebaik apa kinerja fitur ini dalam kaitannya dengan pesaing mereka.

Avocode (Integrasi Sketch & Photoshop)

Kita telah membahas Avocode pada Envato Tuts+ beberapa kali di masa lalu; Ia bertindak sebagai cara untuk mengekspor desain untuk keperluan pengembangan web.

Avocode menawarkan percobaan selama 14-hari, setelah itu biaya $7 per bulan untuk proyek tak tak terbatas, per pengguna. Jika Anda ingin berbagi pekerjaan Anda (yang adalah idenya) dengan orang lain Anda harus meng-upgrade ke paket berlangganan $10/bulan, yang lebih murah daripada pilihan lain yang disebutkan dalam artikel ini.

Avocode datang dengan integrasi penuh Sketch dan Photoshop dan fitur-fitur berikut:

  • Pengembang dapat pick and choose apa yang mereka butuhkan–tidak perlu untuk menciptakan tuntunan gaya pada sisi desainer. Spesifikasi lengkap, warna (HEX, RGBA, HSLA), font, gaya dan ukuran tersedia pada setiap elemen menarik.
  • Ekspor kode CSS dan mengekspor beberapa gambar (mendukung file SVG). Gaya juga dapat diekspor ke SASS, Stylus dan Less; kemenangan besar untuk frontend developer di seluruh papan.
  • Fitur copy dan paste teks yang rapi di mana Anda dapat menyisipkan teks dari desain ke dalam kode editor dengan markup heading HTML (H1 misalnya).
  • Semua paket datang dengan proyek terbatas. Meng-upgrade ketika Anda membutuhkan lebih banyak pengguna yang berpartisipasi dalam sebuah proyek.
  • Kontrol versi dan kolaborasi dengan pemberitahuan email. Integrasi Slack tersedia mulai dengan paket berlangganan bisnis ($10).

Zeplin (untuk Sketch)

Zeplin adalah sesuatu yang telah kita perkenalkan pada Anda baru-baru ini di tutorial pemula Andreia.

zeplin

Mirip dengan InVision, langganan bulanan dimulai dari $15/bulan untuk 3 proyek (Anda dapat memulai dengan salah satu proyek secara gratis). Tool Mac/Windows/Web ini berfungsi terutama fokus pada penyelesaian masalah yang dihadapi di sini: penyerahan desainer-pengembang. Anda tidak mendapatkan semua tambahan lonceng dan peluit seperti dengan InVision, tapi benar-benar efektif untuk tujuan kolaborasi.

Beberapa fitur utama:

  • Bekerja secara eksklusif dengan Sketch.
  • Memberikan nilai-nilai HEX dan RGB spesifik untuk semua desain Anda.
  • Secara otomatis menghasilkan aset (tombol, ikon atau apa pun yang Anda pilih sebagai aset).
  • Spesifik Platform (iOS, Android atau web) informasi (PT, DP/SP, PX) yang ditawarkan ke pengembang. Dengan cara ini pengembang dapat mengkode aset Anda dengan langkah-langkah yang mereka akrab dalam SDK mereka. Itu bahkan menawarkan potongan kode warna sehingga pengembang bisa cukup copy dan paste.
  • Tersedia integrasi penuh dengan Slack, sehingga semua anggota tim mengetahui adanya update desain.

Sketch/Photoshop Diperpanjang Dengan Plugin

Hampir tidak perlu menyebutkan bahwa Sketch dan Photoshop keduanya memiliki daftar plugin yang baik untuk mengekspor desain Anda dan membuat panduan gaya rinci untuk pengembang. Beberapa contoh dengan harga mereka:

  • Ink (Photoshop, Gratis): sebuah generator panduan gaya.
  • Markly (Sketsa/Photoshop, $49.99): generator panduan gaya UI/Spec. Digunakan oleh Netflix, Google, Facebook dan banyak lainnya.

Layak Disebutkan

Alat-alat yang disarankan dalam artikel ini adalah yang paling umum, diuji dan ditinjau dalam industri untuk kolaborasi tim mobile/web. Mari kita lihat beberapa lainnya yang kita tidak akan membahasnya secara detail.

Framer (digambarkan di bawah) adalah alat lainnya layak disebut jika Anda merancang untuk mobile. Namun, pendekatan ini mungkin tidak akan cocok jika Anda lebih memilih untuk fokus pada desain atau pemrograman, tetapi tidak keduanya. Framer adalah contoh yang bagus dari penggunaan kreatif dan proses logis pada saat yang sama.

Adobe XD (Adobe Experience Design CC, sebelumnya Project Comet) adalah pemain yang relatif baru di pasar, tetapi dengan perusahaan aplikasi nomor satu di industri di baliknya ini Anda dapat yakin itu akan membuat dampak. Sementara itu menawarkan seperangkat alat untuk merancang prototipe dengan brilian, fokusnya pada UX, bukannya pada penyerahan desain-pengembang. Menawarkan "karya seni siap produksi", tetapi Anda tidak akan menemukan potongan kode dan rincian aset yang dapat diekspor pada menu.

Kami baru-baru ini membahas Sympli dalam tutorial perspektif-desainer. Bekerja secara khusus dengan Photoshop dan Sketch–lihatlah!

Kesimpulan

Jika Anda belum memiliki salah satu dari alat-alat tersebut terintegrasi ke dalam alur kerja Anda, dan Anda menghadapi masalah yang sedang berlangsung dengan pengembangan situs web dari desain Anda, saya sangat menyarankan Anda melihat pada alat yang disebutkan di atas. Setidaknya, cobalah dengan paket percobaan! Pada akhirnya, semakin kecil biaya bulanan (atau pembelian) akan menghemat sejumlah besar waktu yang akan dihabiskan bolak-balik dengan anggota tim Anda.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.