Aunque a ciertos directivos y managers les parezca que desarrollar aplicaciones o herramientas web es cuestión de COPIAR y PEGAR, la realidad dista mucho de esta absurda simplificación.
El desarrollo de aplicaciones de calidad, aunque resulte difícil de creer para la dirección, necesita en primer lugar tener claros los conceptos y requiere de una parte de investigación, otra de planificación y finalmente de suficientes recursos de desarrollo. Todo esto sin duda significa una gran cantidad de tiempo y dedicación.
Desgraciadamente para todas las personas que trabajamos siempre necesitan las aplicaciones y los desarrollos para ayer y si puede ser antes mejor.
¿Cuál sería el proceso o ruta ideal?
La necesidad de seguir un proceso de diseño es realmente una cuestión de ahorro en el tiempo de desarrollo. ¿Cuántas veces tenemos que rehacer sistemas? ¿Cuántas veces los productos terminan por no usarse?
Todos estos representan diferentes etapas del flujo de diseño.
Piensa en:-
1. Un plano arquitectónico, en papel, de una casa — que vamos a construir como un wireframe.
2. Una casa de exhibición de madera (u otro material) como una maqueta o mockup.
3. La casa de muestra real, construida en el primer piso como un prototipo.
Aunque ciertamente puedes intentar vivir en una casa de exhibición (donde su belleza se supone demuestra lo genial que son otras casas de la zona), no puedes contar con una estancia cómoda en un plano – es sólo una hoja de papel.
Una casa de exhibición y un plano son diferentes medios de comunicación en la arquitectura:
Un plano sirve como un plan de construcción y debe especificar cómo debe ser construido el edificio una casa de exhibición provee una prueba de manejo para futuros residentes
La misma diferenciación puede aplicarse a los wireframes, maquetas(mockups) y prototipos. Se ven diferentes, comunican algo diferente y sirven a diferentes propósitos.
Al principio podría parecer que vamos más despacio, pero este modelo de interacción nos permite llegar a lo útil y descartar los desperdicios en etapas tempranas del diseño.
¿Qué es un Wireframe?
Los wireframes son el esqueleto del diseño, Es una representación de baja fidelidad visual de la interfaz, en escala de grises y sin dedicarse mucho al aspecto o estética del diseño, con el propósito de no distraerse de lo importante en esta etapa: el concepto, la estructura y los componentes básicos del diseño. Son un mapa, sin componentes gráficos, ni elementos como fuentes tipográficas o colores. Deben mostrar:
● Las principales zonas de contenido , el ¿qué?.
● Y la estructura de la información , el ¿dónde?.
Al ser rápidos de desarrollar, se utilizan en gran medida para compartir propuestas e ideas dentro de los equipos de diseño. A veces también se usan como elemento de discusión con el cliente, pero hay que explicarles que se fijen en lo que realmente define este producto y no en detalles visuales que no se contemplan en esta etapa (“este botón no es bonito”, “la tipografía no me gusta”, etc.). Por esta razón, habría que tener precaución al utilizarlos para evaluar con usuarios. Puede que solo se queden con que “no lo ven bonito”.
habría que tener precaución al utilizarlos para evaluar con usuarios. Puede que solo se queden con que “no lo ven bonito”.
¿Que es una maqueta o mockup?
Los mockups son la piel del diseño. Es una representación de media fidelidad completamente estática del diseño visual. Al contrario que en el wireframe, en el mockup ya se va “al pixel”, definiendo detalles visuales como color, tipografía, sombras, bordes, etc. Es el punto en el que hacerse una idea muy clara de qué apariencia visual va a tener el producto. Las maquetas no son interactivas ni cliqueables.
Si el wireframe asienta la base y estructura o esqueleto del diseño, el mockup define su apariencia o piel
Este producto puede ser muy útil para discutir y evaluar con el cliente si el aspecto visual y la comunicación encaja con lo que se buscaba: si les parece atractivo, si les transmite o comunica aquello que se buscan de forma clara o si se entiende.
¿Que es un prototipo?
Un prototipo es una representación de alta fidelidad que simula la interacción del usuario con la interfaz (el ¿cómo?). A diferencia de las etapas anteriores, se puede hacer clic en un prototipo, si el wireframe define la estructura y el mockup cómo es visualmente, el prototipo define sobre todo cómo se comporta el producto.
Los prototipos son un candidato ideal para evaluar con los usuarios, al tener una funcionalidad simulada y un aspecto visual más definido, son más adecuados para evaluar la experiencia que tienen estos interactuando con el producto.
Un prototipo se parece mucho al producto final en sí. ¡Pero no es el producto final!
La diferencia entre el producto final y el prototipo es principalmente que la interfaz y el backend no suelen estar conectados en el caso de un prototipo. Esto se hace para reducir los costos de desarrollo hasta que se aprueba la interfaz de usuario. Una vez que se prueba el prototipo, se puede continuar con la codificación.