18 KiB
Wireframe conceptual — Amor y Roma
- Principio rector de la experiencia
La web debería combinar tres capas:
AMOR
Dirección de arte · creatividad · estética · emoción
ROMA
Estrategia · estructura · tecnología · conversión
EXPERIENCIA
Una navegación visualmente atractiva, pero diseñada para llevar al usuario hacia una decisión.
La frase que puede funcionar como concepto transversal es:
De la esencia a la estructura.
Esto conecta directamente la filosofía de marca con el método de trabajo.
-
HOME
1.1 — Hero
Objetivo
Explicar en pocos segundos qué hace Amor y Roma y generar una primera impresión diferencial.
Composición
Zona izquierda / central
Creatividad, estrategia y tecnología para construir marcas que importan.
Debajo:
Breve descripción de la agencia como agencia boutique de marketing digital.
CTA principal
Empecemos →
Destino:
/servicios
Elemento visual
Acá propondría convertir la dualidad Amor/Roma en el primer elemento visual distintivo.
Un campo de humo/partículas orgánicas que reaccione al movimiento del cursor.
El humo:
-
se desplaza con el cursor;
-
genera pequeñas turbulencias;
-
pasa por detrás del contenido textual;
-
no interfiere con la legibilidad;
-
puede reaccionar con mayor intensidad cerca del puntero;
-
debe sentirse sofisticado, no como un efecto "tech" genérico.
Esto puede convertirse en uno de los elementos visuales distintivos de la marca.
-
AMOR + ROMA
2.1 — Dualidad
Presentación
AMOR ROMA
Pasión Construcción
Arte Estrategia
Creatividad Arquitectura
Identidad Tecnología
Dirección de arte Procesos
Visualmente, los dos mundos deberían coexistir.
La transición entre ambos puede utilizar el mismo lenguaje orgánico del humo del Hero.
Mensaje central
Creamos marcas con esencia y las construimos con estrategia.
Este concepto está perfectamente alineado con la filosofía definida internamente.
-
PROBLEMAS QUE RESOLVEMOS
Como decidiste un tono más institucional, evitaría el clásico:
"¿Tenés este problema?"
La sección debería presentarse como:
Desafíos que ayudamos a resolver
Tres grandes bloques.
01 — Identidad
Marcas que necesitan definir, ordenar o evolucionar su identidad para reflejar realmente el valor de su negocio.
02 — Presencia
Negocios que necesitan transformar su presencia digital en una experiencia coherente, profesional y estratégica.
03 — Crecimiento
Empresas que necesitan generar oportunidades, automatizar procesos y convertir mejor su presencia digital.
CTA de cada bloque
Encontrar mi solución
→ Diagnóstico
Así evitamos que el usuario tenga que decidir qué servicio comprar.
-
SERVICIOS DESTACADOS
4.1 — Introducción
Un ecosistema de soluciones. Una estrategia construida alrededor de tu negocio.
Luego aparecen cinco tarjetas.
4.2 — Tarjetas
BRANDING
Identidad · Estrategia · Logo · Sistema visual · Manual
REDES SOCIALES
Estrategia · Contenido · Copywriting · Dirección de arte · Comunidad
DESARROLLO WEB
Arquitectura · UX · Desarrollo · SEO · Analítica
AUTOMATIZACIONES
Conversación · Captación · Cualificación · Seguimiento
PAID MEDIA
Campañas · Creatividades · Audiencias · Optimización
Los contenidos de estas tarjetas se desprenden del portafolio de servicios definido en el documento.
4.3 — Interacción
Cada tarjeta puede tener:
Estado normal
-
imagen/visual;
-
nombre;
-
descripción breve.
Hover
-
desplazamiento;
-
aparición de información adicional;
-
cambio de composición;
-
CTA.
Click
→ abre el bloque correspondiente de /servicios y dispara el contexto correspondiente del diagnóstico.
-
PLANES
5.1 — Introducción
Distintos negocios. Distintas etapas. Un mismo objetivo: crecer.
5.2 — Cards interactivas
┌───────────┐ ┌───────────┐ ┌────────────┐ ┌───────────┐
│ ESENCIAL │ │ IMPULSO │ │ PREMIUM │ │ ÉLITE │
│ │ │ │ │ ★ │ │ │
│ Desde... │ │ Desde... │ │ Desde... │ │ Desde... │
└───────────┘ └───────────┘ └────────────┘ └───────────┘
Premium tendría un destaque leve, no agresivo.
5.3 — Expansión
Al hacer click en una tarjeta:
Se despliega mostrando:
-
perfil;
-
objetivo;
-
contenido mensual;
-
copywriting;
-
automatizaciones;
-
Paid Media;
-
gestión/moderación;
-
reportes;
-
precio desde;
-
CTA.
Los cuatro niveles y sus prestaciones están definidos en el documento interno.
CTA
Quiero este plan
→ contacto con el plan seleccionado.
CTA secundario
No sé cuál elegir
→ Diagnóstico.
-
PORTFOLIO
6.1 — Introducción
Proyectos que combinan identidad, estrategia y estructura.
No sería simplemente una galería.
6.2 — Filtros
Todos
Branding
Redes
Web
Automatización
Paid Media
Integral
6.3 — Casos
Inicialmente utilizaríamos los arquetipos del documento:
Identidad Integral
Branding + personaje + RRSS.
Infraestructura Institucional
Web corporativa + credibilidad B2B.
Ecosistema Digital
Branding + Web + RRSS.
Profesionalización
Web + RRSS.
Esto permite mostrar capacidad sin depender todavía de métricas comerciales.
6.4 — Interacción
Al hacer click:
Modal / Case Preview
Mostrar:
-
imagen;
-
nombre;
-
contexto;
-
problema;
-
solución;
-
servicios involucrados.
CTA:
Ver proyecto
→ eventualmente página individual del caso.
-
MÉTODO
7.1 — Hero
De la esencia a la estructura.
Subtexto:
Cada proyecto comienza entendiendo el negocio y termina midiendo lo que construimos.
7.2 — Timeline horizontal
01 02 03 04 05
DIAGNÓSTICO → ESTRATEGIA → PRODUCCIÓN → VALIDACIÓN → MEDICIÓN
La estructura corresponde a las cinco fases operativas del manual.
7.3 — Descripción breve
01 — Diagnóstico
Briefing
Hablamos de tu proyecto, contexto y objetivos.
02 — Estrategia
Arquitectura
Definimos pilares, estructura y dirección.
03 — Producción
Creación
Convertimos la estrategia en piezas, contenidos y experiencias.
04 — Validación
Control
Revisamos, presentamos y ajustamos.
05 — Medición
Evolución
Analizamos resultados y definimos próximos pasos.
7.4 — Aplicación por servicio
Selector:
Branding | Web | Redes | Automatización | Paid Media
Al seleccionar uno, la representación del método cambia para explicar brevemente cómo se aplica en ese servicio.
7.5 — Confianza
Bloque breve con:
-
proceso estructurado;
-
validaciones;
-
participación del cliente;
-
control de calidad;
-
personalización.
No convertirlo en una sección extensa.
-
CTA FINAL
8.1 — Cierre
Visualmente integrado al sitio, pero claramente destacado.
Mensaje
¿Hablamos de tu proyecto?
Subtexto:
Contanos qué estás construyendo y descubramos juntos cuál es el próximo paso.
CTA
Empezar diagnóstico
→ /diagnostico
El diagnóstico será el principal mecanismo de conversión asistida.
-
SERVICIOS
Esta página será mucho más profunda que el resumen de Home. Hero
Soluciones digitales diseñadas alrededor de tu negocio.
9.1 — Selector inicial
¿Qué querés conseguir?
Construir mi marca
↓
Branding
Mejorar mi presencia
↓
Redes
Crear una experiencia digital
↓
Web
Automatizar oportunidades
↓
Automatización
Generar demanda
↓
Paid Media
El usuario puede elegir una opción o ir al diagnóstico.
-
Bloques de cada servicio
Cada servicio seguirá exactamente la estructura que definiste:
PROBLEMA
Qué situación aborda.
SOLUCIÓN
Qué hace Amor y Roma.
QUÉ INCLUYE
Entregables y alcance.
CÓMO TRABAJAMOS
Aplicación del Método A&R.
CTA
Acción correspondiente.
Branding
Problema
Una marca sin identidad clara o cuya identidad ya no representa su negocio.
Solución
Construcción o evolución integral de la identidad.
Incluye
-
estrategia;
-
propuesta de valor;
-
identidad;
-
logotipo;
-
sistema visual;
-
tipografía;
-
personajes;
-
manual;
-
plantillas.
CTA
Quiero construir mi marca
Redes Sociales
Problema
Presencia digital sin estrategia, coherencia o continuidad.
Solución
Sistema de contenido y gestión adaptado al nivel de madurez del negocio.
Incluye
-
estrategia;
-
contenido;
-
copywriting;
-
dirección de arte;
-
Reels;
-
historias;
-
moderación;
-
reportes;
-
automatización;
-
Ads según plan.
CTA
Ver planes
Desarrollo Web
Problema
Una presencia digital que no representa al negocio o no acompaña el proceso comercial.
Solución
Desarrollo web a medida orientado a experiencia y conversión.
Incluye
-
Landing Pages;
-
sitios corporativos;
-
catálogos;
-
e-commerce;
-
Mobile First;
-
SEO;
-
analítica;
-
integraciones.
El manual plantea explícitamente estas modalidades y estándares técnicos.
CTA
Quiero una web
Automatizaciones
Problema
Oportunidades perdidas por procesos manuales o falta de seguimiento.
Solución
Automatización de conversaciones y cualificación.
Incluye
-
respuestas;
-
captación;
-
cualificación;
-
notificaciones;
-
derivación comercial.
CTA
Quiero automatizar
Paid Media
Problema
Necesidad de amplificar campañas y generar oportunidades.
Solución
Estrategia, configuración, creatividad y optimización.
Incluye
-
auditoría;
-
públicos;
-
conversiones;
-
creatividades;
-
testing;
-
optimización.
CTA
Quiero generar oportunidades
-
SOLUCIONES INTEGRALES
Esta sección debería sentirse diferente.
Título
Las marcas no crecen por piezas aisladas.
Subtexto:
A veces la solución está en conectar varias disciplinas.
Mostrar composiciones: BRANDING + REDES BRANDING + WEB + REDES
WEB
+
AUTOMATIZACIÓN
+
PAID MEDIA
ECOSISTEMA DIGITAL
Esto conecta directamente con los casos híbridos identificados en el manual.
CTA
Encontrar mi combinación
→ Diagnóstico.
-
DIAGNÓSTICO
Este será un microproducto digital dentro del sitio.
Máximo 5 preguntas. Pregunta 1
¿Qué necesitás resolver?
-
Marca
-
Presencia digital
-
Contenido
-
Web
-
Captación
-
Automatización
-
Varias cosas
Pregunta 2
¿En qué etapa está tu negocio?
-
Comenzando
-
Validando
-
Creciendo
-
Consolidado
Pregunta 3
¿Cuál es hoy tu principal desafío?
Las opciones pueden cambiar dependiendo de la respuesta anterior.
Pregunta 4
¿Qué querés conseguir?
Objetivo principal.
Pregunta 5
¿Qué tan desarrollada está actualmente tu presencia digital?
Esto permite contextualizar la recomendación.
-
Resultado del diagnóstico
No será un informe extenso.
Será una tarjeta:
Nuestra recomendación
Por las características de tu negocio, creemos que actualmente deberías priorizar [solución].
Situación actual: breve descripción.
Próximo paso recomendado: [servicio/plan].
Luego:
Hablemos de tu proyecto
→ Contacto
Y una alternativa:
Volver a revisar
-
PLANES + DIAGNÓSTICO
Hay una integración particularmente interesante.
Si el usuario llega al diagnóstico desde:
Premium → Diagnóstico
el sistema ya sabe que estaba considerando Premium.
Si llega desde:
Redes → Diagnóstico
el sistema sabe que su interés inicial eran redes.
Por lo tanto, el diagnóstico puede utilizar ese contexto sin volver a preguntárselo.
Esto permite que el diagnóstico sea corto y mantenga el límite de cinco preguntas.
-
NOSOTROS
Hero
Amor y Roma. Dos fuerzas. Una forma de construir.
15.1 — Amor
Visualmente más orgánico.
Pasión
Arte
Creatividad
Identidad
Empatía
15.2 — Roma
Visualmente más estructurado.
Estrategia
Arquitectura
Procesos
Tecnología
Estructura
15.3 — Unión
Las dos partes convergen:
La creatividad da esencia. La estrategia construye el camino.
15.4 — Boutique
Tres pilares:
Sin plantillas prefabricadas
Cada proyecto se construye a medida.
Capacidad controlada
Priorizamos profundidad sobre volumen.
Foco visual y de contenido
La calidad creativa es parte central del diferencial.
Estos tres principios están establecidos en el posicionamiento interno.
15.5 — Personas
Como elegiste mostrar al equipo de forma secundaria:
-
fotografía;
-
nombre;
-
rol;
-
breve descripción.
Sin convertir Nosotros en una página de currículums.
-
CONTACTO
Hero
¿Hablamos de tu proyecto?
Formulario
Motivo de contacto
Dropdown:
-
Quiero conocer los servicios
-
Quiero una valoración / diagnóstico
-
Quiero solicitar presupuesto
-
Quiero contratar un plan
-
Quiero consultar por desarrollo web
-
Otro
Luego:
-
Nombre
-
Empresa
-
Email
-
WhatsApp
-
Mensaje
Bloque alternativo:
¿Preferís hablar directamente?
Escribir por WhatsApp
Redes
También podés encontrarnos en:
Instagram
Facebook
LinkedIn
Confirmación
Después del envío:
Recibimos tu mensaje.
Gracias por contactarte con Amor y Roma. En breve nos pondremos en contacto para continuar la conversación.
-
FOOTER GLOBAL
El footer será pequeño pero con personalidad.
Primera zona
AMOR Y ROMA
Marcas con esencia, construidas con estrategia.
Navegación
Servicios
Planes
Portfolio
Nosotros
Método
Diagnóstico
Contacto
Servicios
Branding
Redes
Web
Automatizaciones
Paid Media
CTA
¿Tenés una idea? Hagámosla realidad.
Empezar diagnóstico
Redes
Instagram · Facebook · LinkedIn
Legal
Privacidad · Términos · Cookies
-
ELEMENTO GLOBAL — WHATSAPP
Botón flotante permanente.
No debería competir con el CTA principal.
Jerarquía:
CTA de página → Diagnóstico
CTA flotante → WhatsApp
Así mantenemos la estrategia que definiste: WhatsApp es un canal comercial importante, pero no el único camino de conversión.
-
Arquitectura de conversión
Finalmente, el sitio tendría tres niveles de CTA:
Nivel 1 — Descubrimiento
Empecemos
→ Servicios
Nivel 2 — Orientación
Encontrá tu solución
→ Diagnóstico
Nivel 3 — Conversión
Hablemos de tu proyecto
→ Contacto / WhatsApp
Esto evita que cada sección termine con el mismo botón y permite que el CTA tenga relación con la etapa del usuario.
-
Experiencia global
El recorrido ideal sería: HOME │ ┌───────────┼───────────┐ ↓ ↓ ↓ SERVICIOS PORTFOLIO NOSOTROS │ │ │ ↓ ↓ ↓ SOLUCIONES CASOS FILOSOFÍA │ │ │ └──────────┼────────────┘ ↓ MÉTODO │ ↓ CONFIANZA │ ┌───────┴───────┐ ↓ ↓ PLANES DIAGNÓSTICO │ │ └───────┬───────┘ ↓ CONTACTO │ ┌─────┴─────┐ ↓ ↓ FORMULARIO WHATSAPP
Conceptualmente:
AMOR atrae.
ROMA estructura.
SERVICIOS explican.
PORTFOLIO demuestra.
MÉTODO genera confianza.
DIAGNÓSTICO orienta.
CONTACTO convierte.
Y esa debería ser la lógica completa de la experiencia.