¿Cuáles son las mejores prácticas para la creación rápida de prototipos utilizando exclusivamente HTML / CSS / JS [cerrado]

Estoy desarrollando un prototipo de una aplicación web. Solo quiero usar HTML, CSS y Javascript. Prefiero usar mi editor de texto y no tener que aprender (o pagar, de hecho) una nueva herramienta como Axure.

¿Cuáles serían, en tu opinión, las mejores prácticas? Para mí hay muchas cualidades para un buen prototipo:

• Desarrollado rápidamente
• Fácil de mejorar
• Fidelidad justa en lo que respecta a UX (esto descalifica herramientas como Omnigraffle o PowerPoint que están más dedicadas al enmarcado)

Intento aprender lo más rápido posible, pero me gustaría saber, según su experiencia, cómo logró ser ágil y rápido.

Referencia:

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

Si va a tirar el prototipo y comenzar de nuevo en la aplicación real más tarde, le sugiero que use una herramienta como PowerPoint o Balsamiq o incluso papel. La baja fidelidad permite a sus usuarios centrarse en la interacción y menos en sus colores o botones burbujeantes. En realidad, obtienes más problemas resueltos más rápido con menos inversión como esta.

Si su objetivo es utilizar su código como base para una aplicación real , sugeriría buscar algo liviano como Webmatrix o un IDE de Ruby / Java equivalente. Webmatrix es una herramienta gratuita que es un IDE que lo ayudará a diseñar y simular su sitio de manera muy rápida e incluso usar SQL Express, IIS Express y las otras piezas de la pila web .NET (todo gratis) localmente. Luego, si decide actualizar a Visual Studio más adelante, puede hacerlo sin hacer nada a su aplicación.

Puede llevar un prototipo a la aplicación real con bastante rapidez si elige las herramientas adecuadas. Recientemente hice un prototipo de una herramienta interna que eventualmente reemplazará una colección arcaica de pantallas que administran datos internos. El viejo sistema no es muy intuitivo y es extremadamente confuso para los nuevos empleados.

Mi pila:

• HTML5 Boiilerplate
• Blueprint CSS para cuadrículas y diseño
• jQuery y jQueryUI para manejar JavaScript y diseño
• jQuery Validate para la validación de formularios del lado del cliente

Ponga esto encima de un marco MVC y vincúlelo al código de aplicación del lado del servidor que elija y podrá estar en funcionamiento en un día.

* CÓMO PROTOTIPO RÁPIDO *

Algunas personas están confundidas por esto. Tenga paciencia conmigo, hay diferentes niveles de "velocidad" cuando se trata de prototipos, pero solo hay uno que es el más rápido, y siempre será el más rápido, porque está más cerca del nivel de interacción; y ese es el navegador.

¿Cómo prototipar rápidamente?

1 - Intenta encontrar todo lo que hay para "Design-In-Browser" - Los expertos dicen que la mejor manera de diseñar el front-end es "llegar al código lo más rápido posible" - Chris Coyier.

2 - Ser rápido significa reutilizar. - El truco n. ° 1 para la creación rápida de prototipos es ~ "compilar componentes que se pueden construir sobre el otro componente que ya ha construido".

Ejemplo: - Puede ser como pestañas probadas en una página - Gráficos probados en otra página - Luego cuadros combinados ricos probados en una tercera página

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

 Mixing - Components together, is key. 

3 - Por el bien de Pete, si está creando un prototipo rápido - PUEDE SER PENDIENTE. Por favor, no se engañe a sí mismo que será necesario formatear el código. Los prototipos rápidos son código thowaway, o código en evolución, en cualquier caso, esto puede abordarse o automatizarse mucho después de que se revise el prototipo. El objetivo del prototipo es determinar la vitalidad arquitectónica. Estamos hablando del producto mínimo viable en la mayoría de los casos, así que obtenga el código de trabajo en la página lo más rápido posible. Esta es solo la Prueba de concepto, no la prueba en el budín.

4 - Mencioné la automatización, un buen IDE es realmente importante, uno con muchas teclas de acceso rápido. "Para crear prototipos rápidamente, tus dedos deben estar volando, no tu mouse". - Pero hay más. Muchos IDE formatearán su código por usted. Muchos harán pelusas mientras trabajas, encontrando errores a medida que se hacen, algunos pueden actualizar tu navegador al guardar. Resaltado de sintaxis. Es simple, pero efectivo.

Conclusión: la creación rápida de prototipos es una compilación de este tipo de rasgos de mejores prácticas. Ninguno de nosotros es rápido de inmediato: por lo tanto, es un proceso de evolución para aumentar su velocidad. Esto se mide en Ágil como velocidad. Debes pensar: cómo ir más rápido y luego inclinarte más hacia adelante.

** Incorpore todas las optimizaciones de desarrollo que pueda con el tiempo. ** Construye bibliotecas de widgets prototipados, tecnologías y cementerios api. ** Luego, cuando llegue el momento, duplíquelos y mézclelos juntos, manteniendo los originales mientras desarrolla algo nuevo. ** Esto es especialmente cierto para muchos frameworks JS.

Espero que ayude.

¿Has considerado Bootstrap de Twitter o Pure de Yahoo ?

Ambos son muy, muy fáciles de poner en marcha, y puede crear algunas interfaces bastante complejas con lo que obtiene "listo para usar".

He usado Bootstrap para la creación de prototipos durante mucho tiempo, y la mayoría de las veces, los mismos huesos del prototipo llegan al producto terminado.