Diseño Web Horizontal

29 06 2009
Diseño Web Horizontal

Diseño Web Horizontal

Hace ya tiempo que tenía ganas de hablar del diseño web horizontal.

Lejos de las creencias de los llamados “gurús” de la usabilidad, han ido proliferando muchas web relacionadas con el diseño, fotografía, revistas,… En las que en lugar de tener que desplazarse verticalmente por el sitio web, el desplazamiento se hace de modo horizontal.

En este tipo de webs nos encontramos con algún problemilla.  El primero es que lo normal es que nuestro ratón sólo tenga scroll vertical, por lo que tendremos que ir desplazando manualmente el scroll de la barra del navegador, pero vamos a ver algún ejemplo en el que esto se soluciona de un modo perfecto.
El segundo y quizás el más importante, es que debemos de indicar de algún modo al usuario, que se encuentra en una web distinta, que si quiere más contenido tendrá que desplazarse horizontalmente.
Una solución, sería hacer un corte en la página, de modo que se dejase ver que hay más contenido hacia la derecha, por ejemplo, con un contenido cortado por la resolución de pantalla, pero tendríamos que tener presente las distintas resoluciones de pantalla para que esto funcionase. Así que lo normal es encontrarnos con unas flechas dibujadas que nos indican el desplazamiento.

En estos ejemplos podréis ir viendo cómo ha ido evolucionando este tipo de webs, desde el Html con tablas, hasta el uso de CSS.

Leer el resto de esta entrada »





Tendencias del diseño web para 2009

26 01 2009
Tendencias web 2009

Tendencias web 2009

El diseño no deja de evolucionar, cada vez vemos cosas más asombrosas, diseños que enriquecen los contenidos y que nos ayudan cada vez más a hacer más usables las webs.
Eso pasó por ejemplo con los nuevos diseños de pies de web, en los que hemos pasado de tener una zona “inhóspita” a ser un lugar con un alto contenido visual en el que el usuario se fija y navega. Esta es una solución que sin duda seguiremos viendo este año.

También hemos podido ver como cada vez son más los diseñadores que utilizan grandes imágenes de fondo. Las conexiones son cada vez más rápidas y esto hace posible poder usar fondos reales en lugar de colores. El uso de png también ha favorecido mucho lograr buenos diseños. Los navegadores actuales los leen sin problema y existen soluciones para solventar los problemas de transparencia que aparecen en los antiguos.

La tipografía grande también seguirá dejando atrás a los pequeños titulares. Las resoluciones de pantalla ahora permiten usar mayores espacios de trabajo en los que las fuentes grandes brillan con luz propia. Inlcuso he comenzado a ver cada vez más, webs que usan sIFR para meter todo tipo de fuentes, con lo que los resultados son geniales. De todos modos habría que estudiar detenidamente el tiempo de carga que supone esto.

Seguimos viendo en todos los diseños las esquinas redondeadas, con o sin sombra, creo que este tipo de cajas seguirán acompañándonos este año, así como las cabeceras que ocupan el 100% de la pantalla (tipo wordpress).
Por supuesto que las redes sociales están influenciando mucho en los diseños, la posibilidad de añadir o de que el usuario añada tus contenidos a estas redes, hace que se le de mucha importancia al espacio que ocupan las entradas a flickr, Twitter,… Desarrollando diseños cada vez más grandes y vistosos.

Las dos columnas tipo blog se imponen. Una principal más ancha con el contenido principal y otra más estrecha a la derecha con un contenido secundario. Aunque he de decir que empiezo a ver sitios con múltiples columnas como es el caso de http://labs.mozilla.com (en este caso el diseñador ha querido dar igual importancia a las 4 noticias, y la mejor manera era meter 4 columnas verticales de iguales dimensiones)
Hace años el diseño de páginas web era al revés. Las webs estaban diseñadas en dos columnas la izquierda más estrecha a menudo con el menú de navegación y luego a su lado la principal más ancha. Cuando se empezó a dar importancia al SEO, se vio que esa distribución nos perjudicaba seriamente, ya que el navegador leía primero todo el contenido de la primera columna, lo que provocaba que los textos y titulares importantes quedaban relegados detrás de cientos de líneas de código.

Así como las fuentes han aumentado de tamaño, lo mismo ocurre con las ilustraciones. Son más grandes, muy coloridas y consiguen llamar mucho la atención del usuario. Los grandes fondos ilustrados conviven con los fondos grunge, collage, blocs de notas, acuarelas,… Estos diseños aunque pudiera parecer lo contrario, han devuelto la importancia del espacio en blanco al diseño web. Todo ahora tiene más “aire”, por fin nos hemos dado cuenta de la importancia que tienen los espacios en los diseños para crear un camino a la fácil lectura.

Pero sin duda alguna las herramientas que van a condicionar los nuevos diseños son las bibliotecas de Ajax, JQuery, Mootools,…
Las posibilidades son enormes, ya que simulan todo tipo de efecto y no recargan las páginas. Proporcionan muchas facilidades a la hora de navegar por la página, diseño, velocidad y usabilidad, ¿que más se puede pedir?

Y para acabar, mi profecía…
De todos es sabido la gran influencia que ha ejercido la web de apple en los diseños web. En esta ocasión mi apuesta viene dada por la navegación y gráficos de las webs creadas para móviles iphone, estoy convencido que empezaremos a ver similitudes en muchas páginas dentro de nada, el tiempo lo dirá….

Espero vuestros comentarios y sugerencias.





Mi estilo favorito

31 12 2008
Neil Duerden

Neil Duerden

Esta forma de “decorar” imágenes a base de pinceles, efectos y vectorizados me apasiona. Hace tiempo que tenía ganas de dedicar un post a este Artista, Neil Duerden.

Neil Duerden

Neil Duerden

Es una perfecta combinación de buenas fotografías con espectaculares retoques, y todo ello para las mejores marcas del mundo (Nike, Adobe, Gucci, . Es sin duda un referente para los que nos gusta este tipo de diseños.

Neil Duerden

Neil Duerden

Desde hace ya tiempo, este estilo se ha introducido con mucha fuerza en publicidad, tanto en video como en imprenta, desde luego no deja indiferente a nadie.

La web es http://www.neilduerden.co.uk/ , os recomiendo que os la guardéis entre vuestras favoritas.

1

Neil Duerden

Bueno, ¡Feliz Año “Nueve”! para todos, y particularmente espero que en lo malo no se parezca en nada a este…





Fotos Vintage libres de derechos

10 10 2008

Acabo de encontrar una joya, buscando imágenes vintage en Flikr, he encontrado un archivo de más de 3000 fotografías Vintage GRATIS !!!! de la biblioteca del Congreso de los Estados Unidos.

Galeria de más de 3000 fotografias vintage. 1910's-30's-40's

Galería de más de 3000 fotografías vintage. 1910's-30's-40's


Las fotografiás son sencillamente alucinantes, sobre todo para los que estamos totalmente enamorados del vintage y lo retro. Encontraréis dos grandes bloques, 2.900 fotografías de l910’s y 1615 fotografías de 1930’s-40’s

Fotografias Vintage libres de derechos. 1910

Fotografías Vintage libres de derechos. 1910

Podréis encontrar una enorme colección de fotografías de escenas cotidianas,  en casa, en la calle o en las fábricas. Una galería impresionante e indispensable.

Ver galería de fotos Vintage libres de derechos.





Nueva web de Warner Music España

24 09 2008
Nueva web de warnermusic.es

Nueva web de warnermusic.es

Para los que no habéis tenido curiosidad en saber a qué me dedico, os diré que en la actualidad trabajo en medialabs, y este ha sido mi último diseño, la web oficial de Warnermusic España.

La web acaba de subirse este mes, todavía la gente de Warner anda loca rellenando contenidos y subiendo archivos (de ahí el beta que podréis ver en el logo).

Se trata de una web programada en .net y maquetada con CSS.

Diseñar un portal como este es un complejo proceso. Al tratarse de una gran compañía, muchos son los condicionantes marcados,  las secciones y las distintas posibilidades que se le ofrece al usuario, por eso, en lugar de juzgarlo, prefiero que seáis vosotros los que deis vuestra opinión.

Dejad vuestros comentarios en este post.

Gracias a todos.





Tendencias del diseño web – “pies”

4 09 2008
footers o pies de página

footers o pies de página

De acuerdo con todos los principios de diseño web, todo lo que colocamos en la parte inferior tiene poca importancia para el usuario, sin embargo, desde hace bastante tiempo y precisamente para poder aprovechar este espacio y captar la atención del usuario, se están desarrollando sitios web con increíbles pies de página. Vistosos, usables y que no pasan para nada desapercibidos para el usuario.

Normalmente se usa esta zona para poner avisos legales, referencias a otras secciones más o menos relevantes,… En definitiva suelen ser zonas “oscuras” al ojo del usuario.

En este post vamos a ver varios ejemplos de cómo hacer visible esa zona, con atractivos diseños e incluso con buenas ideas para proseguir la navegación.

Leer el resto de esta entrada »