Freelance is better…

Un año posteando…

Posted on: diciembre 25, 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.
Anuncios

2 comentarios to "Un año posteando…"

Thanks for choosing my site for your post.

Agust

Thank you for making your website eligible.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: