El diseño de aplicaciones puede ser una tarea algo intimidante, especialmente si eres novato o trabajas con un nuevo diseñador. La terminología de las diversas etapas de producción tiende a mezclarse y usarse de manera intercambiable. Para empresas, es fundamental que sepas qué implica cada etapa para saber qué esperar de tu diseñador. Los diseñadores deben comprender wireframe, mockup y prototipo para asegurar su reputación profesional y entregar lo que se requiere al cliente. Aquí está lo que necesitas saber.
Wireframes
La mayoría de las personas, cuando están en la escuela, aprenden la estructura del esquema. Hay un tema principal y luego se presentan las variables para darle forma y orden al ensayo. Realmente no hay detalles que se presenten. Simplemente estás colocando las ideas en orden lógico para poder formularlas más tarde. El wireframing es muy parecido al esquema. Es el casco básico de la web o diseño de la aplicación. Aquí es donde obtienes el diseño y el orden conceptualizado. Ten en cuenta que esto es la conceptualización de la página y no la forma concreta de la página. Se pueden usar cajas simples para gráficos, marcadores de posición para texto y cuadrados para navegación.
Nota, algunos wireframes tienen varios niveles de detalle. Algunos pueden tener solo el esquema de una caja con una X en ella para imágenes mientras que otros pueden tener descripciones detalladas de lo que estará en el área designada. Aunque hay muchos herramientas de wireframing en el mercado Balsamiq es nuestra favorita.
Mock-Up
Este es el segundo paso para los diseñadores de aplicaciones. El mock-up es una representación estática de la aplicación que se utilizará. Mientras que el wireframe da el diseño de la aplicación que se va a diseñar, el mock-up da la estética y los detalles visuales en su lugar adecuado. Es una imagen pulida. Ten en cuenta que los mock-ups no son interactivos. Esto no significa que tú (o tu cliente por supuesto) solo deba ver la primera pantalla. Los mock-ups deben estar dispuestos para que se vean todas las pantallas, pero con fluidez tipo storyboard.
Prototipado
La principal diferencia entre el mockup y el prototipo es la Interacción y Experiencia del Usuario. Mientras que el wireframe era una serie de formas y algo de texto generalizado y el mock up es estética detallada, el prototipo es lo más cercano al diseño que puedes conseguir, menos algunos ajustes en el código y el diseño. Está destinado para que el cliente tenga una sensación de la aplicación. La prueba y re-prueba del sitio o la aplicación es fundamental para un buen prototipo. Debido a la variable de interacción de este paso, los diseñadores necesitarán entender conocimientos básicos (y dependiendo de la complejidad del proyecto, a veces extensos) de HTML, XHTML, CSS, Java y PHP.
Es importante que tanto clientes como diseñadores entiendan que el prototipo no es el producto terminado. Sin embargo, el prototipado es la última etapa ya que nos trae una versión clickeable temprana de un producto que puede ser presentada a usuarios/socios/inversionistas.
Los clientes deben tener en cuenta que la asignación de tiempo para el prototipado es más extensa en comparación con el mockup o prototipo. Afortunadamente con KFG International puedes obtener tu prototipo listo en 48 horas. Los cambios a una aplicación o un prototipo de diseño web no son "arreglos rápidos" pero aún así toma mucho menos esfuerzo que los cambios realizados con el producto MVP.
Herramientas para el oficio
Como puedes ver, hay bastantes variables a considerar al construir o comprar un wireframe, prototipo o mock-up. Si deseas crear cualquiera de estos diseños, necesitarás el software adecuado y conocimiento para hacerlo.
Los wireframes, siendo los más simples y baratos de las tres opciones, pueden ser creados usando Balsamiq, Lápiz y Papel o cualquier programa informático que permita formas básicas y texto. Se recomienda usar algo un poco más sofisticado que el programa estándar Paint (preferiblemente un programa que tenga herramientas de alineación).
Los mock-ups requieren que tengas la capacidad de editar imágenes, gráficos, alterar texto y crear diseños complejos. El software estándar de la industria para esto es Sketch, Figma o productos Adobe. En cuanto a educación, necesitarás entender los conceptos básicos de UI y UX para que puedas tener el mejor diseño sugerido.
El prototipado requiere un conjunto completamente diferente de herramientas. Donde necesitarás tener Photoshop, Illustrator o un programa de software visual más avanzado, también necesitarás los medios para programar. Sketch, Axure, y InVision son algunos de los programas que puedes usar. Hay otros programas disponibles también, y se te anima a encontrar algo que se ajuste a tus necesidades.
Con cualquier diseño o esquema, el diseñador debe probar el wireframe, mock-up o prototipo en varios navegadores. Esto no significa que el sitio o la aplicación necesite estar activo. Los modos de vista previa generalmente están disponibles en software, y cuando no lo están, está disponible la vista previa en la nube. Se anima a los profesionales a probar y ver sus wireframes, mock-ups y prototipos en varios navegadores para garantizar usabilidad y consistencia.
Resumen
Aunque hay similitudes entre los tres términos diferentes, no son intercambiables y por lo tanto los clientes y compradores deben entender las obligaciones y expectativas colocadas sobre el pedido. Al crear tu sitio o diseño de aplicación, siempre es beneficioso comenzar desde el nivel básico y trabajar hacia los aspectos más complejos. Comienza con un wireframe, luego haz un mock-up, y haz un prototipo para tener la mejor presentación del producto o servicio futuro.