Mi nombre es Marina Chernyshova y soy diseñadora de productos y mentora. En mi artículo anterior, “ ”, Describí por qué, en mi opinión, las empresas emergentes en etapa inicial no siempre necesitan un diseñador a tiempo completo y cómo abordar el diseño del primer prototipo desde un punto de vista teórico. En este artículo, me gustaría invitarlos a mirar el lado más práctico. Comparto las fuentes útiles que los fundadores y los emprendedores tecnológicos en etapa inicial pueden usar para construir su primer prototipo. ¿Tiene poco presupuesto? Utilice estas metodologías de diseño para crear su primer MVP sin un diseñador a tiempo completo Si tienes interés y tiempo para diseñar completamente tu producto tú mismo, te recomiendo que aprendas a usar Figma. Figma es un software de diseño basado en la nube que se utiliza principalmente para dibujar, diseñar y crear prototipos de ideas antes de un paso de desarrollo del proyecto. Con esta herramienta, los diseñadores pueden trabajar juntos para crear los diseños, agregar imágenes, experimentar con colores y fuentes, y mucho más, todo a través de un navegador web. Figma es una herramienta potente pero muy fácil de usar al mismo tiempo y muy útil para la comunicación entre todos los miembros del equipo. Además de Figma, resulta muy práctico utilizar FigJam y Figma Slides. FigJam es una herramienta de pizarra diseñada específicamente para el trabajo en equipo colaborativo. Permite a los equipos colaborar en tiempo real, visualizar ideas y hacer lluvias de ideas en conjunto. Figma Slides es una herramienta de presentación diseñada a medida para diseñadores y sus equipos. FigJam y Figma Slides son ideales para las personas que ya utilizan Figma para tener todos sus diseños, pizarras y presentaciones en un solo ecosistema. Diagramas de estructura alámbrica Los wireframes son representaciones visuales esquemáticas aproximadas de un producto digital, como un sitio web, una aplicación o una interfaz de software. En mi artículo anterior expliqué qué es el flujo de usuario: es un diagrama visual que traza el camino que sigue un usuario a través de un producto o sitio web para lograr una tarea o un objetivo específico*.* Con base en el flujo de usuario, puedes crear la primera versión simple de los wireframes. Los wireframes son necesarios para comprender la estructura del producto antes de que usted o su equipo comiencen a diseñarlo. Ayudan a los equipos a alinearse en cuanto a los requisitos, manteniendo las conversaciones sobre diseño de UX centradas y constructivas sin distraerse con los matices del diseño, como colores, fuentes e íconos. Los wireframes se pueden realizar de diferentes formas, pueden ser muy detallados o poco detallados. Vea a continuación algunos ejemplos básicos: Imagen izquierda (IU tipo wireframe con bloques de contenido) Imagen derecha (IU de alta fidelidad con gráficos y componentes detallados) El wireframe con bajo nivel de detalle incluye El wireframe de alto nivel de detalle incluye Centrarse en la estructura, el diseño y el flujo del usuario. Centrarse en la funcionalidad detallada y en elementos de diseño específicos. Bocetos básicos en escala de grises o delineados Puede contener colores, separadores y elementos específicos como gráficos. Utiliza marcadores de posición para imágenes de textos. Incluir contenido real o representativo Generalmente estático, puede indicar navegación con flechas. A menudo interactivo, corresponde a las acciones potenciales del usuario. Recomiendo empezar por lo más sencillo posible: organizar las pantallas principales con encabezados y botones aproximados y no molestarse demasiado con los textos. Si trabajas en Figma, los marcos se pueden crear inmediatamente en un tamaño realista a través de las plantillas. Para crear wireframes más detallados con elementos de interfaz más realistas, puede usar recursos de Figma listos para usar para wireframing para ahorrar mucho tiempo (por ejemplo ). Esta biblioteca En esta etapa, ya puedes hacer un prototipo sin prestar atención a los detalles, como los colores o las fuentes, y mostrárselo a uno de tus amigos. Si se trata de una aplicación móvil, puedes abrir el enlace desde tu teléfono para que se vea más realista. Es importante verificar que existan todas las transiciones necesarias entre todas las pantallas y que un usuario pueda volver atrás o cancelar la acción. Bibliotecas de componentes listas para usar No es necesario diseñar todo desde cero. Es muy útil explorar los recursos ya creados en la comunidad de Figma que puedes usar para diseñar tu producto. Hay muchas bibliotecas disponibles en Figma, como Material UI. Estas bibliotecas contienen una gran cantidad de elementos útiles, desde un conjunto de íconos hasta páginas ya ensambladas. Los elementos normalmente ya contienen todos los estados (estados de desplazamiento y seleccionados, advertencias, descripciones, etc.). Se pueden ensamblar abstracciones de interfaz completas a partir de pequeños componentes, por ejemplo, un cuadro de diálogo modal con botones y tablas en su interior. Además de los elementos en sí, puede haber instrucciones sobre cómo usarlos correctamente con márgenes, espaciados, etc. Estas bibliotecas han desarrollado componentes e incluso diseños completos que los desarrolladores pueden usar. Si es necesario, puedes agregar tus propios elementos allí en el futuro. Por ejemplo, si necesitas algunos gráficos, puedes tomarlos de otra biblioteca. Si necesitas un elemento no estándar, puedes diseñarlo desde cero y agregarlo a la biblioteca con todos los estados. Recursos gráficos listos para usar Cualquier producto puede parecer mucho más maduro y reflexivo gracias a unos gráficos equilibrados y bien diseñados: ilustraciones, iconos, animaciones, etc. No es necesario perder tiempo en esto, aquí también puedes utilizar conjuntos ya preparados. Hay muchos conjuntos de este tipo en diferentes estilos y colores. También se pueden encontrar en o Si te gustan los gráficos en 3D, a menudo los sets grandes se pagan para uso comercial, pero son bastante asequibles. Comunidad Figma Comunidad Spline Estos recursos se pueden utilizar no solo dentro de tu producto, sino también en tus materiales de marketing, imágenes para redes sociales y presentaciones. Puedes encontrar varias plantillas de presentación allí y modificarlas según tu estilo. Referencias e inspiración Existen varias plataformas que recopilan flujos de usuarios y capturas de pantalla de diferentes productos, como o Puedes explorarlas para analizar a la competencia o simplemente para inspirarte. Son muy útiles cuando estás trabajando en una función en particular y sabes que es un patrón de experiencia de usuario generalizado, como consultar o guardar un elemento en favoritos. Puedes explorarlas por categorías o buscar una determinada funcionalidad por palabras clave. flujosdepaginas.com es:mobbin.com Para trabajar en una experiencia de usuario fluida, siempre es mejor confiar en soluciones existentes porque son claras y familiares para los usuarios. Incluso si está trabajando en una funcionalidad innovadora, siempre puede utilizar patrones similares en significado de otra área. Conclusión Hoy en día, el mercado digital es bastante competitivo y los usuarios tienen experiencia en buenas UX y UI. Es mejor no descuidar esto incluso en la etapa inicial del desarrollo del producto como una pérdida de tiempo innecesaria en "adornos", sino tratar de usarlo como una ventaja competitiva. En mi opinión, existe un equilibrio entre la ausencia total de diseño y el tiempo dedicado a diseñar a la perfección cada pantalla. Se puede lograr una experiencia de usuario fluida gracias a la simplificación y a evitar pasos y acciones innecesarios, y una interfaz de usuario aceptable puede ser muy simple pero atractiva. Lo principal es no dudar en utilizar soluciones ya preparadas y no saltarse pasos previos al diseño, como la creación del flujo de usuario. De este modo, se reduce considerablemente el riesgo de cometer errores o de perder tiempo, lo que ahorrará recursos y no afectará a la motivación.
