Post Actualizado en julio 25, 2013


Estilo corriente en diseño gráfico para la web

 Estilo corriente en diseño gráfico para la web En este artículo voy a tratar de resumir  el corriente estado  del arte en el diseño gráfico para páginas web (reciente del  2006, pero  muy relevante hasta el día hoy), e identificar las distintas características que hacen que una moderna web luzca fresca, atractiva y fácil de […]

 Estilo corriente en diseño gráfico para la web

En este artículo voy a tratar de resumir  el corriente estado  del arte en el diseño gráfico para páginas web (reciente del  2006, pero  muy relevante hasta el día hoy), e identificar las distintas características que hacen que una moderna web luzca fresca, atractiva y fácil de usar.
La característica clave de una moderna web es la simplicidad.

Para aprender como aplicar diseño simple en tus propios sitios, necesitas  leer ¨SALVA EL PIXEL¨- EL ARTE DEL DISEÑO SIMPLE, el cual te llevará a través de un completo juego de herramientas, ilustradas y después rediseñadas.

Me complace  decir  que  el diseño web está mejor ahora que nunca – y está continuamente mejorando. No solo porque hay mas websites en la red, sino porque hay mejores cosas que ver. Aunque también hay un desagradable  montón  de vulgaridad también. Yo solo pienso que muchos diseñadores de webs saben más ahora que nunca.

Los ejemplos debajo (que iré aportando continuamente) muestran una excelente técnica de diseño gráfico moderno, todas lucen bien, son claras y   fáciles de usar.

Atractivos
No estoy diciendo que estos sean los mejores sitios de la red, solo estoy diciendo que ellos son lo típico del mejor diseño hoy en día.

Características comunes

  • Los extraordinarios sitios debajo comparten las siguientes características de diseño:
  • Disposición simple
  • Orientación centrada
  • Diseño del contenido, no de la página
  • Efectos 3D usados mesuradamente
  • Suave color neutral de fondo
  • Colores fuertes usados mesuradamente
  • Atractivos íconos usados mesuradamente
  • Mucho espacio en blanco
  • Texto grande y atractivo

Vamos a ver estas características una por una:

Disposición simple:

Se siente como si estuviéramos viendo más que un simple diseño (1- 2) de columnas que en años anteriores.
La  completa impresión que te refleja es que los diseñadores generalmente concuerdan que páginas simples trabajan mejor.
Estas páginas se muestran  de una manera sincera  de lo mejor  a lo peor, y  no te encontrarás distraído  esforzando tu mirada a  buscar algo interesante. Es una experiencia más tranquila  y una más  cómoda navegación que en tiempos pasados.

Orientación centrada:

El otro aspecto que notarás sobre todas las fotos atractivas mostradas arriba es que todas están expuestas  alrededor de un eje central.
Aunque un par de años atrás hubieses encontrado común de ver  en el contenido muchas disposiciones anchas, fluidas, y  alienadas a la izquierda, hoy en día el contenido va en el medio.
El sentido crítico siempre ha apuntado a  que nosotros tendríamos que tener mucha información ¨sobre el doblez” (visible en la pantalla sin usar la barra de crol). Las disposiciones fluidas logran esto.

Diseñar el contenido, no la página:

crear Buenos y modernos diseños web ponen  menos energía diseñando el fondo de la web – el cuadro y las permanentes características de la página – sino al contrario centrándose en el diseño del contenido mismo.

Esto refleja el principio de la atracción del espectador hacia el contenido. (También hace eco el artículo de Phil Brisk, ¡No decores; comunica!
Este es uno de los temas centrales en mi libro SALVA EL PIXEL EN EL ARTE DEL SIMPLE DISEÑO WEB.

Vemos el efecto en:
La liberación, menos recuadros en la disposición de páginas.
Suavidad, simplicidad, página alivianada
Colores fuertes y efectos 3D suelen distraer la atención del contenido mismo. Incluida la marca misma.
El enfoque está  en  volver al sitio atractivo en sí, en vez de hacer notar atractivo el trabajo del diseñador web (lo cual es mejor para el diseñador a largo plazo).

Tomar…..

Lo que los diseñadores deberían aprender sobre esta tendencia es que esto  no es suficiente para diseñar una página en blanco, a ser rellenada con contenido después. Como he escrito en algún lado, el contenido es nuestro problema. Como diseñadores somos comunicadores (no decoradores) y el contenido lleva la mayor parte de nuestro mensaje.

¿Por que alineamiento central?

Me gusta el alineamiento central, y  he estado a la moda usándolo por un  tiempo.
Cuando el contenido se centra  en el medio de la pantalla  se muestra sincero y seguro.
También brinda una sensación de simplicidad  y balance, lo cual refleja el movimiento hacia la claridad, más zen.
Los más comunes diseños centrados  son o arreglando los espacios de  la fuente (pixeles o porcentaje) o a veces usando el zoom. El beneficio o restricción  del ancho del contenido (particularmente con el zoom, el cual redimensiona  el cambio del tamaño de la fuente) es que el alargamiento de la línea es prevenido de conseguir muy largos o largas ventanas. (Muy largas líneas de texto son menos eficientes).
De todas formas es siempre posible tener una disposición fluida con una orientación centrada, como muestra el sitio  Alternative Energy Store.
En este sitio solo centrar el logo brinda una sensación  amigable mientras todo su amplio contenido está en la ventana.

Efectos 3d usados mesuradamente:

Cada uno de los atractivos usa sutiles gradientes, o brinda barras a  deslizamiento, para crear una suave sensación de espacio en el fondo o para hacer destacar un icono con relieve y sutiles sombras.
Reflexiones y decoloraciones son muy prevalentes, sombras son todavía usadas pero con cuidado.

Suave color neutral de fondo:

Todos los atractivos tienen un simple fondo,  siendo el más popular el blanco y  la escala gris.
Esto brinda una linda, neutral y suave base, al contrario de un fuerte color flash que refleja a  la vista.

Colores fuertes usados mesuradamente:

Un suave y moderno fondo es la perfecta base para atraer la mirada a las características. Colores y tonos fuertes son ideales para atraer la mirada a los más importantes elementos de la página.

Atractivos iconos usados mesuradamente:

Hay un tema importante  aquí: No uses muchos elementos atractivos en la misma página (eso atrae la mirada y desvía la atención del usuario).
Como con los colores fuertes y los efectos 3D, los atractivos iconos y botones, pueden añadir una gran cantidad de brillo y brindar la sensación de una página con una alta resolución. Pero usada en demasía, tendrán un efecto contrario, atestando la página y confundiendo al usuario.

Mucho espacio en blanco:

Hoy en día las páginas web lucen muy frescas, ellas se sienten como si hubieran tomado un suspiro.
A veces imagino tomar un diseño de una página que está muy llena y pegada a un globo, entonces soplo aire en el globo hasta que todo en la página se esfume dejando saludables espacios.

Necesitas espacio alrededor de las cosas para ayudarte a aclarar e identificar elementos.
En general el mayor espacio posible es mejor. Es muy excepcional que yo mire una página y piense –Dios ellos si que necesitan embutir un poco la página.
Por supuesto espacio en blanco no significa estar en blanco. Pero tiene que haber espacio.
Es agradable ver diseños web donde usan apropiados márgenes y espacios bien calibrados  para separar elementos y longitud extra de líneas para ayudar a la lectura.

Texto grande y atractivo:

No estoy diciendo que todo el texto en tu web sea supe grande, de hecho en algunos escenarios el texto pequeño es ideal (tenemos que tomar en cuenta cuando el texto sea un poco pequeño)

Lo que estos buenos diseños muestran que:
HAZ EL MÁS IMPORTANTE TEXTO DE LA WEB MÁS  GRANDE QUE EL RESTO DEL TEXTO NORMAL.

Como otras técnicas de diseños que hemos visto, estas funcionan cuando se las usa con moderación. Si todo tu texto es grande, entonces  nada en tu texto es grande.

Usa texto grande para ayudar a tus lectores a ubicar fácilmente sobre que trata la página, que es más importante y averiguar que es lo  quieren ver despues de encontrar lo que quieren.

Contrata tu planes de hospedaje web con dominio incluido al mejor precio en mexico con okhosting.com