Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Browser Apps
Webdesign

Aplikasi Desain Web Berbasis Browser: 2018

by
Length:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Febri Ardian Sanjoyo (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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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!

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.