Diseño web, accesibilidad, usabilidad, posicionamiento y optimización web – AlmacenPlantillasWeb Blog

Resumen traducido del artículo Web 2.0 how-to design style guide – London web designers (Scratchmedia) de Scratchmedia.

En este tutorial, se describen varios elementos comunes de diseño gráfico en los estilos de diseño de la web 2.0.

Resumen de los aspectos tratados en el artículo

La siguiente lista es un resumen de muchas de las características comunes de las web 2.0:

• Simplicidad
• Principios de Diseño
• Menos columnas
• Sección top separada
• Separación clara de las zonas de la página
• Navegación sencilla y clara
• Logotipos
• Aumentar el tamaño del texto
• Textos introductorios gruesos
• Colores fuertes
• Texturas, superficies y efectos
• Degradados
• Reflejos
• Iconos
• Destellos

---

Simplicidad

“Usar solo las funcionalidades que sean necesarias para lograr sus fines”

El diseño web es más sencillo que nunca, y eso es una buena cosa. El diseño 2.0 es diseño focalizado, limpio y simple; lo que no significa minimalista.

Sencillez: no quiere decir que todos los sitios web debería ser mínimalistas, sino que debemos utilizar como las características que sean necesarias para lograr lo que necesita para alcanzar. Dadas dos posibles soluciones a un problema, el más simple es mejor.

Simplicidad significa:

Utilice tantos píxeles como usted necesita, en cualquier forma que usted necesita, para facilitar la comunicación que tiene que pasar.

Éstos son algunos ejemplos en los que se puede apreciar como los elementos innecesarios han sido eliminados en el diseño:

El resultado es que e usuario tiene que buscar en el contenido, de forma que se encuentra interactuando con la pantalla.

¿Por qué la simplicidad es buena?

• Los sitios Web tienen metas y todas las páginas web tienen propósitos.
• La atención de los usuarios es un recurso finito.
• Es el trabajo del diseñador ayudar a los usuarios a encontrar lo que buscan.
• Los elementos de la pantalla atraen la mirada. Cuantos mas elementos se incluyan, más probable es que el usuario no encuentre los contenidos principales.
• Tenemos que permitir la comunicación segura, y también tenemos que minimizar el ruido. Esa es la economía, o la simplicidad.

Hay aspectos importantes para lograr el éxito con sencillez:

• Eliminar componentes innecesarios, sin sacrificar la eficacia.
• Probar las soluciones alternativas que permitan alcanzar el mismo resultado con más sencillez.
• Se deben utilizar detalles visuales en líneas, palabras, formas, colores para comunicar la información pertinente, no sólo para decorar.

---

Principios de Diseño

En la actualidad, la práctica totalidad de sitios web se realizan utilizando zonas centradas en la pantalla del navegador. Relativamente pocos diseño se desarrollan a pantalla completa (líquido) o alineado a la izquierda / de tamaño fijo, en comparación con hace unos años.

¿Por qué un diseño central es bueno?

El diseño “2.0″ es sencillo, audaz y honesto. Un diseño centrado puede percibirse más simple, audaz y honesto.

Con esta perspectiva, estaremos usando menos para decir más.

Cuándo y cómo utilizar un diseño central

El autor del artículo aconseja:

Utilizar un diseño central a menos que haya una buena razón suficientemente buena para no hacerlo.

---

Menos columnas

Años atrás, los sitios con 3 columnas eran los más habituales, y las página a 4 columnas no eran infrecuentes. En la actualidad, lo más común es utilizar diseños a 2 columnas y, como máximo, a 3.

¿Por qué usar menos columnas que es bueno?

Menos es más. Utilizando menos columnas se da una imagen de mayor sencillez, audacia y honestidad. Nos estamos comunicando con menos información y de una forma más clara.

Un par de ejemplos:

Apple es otro de los líderes en cuanto a elegancia y sencillez. Este diseño típico de Apple indica que el diseñador se preguntó: “¿Cuántas cajas / columnas / líneas se necesitan realmente?”. Luego se ha eliminado con valentía los elementos innecesarios, y el resultado es sin duda el más limpio y la comunicación la más eficaz.

37Signals siempre han estado en la parte delantera cuando se trata de cuestionar el statu quo y dar con respuestas simples. En este caso, utilizan 2 columnas. Este es un caso de estudio de caso. Permite comunicar el mensaje y no añade nada que pudiera entorpecer esto.

Este tipo de diseño de obras de muy, muy bien. Cada vez que la experiencia de diseño sencillo de Apple, más me convenzo de que su enfoque se Zen es el santo grial del diseño.

Este diseño típico de Apple indica que alguien ha honestamente le preguntó: “¿Cuántas cajas / columnas / líneas de lo que realmente necesita?”. Luego se ha editado con valentía a los elementos innecesarios, y el resultado es sin duda el más limpio, la comunicación más eficaz.

¿Cómo elegir el número de columnas?

Aquí el autor del artículo es muy claro:

“Definitivamente me gustaría recomendar no usar más de 3 columnas, simplemente porque no debe usar más de lo que usted necesita.”

Siempre hay excepciones, aquí van algunos ejemplos de más de 3 columnas que se usan de manera eficaz:

Blog de Derek Powazek: usa 3 columnas para la sección principal de su blog, pero 4 más abajo.

La sección inferior es una especie de pick & mix, donde la abundancia de columnas hace hincapié en el mensaje “Toma lo que te gusta” .

Amazon (Reino Unido) tiene dos columnas laterales, y los productos organizados centralmente en 3 columnas adicionales.

Funciona porque el propósito de cada columna se desprende de su diseño. La columna de navegación a la izquierda es, sin duda, el menú de navegación y la columna de la derecha es “otras cosas”. Los productos en el centro están claramente separados por espacios en blanco, por lo que no abruman.

Este es un ejemplo de diseño erroneo:

All Things Web2.0 utiliza 4 columnas: 2 columnas laterales y 2 columnas centrales.

La desventaja de este diseño es que no sé por dónde empezar a buscar. Como hemos visto, la página de Amazon se plantea de una manera similar, con la diferencia de que el diseño te ayuda a identificar lo importante de cada área de la pantalla.

---

Sección top diferenciada

Esto significa hacer que la parte superior de la pantalla (la marca principal y zona de navegación) sea diferente del resto (el contenido principal).

Por supuesto, no hay nada nuevo acerca de este enfoque. Es una buena idea, y ha sido utilizado para siempre. Sin embargo, está siendo usado ahora más que nunca, y la distinción es a menudo más fuerte.

¿Por qué diferentes secciones de arriba son buenas?

La parte superior dice: “Aquí está la parte superior de la página”. Suena obvio, pero el usuario se siente bien al saber claramente que la página se inicia.

Asimismo, se inicia la experiencia de la página con una declaración fuerte, audaz. Esto es muy acorde con el espíritu que se quiere transmitir con una web 2.0.

Es una buena idea crear un espacio libre en la parte superior de un diseño web para ubicar con decisión el logotipo de la página y los menús de navegación.

Ponga siempre el logotipo de la página en la parte superior de la pantalla. Es recomendable ubicar el menú de navegación principal después de él.

La sección superior debe ser visualmente diferente del resto de los contenidos de la página. Para esto puede utilizar un bloque de color sólido o con tonos diferentes a los del resto de la página.

Un par de ejemplos:

---

Separación clara de las zonas de la página

Estas zonas incluyen:

• Navegación
• Fondos y canvas
• El área de contenido principal
• Otras zonas
• Llamadas y enlaces cruzados

La manera más segura de hacer esta diferenciación es mediante el uso del color, pero el espacio en blanco puede ser también eficaz. El riesgo con un color fuerte es que llama la atención, por lo que puede desviar la atención de otros elementos de la pantalla correspondiente. Utilizando contenido simplificado en espacios blancos, se consigue una lectura más sencilla, relajada y sencilla de visualizar.

---

Navegación sencilla y clara

La zona de navegación global del sitio web, debe aparece en cada página como parte de la plantilla y debe ser claramente identificable como el bloque dedicado a navegación. Debe ser fácil de interpretar y de seleccionar.

• En diseño web 2.0 se suele hacer un bloque de navegación de gran tamaño, con letras en negrita, limpio y claro.
• Los enlaces dentro del texto se suelen diferenciar claramente del texto normal.

¿Por qué es mejor una navegación sencilla?

Los usuarios deben ser capaces de identificar las zonas de navegación, que, por otra parte, les ofrece información importante como:

• ¿Dónde están (en el contexto del sitio)?
• ¿Dónde se puede ir desde aquí?
• ¿Y qué opciones que tienen para hacer cosas en el sitio web?

Siguiendo el principio de la simplicidad, y la reducción general de ruido, las mejores maneras de aclarar la navegación son:

• Posicionar los enlaces de navegación en bloques distintos del contenido principal
• Diferenciar con colores y tonos
• Crear elementos de navegación grandes y audaces
• Uso de texto claro

Cómo mantener la navegación de un sitio web sencilla:

Basta con recordar que los bloques de navegación deben ser claramente distinguibles de las zonas de no-navegación. Sólo hay que seguir las directrices anteriores, en relación con la diferenciación a través de la posición, el color y la claridad.

---

Logotipos

Los logotipos en negrita aporta una imagen de marca clara y audaz. Según los principios generales del diseño estilo web 2.o, los logotipos deben ser bastante grandes:

¿Cómo deben ser los logotipos?

Su logotipo debe:

• Trabajar visualmente en su contexto principal, y cualquier otro uso en el que puede ser usado (como folletos o camisetas?)
• Ser reconocible y distintivo
• Representar la personalidad de su marca y sus cualidades en el primer visionado

---

Aumentar el tamaño del texto

El estilo de diseño web 2.0 suele utilizar un texto de mayor tamaño comparado con los antiguos estilos de diseño web. Con esto se persigue, por una parte, dar notoriedad a los elementos de mayor importancia en la página y, por otra, hacer los contenidos más accesibles para los usuarios.

Respecto a esto último, el efecto conseguido no solo mejora la experiencia de los usuarios con impedimentos visuales, sino también a las personas que utilizan pantallas de LCD en la luz del sol, gente que se sienta un poco más lejos de la pantalla, etc.

¿Cuándo y cómo utilizar texto grande?

El texto de un tamaño grande hace la mayoría de las páginas más útiles para más gente, así que es una buena cosa.

Por supuesto, el tamaño es relativo. No se debe tomar un sitio web cargado de contenidos y aumentar el tamaño de todos los textos de todas sus páginas. Esto podría ser contraproducente. Con el fin de utilizar un texto de un tamaño mayor, en primer lugar hay que “hacer sitio” mediante la simplificación y la eliminación de elementos innecesarios.

También se debe seleccionar que contenidos de las páginas deben tener un tamaño mayor que el resto. Se debe aumentar el tamaño del texto de aquellos contenidos que se consideren más significativos y útiles para la finalidad del sitio web. Si es necesario ubicar una gran cantidad de información en una página, y la importancia de todo el contenido es relativamente igual, tal vez, se puede conservar todos los tamaños de los textos pequeños.

---

Textos introductorios gruesos

Continuando con los aspectos relativos al texto, el estilo “2.0″ suele utilizar introducciones a los bloques de texto con tamaños de fuente grande y resaltadas en negrita.

Con este objetivo se utiliza la técnica del “elevator pitch” o “mensaje principal“:

“Un elevator pitch es un resumen de una idea para un producto, servicio o proyecto. El nombre refleja el hecho de que un elevator pitch debería ser posible entregar en el lapso de tiempo de un viaje en ascensor, es decir, en un máximo de 30 segundos y en 130 palabras o menos. “

Wikipedia

Utilizando este concepto, los diseñadores quieren un gran control sobre el impacto visual de la página, sobre todo al comienzo de la experiencia de navegación. Ejemplos:

¿Cuándo y cómo utilizar una introducción de texto en negrita?

Este tipo de recursos se debe utilizar cuando se tiene un mensaje simple que usted quiere ser visto en el primer impacto visual, y cuando se trate de un titular.

Se debe utilizar en un contexto en el que predomine la sencillez, de forma que el mensaje sea más impactante y claro. El fondo del texto debería se plano y sin elementos que le quiten la preponderancia.

---

Colores fuertes

El brillo y los colores fuertes atraen la atención. Deberían ser utilizados para dividir la página en secciones claras, y para destacar los elementos importantes.

Cuando se tiene una página web sencilla y con poca carga de elementos de diseño, se usar un poco de color intenso para ayudar a diferenciar las áreas de interés y llamar la atención sobre los elementos que desea que el visitante vea desde el instante.

Ejemplos:

The Treo Mobile site utiliza 3 áreas de colores fuertes para destacar y anunciar las 3 principales zonas de su sitio web.

El color del fondo claro hace destacar que las zonas coloreadas contienen los principales elementos de las páginas. Por otra parte, el texto de gran tamaño y en negrita, así como los iconos, ayudan al visitante a entender rápidamente el significado de los contenidos de cada una de las zonas, de forma que, desde un primer instante, este pude decidir cual es de su interés.

Colorschemer divide la página en bandas con colores intensos, brillantes. Para ello, además, utiliza fondos de colores neutros, para añadir predominancia a los bloques.

Apple’s design utiliza una combinación equilibrada de tonos, de efectos enriquecidos y de colores para llamar la atención del visitante.

Las áreas de intenso color oscuro y fuerte se utilizan con moderación, para seleccionar el contenido importante.

El color también es un gran medio para comunicar los valores de marca

Aquí, el color no es brillante, pero es fuerte, en parte debido a la cantidad de verde utilizado. Este diseño utiliza verde para comunicar los valores de “calidad” y “salud”.

Hay que ser cuidadoso al utilizar colores intensos en zonas cercanas a contenidos de gran interés para la finalidad de la página:

En este ejemplo, el diseño de la página se ve comprometido en su eficacia por el uso de grandes áreas de color intenso fuera del área de la página principal.

El resultado es que el ojo es atraído a estas zonas, en detrimento del contenido principal de la página.

Recuerde que el recurso de los colores fuertes debe utilizar con moderación:

Si se utilizan colores fuertes para atraer el ojo, el diseño sólo funciona si hay un montón de área que no tenga mucho color.

Si todo está tratando de atraer el ojo, entonces el ojo sólo se confunde, y el sitio se siente confuso y caótico.

---

Texturas, superficies y efectos

La mayoría de los sitios de estilo web 2.0 hacen un sutil uso de efectos 3D para aumentar la sensación de calidad del diseño.

Los efectos de superficie realistas (como el uso de las sombras, los degradados y reflejos) ayudar a hacer una interfaz visual que se perciba más real, sólida y trabajada.

También nos recuerda ciertas cualidades de objetos del mundo real, tales como gotas de agua, botones de plástico brillante, y pisos de mármol. Hacer que los objetos se vean sólidos y reales puede hacer que el mensaje que pretendemos transmitir con la página se vea “tangible”.

¿Cuándo y cómo utilizar las superficies ricas?

La regla de oro aquí es utilizar con cuidado, y no exagerar, estos efectos no debe aplicarse a todo.

Al igual que cualquiera de las demás técnicas disponibles en diseño gráfico, una superficie rica puede agregar valor a su diseño cuando se utiliza de manera sensible y apropiada.

Los efectos 3D también puede hacer que los elementos parecen estar fuera de la página, pero sólo si el resto de la página es relativamente plana.

Evite hacer su diseño completo basándose en efectos 3D:

• Es más trabajo
• Se aumentará el tamaño total de los objetos de la página
• Puede desviar la atención del usuario respecto a los elementos importantes de la página web

---

Degradados

El diseño Web 2.0 hace un uso intensivo de los degradados.

¿Por qué son tan útiles los degradados?

Los degradados nos permiten suavizar zonas que de otra manera darían un aspecto plano en cuanto al color y los tonos.

Tenga en cuenta que los gradientes suelen funcionar mejor cuando se yuxtaponen con áreas de color plano o de tono.

Algunos ejemplos:

Los degradados pueden ser utilizados para hacer transiciones de un color a un tono más claro o más oscuro.

En los fondos de página, también puede crear una ilusión de la distancia.

Una combinación común es degradado azul a blanco, que evoca el efecto de perspectiva aérea, crear el sentido de que el color se desvanece lejos hacia el horizonte.

En la página de Curve2 los degradados son más eficaces, ya que cada uno se coloca junto a una sección de color blanco o gris plana.

Es común encontrar degradados para mejorar el color de base (con combinación de efectos como el color de las quemaduras o superposición en el Photoshop), que crean sutilmente diferentes matices.

Aquí, el color verde de relieve es más cálido y amigable que el color más oscuro de base. El efecto global es tanto más suave y más rico.

---

Reflejos

La ilusión óptica de los reflejos es una de las aplicaciones más comunes en los degradados.

Estos generalmente se utilizan de dos formas:

• Principales causado por la luz que refleja en superficies brillantes

Ejemplos:

Los clásicos pulsadores de plástico brillante de Apple.com, todavía en uso hoy en día.

Permiten destacar el uso de las opciones de la barra de navegación mediante el efecto de una fuente de luz por encima de las pestañas, junto con un brillo interior, difusa que crea el efecto de plástico.

Este botón brillante de cafepress.com utiliza un reflejo redondeado que sugiere una fuente de luz que viene de una amplia superficie circular.

Este botón la web de Mediatemple tiene un reflejo más difuso, lo que sugiere un acabado de cristal mate.

• Este efecto “tabla brillante”

Este es un efecto realmente bonito, que es tan frecuente hasta ahora, está en peligro de ser utilizado abusivamente, por lo que está cayendo en desgracia para los diseñadores.

En este tutorial se desarrolla una guía de como conseguirlo.

---

Iconos

Los iconos desempeñan un papel primordial en el diseño Web 2.0. En la actualidad se utilizan menos iconos, pero los que incluimos en los diseños web tienen más significado.

Los iconos pueden ser útiles cuando son fácilmente reconocibles y tienen un significado claro. En muchos otros casos, una simple palabra es más efectiva.

Algunos ejemplos:

• Iconos sencillos y claros

• Ricos en detalles

---

Destellos

Se trata de las etiquetas en forma de estrella con las que los diseñadores web intentan hacer notar al visitante de algo importante contenido en las páginas web. Se fundamentan en las etiquetas con las que los comercios hacen notar a sus clientes los artículos de bajo coste.

Su utilización puede ser interesante en un diseño web, siempre que se utilice para llamar la atención sobre algo verdaderamente importante. No se debería utilizar más de una de estas etiquetas por página.

Ejemplos: