¿Cuál es la mejor herramienta para ayudar a diseñar los elementos puramente funcionales de un sitio web?

Si está en una Mac, no puedo recomendar OmniGraffle lo suficiente. Básicamente es Visio con esteroides y NOS. Comienza por desbastar rápidamente los flujos de trabajo utilizando una paleta de formas simples. Los “graffles” son documentos de varias páginas, similares a la metáfora de diapositivas de PowerPoint, lo que significa que puede pasar de una página a otra para iterar. Si ha creado barajas de diapositivas, sabe que duplicar una diapositiva y luego hacer un estilo libre con ella es una forma muy rápida de “pensar visualmente”, y la misma técnica funciona en OmniGraffle. A diferencia de PowerPoint y Keynote de Apple, no se sentirá frustrado por los comandos heredados arcanos o las herramientas de formato insuficientes.

Todo en OmniGraffle es un objeto, por lo que no está presionando píxeles como con Photoshop. Es muy fácil copiar objetos, agruparlos, etc. Tampoco tiene que simular varias páginas haciendo malabarismos con las capas (aunque OmniGraffle sí tiene capas si desea usarlas). Los desarrolladores de OmniGraffle muestran una atención extrema a los detalles: los objetos muestran guías de alineación a medida que los mueve, puede colocar cualquier archivo gráfico desde su disco duro y copiar y pegar desde una página web conserva las fuentes, el formato y el fondo. Esa última característica por sí sola probablemente ahorra el 25% del tiempo para un proyecto de maqueta.

OmniGraffle también se limpia después de sí mismo: si elimina todo el texto de un objeto de texto y luego lo deselecciona, el objeto de texto se elimina automáticamente. No más cazar huérfanos.

Las técnicas más avanzadas implican el uso de la función Stencils y su biblioteca gratuita de símbolos para refinar maquetas colocando elementos como controles de formulario e iconos. Puede exportar sus páginas como JPEG o PDF, o incluso definir zonas interactivas para vincular interacciones de una página a otra. Creo que esta característica se creó originalmente para presentaciones (para las cuales también se puede utilizar OmniGraffle), pero en el pasado exporté mis páginas como imágenes con hipervínculos y HTML. Esto permite a los no diseñadores hacer clic como si estuvieran interactuando con un sitio web real.

Para muchos proyectos, creo que aplicaciones como OmniGraffle reemplazarán la antigua técnica HCI de creación de prototipos en papel, si aún no lo han hecho. Todavía tengo que encontrar una herramienta que permita una iteración más rápida. Ha sido mi arma secreta, a veces me permitió entregar una maqueta la siguiente hora en lugar del día siguiente.

No trabajo para Omni Group, pero me convertí a The Way hace unos seis años y no he mirado atrás. Desde entonces, lo presenté a otras personas productoras en tres startups diferentes. Aunque su pregunta se refiere a maquetas funcionales ásperas, mi práctica actual implica el uso de OmniGraffle para hacer maquetas de píxeles perfectos que los ingenieros puedan entender, y que los codificadores de front-end puedan trabajar. PowerPoint tiende a ser demasiado simplista e irritante para este tipo de trabajo, mientras que Photoshop es un gran recurso y se adapta mejor a los detalles finales que a las grandes ideas. Illustrator es bastante bueno para reutilizar objetos, pero agregar archivos gráficos (logotipos, íconos) es una molestia, y no hay una metáfora de página fácil. OmniGraffle tiene suficientes atributos de todo lo anterior para ser una gran navaja suiza para la extraña combinación de actividades que es la creación de prototipos web. Por último, creo que es más barato que cualquiera de los otros programas mencionados aquí.

Como tenía una pregunta muy similar después de cambiar a Mac desde la PC (en la PC, usé Visio y, que es más avanzado de muchas maneras específicamente para estas tareas, Sparx Systems Enterprise Architect ), tuve que probar varios productos para venir a una conclusión

Ahora, recomendaría firmemente yEd by yWorks , ya que es:

  1. sin cargo
  2. tiene las herramientas de diagramación de requisitos funcionales más importantes (y la ingeniería de requisitos en general), que son extremadamente importantes y fáciles de usar en este producto:
  • Elementos de entidad-relación
  • Elementos UML

A menos que su plan sea construir un software funcional (¿recuerda, el concepto Rational Rose?) Que se generaría a partir de sus diagramas, yEd by yWorks es la mejor opción, al menos para Mac.

Breve descripción de su sitio (y no soy un empleado / afiliado de ellos):
yEd es una potente aplicación de escritorio que se puede utilizar para generar diagramas de alta calidad de manera rápida y efectiva. Cree diagramas manualmente o importe sus datos externos para su análisis. Nuestros algoritmos de diseño automático organizan incluso grandes conjuntos de datos con solo presionar un botón”.

Usamos maquetas de Balsamiq (www.balsamiq.com)