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

13 Alat Prototyping untuk Web Designer

by
Length:LongLanguages:

Malay (Melayu) translation by Kaustina Nurul Ilmi (you can also view the original English article)

Mari lihat beberapa alat "prototyping" yang tersedia untuk web pereka saat ini, tanpa spesifik:

  1. Framer
  2. Adobe XD
  3. Kesan Selepas Adobe
  4. Adobe Animate CC
  5. Prototaip Kraf
  6. Prinsip
  7. Atom
  8. Proto
  9. JustinMind
  10. Origami
  11. Flinto
  12. Webflow
  13. App Marvel

engumpul idea "pemangku kepentingan" dan klien pada awalnya mudah, tetapi apabila keadaan menjadi sulit kita memerlukan alat untuk membantu mempercepat maklum balas. Web menjadi lebih rumit untuk para perancang depan, dengan banyak permintaan interaktif. Tindakan seperti menggesek (swipe) dan menyeret (drag) hanya sebagian kecil, dan memikirkan bagaimana keseluruhan teka-teki itu bisa cocok adalah inti dari seni prototyping yang sebenarnya.

Dimana Prototyping Cocok?

Menurut definisi, "prototaip" adalah sampel awal yang dibangun untuk menguji spesifik konsep. Satu prototaip digunakan untuk mengevaluasi dan meningkatkan sistem untuk mendapatkan "wawasan" yang lebih baik mengenai keseluruhan projek. Kita semua mengerjakan projek setiap hari dengan beberapa yang lebih rumit berbanding yang lain, tetapi kapan saatnya meminta alat untuk membantu mendapatkan umpan balik?

eberapa akan berpendapat "kod" jauh lebih cepat untuk memulakan, tetapi ada saatnya lebih baik menghabiskan waktu menggunakan prototipe daripada merekayasa sesuatu yang mungkin tidak akan terealisasi. Prototaip menghasilkan umpan balik untuk "interaksi" dan "penempatan". Kerangka gambar (Wireframe) interaktif memberi pemahaman yang lebih baik kepada klien tentang bagaimana suatu projek sesuai untuk pengguna mereka.

Di lain waktu, prototaip sebelum pengekodan boleh memberikan keuntungan kepada projek dengan mengidentifikasi "kes" yang mungkin telah dilewatkan.

Prototyping dan Ruang Lingkup Web Design

Ketika bertanya pada diri sendiri apakah ini masih cocok diterapkan di ruang lingkup saat ini, kita pasti bisa menghubungkan permintaan terhadap kerja "gerak" (gerakan) . Interaksi sederhana dapat dicotong untuk dijelaskan secara lisan, namun dalam konteks lain, ini membantu untuk mendapatkan perspektif bagaimana interaksi boleh dipicu - dan lebih banyak klien menuntut untuk melihat konsep bukti sebelum menandatangani sesuatu. DPenting sekali, sekarang lebih dari sebelumnya, untuk mempunyai ide tentang kemana harus beralih ketika kebutuhan akan prototipe harus muncul.

Dengan banyak alat yang tersedia di pasaran, yang mana yang akan anda gunakan? Mari perhatikan.

Framer

framer
Framer
  • Lisensi Plus: $ (15 / mo) (Hanya Untuk Mac)
  • Lesen Enterprise: Hubungi

Framer meminjamkan keakraban pengeditan visual dengan fleksibilitas kode, memberikan karya kerja mulus yang dilengkapi dengan alat perekaman, kontrol pada versi dan pembagian sederhana. Aplikasi yang membantu mempelopori pola interaksi baru untuk membuat aplikasi yang hebat. Ambil data dari kegemaran anda API, ambil sebenar pengguna input untuk diuji, dan lakukan dengan pengguna sebenar dan umpan balik (maklum balas). Import grafik langsung dari Sketch, Photoshop atau Figma.

Walaupun Framer mungkin kelihatan seolah-olah digunakan khusus untuk aplikasi seluler, tetapi juga dapat dimanfaatkan untuk proyek bukan aplikasi, atau digunakan sebagai perpustakaan mandiri. Apabila menggunakan perpustakaan Framer JS saja, anda menghindari IDE sepenuhnya . Intinya ini ialah rangka kerja open source JavaScript untuk prototyping yang cepat. Intinya ini ialah rangka kerja open source JavaScript untuk prototyping yang cepat. Tentukan animasi dan interaksi, lengkap dengan penapis, fisika pegas, kesan 3D dan lain-lain. Walaupun CoffeeScript tidak diperlukan, dokumen menggunakan CoffeeScript dan juga IDE.

Perlu diketahui bahawa Framer tidak dimaksudkan untuk digunakan untuk menghasilkan produksi siap produksi animasi.

Adobe XDD

Adobe XD
Repeat Grid yang dibuat khusus untuk XD , dan dengan lapisan, simbol, dan peen tools untuk desain UX. Tambah interaksi menggunakan banyak animasi untuk membuat transisi antara papan seni untuk mensimulasikan aplikasi aliran / laman web.

di sini untuk mengetahui tentang perubahan dan pemempurnaan kedepannya. Kami juga menerbitkan 15 seri yang mencakup semua penting alat yang Anda perlukan untuk mulai mendesain dan membuat prototype dengan Adobe XD::

Adobe AfterEffectss

After Effects

Selepas Kesan

tidak secara khusus dibuat sebagai prototaip alat untuk laman web dan aplikasi (walaupun anda masih boleh melakukannya), namun ini membantu membina prototaip gerakan untuk mereka yang ingin memodifikasi animasi mockup untuk klien. Buat gerakan grafik untuk video atau membuat efek animasi untuk Web. Berikut adalah artikel bagus di Tuts + karya Charles Yeager ::

Welcome to After Effects ..

Adobe Animate CCC

Adobe Animate CC

Craft Prototype
Macaw
dan Easee ) akhir-akhir ini dari luar entitas..

Prototaip Kraf adalah alat yang hebat yang membolehkan anda merancang data nyata, menjadikan gaya panduan dalam satu klik. Dengan prototaip anda boleh bekerja langsung dari Sketch; Semua sekaligus. Dengan mirroring (pencerminan) secara real time ke telepon Anda, Anda dapat segera menguji prototipe desain. Bila Anda siap untuk membagikannya, Anda dapat mempublikasikan karya Anda langsung ke Invision untuk mendapatkan umpan balik dari klien dan pemegang saham. Ini bahkan membolehkan anda membuat prototaip dengan kesetiaan yang lebih tinggi dengan gerakan, memberi anda garis masa untuk menyesuaikan visual menggunakan keyframes. Buat HTML dan CSS, kod huruf cepat, dan dokumentasi untuk pengembang anda. Tonton video pendek ini yang menerangkan Craft 2.0 Preview - Prototaip dalam Sketch di Vimeo..

Principle

Prinsip membuat perancangan antara muka pengguna animasi dan interaktif lebih mudah. Entah anda mendesain aliran dari aplikasi multi screen, atau interaksi dan baru animasi, Prinsip membolehkan anda membuat desain terlihat dan terasa luar biasa. Aplikasi ini sangat mirip UI pada Sketch termasuk aspek lain seperti penjajaran, artboard pembuatan dan sambungan skrin, ditambah pratinjau real-time. Klik lapisan animasi untuk menyelam lebih dalam ke keyframes dan sesuaikan melonggarkan kurva kustom seperti yang anda inginkan pada lain animasi alat. Prinsip memberikan anda kebebasan untuk bereksperimen tanpa membatasi anda terhadap transisi yang telah ditetapkan sebelumnya, dan lagi anda dapat mengimpor seni dari Sketch juga..

Prinsip Mirror untuk iOS membolehkan orang lain melihat reka bentuk anda pada peranti mereka. Saat merancang, Anda dapat langsung berinteraksi dengan mencolokkan perangkat ke komputer atau mengekspor aplikasi Mac mandiri untuk dilihat oleh orang lain.

Atomc

Atomic

Atom adalah aplikasi berasaskan web yang terintegrasi dengan Sketch, membolehkan anda mengimpor desain dari sana atau dari pilihan anda. Membawa reka bentuk ke Atom sangat sederhana; gunakan plugin Lekapan atau "drop" elemen dari alat reka bentuk kegemaran anda..

gerakan dan transisi untuk mudah alih atau desktop Gunakan cermin CSS untuk mengimplementasikan tambahan gaya dan juga mengekspor CSS anda untuk dikongsi dengan pemaju lain. Baca lebih lanjut mengenai ciri Atom di laman web mereka ..

Protoo

Proto
Proto . Aplikasi ini dilengkapi dengan satu set lengkap UI perpustakaan seperti iOS9, Reka Bentuk Bahan, Windows 10 dan lain-lain. Design boleh diimpor menggunakan Sketch atau plugin Photoshop; Import mereka di lapisan dan disinkronisasi dengan Dropbox. Ekspor aset UI secara langsung. Pratonton prototaip di pelayar atau peranti yang menggunakan proto aplikasi untuk iOS atau Android. Bagikan dengan klien atau ahli pasukan untuk berkolaborasi dan menghasilkan umpan balik. Proto terintegrasi dengan alat pengujian pengguna terdepan untuk mendapatkan umpan balik dan wawasan yang kuat.

laman web Proto ..

JustinMindd

JustinMind
  • Syarikat: Hubungi>
widget yang sudah ada yang sudah ada yang disesuaikan dengan device template yang dipilih untuk proyek anda. Elemen seperti tombol interaktif, kotak centang, daftar, dan bahkan parallax layout ada sesuai keinginan anda..

panduan tutorial dan video untuk semua orang mulai dari pemula sampai ahli. Walaupun ditawarkan secara percuma untuk perkongsian kemampuan pada penyemak imbas, Anda harus mengupgrade versi ke akun berbayar untuk berkolaborasi dengan anggota tim Anda. Dengan JustinMind Prototyper Anda dapat mengimpor gambar dari semua desain alat atau langsung dari web browser anda dan mengubahnya menjadi prototype web yang menarik dengan alat "hotspot image". Eksport prototipe anda ke dokumen HTML yang berfungsi sepenuhnya dan menjadikannya tersedia untuk dilihat di mana-mana sahaja di mana sahaja..

  • https://www.justinmind.com/features>

Origamii

Origami dibangun dan digunakan oleh perancang di Facebook dan telah digunakan untuk membuat aplikasi seperti Instagram, Messenger dan Kertas. Salin apa saja dari Sketch dan sisipkan lapisan asli ke Origami Studio. Penyesuaian yang cepat, menambah "tingkah laku", dan meng-animasi-kan apa-apa lapisan tanpa harus kembali. Alat ini menawarkan kepada perancang serangkaian gerak isyarat dan transisi animasi yang umum berlaku pada UI pola..

laman web Origami ..

Flintoo

Flinto

Flinto untuk Mac adalah aplikasi berasaskan perkakasan yang membolehkan anda membuat sesuatu dari prototaip sederhana hingga prototaip yang komprehensif dengan interaksi. Tiada program atau garis masa; Pada dasarnya, ini adalah alat prototipe untuk perancang. Tempatkan objek dan komponen di tempat yang anda mahu. Transisi boleh sederhana atau kompleks dan boleh digunakan semula. Anda boleh mengawal setiap lapisan, termasuk spring atau cubic-bezier..

Webfloww

Webflow

Webflow adalah aplikasi lain yang berasaskan web yang berjalan langsung di versi terbaru Chrome dan Safari. Ini bermakna saat ini dioptimalkan hanya pada peramban itu, namun kode yang dihasilkan memiliki peramban lintas dukungan..

demo berikut yang dapat dilihat di Webflow atau periksa kode yang dihasilkan dalam demo CodePen . Juga, sangat bermanfaat untuk merasakan UI melalui video ini..

Interaksi V1 telah tersedia dan Interaksi 2.0 akan mencakup lebih banyak penyesuaian dengan parallax jenis dan interaktivitas animasi yang dibangun secara visual; animasi berdasarkan kedudukan kursor / tatal hidup. Webflow berharap untuk segera melancurkan versi beta sehingga Interaksi 2.0 akan menjadi sebahagian besar dari antarmuka (interface) dan alasan besar bagi banyak perancang dan pengembang untuk menggunakan Webflow..

  • http://3d-transforms.webflow.com>
  • https://webflow.com/prototyping>
  • https://webflow.com/feature/interactions-v2>
  • https://interactions.webflow.com>
  • https://flexbox.webflow.com>

Marvel membolehkan anda untuk menghubungkan semua reka bentuk bersama-sama, menambah isyarat dan transisi untuk membuat prototaip anda terasa seperti aplikasi nyata atau laman web. Buat prototaip untuk iPhone, iPad, Desktop, Apple TV, Apple Watch dan Android..

plugin Sketch dan bahkan alat iOS . Aplikasi iOS kini menyertakan kanvas (disebut sebelumnya), tool bantu-cepat Marvel yang membolehkan anda membuat aplikasi mock-up dari awal. Aplikasi ini juga menyertakan Iconfinder dan Unsplash yang menyediakan epik pangkalan data lebih daripada satu juta gambar dan ikon untuk dipadukan ke dalam desain anda..

  • Val Head>
  • Waldo Broodryk>
  • Stephen Shaw>
  • Christopher Wallis>
  • James Traggianese>
  • Suresh Selvaraj>
  • Will Phillips Jr.>
  • Iván Uruchurtu>

Advertisement
Advertisement
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.