Merancang Prototipe 5 Aplikasi Yang Melakukannya Lebih Baik Daripada Photoshop
Photoshop adalah alat yang populer dengan desainer dan ekstensi seperti CSS3Ps dan FontAwesomePS menjadikannya alat yang baik untuk membuat prototipe desain web juga. Namun, itu tidak benar-benar dibuat untuk tujuan ini dan ketika tren saat ini mendorong maju dengan desain responsif, Pra-prosesor CSS, Kerangka CSS, dan grafis bebas-resolusi (SVG), Photoshop menjadi kurang relevan untuk desain web.
Namun tidak perlu khawatir karena ada banyak aplikasi alternatif yang dibangun oleh pengembang independen untuk membantu mengisi kesenjangan. Dalam posting ini kita akan melihat aplikasi ini, dan mencari tahu seberapa jauh fitur mereka unggul jika dibandingkan dengan Photoshop untuk membuat prototipe desain web.
1. Alur web
Webflow memungkinkan Anda mendesain situs web dengan cara drag-and-drop. Webflow membuat tata letak berdasarkan kisi Bootstrap sehingga desain situs web Anda siap-responsif. Webflow juga dilengkapi dengan satu set komponen web standar seperti blok, daftar, dan pemformatan teks yang dapat Anda tambahkan ke ruang kerja Webflow.
Gaya dapat dengan mudah ditambahkan dari sidepanel dan Anda dapat lebih lanjut menyesuaikan properti elemen juga. Setelah desain selesai, Anda dapat mengekspor hasil desain ke dalam kode HTML dan CSS. Anda juga dapat berbagi pekerjaan Anda dengan tim.
2. Avocode
Avocode mendukung file PSD dan memungkinkan Anda untuk segera mengedit dan mengubahnya menjadi situs web yang bisa diterapkan dengan HTML dan CSS. Avocode akan mengekstraksi semua aset dalam proyek Anda termasuk CSS, Gambar, dan SVG (jika ada). Anda dapat dengan mudah mengekstrak CSS, dalam bentuk Kurang, SASS atau Stylus untuk setiap lapisan yang dipilih, karena telah diintegrasikan dengan CSSHat.
Selain itu, Avocode dilengkapi dengan kontrol revisi yang memungkinkan Anda kembali ke desain sebelumnya, kalau-kalau ada masalah.
3. Macaw
Macaw memungkinkan Anda mendesain tata letak web dan elemen web jika Anda bekerja pada editor gambar seperti Adobe Photoshop. Anda dapat membuat kolom atau memblokir area, menyesuaikan posisi mereka, dan mengatur tipografi sesuai kebutuhan. Macaw memungkinkan Anda untuk mengubah gaya berbagai elemen di satu tempat. Anda juga bisa menggunakan perpustakaan untuk menyimpan semua elemen untuk digunakan nanti.
Untuk membuat desain responsif, Macaw memungkinkan Anda mengatur breakpoint dan mengoptimalkan situs Anda untuk semua perangkat. Ketika proses desain selesai, Macaw dapat menghasilkan HTML dan CSS yang tepat untuk Anda.
4. Sketsa
Sketsa sangat ideal untuk mendesain antarmuka dan situs web. Itu menciptakan objek berbasis vektor bukan dalam bitmap. Jadi ketika Anda mengubah ukuran ukuran kanvas, desain Anda tidak kehilangan kualitas. Fitur seperti 'built-in grid' akan membantu Anda mengatur objek atau penempatan tata letak web dengan lebih baik.
Selain itu, Sketch merender font yang mirip dengan yang ditampilkan di Webkit (pikirkan Chrome, Opera, dan Safari). Jadi Anda tidak perlu khawatir tentang hasil teks pada gambar yang tidak setajam dan seakurat teks asli yang ditampilkan di browser. Sketsa juga dapat mengekspor CSS untuk setiap elemen di lapisan.
5. Antetipe
Antetype adalah aplikasi berbasis vektor yang berfokus pada desain visual, bagus untuk membuat elemen antarmuka seperti gradien, bayangan drop, bayangan dalam, bayangan teks, gaya perbatasan dan sudut bulat. Antetype juga menyediakan ratusan widget yang dapat Anda gunakan langsung di proyek Anda.
Untuk membuat desain responsif, Anda dapat mengatur breakpoint yang akan menyesuaikan ukuran layar. Anda juga dapat mengekspor setiap elemen dalam bentuk Gambar atau CSS.
