Sitio Web Arte Urbano

Diseño UX/UI y Desarrollo Web en WordPress para la Exploración del arte Urbano del Municipio de Santiago de Cali.

Dentro del UX se desarrollará un prototipo que permitirá visualizar y validar la arquitectura de la información, los flujos de interacción y el diseño visual final antes de la etapa de desarrollo.

Servicio:

Diseño UX/UI

Enfoque: investigación, arquitectura y validación de la experiencia.

  • Research exploratorio: análisis de benchmarking y tendencias para comprender el contexto del usuario final.

  • Definición de user personas y protopersonas: representación de arquetipos de usuarios que guiarán las decisiones de diseño.

  • Mapa de experiencia de usuario (user journey map): identificación de los puntos de dolor y oportunidades en el flujo de interacción.

  • Arquitectura de la información: estructuración lógica de secciones y jerarquía de contenidos (ej. landing, repositorio, dashboard).

  • User Flow: para validar el flujo navegable.

  • Wireframes de baja fidelidad: bocetos funcionales en blanco y negro para validar estructura sin distraer con estilo visual.

  • Testing y validación de usabilidad: iteración con usuarios para recoger feedback y optimizar antes de pasar al UI.

Enfoque: identidad visual aplicada a la experiencia.

  • Moodboard visual: exploración de referentes.

  • Guía básica de identidad viual (toolkit).

  • Definición de sistema de diseño: componentes reutilizables en Figma (botones, formularios, cards, menús).

  • Prototipo navegable en Figma: interacción realista de todas las pantallas.

Servicio:

Desarrollo Web

  • Hosting + Dominio + SSL – Válido por 1 año.
  • Licencia de maquetador premium – Válido por 1 año.
  • Código agregado en HTML5 y CSS3 (si se requiere).
  • 20 páginas dentro del Sitio Web (incluyendo las páginas de políticas de datos, 404 y términos y condiciones)
  • Estructura responsive.
  • Micro animaciones (hover, sliders, desplazamiento)
  • Formularios de contacto.
  • Botones de Redes Sociales y WhatsApp.
  • Ventanas Emergentes
  • Integración con mapa
  • Implementación básica de SEO.
  • Seguridad: Certificado SSL, antispam, backups.
  • Configuración de blog (opcional)
  • Video Tutorial de administración
  • Redacción de contenido
  • Asesoría legal (políticas, T&C, cookies) y su redacción
  • Renovaciones de Hosting, Dominio, SSL o Licencias Premium.
  • Producción de fotografía y vídeo.
  • Desarrollo en lenguajes avanzados de programación y desarrollo de plugins personalizados.
  • SEO avanzado (linkbuilding, analítica avanzada, contenidos SEO a escala).
  • Integraciones avanzadas como pasarelas de pagos, etc.

Fase 1

Research & Descubrimiento

  • Reunión de alineación: hablaremos sobre expectativas y datos relevantes para el inicio del proceso.

  • Benchmarking: análisis de referencias, buenas prácticas y competidores en plataformas similares.

  • Definición de usuarios: creación de user personas / protopersonas basadas en el público objetivo.

  • User Journey Mapping: identificación de puntos de dolor y oportunidades en el recorrido del usuario.

Entregables:

  • Insights de benchmarking
  • User personas
  • Mapa de experiencia preliminar

Fase 2

Arquitectura de la Información

  • Sitemap: definición de jerarquía de pantallas y navegación global.

  • User flows: diagramas de flujo que muestran cómo el usuario interactúa con el sistema (ej. registrar receta, explorar recetas).

  • Redacción de textos

Entregables:

  • Arquitectura de información
  • User flows validados
  • Textos finales

Fase 3

Wireframes de baja fidelidad

Creación de wireframes en blanco y negro para todas las pantallas principales.

Entregables:

Wireframes low-fi

Fase 4

UI Design System

  • Moodboard visual: selección de referentes alineados a la identidad visual.

  • Guía de estilos inicial: definición de tipografías, paleta de color, grid system y espaciados.

  • Componentes en Figma: botones, formularios, tarjetas, menús, iconografía.

Entregables:

Design System inicial en Figma (base visual para todas las pantallas).

Fase 5

Wireframes de alta fidelidad

  • Aplicación del diseño visual completo sobre los wireframes.
  • Diseño 10 pantallas principales en detalle.

Entregables:

JPG de pantallas en alta fidelidad.

Fase 6

Prototipo interactivo

Conexión de pantallas en Figma para simular navegación real.

Entregables:

Prototipo navegable en Figma listo para validación.

Fase 7

Validación & Ajustes

  • Pruebas de usabilidad.
  • Incorporación de feedback en hasta 2 rondas.

Entregables:

  • Versión final del prototipo.

Fase 8

Configuración WordPress

  • Instalación de WP en servidor
  • Instalación y activación de plugins en WP
  • Cambio de estructura en enlaces permanentes
  • Carga de medios
  • Configuración de ajustes de portada, título, descripción, favicon y CSS adicional
  • Activación de modo mantenimiento
  • Registro de UI Kit en WordPress
  • Desarrollo de componentes principales en Theme Builder (header, footer, etc.)

Fase 8

Desarrollo

  • Desarrollo completo del Sitio Web
  • Adaptación del sitio web para que sea compatible con dispositivos móviles.

Fase 8

Configuración final

  • Configuración de formularios, botones y links
  • Optimización básica de SEO

Fase 8

Validación final

  • Validación de funcionalidad de los componentes y formularios.
  • Validación de rendimiento
  • Validación de seguridad

Fase 8

Entrega final

Desactivación de modo mantenimiento

Entregables:

  • Documento de Research
  • Link del prototipo navegable en Figma.
  • Archivo de Figma con páginas y componentes.
  • Design System dentro del mismo archivo.
  • Documento con credenciales de inicio de sesión para WP y servidor.
  • Video tutorial sencillo del módulo administrador.

Fase 1 y 2:
2 semanas (10 días hábiles)
Fecha de entrega: 10 de noviembre


Fase 3:
1 semana (5 días hábiles)
Fecha de entrega: 18 de noviembre

Fase 4:
1 semana (5 días hábiles)
Fecha de entrega: 25 de noviembre

Fase 5 y 6:
2 semanas (10 días hábiles)
Fecha de entrega: 10 de diciembre

Fase 7: 
1 semana (5 días hábiles)
Fecha de entrega: 17 de diciembre

Fase 8: 
1 semana (5 días hábiles)
Fecha de entrega: 24 de diciembre

Fase 9:
2 semanas (1o días hábiles)
Fecha de entrega: 19 de enero

Fase 10 y 11:
1 semana (5 días hábiles)
Fecha de entrega: 26 de enero

Fase 12:
2 días hábiles 
Fecha de entrega: 28 de enero

Notas:

  • El cronograma no incluye los tiempos de revisión y ajustes de cada fase, por lo cual el tiempo total puede aumentar y las fechas pueden correrse.

  • Se agendará una reunión inicial para establecer el BRIEF y dar inicio al proyecto.

  • Se ofrece un período de soporte de 10 días calendario post-lanzamiento para corregir cualquier problema que pueda surgir. A partir de ahí, los servicios de mantenimiento y soporte (recomendados para garantizar el correcto funcionamiento del sitio web) no estarán incluidos.