Blog de diseño
Crear imágenes con IA en tiempo real con BlinkShot
Hoy quiero presentaros esta increíble plataforma online, totalmente gratuita, en la que puedes crear imágenes con IA en tiempo real.A diferencia de otras plataformas, en las que primero defines un prompt y luego obtienes la imagen, en este caso, según vas escribiendo...
Diseño responsivo III: diseño adaptativo con unidades relativas
Como diseñadores, nos vemos siempre en la obligación de ofrecer una experiencia de usuario excepcional. Una de esas técnicas es el diseño adaptativo con unidades relativas en lugar de unidades absolutas al definir tamaños y dimensiones en CSS. Este enfoque no solo...
Diseño responsivo II – Mobile First
Actualmente la conectividad es omnipresente y los usuarios acceden a la web desde una multitud de dispositivos, el diseño web adaptable se ha convertido en una necesidad. Dentro de esta filosofía de diseño, surge un enfoque revolucionario: Mobile First (Primero...
Diseño responsivo I
El diseño responsivo es una filosofía de diseño web que busca crear experiencias de usuario óptimas en una amplia gama de dispositivos y tamaños de pantalla. En lugar de diseñar múltiples versiones de un sitio web para diferentes dispositivos, el diseño responsivo...
Diseño de Interfaz de Aplicaciones para Móviles
Un buen diseño de interfaz de usuario (UI) es esencial para el éxito de una aplicación móvil, ha de ser fácil de usar, atractiva y responsive. En este artículo, compartiré algunos consejos para diseñar una interfaz de usuario para aplicaciones móviles. 1....
Cómo Utilizar el Tamaño de Tipografías en Dispositivos Móviles
El diseño web para dispositivos móviles se ha convertido en un aspecto crucial para garantizar una experiencia de usuario satisfactoria. Uno de los elementos más importantes del diseño móvil es el tamaño de la tipografía, ya que influye en la legibilidad, la...
Diseño de una Landing efectiva
¿Estás buscando una forma efectiva de captar la atención de tus visitantes y convertirlos en clientes potenciales? El diseño de una landing efectiva puede ser la respuesta que estás buscando. En este artículo, exploraremos los fundamentos del diseño de una landing y...
Diseño web. Home Full Screen con flecha para continuar navegación.
En el diseño web, como en los demás diseños, las tendencias vienen y van. Sin embargo el Full Screen en diseño web se ha mantenido durante varios años, sigue siendo una apuesta segura. En este post, además de comentar algún aspecto de este tipo de diseños, os dejo el...
Alinear capas sin salto de línea con CSS
Existen varias maneras de alinear capas sin que se produzca salto de línea. Para mi esta es la más sencilla, y además es responsive, por lo que no tendrás ningún problema independientemente de la resolución de pantalla que esté usando el usuario de tu sitio. Este es...
Centrar horizontal y verticalmente un texto sobre un div con background image
En numerosas ocasiones, centrar un texto dentro de un div, se convierte en una tarea complicada. En este post vamos a enseñarte a centrar el texto tanto horizontal como verticalmente y que además sea adaptativo. Vamos a ver cómo se hace este ejemplo; se trata...
Efectos sorprendentes sobre tus textos
Hoy traemos un efecto espectacular para tus textos, una composición retro, con luces de neón. Solo tienes que cambiar los textos y listo, Yoav Kadosh nos ha dejado todo preparado para que simplemente tengamos que copiar la CSS y poder usarlo. Se trata de puro CSS, con...
Anima tus contenidos con CSS
La animación de contenidos en la web es una práctica habitual en el diseño web. Desde hacer que las fotos aparezcan suavemente, a que la página se vaya formando según hacemos scroll, apareciendo los contenidos por los lados... Se trata de enfatizar contenidos o llamar...
Comprueba tu sitio web en varios dispositivos. Herramientas Gratis !!
Cuando creamos un sitio web, es fundamental recordar que tendrá que verse en todo tipo de dispositivos, con un amplio abanico de distintas resoluciones. Llevar a cabo un buen diseño y maquetación que se adapte a todos estos dispositivos, es muy importante, no sólo por...
Botones magnéticos con jquery
Se trata de unos botones que se sienten atraídos por el puntero del ratón, la interacción es interesante, invita a jugar con el botón. En la demo de Bestjquery podréis ver varios ejemplos de cómo aplicar este efecto. Si lo queréis descargar, aquí tenéis el botón....
Impresionantes efectos CSS para tus Input
¿Por qué seguir haciendo aburridos formularios cuando podemos usar impresionantes efectos CSS?. A veces tendemos a lo fácil, y no hay nada más aburrido en una web que rellenar un formulario, añade estos efectos y verás que aumentarán los usuarios que lo utilizan. Es...
30 Animaciones Preload con CSS espectaculares y GRATIS !!!
En numerosas ocasiones, nuestros diseños requieren más tiempo de carga, bien por tener que usar grandes imágenes o por funcionalidades requeridas por el proyecto. Nada más incómodo para un usuario que presentarse delante de su pantalla y esperar ante una página...
Template PSD GRATIS de Instagram
Como diseñadores, en numerosas ocasiones debemos realizar propuestas para clientes relacionadas con las redes sociales, entre ellas Instagram es una de las más activas a la hora de proponer nuevas ideas de negocio, a través de sus stories o publicaciones. En el caso...
UX, diseñando un slider, ¿qué no debo hacer?
Cualquier interacción realizada por un usuario será siempre más efectiva cuanto más se aproxime a un aprendizaje ya obtenido. Por ejemplo, el desplazamiento vertical se basa en el aprendizaje que tenemos todos de llevar años leyendo, por eso este desplazamiento...
Genial formulario con CSS y jQuery !!!
A la hora de diseñar un formulario, siempre tenemos que tener en cuenta que se trata de la parte más tediosa para un usuario, por eso mismo tenemos que facilitarte al máximo la tarea. Desde no pedir campos que no sean necesarios a intentar simplificar al máximo lo que...
Diseño de interfaz, menú hamburguesa. Animaciones gratis !!!
El menú hamburguesa es un botón que suele estar en la parte superior de la web, que muestra o esconde el menú en pantalla. Lo que en un principio nace para la versión mobile, por la falta de espacio, se ha convertido en un recurso habitual también en los diseños...
¿Cómo hacer un sprite con CSS?. Animaciones para web, apps, juegos…
Un sprite es el resultado de juntar varios fotogramas para crear una animación. En este ejemplo lo que hacemos es crear la animación con una única imagen. He cogido una imagen de 400x400 px y la he dividido en 4 columnas y 4 filas de 100x100 px. En cada una de las...