Wireframes en HTML

Me considero un experto en OmniGraffle. Lo use a diario para crear wireframes, de todo lo que trabajo. Aquí mi única queja: Las herramientas que tiene este app para convertir los prototipos en interactivos son pobres y dejan bastante que desear.

Hoy me encontré con este artículo que habla de hacer wireframes en html directamente. Esta idea la he escuchado varias veces antes pero siempre termino usando OmniGraffle. Mi preocupación principal es ser menos rápido una vez ya tenga la practica suficiente y haya sobrepasado la curva inicial. Yo hago todos mis diseños web “a mano” pero la velocidad nunca ha sido un issue. Regularmente cuando llego a este escenario ya tengo unos wireframes aprobados y revisados varias veces así que no tengo que hacer cambios mayores.

La desventaja que tiene la técnica que uso ahora es que aveces diseño cosas que son muy complicadas de hacer con HTML/CSS y cuando llego a crear el markup, tengo que luchar para crear las cosas. Si diseñara directamente en HTML y CSS no tendría ese issue y podría hacer pruebas con mucho y poco texto, para ver como reacciona la interface final.

Otra ventaja que veo y la que más me llama la atención es la posibilidad de hacer “user testing” remoto con los wireframes en HTML. Creo que sería más fácil que lo que hago ahora que es generar imágenes con links de los dibujos en OmniGraffle.

En fin me gusta la idea de hacer wireframes en HTML, así que voy a probarlo en el próximo proyecto. Claro uno que necesite diseñar pocas pantallas. ¿Has hecho wireframes en html? ¿Como te fue?