Un juego para los diseñadores, para aquellos que dicen saber mucho. Por que no es nada fácil al comienzo adivinar el color, mirando únicamente los tres códigos del color en RGB.

reto color rgb

CLICK PARA VER EL ENLACE PARA PARTICIPAR EN EL RETO RGB

Puedes descargar de manera gratuita distintos diseños de interfaz de usuario (IU) para iOS. Son plantillas de ejemplos para que tu puedas diseñar tus propias app, con todo tipo de elemento que pueda existir en una aplicación: gráficas, estadísticas, iconos, botones, fotos, etc.

ejemplos iu ios

CLICK PARA VER EL LINK DE DESCARGA

Un par de páginas con recursos de diseños web para inspirarse. Ahora que le he estado metiendo mano al diseño del blog y al código, encontré un par de páginas que pueden ser de gran utilidad para los que estén haciendo un diseño o rediseño a una página web. La primera página hace una recopilación de los mejores diseños de las secciones que se encuentran en casi todas las páginas web es el: about o acerca de. La otra página hace un recuento de los mejores diseños de correos electrónicos, son esos que recibes cuando te suscribes a una página o cuando te suscribes a un boletín.

diseños web para inspirarse

CLICK PARA VER TODOS LOS RECURSOS

Un ejemplo muy creativo de un efecto parallax aplicado en un articulo publicado en un blog. Ese efecto es el que se produce cuando el usuario va navegando en la página, ya sea que baje o suba en la página aparece una nueva foto o nuevo texto.

efecto parallax
CLICK PARA LEER EL ARTICULO COMPLETO

Últimamente he visto muchas páginas web con el efecto de parallax scrolling, como que está de moda y es que se pueden hacer muchas cosas como animaciones en textos en imágenes, utilizando únicamente códigos. Encontré una selección de 25 páginas que lo utilizan de una manera muy creativa. Ya antes había publicado un ejemplo de este efecto de parallax pero aplicado a una fotografía para animarla en un video. Ahora traigo efecto pero aplicados al diseño en páginas web. Pero primero me gustaría explicar qué es y como se logra ese efecto por si alguien lo quiere aplicar en sus diseños. El parallax scrolling es una técnica que permite animar con movimientos todos los elementos de una web, al mismo tiempo o por separado, mientras te desplazas en ella con la barra de desplazamiento o con el tercer botón del mouse. Este efecto se logra colocando todos los elementos de una web por capas, así si quieres mover solo el texto y dejar estático el fondo lo puedes hacer.

Cómo se logra el efecto parallax scrolling

 

Ese tipo de animaciones se logra colocando algo de código en las páginas. Para crear el efecto básico que es dejar el fondo estático y lo que se mueva sea el texto mientras navegamos de arriba a bajo, se utilizan los atributos data-type y data-speed, algo de CSS y código jQuery. En internet hay una infinidad de tutoriales, pero este que encontré me pareció muy bien explicado y lo mejor es que puedes descargar un archivo para que lo abras en tu computadora y mires como está hecho.

El anterior fue un tutorial de los simples, pero encontré otro en donde literalmente animan todo lo que se ve en una página. Aparecen y desaparecen textos, lo mismo hacen con galerías de imágenes, desvanecen textos, los giran, hacen volar por toda la página, cambian el color de fondo al mismo tiempo que le cambian el color al los textos. Ese tutorial se puede ver en acción directamente en la página, en donde también explican con que código se logra el efecto y lo mejor es que puedes descargar un archivo para que lo abras desde tu computadora y lo edites a tu gusto.

Buenos ejemplos de diseño web con efecto parallax

 

efecto parallax scrolling en web

 

En la página que encontré vienen 25 ejemplos con ese efecto, pero yo solo hablaré de tres que fueron los que me parecieron los diseño más creativos y el último que no viene en esa selección pero que me parece el mejor de todos. El primer ejemplo de una página italiana de productos textiles. Todo el sitio se navega moviendo el tercer botón del ratón y en todas partes hay un efecto o sucede algo cuando colocas el puntero del ratón sobre un botón. Además de todo eso el diseño es muy elegante e intuitivo. Acá la dirección | [Codetex Group]

 

efecto parallax restaurante

 

El segundo trata sobre un restaurante que se encuentra en Londres y da muchos servicios a los clientes. En esta página puedes navegar arriba, abajo y de izquierda a derecha. No tiene tantos efectos pero las fotos que hay de fondo hacen que la página luzca muy elegante, no exageran en las animaciones pero las transiciones entre las secciones la hacen de una manera muy sutil. Acá dejo la dirección para que entren y le muevan a todo lo que encuentren | [Marco Grill]

 

efecto parallax agencia publicidad

 

La tercera es de una agencia publicitaria en Grecia. En ésta página no sales para nada del home, todo sucede en la primera página, salen del típico diseño cuadrado o rectangular ellos juegan con los rombos como botones, cuando les das clic a uno de ellos, despliegan una animación con el trabajo que ellos hicieron. Acá dejo la dirección para que ustedes mismos vean los efectos | [Mindworks]

 

currículum vítae interactivo

 

Y la última y pero para mi la mejor implementación del efecto parallax scrolling en una página es la de un currículum vítae interactivo, del cual ya había hecho un post pero que traigo de nuevo por que en verdad vale la pena que entren y naveguen entre el. Es una especie de video juego, tienes que ir avanzando, brincando objetos, nadando y mientras lo haces se van desplegando animaciones que contienen datos de la persona. Acá dejo la dirección para que jueguen un rato en ella | [interactive resume of Robby Leonardi]

Error 404 es esa página que nos sale cuando no encontramos lo que queremos en alguna página web. Por alguna razón ahora se volvió muy popular tener un mensaje original en esa página de error. Encontré una página que hace recopilación de los mejores y más creativos errores.

 

error 404

 

Los errores 404 son muy comunes en las páginas web, aparecen cuando una página no se encuentra, de hecho todas las páginas y blogs en internet tienen una con ese error. Pueden escribir mal la dirección de cualquier página para que puedan ver el error, hasta éste blog tienen una es solo texto, pero no es nada creativa como las que se pueden ver en la página que encontré y que se encarga de hacer una recopilación para mostrar las mejores y las más creativas. Al verlos dan ganas de hacer un diseño mejor para mi blog. Esta página también puede funcionar como inspiración para los diseñadores web. Yo hice una selección de las cuatro páginas que me gustaron más, pude hacer muchas más por que hay algunos muy originales, pero mejor les dejo la dirección de la página para que los vean ustedes mismos, pueden votar por los mejores o mandar su propio diseño. Es importante que den clic sobre la imagen para que los lleve a la página con el error 404, por que algunas tienen animaciones o en algunas debes de hacer algo para salir de ese error. | [Best 404 error pages on the web]
error 404

 

La primera es el error de una página de música en donde puedes encontrar nuevos grupos, una especie de red social de música. Su error me gustó por que te transporta a los diseños que se podían ver en el año de 1998. Hay gifs, hay texto escrito con Comic Sans, hay un unicornio dentro de otro unicornio con brillitos (una formula siempre ganadora). Y la página según sus diseñadores funciona mejor en un navegador Netscape 1.0 con una conexión a 56.6k | [Tastebuds 404 nlol]

 

error 404

 

La segunda es la de umbro, que es una empresa que hace uniformes y todo tipo de objetos vinculados con el deporte. Su error lo relacionan con una formación dentro del campo de fútbol, un 4-0-4. Cuatro atacan y cuatro defienden, mientras los medios están en la banca tomando un café | [Formación 4-0-4]

 

error 404

 

El tercero es el error de la misma página que recopila diseños de errores en otras páginas. Me gustó por que te pone un juego de esos que jugábamos en el NES, no sólo hay texto diciéndote que te equivocaste de dirección o que la información que buscabas no existe o te deja un link para llevarte a la página de inicio, es mejor que eso. Te deja un juego para que pierdas el día y no salgas de su página | [Wild gunman]

 

error 404

 

El cuarto y último es una página que te permite crear un personaje pixeleado, también tiene relación con el NES. Pero en esta ocasión es un cartucho de los que se ponían en esa consola y que cuando no funcionaba, lo sacabas de la cansola y le soplabas a los conectores, con eso “mágicamente” el problema se solucionaba y el cartucho seguía funcionando como nuevo | [EightBit]

Blog de diseño gráfico roc21

➱ ¡Sigue el blog!
botones sociales Twitter Facebook Pinterest YouTube Google+ Instagram Feedly RSS
✉ Resumen de los artículos en tu correo