fanfuso/ide_maqueta_c
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
ide_maqueta_c/README.md
T
fanfuso 1ce415fc13 first commit
2026-08-28 15:33:26 -03:00

9.5 KiB
Raw Permalink Blame History

📄 ARQ & UX – IDE CONSULTORES

1. Mapa del Sitio (Sitemap Definitivo)

La estructura está diseñada para guiar al usuario según su "nivel de conciencia" sobre su propio problema, sin obligarlo a entender la estructura interna de IDE primero.

  1. Home (Resumen sistémico y doble vía de entrada)
  2. Somos IDE (Identidad, propósito, equipo y metodología)
  3. Desafíos (Para el que tiene el problema, pero no sabe qué solución necesita)
  4. Soluciones (Para el que sabe exactamente qué busca: ISO, PMO, IA, etc.)
  5. Ecosistema (La explicación del "cómo": Excellence, Project, Academy, Digital)
  6. IDE Academy (Página de aterrizaje simplificada: propuesta de valor y 2-3 cursos destacados)
  7. Insights (Feed dinámico de las 3 últimas entradas del blog de WordPress + enlace al blog completo)
  8. Contacto (Formulario inteligente + WhatsApp + Datos)
  9. Trabaja con nosotros (Página independiente en el footer para captación de talento)

2. Esquemática de la HOME (Wireframe Lógico por Bloques)

Regla de oro: La Home resume, las secciones desarrollan. No repetir la historia completa en cada página.

  • Bloque 1: Hero (La Doble Entrada)

    • Eyebrow (Texto pequeño superior): TODO ESTÁ CONECTADO.
    • H1 (Título principal): Mejorar una parte no siempre mejora el todo.
    • Bajada: En una organización, cada decisión genera efectos más allá del lugar donde interviene. Antes de buscar una solución, hay que comprender el sistema.
    • Mecanismo de Doble Entrada (Dos tarjetas o botones prominentes):
      • [ Tengo un desafío, pero no sé exactamente qué necesito ] → Lleva a la página Desafíos.
      • [ Busco una solución concreta (ISO, Proyectos, IA) ] → Lleva a la página Soluciones.

  • Bloque 2: La Tensión (El Quiebre)

    • Copy: "Las organizaciones ya tienen procesos, herramientas y personas. Sin embargo, algunos desafíos persisten. Soluciones aisladas para problemas que nunca estuvieron realmente aislados."
    • Visual: Gráfico minimalista y elegante (geometría o nodos) que contraste "partes aisladas" vs. "sistema conectado". Cero estética de "cerebros digitales" o "circuitos".

  • Bloque 3: El Principio IDE (La Nueva Forma de Mirar)

    • H2: Comprender el todo para saber dónde intervenir.
    • Metodología (Visual en 4 pasos): 01. Comprender → 02. Focalizar → 03. Integrar → 04. Transformar.

  • Bloque 4: El Ecosistema (Demostración de Capacidad)

    • H2: No se trata de sumar soluciones. Se trata de conectar capacidades.
    • Grid de 4 tarjetas interactivas: Excellence | Project | Academy | Digital. (Al hacer hover o clic, se expande brevemente qué resuelve cada una y un link a la página de Ecosistema).

  • Bloque 5: Prueba de Autoridad / Sectores

    • Copy: "Acompañamos la transformación en contextos complejos."
    • Visual: Logos de clientes o iconografía limpia de sectores (Agro, Salud, Educación, Industria).

  • Bloque 6: CTA Final de Conversión

    • H2: ¿Qué desafío querés transformar?
    • Bajada: Empecemos por entenderlo.
    • Botón Principal: [ HABLEMOS ] (Lleva a Contacto).

3. Esquemática de Subpáginas Clave

A. Página: Desafíos

  • Propósito: Atender al usuario que dice "Algo no funciona, pero no sé qué necesito".
  • Estructura:
    • Header con pregunta empática: "¿Qué está pasando en tu organización?"
    • Listado de tarjetas de desafíos (ej: "Transformar la organización", "Mejorar la gestión", "Incorporar tecnología e IA").
    • Dinámica: Al hacer clic en un desafío, no se recarga la página, se abre un Modal o Acordeón que muestra: Contexto → Preguntas clave → Posibles caminos de intervención → CTA: "Hablemos de este desafío".

B. Página: Soluciones

  • Propósito: Atender al usuario que dice "Necesito ISO 9001" o "Necesito una PMO".
  • Regla UX: La respuesta concreta debe estar a un clic. Sin filosofía previa.
  • Estructura:
    • Buscador o filtro rápido por tipo de solución.
    • Listado claro (ej: ISO 9001, ISO 14001, Gestión de Proyectos, IA).
    • Dinámica: Al entrar a una solución específica (ej: ISO 9001), la página responde: 1. Qué es, 2. Para quién, 3. Qué problema aborda, 4. Cómo intervenimos.
    • Venta cruzada sutil al final: "¿Sabías que un sistema de gestión requiere también desarrollar capacidades en tu equipo? Conocé cómo IDE Academy puede complementar esta implementación".

C. Página: Ecosistema

  • Propósito: Explicar el "por qué" y el "cómo" de IDE.
  • Estructura: Explicación profunda de las 4 capacidades (Excellence, Project, Academy, Digital). Gráfico visual que muestre cómo se relacionan entre sí (ej: un diagrama de Venn o red de nodos). Énfasis en: "No todos los desafíos necesitan todo el Ecosistema, pero todos se benefician de una mirada que comprende el conjunto".

D. Página: IDE Academy (Alcance MVP)

  • Propósito: Mencionar la academia y captar interés para formación In Company o futuros cursos, sin complejidad de LMS.
  • Estructura:
    • Header: "Desarrollamos las capacidades que hacen posible la transformación".
    • Breve descripción de la propuesta de valor de la formación en IDE.
    • Sección "Próximos Cursos / Destacados": 2 o 3 tarjetas de cursos (con datos de relleno o planificados: Título, Modalidad, Duración).
    • Dinámica: Al hacer clic en un curso, se abre un Modal con la ficha técnica (Propuesta, Temario, Docente) y un CTA que dice: "Consultar por próximas fechas o formación In Company" (que lleva al formulario de contacto).

E. Página: Insights

  • Propósito: Demostrar conocimiento y generar tráfico.
  • Dinámica: La página mostrará automáticamente (vía API de WordPress) las 3 últimas entradas del blog en formato de tarjetas (Imagen, Título, Extracto, Fecha).
  • CTA: Un botón claro al final: [ Ver todos los artículos en nuestro Blog ] que deriva al subdominio blog.ideconsultores.com.ar.

F. Página: Contacto

  • Propósito: Convertir el interés en una conversación comercial con baja fricción.
  • Estructura:
    • Mensaje de apertura: "¿Qué desafío querés transformar? Empecemos por entenderlo."
    • Formulario Inteligente:
      1. Nombre
      2. Organización
      3. Rol
      4. Email
      5. Teléfono (Opcional)
      6. Dropdown "Estoy buscando": (Orientación para un desafío / Una solución concreta / Implementar o certificar una norma / Formación para mi organización / Gestionar un proyecto / Transformación digital e IA / Otro).
      7. Campo de texto: "Contanos brevemente en qué podemos ayudarte".
      8. Botón de envío: [ HABLEMOS ]
    • Configuración técnica: El script de envío debe estar configurado para dirigir los datos a info@ideconsultores.com.ar.
    • CTA Secundario: "¿Preferís escribirnos directamente?" → Botón de WhatsApp.

G. Página: Trabaja con nosotros

  • Ubicación: Enlace exclusivo en el Footer (pie de página) para no distraer a los clientes potenciales.
  • Estructura: Breve texto sobre la cultura de IDE y un formulario simplificado (Nombre, Email, LinkedIn/CV, Área de interés) que también envía a info@ideconsultores.com.ar (o a un alias interno que ellos definan, ej: talento@...).

4. Dinámica del Sitio y Reglas de UX (Sin Código)

  1. **
    Navegación Mobile First:** En dispositivos móviles, el menú se convierte en un "menú hamburguesa" limpio. Los filtros de la página de Soluciones o las tarjetas de Academy deben ser fácilmente scrolleables horizontalmente o apilados verticalmente con botones grandes (fáciles de tocar con el pulgar).
  2. Uso de Modales (Pop-ups): Se utilizarán modales para las fichas de cursos de Academy y para el detalle de los "Desafíos". Esto mantiene al usuario en la misma página, reduciendo la tasa de rebote y acelerando la navegación sin recargar el entorno.
  3. Transiciones y Animaciones Funcionales: Solo se usarán animaciones con propósito. Por ejemplo, un fade-in suave al hacer scroll para que los bloques de texto aparezcan con elegancia, o el despliegue fluido de un acordeón. Nada de animaciones que distraigan, mareen o ralenticen la carga.
  4. Accesibilidad (A11Y) como estándar:
    • Contraste alto y validado (WCAG) entre textos y fondos en ambos modos de tema.
    • Tamaños de fuente base de al menos 16px para cuerpos de texto.
    • Etiquetas (labels) claras y visibles en todos los campos de formularios.
    • Textos alternativos (alt) descriptivos en todas las imágenes.
    • Navegación completamente operable mediante teclado.
  5. Selector de Tema (Modo Claro / Modo Oscuro):
    • Funcionalidad: Un switch discreto pero accesible (ej. ícono de sol/luna) en el header o footer del sitio.
    • Estado por defecto: Modo Claro.
    • Regla de Diseño: El modo oscuro no debe parecer una estética "tech", "hacker" o "cyberpunk" (prohibido usar negros puros #000000 o acentos neón). Debe ser un gris oscuro elegante y mate (ej. #1A1A1A o #2D2D2D) que mantenga la seriedad profesional de la consultora, con textos en blanco o gris muy claro para garantizar una lectura cómoda y reducir la fatiga visual nocturna. La transición entre modos debe ser suave (transición CSS de 0.3s).
  6. Integración del Blog (Insights): El desarrollador configurará un endpoint en el WordPress del subdominio para que la página principal de IDE extraiga solo el título, extracto, imagen destacada y enlace de las 3 últimas publicaciones, garantizando que el sitio principal cargue rápido y no se vea afectado por la carga del blog.
Reference in New Issue View Git Blame Copy Permalink