12 ebooks gratuitos sobre publicidad y creatividad

12 ebooks gratuitos sobre publicidad y creatividad

Con motivo del día del libro, lacriaturacreativa.com ha hecho una recopilación de libros muy interesantes que puedes descargar gratuitamente 12 libros sobre publicidad y creatividad. Contenidos relacionados con el packaging, comunicación de marcas, lettering, creatividad, medición, estrategia, …
CONTINUAR LEYENDO “12 ebooks gratuitos sobre publicidad y creatividad” »

Comparte este Blog de Diseño Web
Espectaculares efectos interactivos con el Scroll de una página. Descárgalos !!!

Espectaculares efectos interactivos con el Scroll de una página. Descárgalos !!!

Las animaciones a través del movimiento del scroll de una página, son en mi opinión, una de las herramientas que mejor nos permiten llamar la atención del usuario.

Utilizando estos efectos, podemos hacer todo tipo de animaciones, desde las más complejas, hasta movimientos de lo más discretos, todo siempre dependiendo del producto que tengamos que vender. En cualquier caso, los efectos interactivos con el scroll, lo que nos permiten como usuario, es tener un control sobre la página del que rara vez solemos disfrutar. Los contenidos no se muestran sin más,  gracias a esa interactividad con la profundidad del scroll, podemos controlar la aparición de contenidos, imágenes o animaciones cuando nosotros queramos, incluso echar hacia atrás para ver cómo se ha producido ese efecto.

Esa interacción también promueve la viralización de nuestras páginas, por lo que, como he dicho al principio, siempre teniendo en cuenta el tipo de producto que estamos vendiendo, recomiendo 100% el uso de estas interactividades, al usuario le va a agradar y a nosotros nos permite desarrollar algo más nuestra creatividad.

EJEMPLOS

 

MAKE YOUR MONEY MATTER.

Una impresionante web en el que se cuenta el funcionamiento de un producto a través de una historia.
VER EJEMPLO

 

EVERY LAST DROP

Otro producto vendido a través de una historia bien ilustrada, otro claro caso de cómo la información va a ser mejor aceptada por el usuario y como decía al principio del artículo, muchas probabilidades de que sea compartida tu página.
VER EJEMPLO

 

PORSCHE EVOLUTION

En este caso podemos ver cómo ha solucionado Porsche su web para mostrar la evolución de sus vehículos a lo largo de los años y de la música, todo con un efecto parallax activado por el scroll.
VER EJEMPLO

 

PEUGEOT HYBRID

Si además eres capaz de mostrar tu información con ilustraciones como estas, el éxito está asegurado…
VER EJEMPLO

 

CLOSER

Esta web la puedes navegar como cualquier otra, a través de su menú, o la puedes recorrer entera haciendo scroll. Todo tipo de animaciones para tomar ideas.
VER EJEMPLO

 

COLOR OF THE YEAR

Una web muy visual. A través del color y de tipografías que van cambiando según profundizamos en el scroll.
VER EJEMPLO

 

MELANIE DAVEID

Lo interesante de esta web es observar cómo los contenidos están divididos en dos columnas y cómo una columna espera a la segunda para seguir mostrando contenido, todo ello por supuesto con la ayuda del scroll.
VER EJEMPLO

 

BAGIGIA

Esta web es antigua, pero la coloco en este listado, para mostrar cómo a través del scroll van cargando distintas imágenes para recrear una animación de un objeto, dando una sensación 3D
VER EJEMPLO

 

 

DESCARGAR CÓDIGO

EFECTOS SCROLL
Una de las mejores galerías, podéis ver todos los efectos posibles en http://scrollmagic.io/examples/index.html

 


Todo tipo de efectos con textos

 


Una librería tanto para web y móvil. Permite establecer un easing personalizado, rotaciones 3D, …

 


Librería  JS con timelines para generar animaciones mucho más suaves.

 


Animaciones para transformaciones de escala, rotaciones, animaciones 3D,…

 


Compatible con cualquier tipo de dispositivo, y perfecto para hacer una demostración de un producto realizando un 360 grados cuando el usuario hace scroll.

 


Pasa con el scroll de sección en sección con diversos tipos de animaciones

 


He colocado esta galería porque además de ser un menú muy vistoso y útil, nos muestra cómo van cambiando los puntos según avanzamos en el scroll

 


Detecta la dirección del scroll mostrando una capa arriba o abajo.

 


Muy interesante, permite el desplazamiento desigual entre columnas al hacer scroll.

 

 

 

 

Comparte este Blog de Diseño Web
Recursos Gratis para diseñadores. Iconos

Recursos Gratis para diseñadores. Iconos

El uso de iconos en el diseño digital es constante.
Existen muchas páginas en las que puedes descargar paquetes enteros de familias, estas páginas que os comparto, son las que suelo utilizar normalmente, me gustan porque vienen con un buscador, de forma que puedes directamente descargar el tipo de icono que necesitas, sin necesidad de tener que descargar la familia entera. Además permiten en varios casos, el poder elegir entre varios tipos de descarga, AI, EPS, PNG, SVG, PSD

CONTINUAR LEYENDO “Recursos Gratis para diseñadores. Iconos” »

Comparte este Blog de Diseño Web
Fuente Facunda, retro-vintage. Descarga Gratis.

Fuente Facunda, retro-vintage. Descarga Gratis.

Facunda es una fuente gratuita creada por bybu.

Se trata de una fuente condensada ideal para titulares modernos con un aspecto retro-vintage. Cuenta con 5 estilos diferentes y es de uso público.
En principio os puede parecer que no hay diferencia en el estilo alternate, si os fijáis por ejemplo en la barra horizontal de la letra A, veréis que en la variedad alternate, en lugar de estar situada a mitad de altura, está un poco más alta.
A continuación os dejos una imagen para que podáis ver su aspecto y el botón de descarga.

CONTINUAR LEYENDO “Fuente Facunda, retro-vintage. Descarga Gratis.” »

Comparte este Blog de Diseño Web
Tipografía digital. Guía rápida y descargas gratis.

Tipografía digital. Guía rápida y descargas gratis.

La tipografía siempre ha ocupado un lugar preferente en el diseño gráfico. Además de ser básica para destacar el mensaje que queremos comunicar, también nos sirve para establecer una jerarquía dentro de ese mensaje.

Esta guía pretende dar indicaciones básicas para poder hacer un uso correcto enfocado al diseño web y de web Apps.

CONTINUAR LEYENDO “Tipografía digital. Guía rápida y descargas gratis.” »

Comparte este Blog de Diseño Web
La importancia del rendimiento en una web o webApp

La importancia del rendimiento en una web o webApp

Cada vez son mayores las exigencias de las páginas web que diseñamos. Imágenes más grandes y pesadas o  efectos que hacen más atractiva la experiencia usuario, hacen que sea indispensable comprobar si esa experiencia  que estamos buscando no nos devuelva justo lo contrario, es decir, una página que tarda mucho en cargar y que como resultado nos da una tasa de abandono cada vez mayor. Nos gusta navegar y la oferta es inmensa, si un sitio nos hace esperar acabamos por abandonarlo antes de que cargue.

CONTINUAR LEYENDO “La importancia del rendimiento en una web o webApp” »

Comparte este Blog de Diseño Web
Densidad de píxeles. Diseñando para móviles.

Densidad de píxeles. Diseñando para móviles.

Una de las especificaciones técnicas que tenemos en cuanta al analizar un teléfono es la densidad de pí­xeles de su pantalla. La densidad de pí­xeles es una unidad que se mide en pí­xeles por pulgada ppp o ppi en inglés (pixels per inch), nos indica la calidad de una pantalla y es fundamental a la hora de realizar un diseño para móviles.

Las pantallas de alta densidad tienen más píxeles por pulgada que las de baja densidad. Esto provoca que los elementos de una interfaz de usuario de las mismas dimensiones de píxeles, aparecen más grandes en las pantallas de baja densidad y más pequeños en las pantallas de alta densidad.

CONTINUAR LEYENDO “Densidad de píxeles. Diseñando para móviles.” »

Comparte este Blog de Diseño Web
Guía tipográfica para el diseño web móvil

Guía tipográfica para el diseño web móvil

El año 2017 fue denominado por Google como“El año de los móviles” en base a su informe anual Consumer Barometer 2017.  Por primera vez en la historia, el uso de Internet en dispositivos móviles registraba un porcentaje superior al 50 % en los 63 países incluidos en el estudio.  España es en este sentido uno de los países más “adictos” a su uso, un 91% de los usuarios online se conecta a través de su Smartphone, los mismos que Hong Kong o en Singapore.Un 64% ve vídeos online y un 79% utiliza su móvil para realizar búsquedas, una de las cifras más altas del mundo, muy por encima de la media mundial que es del 65%.

Estos datos son suficientemente relevantes como para prestar una mayor atención al diseño web móvil, especialmente a las tipografías utilizadas.  Desgraciadamente nuestra labor como diseñadores web viene condicionada en la mayoría de las ocasiones por las guías de estilo establecidas por nuestros clientes.

El uso correcto de la tipografía en el diseño web móvil es fundamental en la usabilidad y experiencia del usuario, veamos lo que dicen los expertos sobre cómo mejorar este uso en dispositivos móviles. CONTINUAR LEYENDO “Guía tipográfica para el diseño web móvil” »

Comparte este Blog de Diseño Web
Google te ayuda con el color en tus diseños para Apps

Google te ayuda con el color en tus diseños para Apps

El color es un elemento indispensable a la hora de diseñar una App, una web, publicidad… Puede determinar de modo determinante la usabilidad de tu aplicación o sitio web.

El color ayuda a hacer visible la jerarquía, la navegación o arquitectura de un diseño, hace que el usuario muestre más o menos interés en nuestros contenidos y una vez interesado, puede hacer que la experiencia sea positiva o que no vuelva a usar nuestro diseño nunca más.

CONTINUAR LEYENDO “Google te ayuda con el color en tus diseños para Apps” »

Comparte este Blog de Diseño Web

Efectos hover para botones con CSS3

Efectos CSS3 para botones

Efectos CSS3 para botones

El uso de botones realizados con CSS3 es ya una práctica habitual, reducen peso a la página y existen mil maneras de customizarlos para sustituir sin problema a casi cualquier imagen de botón. Hoy os dejo una colección de códigos realizados con CSS3 que además añade todo tipo de acciones a esos botones, aunque podrían aplicarse también a imágenes.

Podréis encontrar: animaciones 2D, transformaciones de bordes, transformaciones y movimientos con sombras, transformaciones tipo burbuja, o el típico curl de página.

CONTINUAR LEYENDO “Efectos hover para botones con CSS3” »

Comparte este Blog de Diseño Web

Objeto interactivo en 3D con jQuery

jQuery Interactive

jQuery Interactive

En este artículo podréis ver cómo crear un objeto interactivo en 3D mediante imágenes y un simple JS.

Al hacer drag sobre la imagen arrastramos el objeto de tal modo que parece que estamos realizando un giro en 3D. En realidad estamos cargando todas y cada una de las imágenes que componen ese movimiento 360º. El efecto es perfecto para una galería de coches por ejemplo, el único problema es que nos tendremos que hacer con todas las imágenes de la rotación completa.

CONTINUAR LEYENDO “Objeto interactivo en 3D con jQuery” »

Comparte este Blog de Diseño Web

Widget para customizar los botones de suscripción en tu web

Botones para suscripción

Botones para suscripción

En ocasiones resulta complicado incorporar los botones de suscripción en tu web por no poder adaptarlos al diseño del conjunto de tu sitio.

Los botones de suscripción a Facebook, Youtube, Twitter o Google+, son botones preestablecidos que suministran las distintas redes sociales y que no podemos modificar.

Este código, nos ayuda a camuflar el botón de la red social, debajo de un slide. Se trata de una capa que se abre al hacer rollover sobre ella, de modo que podemos camuflar el diseño y mantener el botón original. Aquí tenéis el código para realizar botones de suscripción en vuestra web o blog con CSS y con un slide muy vistoso que podréis diseñar a vuestro gusto ya que llevará por detrás vuestra propia CSS.

Podéis ver el ejemplo y el código en cssdeck.com

Comparte este Blog de Diseño Web

ascensor.js Código jQuery para navegación web

Navegación web con jQuery

Navegación web con jQuery

La navegación web en una sola página es una forma de dar al usuario una transición entre secciones natural y muy vistosa.

Para ello existen multitud de plugins jQuery que facilitan el uso de este sistema de navegación.

Todas las áreas de contenido se encuentran en la misma página, y gracias al menú nos vamos desplazando por cada una de ellas.

CONTINUAR LEYENDO “ascensor.js Código jQuery para navegación web” »

Comparte este Blog de Diseño Web

Tendencias del diseño web, by Apple…

Imagen tomada de appleweblog.com

Imagen tomada de appleweblog.com

Nadie en este mundillo es ajeno a la tremenda influencia de Apple en el diseño web.

Estoy seguro que aparición del iOS7 en el mercado, volverá a dar un cambio de aires al diseño web.

Es cierto que podemos ver una clara inspiración en el diseño más plano de Windows o Google, pero eso si, con el toque especial que siempre Apple da a sus diseños. El responsable, Jonathan Ive.

El cambio ha sido radical, pasando del skeuomorphism (que representa el arte de imitar la realidad) a un diseño totalmente minimalista, es decir, de Steve Jobs a Jonathan Ive.

CONTINUAR LEYENDO “Tendencias del diseño web, by Apple…” »

Comparte este Blog de Diseño Web

Un plugin de jQuery para crear tooltip estilo barra de herramientas

Crear tooltips con jQuery

Crear tooltips con jQuery

Toolbar.js es un plugin de jQuery que nos ayuda a crear fácilmente tooltip estilo barras de herramientas.

Se trata de un plugin muy sencillo que nos permite crear cualquier tipo de barra de herramientas.

Permite abrir la barra desde cualquier elemento, los elementos de la barra de herramientas son fácilmente personalizables. Las barras pueden aparecer horizontales o verticales, por encima o debajo del botón.

CONTINUAR LEYENDO “Un plugin de jQuery para crear tooltip estilo barra de herramientas” »

Comparte este Blog de Diseño Web

Divierte tus cajas de texto con jQuery

divertirse con jQuery

divertirse con jQuery

Se trata de un plugin experimental en jQuery que lo que hace es amenizar la entrada de texto en las cajas de tu web.

Existe la posibilidad de incluir hasta 5 efectos distintos de animación. Con lo aburrido que es siempre rellenar un formulario, esta puede ser una buena manera de hacerlo más divertido 😉

 

 

VER DEMO

Comparte este Blog de Diseño Web

Guía gratuita Google para la creación de webs móviles

Guía Google para optimizar web mobile

Guía Google para optimizar web mobile

Si estás pensando en diseñar una web para smartphone, Google pone a tu disposición una guía gratuita con todo tipo de consejos, trucos y código para optimizarla y obtener los mejores resultados.

Para empezar, lo primero que Google te recomienda es realizar un diseño web receptivo, es decir, utilizar el mismo HTML para todos los dispositivos, independientemente de su resolución, y utilizar CSS para decidir los cambios según estas resoluciones.

Esta guía, te ofrece además, la posibilidad de consultar la compatibilidad entre smartphones o recomendaciones para el uso de javascript en tu sitio.

En definitiva, se trata de una guía realizada por Google, eso significa que si quieres tener contento a Googlebot, léete esta guía y síguela al pie de la letra 😉

 

 

VER LA GUÍA GOOGLE PARA WEB MOBILE

Comparte este Blog de Diseño Web