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