Branding, ilustración y animación para apps y webs

Logotipos e identidad de marca, ilustración, iconos y animación de interfaz, en archivos SVG, Lottie y Rive.

Servicios de branding, ilustración y animación

Cuatro servicios, del logotipo al icono que se mueve al tocarlo. Elige uno, o los cuatro.

  1. Área de respeto
    fernway
    • #0F3B2D
    • #45D6A0
    • #F4EAD3
    • #FF8A5B
    AaFraunces
    01 / 04

    Diseño de logotipo e identidad de marca

    Un símbolo, un logotipo y el color y la tipografía que los acompañan, pensados juntos para que la marca aguante del icono de la app a la web.

    • Logotipo, símbolo e icono de app
    • Paleta de color y tipografía
    • Manual de marca para cada uso
    • La marca aplicada a tu app y tu web
    • #FBF4E4
    • #FFD27A
    • #A9D8C2
    • #3AA97E
    • #1A5E45
    • #FF8A5B
    02 / 04

    Ilustración a medida

    Ilustraciones dibujadas para tu producto en un solo estilo: el hero de la landing, las pantallas de bienvenida y los estados vacíos entre medias.

    • Ilustraciones de hero y de landing
    • Escenas de bienvenida y estados vacíos
    • Ilustraciones puntuales e infografías
    • Un solo estilo, guardado en una librería
  2. Ease out400 mscubic-bezier(0.22,1,0.36,1)
    03 / 04

    Animación de interfaz y motion design

    Movimiento que explica y responde: microinteracciones, cargas, bienvenidas y logotipos animados, hechos como archivos que tu app reproduce.

    • Microinteracciones y cargas
    • Bienvenidas y recorridos de producto
    • Logotipos animados y motion de marca
    • Lottie, Rive, SVG o CSS
  3. Retícula 24 px
    • 16
    • 20
    • 24
    • 32
    04 / 04

    Diseño de iconos a medida

    Sets de iconos dibujados sobre una misma retícula, con un mismo trazo y un mismo radio, para que todos se lean como una familia.

    • Iconos de interfaz en retícula de 24 px
    • Estilos de línea y relleno
    • Iconos de app para iOS y Android
    • SVG, fuente de iconos y componentes de Figma

Logotipos, ilustraciones y animaciones que hemos diseñado

Cada pieza la ha diseñado y animado nuestro estudio. Las animaciones son los propios archivos Lottie y SVG, reproduciéndose como lo harían en tu app.

  • fernway
    Identidad de una app de viajesIdentidad de marca · SVG
  • kovapay
    •••• 4821
    Marca de pagos en tarjeta y appDiseño de logotipo · SVG
  • arcwise
    Logotipo animado de un asistente de IAAnimación de logotipo · Lottie · 3,0 kB
    Iconos de una app de viajesDiseño de iconos · SVG
  • Ilustración de bienvenidaIlustración · SVG
  • El viaje de un paquete, del almacén a la puertaAnimación explicativa · SVG animado
  • 02Logotipo

    Área de respeto
    Tamaño mínimo322416
    studia

    studia04

    03Color

    • Medianoche#10205E
    • Azul tinta#2350FF
    • Lámpara#FFCB45
    • Cielo#5B86FF

    04Tipografía

    AaManropeTitulares

    AaFrauncesTexto

    studia05

    Manual de marca de una plataforma educativaManual de marca · SVG
  • Interruptor, check y me gustaMicrointeracciones · Lottie · 2,9 / 1,9 / 6,4 kB
  • Pagar con el móvilAnimación de producto · SVG animado
  • Ilustración para una landing de saludIlustración · SVG
    • Fernway
    • Kovapay
    • Mirel
    • Stackline
    • Studia
    • Arcwise
    Seis iconos de appDiseño de iconos de app · SVG
  • Sonar, latir, buscar, despegarAnimación de iconos · Lottie · 8,5 kB
    Seis símbolos de marcaDiseño de logotipo · SVG
  • kovapay

    Pagando

    €24,90

    Pago en cursoAnimación de carga · Lottie · 3,2 kB

Nuestro proceso de branding y animación

Cinco pasos del brief a los archivos en tu producto. Ves el trabajo en cada paso y eliges antes de seguir.

  1. 01Alcance

    Tu público, tu competencia y tu marca actual estudiados, y el posicionamiento decidido.

  2. 02Dirección

    Dos o tres caminos en moodboards, bocetos y style frames, y tú eliges uno.

  3. 03Diseño

    El logotipo, la tipografía, el color, las ilustraciones y los iconos dibujados como un solo sistema.

  4. 04Animación

    El logotipo, las transiciones y los momentos del producto animados con las mismas reglas.

  5. 05Entrega

    La guía de marca, la librería de Figma y los archivos SVG, Lottie y vídeo, listos para el desarrollo.

Por qué SafeBlockLab para branding y animación

Un estudio que diseña tu marca, tus ilustraciones y tus animaciones, y las integra en tu producto.

  • Dibujado a mano, no generado.

    La IA nos ayuda a explorar al principio; cada símbolo, ilustración e icono final se dibuja en vector, limpio a cualquier tamaño y tuyo.

  • Diseñado por el equipo que lo desarrolla.

    Quien dibuja tu animación trabaja junto a quien la publica, así que lo que apruebas es lo que funciona en tu app.

  • Ligero para el producto.

    Las animaciones pesan unos pocos kilobytes y se prueban en el navegador antes de entregarse, para que el movimiento nunca frene una pantalla.

  • Movimiento que respeta a quien lo usa.

    Cada animación tiene una versión fija para quien desactiva el movimiento, y cada color se revisa por contraste.

  • Un solo estilo en todo.

    Logotipo, ilustraciones, iconos y animación comparten una paleta y unas reglas, para que la marca se lea igual donde aparezca.

  • Primero, un presupuesto por escrito.

    Alcance, precio y fechas por escrito tras una primera llamada, antes de empezar a diseñar.

Sectores para los que desarrollamos software

Desarrollo de software a medida para cada sector: web, móvil e IA, construido y auditado en seguridad por un mismo equipo.

  • Una habitación de hospital moderna al anochecer, con la cama hecha junto a un monitor de paciente y un portasueros

    Salud y MedTech

    Desarrollo de software médico y sanitario: portales de paciente, apps de telemedicina, integración con la historia clínica y paneles clínicos.

  • Un móvil con una app de banca abierta junto a una tarjeta de pago metálica negra sobre una mesa de piedra

    Fintech y pagos

    Desarrollo de apps fintech y de pagos: pasarelas de pago, monederos digitales, banca móvil y plataformas de préstamos.

  • Una tienda de streetwear con una pared de sudaderas y camisetas deportivas, un muro iluminado de zapatillas y un expositor de terrazo con camisetas y gorras

    Retail y ecommerce

    Desarrollo de tiendas online y ecommerce: apps de compra, software TPV y gestión de inventario.

  • Un carro portaequipajes de latón con maletas y un abrigo en el vestíbulo de un hotel moderno, junto a la recepción

    Viajes y hostelería

    Software de viajes y hostelería: apps de viajes, motores de reservas, gestión hotelera e integración con proveedores.

  • Una línea de montaje robotizada en una fábrica inteligente, con brazos robóticos en celdas de cristal y robots autónomos que transportan piezas

    IA y automatización

    Desarrollo de IA y automatización: agentes de IA, chatbots, procesamiento de documentos y flujos de trabajo automatizados.

  • El estudio de un equipo de software, con una hoja de ruta de notas adhesivas en una pizarra sobre una mesa compartida

    SaaS y marketplaces

    Desarrollo de software SaaS y marketplaces: plataformas multiempresa, suscripciones, roles de usuario y pagos a vendedores.

  • Paquetes en una cinta transportadora de un almacén de distribución, con estanterías altas de palés y una carretilla elevadora detrás

    Logística y cadena de suministro

    Software de logística y transporte: gestión de flotas, sistemas de gestión de almacenes, planificación de rutas y seguimiento de envíos.

  • El atrio de una biblioteca universitaria con mesas de estudio, salas de estudio acristaladas y una sala de grabación bajo varias plantas de estanterías

    Educación y EdTech

    Desarrollo de plataformas educativas y EdTech: sistemas LMS, plataformas e-learning, aulas virtuales y evaluaciones.

  • Una puerta de cristal con lector de huellas junto a un largo pasillo de racks de servidores en un centro de datos

    Ciberseguridad

    Software de ciberseguridad: gestión de identidades y accesos, paneles SIEM y cumplimiento, además de auditorías de seguridad y pentesting.

  • El salón y la cocina de un piso de obra nueva al anochecer, con ventanales de suelo a techo hacia torres residenciales y una grúa torre

    Inmobiliario y PropTech

    Software inmobiliario y PropTech: portales inmobiliarios, CRM inmobiliario, gestión de alquileres y apps para inquilinos.

  • La biblioteca de doble altura de un despacho de abogados al anochecer, con una larga mesa de nogal preparada con un contrato, una pluma y archivadores

    Legal y LegalTech

    Software legal para despachos y equipos jurídicos: gestión de expedientes y contratos, gestión documental y eDiscovery.

  • Un estadio de esports antes de una final, un mapa de batalla de fantasía en la pantalla gigante sobre dos mesas de equipo iluminadas y una copa de plata en un pedestal

    Gaming y esports

    Software para esports y gaming: backends de juegos, emparejamiento multijugador, plataformas de torneos, cuentas de jugador y pagos dentro del juego.

También desarrollamos software para seguros (insurtech), administración pública (govtech), energía y medios. Si tu sector no aparece, también podemos desarrollar software para él.

Software que tenemos en producción

Tres productos propios, diseñados, construidos y mantenidos por el equipo que diseñaría tu marca.

  • Retail · SaaS

    Un sistema de punto de venta que reúne ventas, inventario y tickets en el terminal, la tableta y el móvil.

    Captura de pantalla, 1908 × 944
  • Viajes

    Una app de reservas de viaje cuyo asistente de IA encuentra vuelos, hoteles e ideas de viaje, hasta la reserva confirmada.

  • IA

    Silvia AI

    Un asistente de IA para atención al cliente y ventas, que resuelve dudas y guía a los compradores.

    Captura de pantalla, 1908 × 944

Preguntas sobre branding y animación

Lo que preguntan los equipos antes de confiarnos su marca, respondido con claridad.

Haz tu pregunta
¿Qué incluye una identidad de marca?

Un símbolo y un logotipo, el icono de la app y el favicon, una paleta de color y una tipografía, y un manual sobre cómo usarlos. Se pueden sumar ilustración, iconos y animación en el mismo estilo, y aplicamos la marca a tu app y tu web.

¿Cuánto cuesta el branding y cuánto tarda?

Depende de lo que haga falta: solo un logotipo, una identidad completa, o también ilustración, iconos y animación. Tras una primera llamada te enviamos un presupuesto por escrito con el alcance, el precio y las fechas, y nada empieza antes de que lo aceptes.

¿Usáis IA para hacer logotipos?

Usamos herramientas de imagen con IA al principio, para explorar direcciones rápido. Los símbolos, ilustraciones e iconos finales se dibujan a mano en vector. Así se ven limpios en cualquier tamaño, y además importa para la propiedad: en EE. UU., una imagen hecha solo con IA no puede registrarse con derechos de autor.

¿De quién son el logotipo y los archivos?

Normalmente, tuyos: en un trabajo para un cliente, los derechos sobre el trabajo final se te ceden según el acuerdo, y recibes cada archivo y su original, de los vectores maestros a los archivos de animación.

¿Podéis actualizar nuestro logotipo en vez de empezar de cero?

Sí. Una actualización conserva lo que la gente ya reconoce y arregla lo que no funciona: el símbolo redibujado sobre una retícula, colores accesibles, la tipografía sustituida. Un rebranding completo vuelve a empezar desde el brief.

Lottie, Rive o vídeo: ¿cuál necesitamos?

Lottie encaja con animaciones que se reproducen, como cargas, bienvenidas y logotipos animados, y funciona en web, iOS y Android. Rive encaja con animaciones que responden, con estados al pasar, pulsar y avanzar. El vídeo encaja con escenas largas y ricas para marketing. Recomendamos uno para cada uso, y a menudo usamos más de uno.

¿Las animaciones harán más lenta nuestra app?

No si están hechas para el producto. Mantenemos las formas simples, revisamos el peso de cada archivo antes de entregarlo y cargamos las animaciones solo cuando aparecen en pantalla. Las animaciones de esta página son los propios archivos, con su peso a la vista. Cada animación tiene además una versión fija para quien desactiva el movimiento.

¿Podéis ampliar nuestro set de iconos o nuestro sistema de diseño?

Sí. Igualamos la retícula, el trazo, los radios y el estilo de lo que tienes, dibujamos los iconos que faltan y los añadimos a tu librería de Figma y a tu código.

¿Podéis integrar las animaciones y los iconos en nuestro producto?

Sí. Somos un estudio de desarrollo además de diseño, así que el equipo que dibuja una animación puede añadirla a tu app web o móvil, con los iconos como componentes y los colores y tiempos como tokens.

¿Qué archivos recibiremos?

Depende del servicio. Una identidad de marca incluye el logotipo en SVG, PDF y PNG, el icono de la app, el manual y una librería de Figma; las ilustraciones, SVG por capas y PNG o WebP exportados; las animaciones, Lottie o dotLottie, Rive o vídeo, con un fotograma fijo; los sets de iconos, archivos SVG, una fuente de iconos, un sprite y componentes de Figma.

Describe tu proyecto. Te damos un presupuesto.