DESIGNAID

Herramientas claves para representar tus ideas

Reflexiones: Terminó la era del 4:3?

pildora_mmmEste es mi segundo post de la sección de reflexiones. Estos  posts los aprovecho para evangelizar un poco más sobre el diseño  haciendo énfasis en mis criterios personales y experiencias. En el post anterior hablé sobre lo disfrutable que puede ser usar un artefacto de tortura medieval como los cajeros automáticos de los bancos, pero en esta oportunidad les comentaré sobre algo un poco mas ameno:  el web.  Las resoluciones,  cómo afectan nuestros diseños, y de como deberíamos los diseñadores adaptarnos a los cambios que conllevan vivir los tiempos de la era digital. Ya que al igual que el cine, el web también es luz en movimiento y evoluciona constantemente.

Empecemos…


Desde hace tiempo nosotros  los que nos dedicamos al diseño digital (más específicamente al diseño Web) hemos tenido que trabajar con muchos aspectos que debemos ajustar para lograr un sitio funcional y atractivo. Desde el tamaño de los archivos, el peso y tamaño de las imágenes, los distintos tipos de navegadores, las variadas tecnologias que existen para publicar contenidos, hasta un laaargo etcétera, las variables a considerar en el diseño y construcción de un sitio son muchas.

Sin embargo hay una variable en particular que muchas veces es compleja de trabajar sobretodo si estas empezando en el diseño web. Y es el tamaño del diseño de la página. Porqué? por una razón muy simple: cada computadora del mundo tiene una resolución de pantalla diferente. Y dependiendo de esta resolución nuestros sitios se ven más grandes o más pequeños. A mayor resolución de nuestro monitor, más pequeño se verá nuestro sitio web (se ven más elementos en la pantalla) y a menor resolución, más grande se verá nuestro sitio web. (se ven menos elementos en la pantalla)

Entonces el tamaño que hagamos nuestro diseño influirá en la manera como se verá a distintas resoluciones en las pantallas de nuestros visitantes. Anteriormente esto no era mucho problema porque siempre podiamos trabajar el diseño web verticalmente. (Para aprovechar el gran invento de la ruedita del ratón)  Esta era casi una norma para ubicar el contenido en una página.

Pero eso  funcionaba antes, y digo antes porque el web ya está cambiando. Los monitores de tubo o CRT (los que ya empezamos a decir “viejitos”) tienen una escala de 4:3 lo que nos muestra una pantalla casi cuadrada. Pero con la llegada de la fiebre de los monitores planos en formato 16:9 (widescreen como las peliculas de cine) las páginas Web ahora empiezan a aprovechar ese espacio extra para mostrar sus contenidos, y por ende también resoluciones mayores.

La escala comparativa entre la proporcion de los monitores.

La escala comparativa entre la proporcion de los monitores.

Estos cambios ya se están viendo en el web. De hecho tal vez ya los viste. Sitios como Google maps, infinidad de sitios web de periódicos y noticias, y hasta más recientemente el popular You tube, ya están optimizados con una resolución especial para la proporción 16:9 de estos nuevos monitores. Por ejemplo You tube en una de sus conferencias de prensa anunció el nuevo formato y desde Noviembre de 2008 el sitio usa un tamaño de 960 pixeles de ancho. Perfecto para la resolución minima de 1024 x 768 px. Asi que nuestras páginas ya pueden aprovechar ese espacio extra de mejor manera. (De hecho si entras notarás que los videos son ahora widescreen, y si el video que subes no lo es, verás un par de barras negras a cada lado del video)

Cual sería entonces la diferencia entre las imagenes vistas a 4:3 o 16:9?  se veria algo asi: (click para ampliar)

se nota alguna diferencia? oh si.

se nota alguna diferencia? oh si.

Estos monitores 16:9 reflejan el titulo de este post. Pienso que ya es hora de empezar a diseñar para monitores widescreen. Aprovechar ese espacio extra que podemos obtener nos puede significar innovadoras ideas que podemos explorar en nuestros diseños.

Esto no es nuevo, anteriormente trabajabamos con las tablas en el HTML ajustadas a porcentajes horizontales para adaptar el contenido a cualquier formato de pantalla.  Sin embargo ahora con estos monitores y con resoluciones tan altas el espacio se hace tan grande que resulta imposible no considerarlo para nuevas propuestas. Infinidad de sitios se valen de la popularidad de estos monitores para explotar al máximo la experiencia visual usando imágenes muy grandes de alta resolucion en los fondos y manejando amplios espacios en los diseño de sus sitios. Que tal un fondo en nuestro site como este, o tal vez asiasi o mejor de esta forma. Simplemente se hace espectacular disfrutar de los detalles de una fotografia a esos tamaños y la magnificencia de los espacios tan amplios.  Por supuesto los criterios para distribuir los elementos en la pantalla también cambiarian para adecuarse a un formato mayor, más sin embargo el resultado es  visualmente impactante.

Sigamos con los cambios entonces… es hora de aprovechar más el 16:9 en nuestros diseños !!

saludos.

Luis S.

2 comentarios»

  Marco9775 wrote @

bueno dias necesito de tu ayuda, en estos momentos me encuentro realizando el sitio web de mi empresa, pero soy principiante y mi duda es, en que formato realizar la pagina web?, tomando en cuenta que mi intension es diseñarla para monitores de formato 16:9. Me podrias decir cual es el formato ideal para diseñarla? yo quisiera algo asi http://workrocks.com/?lang=en

espero tu respuesta.
Gracias

  Luis Suárez wrote @

Hola Marco.

cuando me preguntas que formato te refieres a la resolucion de la pantalla? es decir el ancho de tu sitio? recuerda que 16:9 es simplemente una proporcion no un valor. el sitio que me muestras esta hecho en flash lo cual lo hace mucho mas adaptable a resoluciones de pantalla ancha. es mas adaptable ya que el documento flash puede estirarse dinamicamente para alcanzar un ancho cualquiera.
tambien tienes que tomar en cuenta la resolucion de las pantallas que tengan tus usuarios ya que eso tambien influye. si piensas trabajar realmente en formato widescreen puedo recomendarte trabajar con 1024 px de ancho. (el alto no importa en el web ya que tienes el scroll vertical, pero si necesitas un alto puede ser 720 px) no es un tamaño estandar pero si resulta como para la mayoria de las computadoras.

saludos y gracias por visitarme.

saludos.


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: