Diseño y prototipado de interfaces

Antes de implementar una interfaz web es conveniente diseñarla y validarla. Esto permite tomar decisiones sobre su estructura y apariencia antes de comenzar el desarrollo.

Un posible proceso de diseño es:

Requisitos
    ↓
Vistas y navegación
    ↓
Wireframes
    ↓
Guía de estilo
    ↓
Mockups
    ↓
Implementación

Wireframe

Un wireframe es una representación simplificada de una interfaz.

Su objetivo es definir principalmente:

• qué elementos aparecerán en cada vista;
• dónde estarán situados;
• cómo se organizará la información;
• qué importancia tendrá cada elemento;
• cómo podrá navegar el usuario.

En esta fase no es necesario definir con precisión colores, tipografías, imágenes o detalles decorativos.

Un wireframe puede representarse mediante formas simples:

• rectángulos para imágenes;
• líneas para textos;
• cajas para componentes;
• etiquetas para identificar elementos.

TIP

El objetivo de un wireframe no es que la interfaz sea visualmente atractiva, sino comprobar que su estructura y organización funcionan correctamente.

Mockup

Un mockup es una representación visual más detallada y cercana al aspecto final que tendrá la interfaz.

Partiendo del wireframe, incorporamos las decisiones establecidas en la guía de estilo:

• colores;
• tipografías;
• iconos;
• imágenes;
• espaciados;
• bordes;
• formas;
• componentes.

Wireframe y mockup

El wireframe se centra principalmente en la estructura y organización de la interfaz.

El mockup añade el diseño visual y permite aproximarnos al aspecto que tendrá el producto final.

Herramientas de diseño

Podemos utilizar diferentes herramientas para diseñar una interfaz. Cada una presenta ventajas y limitaciones.

Papel y lápiz

Es una de las formas más rápidas de representar una idea inicial.

Sus principales ventajas son:

• rapidez;
• sencillez;
• coste prácticamente nulo;
• facilidad para realizar cambios;
• evita centrarse demasiado pronto en detalles visuales.

Es especialmente útil para crear los primeros wireframes.

Herramientas gráficas de propósito general

También podemos utilizar aplicaciones que permiten crear y editar contenido gráfico, aunque no hayan sido desarrolladas específicamente para diseñar interfaces.

Algunos ejemplos son:

• Canva;
• GIMP;
• Photoshop;
• LibreOffice Draw.

Estas herramientas permiten crear wireframes y mockups, pero normalmente carecen de algunas funcionalidades específicas del diseño de interfaces.

Herramientas específicas para diseño de interfaces

Existen aplicaciones creadas específicamente para diseñar interfaces de usuario.

Una de las más utilizadas es Figma.

Este tipo de herramientas permite:

• crear wireframes;
• crear mockups;
• definir estilos;
• reutilizar componentes;
• alinear y distribuir elementos;
• trabajar de forma colaborativa;
• crear prototipos navegables.

Inteligencia artificial

Las herramientas de inteligencia artificial generativa también pueden utilizarse durante el proceso de diseño.

A partir de una descripción podemos solicitar propuestas para una determinada interfaz.

Por ejemplo:

Diseña el wireframe de la vista de detalle de producto de una tienda online. Debe contener imagen, nombre, descripción, precio y un botón para añadir al carrito.

La IA puede ser útil para:

• generar rápidamente propuestas;
• explorar alternativas;
• obtener ideas;
• comparar diferentes soluciones;
• modificar diseños mediante nuevas instrucciones.

Sin embargo, el resultado generado debe ser revisado y evaluado. La responsabilidad sobre las decisiones de diseño continúa siendo nuestra.

Diseñador profesional

En proyectos profesionales, el diseño de la interfaz puede ser realizado por especialistas en UI/UX.

En este caso, el diseñador puede proporcionar al equipo de desarrollo:

• wireframes;
• mockups;
• prototipos;
• guía de estilo;
• recursos gráficos;
• especificaciones de los componentes.

Posteriormente, los desarrolladores implementarán esos diseños utilizando tecnologías web.

Comparación de alternativas

No existe una única herramienta adecuada para todas las situaciones.

Podemos valorar diferentes alternativas atendiendo a aspectos como:

Herramienta	Rapidez	Precisión	Modificación	Colaboración
Papel	Alta	Baja	Alta	Baja
Herramienta gráfica	Media	Alta	Media	Variable
Figma	Alta	Alta	Alta	Alta
IA	Muy alta	Variable	Alta	Variable

WARNING

La herramienta no sustituye al proceso de diseño. Independientemente de la herramienta utilizada, debemos identificar correctamente los requisitos, las vistas, la navegación y las necesidades de los usuarios.