Sergio Davila — Diseñador Visual Portafolio ·

Diseño
claro e
intencional.

Sergio Davila Web · Editorial · Movimiento
Enfoque

Diseño sistemas que hacen las ideas más claras y los productos más fáciles de confiar. Cada proyecto comienza con una pregunta: ¿qué necesita realmente la persona al otro lado de esta pantalla?

Disciplinas 3

Sistemas web, diseño editorial y movimiento — conectados por una preferencia hacia la estructura, la jerarquía y las cosas que funcionan.

Estándar

Pulido. Consistente. Intencional. El buen diseño es invisible cuando funciona e inolvidable cuando es correcto.

§ 01

Web

Sistemas orientados a conversión e interfaces de producto

Sistema de Landing

Estrategia · UI · Componentes
LandingUXSistema

Un sistema de layout orientado a conversión diseñado desde cero para claridad, velocidad y reutilización. Cada sección responde una pregunta: ¿hace esto que la siguiente acción sea obvia? La arquitectura es modular — cambia el contenido, conserva la estructura, entrega más rápido.

Construido para funcionar igual de bien como página de marketing, landing de producto o superficie de campaña. La cuadrícula tiene criterio. La jerarquía no es negociable. El resultado es un sitio que carga rápido, se lee con claridad y convierte sin disculpas.

Ver proyecto →
Hero del landing page
Layout de secciones
Detalles de componentes

Homepage · Secciones · Componentes

W — 02

Flujos Principales de Producto

UI Móvil · Estructura · Claridad
UIFlujosMóvil
Pantalla de entrada
Pantalla de resultado

Entrada · Finalización

Flujos de producto diseñados para claridad tranquila y acción decisiva — desde el momento en que el usuario entra hasta que completa lo que vino a hacer. Sin callejones sin salida. Sin fatiga de decisiones.

Cada pantalla fue probada contra un principio: ¿sabe la persona exactamente qué hacer a continuación? Si la respuesta era ambigua, el diseño regresaba. Lo que quedó guía sin empujar e informa sin abrumar.

Ver proyecto →
W — 03

Sistema Creativo de Ciclo de Vida

Email · Pagado · Iteración
EmailAnunciosRendimiento

Creatividad de rendimiento construida para velocidad, consistencia e iteración incesante. El sistema es modular por diseño — plantillas que se flexionan sin romperse, variantes que se lanzan sin comenzar de nuevo.

Módulos de email, variantes de anuncios pagados y marcos de pruebas A/B conviven dentro del mismo lenguaje visual. El resultado es un pipeline creativo que puede moverse tan rápido como el equipo que lo prueba, sin sacrificar la calidad que hace que el trabajo valga la pena.

Ver proyecto →
Módulo de email
Anuncios pagados
Marcos A/B

Email · Pagado · A/B

W — 04

Componentes de Diseño

UI Kit · Consistencia · Escala
UISistemaKit
Tablero de componentes

Vista general del sistema de componentes

Un sistema de componentes restringido construido para un propósito: hacer que la consistencia sea effortless. Cuando cada botón, tarjeta, input y estado sigue las mismas reglas, los diseñadores dejan de tomar micro-decisiones y empiezan a tomar las que importan.

Construido para escalar en múltiples superficies — web, móvil, marketing — sin fragmentación. El kit es la base; todo lo demás se construye encima.

Ver proyecto →
§ 02

Editorial

Layout de largo aliento, marcos de presentación y comunicación estructurada

E — 01

Sistema de Layout de Largo Aliento

InDesign · Cuadrícula · Tipografía
EditorialCuadrículaJerarquía

Spreads estructurados sobre cuadrículas modulares y jerarquía tipográfica disciplinada. Esto no es decoración — es arquitectura. Cada margen, cada ancho de columna, cada tamaño tipográfico gana su lugar facilitando el trabajo del lector.

Diseñado para lectura larga: el tipo de layout que te lleva a través de un texto sin resistencia, donde el diseño desaparece y solo queda el contenido. Construido en InDesign sobre una cuadrícula base que sostiene desde la portada hasta las páginas de detalle.

Una gran cuadrícula es invisible. Solo la notas cuando desaparece.
Ver proyecto →
Portada editorial
Spread editorial

Portada · Spread

E — 02

Marco de Presentación

Narrativa · Diapositivas · Estructura
DeckNarrativaPersuasión
Sistema de presentación
Marco de presentación 2

Sistemas de diapositivas

Sistemas de diapositivas diseñados para llevar un argumento desde la primera impresión hasta la convicción final. El deck no es un documento — es una actuación, y el diseño tiene que sostener la atención el tiempo suficiente para que la idea aterrice.

Construido sobre el flujo narrativo primero, el tratamiento visual segundo. Cada transición gana su lugar. Cada diapositiva de datos tiene un punto de vista. El marco escala a cualquier contenido sin perder el hilo estructural.

Ver proyecto →
E — 03

Comunicación en Una Página

Colateral · Jerarquía · Claridad
LayoutClaridad

Layouts condensados diseñados para escaneo rápido y comprensión decisiva. El one-pager es uno de los problemas de diseño más difíciles: todo lo que importa, nada de lo que no, en un formato que alguien podría leer en treinta segundos.

Hacerlo bien significa entender qué necesita saber el lector, en qué orden y qué tan rápido lo recorrerá. La jerarquía es la única herramienta. Bien usada, es más que suficiente.

Ver proyecto →
Layout de una página

Layout de una página

E — 04

Composición Editorial

Impresión · Tipografía · Fotografía
ImpresiónTipoFotografía
Composición editorial

Spread liderado por fotografía

Layouts liderados por fotografía con espacio negativo controlado y restricción tipográfica. La imagen es el argumento; el texto la apoya sin competir.

Diseñado para impresión, donde cada decisión es permanente. La pareja tipográfica fue elegida por contraste — una serif que carga peso frente a una geométrica que carga claridad. El resultado se lee como editorial antes de leerse como diseño.

Ver proyecto →
§ 03

Movimiento

Movimiento y edición diseñados para comprensión y ritmo

M — 01

Corto Educativo

Premiere · After Effects · Producción completa
GuiónEdiciónMovimiento

Propiedad total de producción desde el concepto hasta la entrega final. El brief era simple: hacer que algo complejo se sintiera accesible. La respuesta fue el ritmo — información revelada a la velocidad que una audiencia puede absorberla, no a la velocidad que puede decirse.

Guionado, grabado, editado y terminado internamente. Los gráficos en movimiento refuerzan los puntos clave sin decorarlos. La pieza final se mueve con intención desde el primer fotograma hasta el último.

La buena edición es el arte de saber qué eliminar.
M — 02

Estudio de Gráficos en Movimiento

Texto · Transiciones · Comprensión
MovimientoAfter Effects

Movimiento sutil construido para apoyar la comprensión en lugar de competir con ella. Cada animación tiene una razón — un momento que necesita énfasis, una transición que necesita peso, una jerarquía que necesita sentirse.

El movimiento que llama la atención sobre sí mismo ha fallado. El objetivo era movimiento que se siente pero no se nota conscientemente — el tipo que hace el contenido más claro sin hacer visible el trabajo.

M — 03

Edición de Video

Ritmo · Estructura · Cadencia
PremiereRitmo

Ritmo, cadencia y estructura — diseñados para la comprensión. La edición es donde la pieza vive o muere. No importa qué tan bueno sea el material si el corte no lleva a la audiencia a través de él.

Este proyecto exploró la relación entre el ritmo audiovisual: ¿cuándo cortas en el beat y cuándo en contra? ¿Cuándo sirve la edición al mensaje y cuándo se hace a un lado?

§ 04

Acerca

Diseño en web, apps y movimiento con una preferencia constante hacia la claridad y la estructura. El trabajo es tan bueno como el pensamiento detrás de él — y el pensamiento siempre comienza con la persona al otro lado de la pantalla.

BA (Hons), Media & Communication — University of the Arts London. Autodidacta en los espacios que importan: SwiftUI, movimiento, diseño de sistemas y la iteración incesante que separa lo bueno de lo terminado.

Me llamo Sergio Davila creativamente — nací como Jose Estello. Elegí llevar el nombre que mi abuela quería para mí. Ella es mi mayor inspiración y la razón por la que construyo cosas que valen la pena.

  • Sistemas web e interfaces de producto
  • Landing pages orientados a conversión
  • UI móvil y flujos de producto
  • Layout editorial y diseño impreso
  • Marcos de presentación
  • Gráficos en movimiento y edición de video
  • Identidad de marca y sistemas visuales