Volver a proyectos

Caso de estudio / Centro de Entrenamiento Tecnológico

CET

Diseño de una experiencia web para presentar servicios técnicos, programas de formación y actividades en un mismo lugar.

Servicio
Diseño de productos y experiencias digitales
Especialidad
Diseño web · UX / UI
Diseño
Jesus Tabaco

Contexto y alcance

Ordenar la oferta para facilitar la consulta.

CET reúne formación tecnológica y servicios especializados. El trabajo de diseño web, UX y UI se centró en dar una estructura común a esa oferta y establecer una lectura clara para quienes buscan capacitación o asistencia técnica.

La propuesta diferencia servicios, programas y contenidos institucionales. Cada recorrido presenta la información de manera progresiva y mantiene visibles las vías de consulta.

CET: Vista principal del sitio web
Vista principal del sitio web

Planificación y arquitectura

Una estructura antes de la interfaz.

La planificación contempla instancias de análisis, revisión, wireframes y prototipado. El mapa del sitio separa Nosotros, Servicios, Programas, Blog y Contacto; dentro de Servicios distingue Seguridad y Redes, y en Programas organiza las alternativas de formación.

Mi aporte se concentra en el diseño web y la experiencia de usuario. La documentación permite relacionar las decisiones de estructura y de interfaz con las etapas posteriores del proyecto.

CET: Planificación del proyecto
Planificación del proyecto
CET: Arquitectura de la información
Arquitectura de la información

Wireframes

Definir qué necesita ver la persona en cada pantalla.

Los wireframes establecen la jerarquía de la página de inicio y de la ficha de un curso. En el inicio, las actividades ocupan un lugar destacado; en la interna, el contenido principal se acompaña de un bloque con docente, horarios y datos de inscripción.

Este esquema ayuda a distribuir la información antes de trabajar el acabado visual. Las tarjetas y los bloques de apoyo se repiten para que el recorrido conserve una lógica reconocible.

CET: Wireframes de inicio y ficha de curso
Wireframes de inicio y ficha de curso

Sistema visual

Contraste, ritmo y una identidad consistente.

El azul profundo aporta continuidad a la navegación y a los fondos. El rojo destaca acciones y datos relevantes, mientras que los tonos claros separan las áreas de contenido sin recargar la composición.

Roboto, en pesos Light, Regular y Bold, permite ordenar títulos, descripciones y datos técnicos. El espacio entre bloques y una grilla modular dan aire a una oferta con distintos niveles de información.

CET: Roboto y paleta de color
Roboto y paleta de color
CET: Ficha de curso en formato amplio
Ficha de curso en formato amplio

Diseño adaptable

El mismo criterio en escritorio, tablet y móvil.

Las grillas de servicios y actividades se reorganizan según el formato. Las fichas mantienen una relación clara entre imagen, descripción y acción; en móvil, el contenido se presenta en una secuencia vertical.

Las vistas institucionales y de cursos comparten colores, tarjetas y jerarquías. Así, la consulta puede continuar de una sección a otra sin perder la referencia visual de CET.

CET: Grillas de servicios y actividades en tablet
Grillas de servicios y actividades en tablet
CET: Contenido institucional en móvil
Contenido institucional en móvil
CET: Servicios y cursos en móvil
Servicios y cursos en móvil

Contacto

Conversemos sobre tu próximo proyecto.

Podemos revisar el contexto, los contenidos y el alcance de diseño que necesita tu organización.

Hablemos por WhatsApp