Apa praktik terbaik untuk pembuatan prototipe cepat menggunakan HTML / CSS / JS eksklusif [ditutup]

Saya sedang mengembangkan prototipe aplikasi web. Saya hanya ingin menggunakan HTML, CSS dan Javascript. Saya lebih suka menggunakan editor teks saya dan tidak harus belajar (atau membayar, dalam hal ini) alat baru seperti Axure.

Apa yang Anda pikirkan, praktik terbaik? Bagi saya ada banyak kualitas untuk prototipe yang bagus:

• Cepat dikembangkan
• Mudah ditingkatkan
• Kesetiaan yang adil terkait UX (ini mendiskualifikasi alat seperti Omnigraffle atau PowerPoint yang lebih didedikasikan untuk penyadapan)

Saya mencoba belajar secepat mungkin, tetapi saya ingin tahu, berdasarkan pengalaman Anda, tentang bagaimana Anda berhasil menjadi cepat dan gesit.

Referensi:

• http://www.boxesandarrows.com/view/prototyping-with

Jika Anda akan membuang prototipe dan memulai lagi dari aplikasi yang sebenarnya nanti, maka saya akan menyarankan Anda menggunakan alat seperti PowerPoint atau Balsamiq atau bahkan kertas. Kesetiaan yang rendah memungkinkan pengguna Anda fokus pada interaksi dan kurang pada warna atau tombol bergelembung Anda. Anda benar-benar mendapatkan lebih banyak ketegaran bekerja lebih cepat dengan investasi lebih sedikit seperti ini.

Jika Anda bertujuan untuk akhirnya menggunakan kode Anda sebagai dasar untuk aplikasi nyata , maka saya akan menyarankan melihat sesuatu yang ringan seperti Webmatrix atau setara Ruby / Java IDE. Webmatrix adalah alat gratis yang merupakan IDE yang akan membantu Anda mendesain dan membuat tiruan situs Anda dengan sangat cepat dan bahkan menggunakan SQL Express, IIS Express dan bagian-bagian lain dari tumpukan web .NET (semuanya gratis) secara lokal. Kemudian jika Anda memutuskan untuk meningkatkan ke Visual Studio nanti, Anda bisa tanpa melakukan apa pun pada aplikasi Anda.

Anda dapat mengambil prototipe ke aplikasi aktual dengan cukup cepat jika Anda memilih alat yang tepat. Baru-baru ini saya membuat prototipe alat internal yang pada akhirnya akan menggantikan koleksi layar kuno yang mengelola data internal. Sistem lama tidak terlalu intuitif dan sangat membingungkan untuk karyawan baru.

Tumpukan saya:

• HTML5 Boiilerplate
• Cetak Biru CSS untuk Kotak & Tata Letak
• jQuery dan jQueryUI untuk menangani JavaScript dan Layout
• jQuery Validate untuk validasi formulir sisi klien

Letakkan ini di atas kerangka MVC dan ikatkan ke kode aplikasi sisi-server pilihan Anda dan Anda bisa menjalankannya dalam sehari.

* BAGAIMANA CARA MENJADI PROTOTIPE *

Beberapa orang bingung dengan ini. Tolong bersamaku, ada berbagai tingkat "kecepatan" ketika datang untuk membuat prototipe, tetapi hanya ada satu yang tercepat - dan itu akan selalu menjadi yang tercepat, karena paling dekat dengan tingkat interaksi; dan itu adalah browser.

Bagaimana cara prototipe dengan cepat?

1 - Cobalah untuk menemukan semua yang ada untuk "Desain-Di-Browser" - Para ahli mengatakan bahwa cara terbaik untuk merancang ujung depan adalah "untuk mendapatkan kode secepat mungkin" - Chris Coyier.

2 - Menjadi cepat berarti menggunakan kembali. - Trik # 1 untuk prototyping cepat adalah ~ "komponen bangunan yang dapat membangun ke komponen lain yang telah Anda buat."

Contoh: - Ini bisa seperti Tab yang terbukti di satu halaman - Bagan terbukti di halaman lain - Kemudian kotak kombo yang kaya terbukti di halaman ketiga

 - In a fourth page, the three prior prototypes combine into a complex-component.

 Mixing - Components together, is key. 

3 - Demi pete, jika Anda melakukan prototyping cepat - IT BISA MENJADI SLOPPY. Tolong jangan menipu diri sendiri bahwa kode format akan diperlukan. Rapid Prototypes adalah kode perjalanan, atau kode yang berkembang, dalam kedua kasus ini dapat diatasi atau diotomatisasi lama setelah prototipe ditinjau. Inti dari prototipe adalah untuk menentukan vitalitas arsitektur. Kita berbicara tentang Produk yang layak Minimum dalam banyak kasus, jadi dapatkan kode kerja pada halaman secepat mungkin. Ini hanya Bukti Konsep, bukan bukti dalam puding.

4 - Saya menyebutkan otomatisasi, IDE yang baik sangat penting - yang memiliki banyak tombol cepat. "Untuk membuat prototipe dengan cepat - jari-jari Anda harus terbang, bukan mouse Anda." - Tapi masih ada lagi. Banyak IDE akan memformat kode Anda untuk Anda. Banyak yang akan mati saat Anda bekerja, menemukan kesalahan saat dibuat, beberapa dapat memperbarui browser Anda di save. Penyorotan sintaksis. Ini sederhana tetapi efektif.

Kesimpulan: Rapid Prototyping adalah kompilasi dari sifat-sifat praktik terbaik ini. Tak satu pun dari kita yang segera keluar dari gerbang: jadi ini adalah proses evolusi untuk menambah kecepatan Anda. Ini diukur dalam Agile sebagai kecepatan. Anda harus berpikir - bagaimana cara bergerak lebih cepat, lalu lebih condong ke depan.

** Masukkan setiap optimasi pengembangan yang Anda bisa seiring waktu. ** Bangun perpustakaan widget prototip, teknologi, dan kuburan api. ** Kemudian ketika saatnya tiba, duplikat, dan gabungkan bersama - mempertahankan yang asli sambil mengembangkan sesuatu yang baru. ** Ini terutama berlaku untuk banyak kerangka kerja JS.

Semoga itu bisa membantu.

Sudahkah Anda mempertimbangkan Bootstrap Twitter atau Yahoo's Pure ?

Keduanya sangat, sangat mudah untuk berdiri dan berjalan, dan Anda dapat membuat beberapa antarmuka yang cukup kompleks hanya dengan apa yang Anda dapatkan "out of the box".

Saya telah menggunakan Bootstrap untuk membuat prototipe untuk waktu yang lama, dan lebih sering daripada tidak, tulang-tulang prototipe yang sama masuk ke produk jadi.