Makers3D/docs/Makers3D_UX_UI.md

Makers3D - UX UI

1. Principios

1. Menos pasos, mas claridad.
2. El mapa atrae; el trabajo publicado convierte.
3. Todo CTA importante debe estar disponible tambien fuera del mapa.
4. La interfaz debe explicar confianza sin inventar prestigio.
5. Ninguna pantalla debe depender de datos que el MVP todavia no sabe medir con honestidad.

2. Direccion visual

Personalidad

• tecnica;
• cercana;
• clara;
• confiable;
• visual;
• sobria.

Sistema visual

• fondo principal: grafito profundo;
• superficies: azul grisaceo oscuro;
• accion primaria: azul electrico;
• acento secundario: cyan frio;
• exito: verde controlado;
• alerta: ambar;
• error: rojo sobrio.

Tipografia

• titulos: Space Grotesk;
• interfaz y cuerpo: Manrope;
• datos tecnicos o chips: IBM Plex Sans.

Radio y forma

• tarjetas y modales: 18 px;
• chips y botones pequenos: 999 px;
• sombras suaves, no teatrales;
• bordes sutiles para separar sin endurecer la UI.

3. Navegacion

Publica

• Inicio
• Resultados
• Perfil maker
• Trabajo
• Servicio
• Acceso / Registro
• Consultas

Privada maker

• Resumen
• Perfil
• Servicios
• Trabajos
• Bandeja
• Resenas
• Suscripcion
• Cuenta

Admin

• Makers
• Casos
• Resenas
• Pagos
• Auditoria

4. Pantallas obligatorias

4.1 Inicio

Objetivo:

• explicar rapidamente que hace la plataforma;
• llevar al usuario a buscar por zona o necesidad.

Bloques:

• hero con buscador;
• acceso a geolocalizacion opcional;
• vista inicial de mapa o lista segun dispositivo;
• categorias o necesidades frecuentes;
• explicacion simple de como funciona.

4.2 Resultados

Objetivo:

• combinar descubrimiento geografico con evaluacion rapida.

Elementos:

• buscador superior;
• filtros visibles;
• conmutador lista/mapa en movil;
• lista de tarjetas;
• mapa con clusters;
• aviso claro cuando la geolocalizacion no esta activa;
• estados vacios y alternativa de ampliar zona.

4.3 Perfil publico del maker

Objetivo:

• convertir curiosidad en confianza y confianza en consulta.

Jerarquia:

• cabecera con nombre, localidad, disponibilidad y CTA;
• servicios principales;
• trabajos publicados;
• resenas verificadas;
• informacion de cobertura y envio;
• datos de contacto publicos si el maker decide mostrarlos.

4.4 Detalle de trabajo

Objetivo:

• demostrar calidad y contexto.

Contenido:

• galeria;
• titulo;
• problema resuelto;
• solucion aplicada;
• servicio relacionado;
• CTA "Quiero algo parecido".

4.5 Detalle de servicio

Objetivo:

• aclarar que puede contratarse.

Contenido:

• tipo de servicio;
• descripcion;
• tecnologias y materiales;
• modalidad local y envio;
• plazo orientativo;
• precio orientativo opcional;
• CTA de consulta contextual.

4.6 Contacto guiado

Objetivo:

• obtener una consulta mas util que un "hola, cuanto sale?".

Flujo:

1. necesidad;
2. detalles del trabajo;
3. urgencia y entrega;
4. adjuntos permitidos;
5. resumen editable;
6. registro o acceso si hace falta;
7. confirmacion.

4.7 Bandeja y conversacion

Objetivo:

• sostener el intercambio minimo necesario.

Vista:

• lista de conversaciones;
• ficha breve del contexto;
• hilo de mensajes;
• composer;
• estado de envio;
• acciones de rechazo o cierre.

4.8 Alta maker

Objetivo:

• convertir una cuenta normal en presencia profesional.

Pasos:

• datos del perfil;
• ubicacion;
• disponibilidad;
• primer servicio;
• primer trabajo;
• resumen de requisitos;
• suscripcion;
• solicitud de publicacion.

4.9 Gestion de servicios

Objetivo:

• publicar una oferta clara y mantenible.

Vista:

• lista de servicios;
• crear/editar;
• activar/desactivar;
• indicador de servicio incompleto.

4.10 Gestion de trabajos

Objetivo:

• construir portfolio con el menor esfuerzo posible.

Vista:

• lista de trabajos;
• borradores y publicados;
• formulario con fotos primero;
• vista previa publica;
• control de minimos.

4.11 Suscripcion

Objetivo:

• explicar el estado comercial sin ambiguedad.

Contenido:

• plan actual;
• precio;
• estado;
• fecha relevante;
• accion principal;
• aviso de que pagar no publica automaticamente.

4.12 Moderacion y admin

Objetivo:

• operar sin glamour, con velocidad y trazabilidad.

Pantallas:

• listado de makers;
• cola de casos;
• detalle de caso;
• detalle de pago;
• historial de acciones.

5. Wireframes textuales

Inicio movil

[Logo]              [Entrar]

Encuentra quien imprime cerca de ti
[Buscar por pieza, material o servicio]
[Usar mi ubicacion] [Elegir ciudad]

[Mapa/Lista]
[Filtros rapidos]
[Tarjetas de makers]

Perfil maker movil

[Portada]
[Avatar] Nombre del maker
Localidad - Disponibilidad
[Contactar]

Servicios
[chips]

Trabajos
[galeria vertical]

Resenas verificadas
[bloques]

Informacion

Contacto guiado movil

Paso 2 de 5
Que necesitas imprimir o fabricar?
[campo]

Tienes archivo?
( ) Si
( ) No

[Adjuntar imagen o PDF]
[Continuar]

Area maker movil

Hola, Nombre
Estado: listo para publicar / publicado / incompleto

Te falta para publicar
- Ubicacion
- Primer trabajo

[Editar perfil]
[Crear servicio]
[Crear trabajo]
[Ver suscripcion]

6. Componentes

Basicos

• boton primario;
• boton secundario;
• chip de filtro;
• tarjeta de maker;
• tarjeta de trabajo;
• tarjeta de servicio;
• badge de estado;
• barra superior;
• bottom sheet movil;
• modal de confirmacion.

Formularios

• input de texto;
• textarea;
• select;
• chips multiseleccion;
• subida de imagen;
• subida de PDF;
• resumen revisable.

Feedback

• skeleton;
• vacio;
• error;
• exito;
• aviso;
• bloqueo por requisito pendiente.

7. Estados

Toda pantalla relevante debe contemplar:

• carga;
• vacio;
• error;
• sin permisos;
• sin conexion momentanea;
• accion exitosa;
• accion duplicada bloqueada.

8. Responsive

Movil

• prioridad absoluta;
• mapa y lista no compiten en pantalla reducida;
• CTA fijo en perfil y trabajo;
• formularios en un solo eje vertical.

Tablet

• mas densidad de tarjetas;
• filtros laterales cuando convenga;
• lista y mapa pueden convivir parcialmente.

Escritorio

• mapa y lista simultaneos en descubrimiento;
• bandeja con dos columnas;
• admin con tablas densas.

9. Accesibilidad

• contraste AA como minimo;
• foco visible;
• navegacion completa por teclado;
• labels reales en formularios;
• mensajes de error claros;
• alternativa funcional al mapa;
• respeto a prefers-reduced-motion;
• iconos nunca como unico soporte semantico.

10. Animacion

Mantener solo animaciones con utilidad:

• aparicion suave de clusters;
• subida de bottom sheet;
• confirmacion de mensaje enviado;
• transicion corta al aplicar filtros.

No usar:

• parallax;
• counters de vanidad;
• animaciones largas de carga;
• efectos de marca que ralenticen la tarea.

11. Criterio de calidad UX

Una pantalla esta bien resuelta si:

1. el usuario entiende que hacer en menos de cinco segundos;
2. la accion principal es obvia;
3. no depende de datos falsos o insuficientes;
4. el sistema evita callejones sin salida;
5. la confianza aumenta antes del contacto.