() translation by (you can also view the original English article)
Aplikasi berbasis browser menjadi lebih dan lebih umum, dan kelangsungan hidup mereka untuk penggunaan dalam desain web terus meningkat. Tentu, mereka mungkin tidak memiliki suara mendengus penuh dari aplikasi berbasis desktop, namun tetap saja sangat kuat, dan mereka datang dengan tunjangan yang biasanya tidak Anda temukan dalam perangkat lunak biasa.
Pertama, aplikasi berbasis browser bersifat cross platform yang kompatibel. Tidak masalah jika OS desktop pilihan Anda adalah Linux, MacOS, Windows atau bahkan ChromeOS, asalkan memiliki browser yang layak Anda kunjungi. Bergantung pada aplikasi, Anda mungkin mendapati Anda bahkan dapat menggunakannya untuk mendapatkan pekerjaan ekstra yang dilakukan di tablet iOS atau Android.
Kedua, Anda memiliki kemampuan untuk mengakses aplikasi di manapun, tanpa instalasi atau manajemen nol. Matikan perangkat lunak favorit Anda di komputer yang biasanya tidak Anda gunakan. Dan jangan pernah khawatir tentang penanganan update lagi.
Pada artikel ini kita akan melihat keadaan aplikasi berbasis browser pada tahun 2018. Kita akan melihat empat bidang utama yang penting bagi perancang web:
- Vector dan UI
- Wireframing
- Code Editing
- Photo dan Raster
Let’s go!
Vector dan UI
Bahkan software desain vektor dan UI terbaik di desktop bisa menjadi sumber yang intensif. Dengan demikian, cukup penting seberapa kuat aplikasi browser dalam kategori ini saat ini. Ini satu hal untuk membuat aplikasi yang dibandingkan dengan tugas ringan, namun untuk membuat perangkat lunak desain grafis kelas profesional di browser cukup lain. Namun, beberapa pengembang tampaknya telah mencapai prestasi ini.
Empat berikut adalah pilihan teratas saya saat ini untuk aplikasi desain vektor dan UI di browser:
Figma
Figma adalah aplikasi yang jatuh tepat di rumah web designer. Meskipun
mampu melakukan semua jenis pekerjaan vektor dan merupakan aplikasi
desain grafis yang hebat secara umum, namun sangat sesuai untuk desain
antarmuka untuk situs web dan aplikasi berbasis web.
Salah satu
fitur menonjol yang ditawarkannya untuk perancang web adalah kemampuan
untuk membuat beberapa "frames" individual, yang dapat digunakan dengan
cara yang mirip dengan artboards. Misalnya, Anda bisa membuat frame untuk mewakili setiap halaman dalam desain situs.
Dari situ menjadi menarik adalah item dalam frame, misalnya tombol "contact" misalnya, dapat dihubungkan dengan frame lain, seperti yang menggambarkan contact page. Hal ini dilakukan dengan menyeret garis penghubung keluar dari tombol ke frame target, yang mengubah kata tombol menjadi "hotspot". Dalam mode presentasi, jika hotspot diklik maka akan memuat frame yang terhubung, menjadikan fitur ini bagus untuk mensimulasikan pergerakan dari satu UI web ke yang lain.
Ketika tahap desain selesai, Figma mempermudah untuk mengambil informasi yang diperlukan untuk pengkodean, seperti dimensi, posisi, pengaturan font, hexcodes dan sebagainya. Ini juga bisa menghasilkan copy & paste CSS ready anda bisa pasang langsung ke kode anda. Dan bila aset gambar dibutuhkan, mereka bisa diekspor secara massal sekaligus atau individual sesuai kebutuhan.
Jika tugas utama Anda di aplikasi vektor berbasis browser akan merancang UI untuk web, Figma adalah pilihan yang cukup sulit untuk dilewati.
- Harga: Gratis untuk tiga proyek, $12 p/m untuk proyek tak terbatas dan fitur berorientasi tim.
- Website: www.figma.com
Gravit
Gravit Designer adalah pesaing serius dalam ruang vektor sebagai aplikasi desain grafis multi-tujuan. Ini
sepenuhnya layak untuk digunakan pada tingkat profesional, sesuatu yang
dibuat lebih luar biasa oleh kenyataan bahwa Gravit benar-benar,
seratus persen, gratis. Tidak ada biaya pembelian, biaya berlangganan atau iklan. Buka saja aplikasi dan desainnya.
Perangkat
lunak ini mencakup alat vektor yang kuat seperti Pen style klasik, Bezigon tool yang sangat praktis, dan alat Freehand and Shading yang sangat
baik. Ini menyediakan kemampuan untuk memiliki kanvas tak
terbatas, dan memiliki daftar panjang preset dimensi sehingga Anda dapat
beralih dari ukuran "Website - Huge" ke ukuran "iPhone X" dengan
sekali klik tombol.
Sistem "Pages" memberi Anda cara mengatur jenis dokumen yang artboard, dan gabungan anchor dan sistem simbol memungkinkan Anda membuat aset yang dapat digunakan kembali yang berperilaku semi-responsif saat ditempatkan pada halaman dengan ukuran yang berbeda.
Salah satu fitur favorit saya Gravit adalah sistem yang sangat fleksibel dari beberapa fill, border dan effect. Item tunggal dapat memiliki sejumlah fill, border dan effect, masing-masing dengan mode blending dan opacity mereka sendiri, yang memungkinkan Anda menciptakan gaya desain yang sangat menarik.
Gravit sedang meningkat dengan cepat, dengan tim pengembang menambahkan fitur yang sangat berguna pada interval yang sering. Update besar terakhir menambahkan simbol dan anchor yang disempurnakan. Yang sebelumnya menambahkan cloud storage, impor Sketsa dan dukungan plugin. Gravit bergerak cepat dan sering meningkat.
Jika Anda mencari aplikasi yang bagus, Anda bisa melakukan apa saja yang Anda butuhkan dengan vektor, Gravit kemungkinan besar akan menggaruk rasa gatal itu.
- Harga: Gratis
- Website: designer.io
Vectr
Vectr adalah aplikasi yang lebih ringan daripada Gravit atau Figma. Saya
akan menjelaskan aplikasi ini sebagai salah satu yang akan digunakan
saat Anda ingin masuk dan keluar dengan cepat, dan tanpa kurva belajar
yang curam. Tools dan
antarmuka Vectr bersifat minimalis & intuitif, dan rangkaian
tutorial interaktif yang sangat baik yang Anda sambut dengan peluncuran
pertama membuat perangkat lunak yang jauh lebih cepat untuk diambil.
Salah satu
fitur Vectr yang paling menarik adalah bahwa, melalui sebuah plugin,
bisa digunakan sebagai editor grafis yang sepenuhnya matang di dalam
area admin WordPress, sesuatu yang bisa sangat berguna.
Jika Anda tidak ingin banyak rame-rame, namun Anda menginginkan sekumpulan tools yang kokoh, Vectr bisa menjadi aplikasi untuk Anda.
- Harga: Gratis
- Website: vectr.com
BoxySVG
BoxySVG, seperti namanya, adalah tentang SVG. Jika Anda secara khusus merancang grafis vektor untuk web, aplikasi ini khusus untuk tujuan itu saja. BoxySVG
tidak mencoba memperhatikan print graphic, atau desain interface, atau
hal lain yang dapat mengalihkan perhatian darinya menjadi program desain
SVG yang hebat.
Ini
mencakup fitur spesifik SVG seperti dapat mengontrol pengaturan kotak
tampilan, penyelarasan objek yang relatif terhadap kotak tampilan, dan
pengaturan preserveAspectRatio-tidak perlu menggali kode SVG Anda
setelah diekspor. Dan tentu saja, karena Anda merancang di
browser, Anda akan melihat SVG Anda persis seperti saat akan ditampilkan
saat dikerahkan ke web.
Jika SVG adalah permainan Anda, terutama untuk web, pasti check out yang ditawarkan BoxySVG.
- Harga: Free
- Website: boxy-svg.com
Wireframing
Wireframing adalah kategori dimana pemilihan berbasis browser saat ini sebenarnya bisa lebih kuat daripada penawaran desktop. Ini mungkin membantu agar wireframing tidak intensif sumber daya, dan permintaan akan wireframes yang mudah diakses secara online mungkin kuat karena seringnya kolaborasi dibutuhkan selama tahap perencanaan proyek.
Simak empat aplikasi wireframing berbasis browser yang ada saat ini, tanpa urutan tertentu.
MockFlow
MockFlow
kemungkinan sangat menyenangkan bagi banyak perancang web karena
faktanya memiliki komponen drag and drop untuk Bootstrap, Material
Design, Foundation, KendoUI dan sejumlah framework populer
lainnya. Seperti yang terlihat pada gambar di atas, semua
komponen framework yang sudah familiar siap digunakan, sesuatu yang
bisa sangat membantu untuk rapid prototyping jika framework favorit Anda
ada dalam daftar inklusi MockFlow.
Bila Anda
menggunakan MockFlow untuk membuat wireframe untuk proyek berbasisframework , itu akan terlihat sangat mirip dengan produk akhir, sementara wireframe akan mempertahankan kapasitas untuk quick edits and iterations. Komponen theming adalah
vanila secara default, namun masing-masing komponen dapat memiliki
warna, ukuran, font dan sebagainya yang disesuaikan sesuai kebutuhan.
Untuk desain web focused wireframing, terutama jika Anda menggunakan framework, MockFlow memiliki banyak hal untuk ditawarkan.
- Harga: Gratis untuk satu pengguna, pembatasan sharing dihapus dari $14 per bulan
- Website: mockflow.com
Balsamiq
Balsamiq adalah aplikasi wireframing berbasis cloud yang sederhana dan cukup intuitif untuk digunakan. Di
bagian atas layar adalah tampilan visual komponen yang mewakili hal-hal
seperti perangkat, gambar, judul, paragraf, bentuk element dan
sebagainya. Drag and drop ke layar untuk membentuk bingkai gambar Anda. Anda juga dapat menelusuri lebih jauh subkategori untuk membantu menemukan komponen yang Anda cari.
Style component cukup statis, paling banyak terlihat seperti objek yang digambar tangan. Situs Balsamiq mengatakan, "Sepertinya mereka seperti sketsa! Ini mendorong brainstorming ". Fokus
brainstorming ini terkait dengan sistem kolaborasi yang memungkinkan
pembagian di antara anggota tim, membuat Balsamiq tampak paling awal di
awal proses perencanaan sebuah proyek.
Jika Anda memiliki tim yang cukup besar dan perlu memikirkan gagasan di antara beberapa orang sebelum memasukkan gigi annda ke dalam desain, Balsamiq mungkin adalah aplikasi untuk Anda.
- Harga: Dari $9 per bulan
- Website: balsamiq.com
Mockingbird
Mockingbird
agak mirip dengan Balsamiq karena Anda dilengkapi dengan pilihan
komponen standar yang siap untuk drag dan drop ke dalam bingkai gambar
Anda, seperti tombol, gambar, iklan banner, judul dan sebagainya. Beberapa
halaman dapat dibuat, dan link yang aktif dapat memungkinkan
Anda menavigasi dari mockup ke mockup saat Anda menguji UI atau
menunjukkan tim atau klien Anda.
Kolaborasi bisa dilakukan secara real time; cukup bagikan tautan dengan kolega atau pelanggan Anda dan mereka akan dapat mengkomunikasikan perubahan dan saran saat ini.
Jika kebutuhan terpenting Anda adalah komunikasi yang efisien dengan orang-orang yang berada di luar lokasi, lihatlah Mockingbird.
- Harga: Dari $12 per bulan
- Website: gomockingbird.com
Wireframe.cc
Wireframe.cc
adalah sesuatu yang sederhana, alat wireframing minimalis yang tidak
memiliki lonceng dan peluit dari tiga aplikasi kami yang lain. Namun itu juga satu-satunya yang benar-benar gratis.
Komponen
yang Anda miliki pada dasarnya hanya rectangles dengan sudut bulat
atau persegi, ellipses, dan placeholder untuk gambar dan teks. Anda bisa memilih dari warna oranye, hitam, putih dan beberapa warna abu-abu. Selain fitur ini Anda juga memiliki beberapa alat grouping dan alignment, dan kemampuan untuk menambahkan anotasi.
Wireframe.cc sengaja jarang, dan terkadang saat Anda perlu mendapatkan beberapa gagasan dengan cepat, itulah yang Anda butuhkan. Tidak ada kelumpuhan dengan analisis di sini, mulai langsung bekerja.
- Harga: Gratis
- Website: wireframe.cc
WYSIWYG
Editor WYSIWYG hari ini dalam beberapa hal mengisi peran yang digunakan oleh program desain visual seperti Dreamweaver dan Frontpage, namun dengan banyak cara lain, mereka telah berkembang jauh melampaui pendahulunya. Mereka masih bisa membantu perancang web baru mempelajari benang merah, tapi mereka juga bisa menjadi penabung waktu besar dalam proyek lanjutan saat digunakan oleh tangan berpengalaman.
Mari kita lihat lebih dekat dua aplikasi perancang web WYSIWYG berbasis browser yang paling populer.
Webflow
Webflow melakukan pekerjaan yang bagus karena berguna bagi para perancang dan pakar pemula berpengalaman dan pemula. Hal
ini disebabkan oleh fakta bahwa sementara semuanya dapat dilakukan
secara visual, Anda masih bekerja dengan semua hal yang sama dengan yang
Anda gunakan saat coding.
Anda akan
menambahkan elemen divs dan semantik, Anda akan membuat kelas CSS, Anda
harus tahu bagaimana posisi absolute dan posisi relatif, dan Anda
bertanggung jawab untuk membangun situs Anda agar responsif. Tidak ada yang terbang dengan buta di sini, cepat atau lambat Anda harus belajar apa yang terjadi di balik layar. Semua Webflow tidak menempatkan antarmuka visual melalui teknik perancangan web yang seharusnya Anda lakukan secara manual.
Bagi pemula untuk desain web, ini bisa banyak membantu proses belajar. Melihat perubahan Anda berlaku secara real time bisa pergi jauh. Bagi para veteran, Webflow adalah alat prototype yang hebat. Anda mungkin masih memilih untuk menulis kode Anda sendiri, namun Webflow dapat memungkinkan Anda bergerak lebih cepat saat merancang desain Anda. Saya secara pribadi menggunakannya dalam kombinasi dengan coding tangan untuk membuat tenggat waktu yang ketat pada lebih dari satu kesempatan.
Jadi, jika Anda adalah seorang perancang web pemula yang ingin memperlancar kurva belajar, atau tangan lama yang ingin menghemat waktu, Webflow layak untuk ditelusuri.
- Harga: Gratis untuk dua proyek, $16 p/m untuk sepuluh proyek, $35 p/m untuk proyek unlimited.
- Website: webflow.com
Froont
Dimana
Webflow adalah visual interface dari teknik web design biasa,
Froont jelas ditujukan untuk mencoba menangani banyak poin dari proses design mungkin untuk menciptakan proses desain yang sangat cepat ramah utk pemula.
Alih-alih menambahkan divs, atau teks, atau gambar, Anda akan menambahkan keseluruhan bagian dari sebuah situs pada satu waktu. Anda mungkin mampir di nav bar, hero unit, bagian konten, beberapa panel harga, footer, and that's a wrap. Froont juga
memiliki pilihan template yang cukup luas, disebut "Projects", yang dapat
Anda kloning untuk memulai proyek desain Anda jika Anda memilihnya.
Konon, hampir semuanya bisa diedit begitu ada di halaman-cukup beralih ke Expert Mode untuk menyesuaikan hal-hal seperti margin dan alignment.
Jika Anda baru memulai desain web atau Anda memerlukan sebuah proses yang bertujuan untuk menjadi seperti tangan sebebas mungkin, Froont mungkin benar di jalan Anda.
- Harga: Dari $17 per bulan
- Website: froont.com
Code Editor
Menemukan code editor berbasis web berfitur lengkap masih sedikit rumit. Ada beberapa editor berbasis web di luar sana, namun jika Anda mencari sesuatu dengan jenis fitur yang biasa Anda gunakan dari code editor desktop favorit Anda, tidak semua opsi sesuai.
Yang mengatakan, berikut adalah dua editor yang menonjol dari kemasannya, dan bisa sangat berguna saat dalam perjalanan coding.
Caret
Caret adalah satu dari sedikit code editor berbasis web yang dengannya Anda dapat membuka file lokal. Hal
ini mungkin berkaitan dengan fakta yang dipasangnya, melalui toko web
Chrome, seperti aplikasi biasa dan bekerja secara offline. Anda akan mendapatkan ikon shortcut untuk desktop Anda, dan ini berjalan tanpa chrome browser di sekitarnya.
Daftar fitur cukup mengesankan, terutama di tengah landscape editing berbasis browser yang agak tandus. Caret
memiliki sintakx highlight, tema, beberapa kursor, palet command,
manajemen proyek, dukungan plugin, dan file pengaturan "user.json" yang
dapat dikonfigurasi secara luas.
Tidak hanya Caret itu gratis, tapi juga open source dibawah lisensi GPLv2. Instal dari Toko Web Chrome, atau jika Anda lebih suka Anda dapat mengkloning repo dan menangani pemasangan sendiri secara manual.
Jika Anda memerlukan code editor yang bisa pergi ke mana saja, dan khususnya jika Anda adalah seorang pengembang yang sedang bepergian dengan perangkat ChromeOS, Caret bisa jadi hanya yang Anda butuhkan.
- Harga: Gratis
- Website: thomaswilburn.net/caret dan Chrome Web Store
CodeAnywhere Editor
CodeAnywhere
tidak mengizinkan Anda untuk membuka file lokal, tapi yang dilakukannya
adalah dengan cepat dan mudah terhubung dengan penyedia penyimpanan
pihak ketiga seperti GitHub, BitBucket, Dropbox atau server FTP, tempat
file Anda berada. Jadi jika Anda sudah memasukkan kode Anda
ke penyimpanan eksternal di penghujung hari, ini bisa membuat proses
itu sedikit lebih mulus.
CodeAnywhere
memiliki sintakx highlight untuk tujuh puluh lima bahasa, ia memiliki
empat tema dan delapan skema warna yang dapat dipilih, menawarkan code completing, linting dan multiple cursors. Ini juga memiliki built in terminal, tool kolaborasi, dan history revisi yang tersimpan.
Salah satu fitur yang sangat menarik adalah layanan "Containers", yaitu cloud-based environments yang menjalankan CentOS atau Ubuntu, dan dikonfigurasikan sebelumnya untuk WordPress, NodeJS, Ruby dan lainnya.
Jika Anda mencari cara mudah untuk mengerjakan proyek yang ditangani secara eksternal, atau jika gagasan tentang "Containers" terdengar seperti itu akan membuat proyek Anda berjalan lebih mulus, pertimbangkan CodeAnywhere.
- Harga: Gratis untuk fitur dasar, atau dari $2 p/m untuk sistem revisi, dari $7 p/m untuk kontainer dan fitur tambahan.
- Website: codeanywhere.com
Photo dan Raster
Range untuk editor foto berbasis browser sedikit lebih jarang dari kategori kami yang lain, yang tidak mengejutkan saat ini karena pengeditan foto mungkin adalah sumber daya yang paling intensif dan sulit dicapai tanpa kekuatan desktop.
Kami memiliki tiga editor yang hebat untuk dipilih, namun ada dua diantaranya, (Pixlr dan SumoPaint), memerlukan Flash jadi jika sudah lama sejak Anda menyalakan Flash di komputer, Anda harus membersihkannya lagi agar bisa menggunakannya. dua ini.
Pada
catatan itu, jika Anda ingin mengaktifkan Flash namun hanya untuk
aplikasi tertentu, di Chrome masuk ke chrome://settings/content/flash, lalu tambahkan URL aplikasi ke daftar situs yang diizinkan.
Polarr
Polarr
tidak membutuhkan Flash, dan merupakan aplikasi pengeditan foto yang
rapi yang memungkinkan Anda dengan cepat mendapatkan gambar yang
terlihat keren dan siap digunakan di konten situs Anda. Itu
membuat menambahkan filter pro-looking menjadi satu klik
sederhana, ada pencahayaan dan kontrol warna yang dalam, dan Anda dapat crop, flip, rotate dan resize ke content tercinta Anda.
Ini bahkan
memiliki fungsi "Auto enhance" yang akan menganalisis gambar
Anda dan merapikannya tanpa Anda mengangkat satu jari pun.
Polarr gratis, tapi Anda punya pilihan untuk membeli ekstra "Pro" jika Anda menginginkannya, seperti alat teks, penghapus noise, set filter potrait, filter landscape, antara lainnya. Seluruh koleksi tool "Pro" adalah $19,99
Jika tujuan utama Anda adalah untuk mendapatkan foto yang bagus untuk diposkan secara online, Polarr adalah alat yang hebat untuk menyelesaikan pekerjaan itu.
- Price: Gratis, atau Pro version untuk $19.99
- Website: www.polarr.co
Pixlr (Memerlukan Flash)
Pixlr sudah ada sejak lama. Kembali
pada hari, jika saya tidak memiliki akses ke Photoshop ini adalah apa
yang akan saya gunakan, dan itulah yang saya rekomendasikan untuk
orang-orang yang ingin melakukan editing gambar tapi tidak bisa melakukan pembelian perangkat lunak.
Pixlr
memiliki tool yang Anda harapkan untuk ditemukan dalam aplikasi raster
desktop, seperti pencil, brush, eraser, bucket, gradient, stamp, basic shape drawing, text, blur, sharpen, smudge, dodge, burn
dan sebagainya. Ia memiliki sistem lapisan sederhana yang mencakup drop shadow, inner shadow, bevel, outer glow dan inner glow. Dan ini memiliki daftar filter dan penyesuaian yang komprehensif - ingatlah bahwa fungsi ini tidak bersifat merusak.
Anda bisa menggunakan Pixlr untuk disain, seni freehand, dan retouching dan editing foto. Jika Anda memerlukan perangkat lunak berbasis web dengan lebih banyak perangkat seperti alat desktop daripada Polarr, Pixlr mungkin bisa mengisi celah itu untuk Anda.
- Harga: Gratis
- Website: pixlr.com
SumoPaint (Membutuhkan Flash)
SumoPaint sangat mirip dengan Pixlr, dan harkens dari era yang sama. Ini
juga memiliki jenis alat yang Anda harapkan dapat ditemukan di editor
raster desktop, ditambah pilihan filter dan penyesuaian/adjustment yang kuat.
Namun, SumoPaint memiliki alat shape creation yang lebih maju, seperti star, pie dan sebagainya. Selain itu, ia memiliki alat gambar symmetry yang bagus, dan free transform tool yang berguna. Ini juga memiliki beberapa gaya lapisan tambahan: color overlay, stroke, gradietn bevel dan gradient glow.
Secara keseluruhan, Pixlr dan SumoPaint sangat mirip dan pada dasarnya mengisi peran yang sama, jadi jika Anda mencari aplikasi berbasis browser dari hal ini, hal terbaik yang dapat Anda lakukan adalah mencoba dan melihat mana yang paling Anda sukai.
- Harga: Gratis, versi Pro dari $2 p/hari
- Website: www.sumopaint.com
Penyimpulan
Itu menyimpulkan putaran 2018 kita dari keadaan saat ini perangkat lunak berbasis browser untuk desainer web.
Kesimpulan:
- Editor vektor sangat kuat dan ada persaingan yang ketat.
- Wireframing tool mencakup spektrum dari satu warna minimalis hingga prototipe berbasis full framework.
- Code editor tidak banyak, namun standoutnya memiliki beberapa fitur yang sangat menarik.
- Aplikasi raster design memerlukan beberapa cinta karena Flash masih menyala, namun Polarr adalah aplikasi pengeditan foto yang luar biasa.
Sebagai catatan untuk masa depan aplikasi berbasis browser, perhatikan peningkatan WebAssembly, sebuah teknologi baru yang memungkinkan perangkat lunak intensif seperti editor video dijalankan dengan kinerja near native performance. Itu benar-benar bisa mengguncang segalanya!
Sementara itu, semoga perjalanan Anda dan perangkat portabel ultra menjadi lebih produktif karena beberapa aplikasi dalam daftar ini!
