Freelance is better…

Archive for diciembre 2007

Así es. Han pasado ya poco mas de un año (366 días) desde el primer post. Lo malo de comenzar el 24 de Diciembre es que difícilmente hay tiempo para postear en ese día.

Pues bien hoy vengo decidido a no descanzar hasta haber escrito una entrada decente que les sirva de algo a la gente encargada de Diseñar Webs, como yo. Vamos al tema…

Diseño de interfaces web realistas

Los diseñadores Web, muchas veces tenemos la posibilidad de explayarnos en un Website de la manera que mejor nos parezca. Por esta razon y por el gran crecimiento que va teniendo el internet, es que el diseño de interfaces en esta area a tomado diferentes rumbos, usando tendencias muy distintas y generando un sinnumero de presentaciones atractivas y funcionales.

…pero qué es? Analicemos la siguiente web:

001.jpg

El diseñador del website ha hecho uso de elementos que para el ojo humano parecen reales. Algunos lo son, como el lapicero en la parte superior y los lentes en la parte inferior, otros como los post it y las hojas parecen haberse realizado con algun programa de diseño.

…y para que sirve? que gano con ello?

Una de las principales ventajas es que el diseño mismo te lleva al ambiente que el diseñador desea ingresarte. Es decir en conjunto uno puede sentirse dentro de lo que podria ser un librero de madera, como en el ejemplo siguiente:

O tambien ingresarnos a un lugar místico-antiguo como el siguiente:

Una de las tecnicas más usadas para lograr casos como estos, es el uso correcto de perspectivas y sombras, dando un aspecto tridimensional (uso de profundidad) haciendo que un objeto quede superpuesto a otro y por tanto resalte entre los demás. Un ejemplo:

El website en su totalidad no usa una interfaz realista completa , pero posee un elemento que si usa esta tendencia: el logotipo; el cual está plasmado como sello en un papel viejo clavado en la parte superior izquierda.

El uso de sombras y texturas es muy importante para poder engañar al ojo humano y hacer que traiga hacia adelante a ese elemento colocándolo en un nivel superior y más notorio. Lo mismo sucede en el siguiente ejemplo:

El website anterior suele usar sombras en gran parte de su diseño, añadiendole niveles de profundidad y resaltando los que se encuentran por sobre otros. Ademas de ello añade un elemento realista, una hoja enclipada con una imagen(al estilo fotografía) y usando la sombra lo coloca por sobre todo el diseño.

Ya en la elaboración de codigo existen diversas formas de lograr estos niveles y uno de ellos es el uso de imágenes PNG Transparentes, como se ha hecho en el ejemplo anterior, colocando encima de todo la siguiente imagen:

case-study-starquest.jpg
Imágene extraida y escalada del website de la empresa Onwired, LLC

Existen desventajas? Si, una de ellas es que los diseños webs realistas, al hacer uso de sombras, degradados y texturas reales(generalmente archivos jpg’s), tienden a ser pesados y por lo tanto el tiempo de espera para cargar el sitio suele ser un poco mayor a los sitios vectoriales comunes.

El uso de imágenes PNG transparentes tambien suelen tener un exceso. Por poner un ejemplo, la imagen PNG anterior sin escalar(la que está en su website) pesa 174.39 KB, posee un canal alfa (transparencia) y por ello el tamaño.

Más ejemplos de interfaces realistas completas:

007.jpg
http://www.ugrad.vcu.edu/

 

008.jpg
http://www.prague-guide.fr/

 

0010.jpg
http://0at.org/

 

0011.jpg
http://carsonified.com/

 

0018.jpg
http://www.teamgreenonline.com/

 0016.jpg
http://cottonseedoiltour.com/

Webs con algunos elementos realistas

0012.jpg
http://capturethevalley.com/

0013.jpg
http://cozinhatetrapak.com.br/

0015.jpg
http://brell.fo/

0017.jpg

 Flash no se queda atras…
Que mejor manera de presentar una interfaz web realista, que haciendo uso de la animacion para interactuar con ella. En TheFWA he conseguido algunos ejemplos, pertenecientes a estudios de diseño, muy interesantes:
Y eso es todo lo que tengo que escribir por ahora. Espero haber compensado en parte el tiempo de inactividad en el blog. Un saludo y espero estén pasando una feliz Navidad.

Ya se habrán dado cuenta del cambio. En un ataque de locura le di click a “Activar tema” y pues este es el resultado.

redesign.jpg

Me parece muy atractivo, funcional y simple(tal como me gusta). Le seguiré haciendo pruebas (qué va si te gusta un monton!!!) y posiblemente pruebe otros, aunque lo dudo.

El motivo? Pues encontrar un punto de transición entre el diseño anterior y un rediseño exclusivo que desarrollaré en el 2008.

Saludos y los comentarios estan abiertos(que vá si solo comentan para los gatitos!!!)…

Ese es el mensaje con el que se presenta esta acción BTL. Fue realizado por BBDO para la BBC, la cual obtiene un buen nivel al darles un mensaje a los medios de información, sobre la forma de manejar una noticia.

bbc04.jpg

Obviamente este mensaje repercute en el público que interactúa con este tipo de publicidades la cual se ve desde un ángulo, pero siempre va a ser necesario dar la vuelta para ver el otro y poder entenderlo

 bbc05.jpg

 Visto en: Brief Blog

Etiquetas: