Modulo makers3d desarrollado con codex V 0.0.1

2026-07-29 23:58:58 +02:00
commit 2bedf7cbb7
171 changed files with 29421 additions and 0 deletions
@@ -0,0 +1,428 @@
+# 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
+
+```text
+[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
+
+```text
+[Portada]
+[Avatar] Nombre del maker
+Localidad - Disponibilidad
+[Contactar]
+
+Servicios
+[chips]
+
+Trabajos
+[galeria vertical]
+
+Resenas verificadas
+[bloques]
+
+Informacion
+```
+
+### Contacto guiado movil
+
+```text
+Paso 2 de 5
+Que necesitas imprimir o fabricar?
+[campo]
+
+Tienes archivo?
+( ) Si
+( ) No
+
+[Adjuntar imagen o PDF]
+[Continuar]
+```
+
+### Area maker movil
+
+```text
+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.