El Aumentar Mejora la Obtenibilidad
Uno de los principios absolutamente fundamentales de la filosofía de diseño web es manejar la atención de sus visitantes para que ellos "consigan" su sitio/página web inmediatamente al llegar.
Cuando una página es lo que yo llamo "obtenible", se sabe:
- Sobre qué es el sitio (marca, proposición)
- Qué hay en el sitio
- Qué puede conseguir o hacer aquí
Asi que usted obtiene...
- Que está en el lugar correcto para conseguir lo que busca (o no)
Hay habilidades y técnicas numerosas que contribuyen a alcanzar la obtenibilidad. Necesitamos asegurarnos de que los factores atractivos (tamaño, color, contraste tonal y dinamismo) son aplicados para que el ojo se concentre en el contenido, y sobre todo al contenido más importante primero.
¡Gran Obtenibilidad, Holmes!
Aquí hay una página que lo tiene muy bien. Note como cada elemento "atractivo" en este diseño le lleva directamente al significado. No hay prácticamente nada en esta página que no sea directamente útil o lleno de significado.
Note como todas las áreas llenas de color y de alto contraste (oscuras) atraen su atención directamente hacia lo que trata la página.
Note como puede adivinar sobre qué es el sitio, ¡Incluso a la mitad de tamaño! Es una gran prueba para la obtenibilidad (y aumento).
Obtenibilidad Insuficiente
Éste está totalmente mal, con fuertes contrastes, patrones de fondo dinámicos, y píxeles ocupados todos sacando su atención del contenido pequeño, pesado en texto.
¡Para descubrir lo que hay en este sitio, parece que tiene que preparar una taza de té y sentarse un rato a leer!
Los Factores Funcionan En Relación a los Otros
Por supuesto, todos los factores de diseño funcionan en relación a los demás. No puede hacer que todo brille y resalte, o nada brillará o se resaltará. Todos podemos reconocer diseños de páginas web que resaltan demasiado o usan demasiados colores brillantes que saturan al ojo, resultando en poco beneficio.
Observe este diseño, saturado sólidamente con colores intensos.
¿Dónde comienza mirando?
¿Cómo comienza a darse cuenta si este sitio es lo que busca?
Aumento Paso Uno: Agrandando
En el diseño web de hoy, más y más diseñadores se están dando cuenta del beneficio de los elementos claves del diseño de "aumentar", usualmente el texto principal e imaginería que presenta la proposición principal, relacionada con el contenido. Esto le da a la página un punto focal claro, algo para ubicar su ojo a primera vista.
Un punto focal fuerte puede darle también a una página una sensación de confianza y presencia. En la página web principal de Rob Morris, el encabezado principal es muy fuerte, actúa como un logo resaltado, donde la masa ocupada de artefactos de diseño al tope de la página comunican claramente lo que Rob hace.
Un gran contenido introductorio significa que puede decir sobre qué es el sitio de Rob, incluso desde la distancia.
Paso Dos: Ponga sus Aumentos en Capas
Aumentar va más allá de un punto focal simple. Se aplica a múltiples capas de significado. ¿Qué ve primero, y qué es lo que le dice? ¿Qué es lo siguiente que ve, y qué agrega al significado?
Sus diseños web deben funcionar de la misma forma que un periódico, que inicialmente apunta a atraer su atención con un titular y una foto, luego sigue con pequeños encabezados que le dan más información sobre lo que hay en oferta.
Cualquier página tiene un sólo punto focal, el elemento más grande, más resaltado y más legible, que actúa como un gancho visual para atraer su atención a su llegada. Ya sea texto o imagen, este contenido debe decir el mínimo esencial que necesito saber para darme cuenta sobre qué es el sitio.
Una vez que tengo eso, debo ser capaz de hojear el resto de la página, mirando a los objetos aumentados en segundo nivel, que me permitirán entender un poco más, aún sólo escaneando en lugar de leer.
Finalmente, debo usar un tercer nivel de sub-encabezamiento, o comenzar a elegir los principales textos de los párrafos, para comenzar a ubicar lo que realmente me interesa.
Un consejo aquí es chequear que sus capas funcionen juntas en un orden lógico, agregando progresivamente información un poco más útil.
Esta plantilla de clicss muestra grandes pasos abajo claros desde el mensaje principal hacia los encabezados de los copies.
La clave aquí es usar unos pocos niveles de significado, que deben corresponder a la primera mirada, la segunda mirada, entonces a la lectura más cercana.
Crear distinciones de tamaño claras entre cada una (así que no use demasiados niveles de encabezados ya que no será capaz de diferenciarlos fácilmente). Además, asegúrese de que no tiene una página llena de encabezados, ya que sólo lucharán por la atención, resultando en un lector cansado.
Me encantaría ver que más sitios se dan cuenta de los beneficios de aumentar el contenido clave. Es demasiado común ver páginas que suelen tener un foco claro, pero donde todo el contenido es tratado igual, resultando en una página que el ojo recorre una y otra vez sin satisfacción. La experiencia puede ser cansadora, y es muy probable que el visitante no pueda encontrar el siguiente paso adelante, lo que simplemente significa menos éxito.
Aquí hay algunas ilustraciones de diseños de páginas web que no lo tienen claro.
Algunos Problemas Más
Sacando al Ojo del Contenido
Este diseño incorpora una cantidad de prestaciones de diseño visualmente atractivas, en forma de colores fuertes, bordes altamente contrastantes y formas dinámicas. El problema es que todas éstas son propiedades de "amueblado de pantalla" permanente (p.ej. material que es parte de la plantilla de la página general), y como el contenido es relativamente ligero con prestaciones más pequeñas, está totalmente saturado.
El ojo lucha por concentrarse en el verdadero valor de la página, porque es atraído por elementos alrededor de los bordes del contenido.
para web hosting en mexico recomendamos okhosting.com, donde tambien puedes registrar tu dominio mx, al mejor precio.
Demasiado Texto Sin Encabezados Legibles
Este ejemplo sufre de confiar sólo en el cuerpo de texto. El resultado es una página que no es escaneable. Los encabezados no son los suficientemente grandes con respecto al cuerpo de texto, y no puede escanear fácilmente.
Ésta página web es simple, pero hay demasiado texto no diferenciado, lo que significa que necesita leer y no puede escanear.
La Sobrecompresión Niega el Aumento
Un problema común es hacer todo igualmente pequeño para obtener todo el contenido sobre el doblez, como en éste ejemplo. Cuándo reduce todo en tamaño, no puede ir más allá de un mínimo razonable, y combinado con una compresión extra, es difícil de diferenciar los elementos clave con un tamaño incrementado.
El sitio Simplenet intenta tener toda la página sobre el doblez, resultando en un contenido sobrecomprimido. Mostrar más información puede reducir las chances de comunicación, si sacrifica niveles de aumento distinguibles.
Sobre-Aumento - ¡No puede aumentar todo!
37Signals ha estado a la vanguardia del diseño web simple, sólido y directo, pero encuentro su reciente rediseño sobreaumentado. Tenemos una cantidad de grandes (aumentados) elementos, todos compitiendo por atención, y no sé por dónde empezar. El balance de colores, tonos, y tamaño resultan en nada diciendo "Comience aquí para saber sobre qué es esta página".
Para ser más analítico, creo que el verdadero problema aquí es que hay demasiados objetos aumentados en la escala de aumento.
El encabezado "A Better Way To Work" es probablemente el gancho principal, pero entonces el texto de la introducción por los productos 4x, junto con los nombres de los productos, y también el párrafo comenzando "Cada día..." son casi igual de grandes. Podrían constituir cada uno un aumento de nivel uno en su propio derecho. Son demasiado cercanos en escala al encabezado principal real, lo que confunde el lenguaje visual.
En la nueva página principal de 37 Signals, se ve como que todo está aumentado, lo que es casi lo mismo que no aumentar nada.
La página no es entendible, incluso cuando se comprime como aquí; pero la falta de un "gancho" visual o punto de comienzo reduce la facilidad de escaneo.
Paso 3: Aumentar Contenido Dentro de Sus Límites
Una vez que su página tiene el rango correcto de niveles de aumento, y un número apropiado de datos en cada nivel para permitirme hojear la página y hacerme una idea rápida sobre de qué tratan, hay un siguiente nivel de aumento que puede aplicar para optimizar el tiempo del ojo en su contenido clave aún más.
Vea estos ejemplos de contenido. ¿Qué tienen en común?
Lote de fotos promocionales de la página principal de iStockPhoto.
Hay fotos más variadas en Veer Europe
Lo que puede ver en estos otros medios de diseño profesional es cómo el contenido relevante ha sido aumentado para llenar el espacio dispuesto para él.
En el caso de las fotos, el fotógrafo o editos recortará la imágen para asegurarse de que todo el contenido relevante con significado es mantenido y optimizado, mientras que la información que potencialmente distraiga es quitado.
Con los vehículos, el diseñador comienza con un lienzo de tamaño fijo. Los logos para estos negocios han sido agrandados para usar tanto espacio como sea posible, maximizando su impacto y notabilidad
Carteles para camionetas de Harris Signs (UK)
Cómo Usar Este Efecto en el Diseño de paginas Web
Cuando tiene algún contenido visual altamente relevante que sus visitantes necesitan tener, primeramente recorte o edite los bits innecesarios (fondo, otra gente).
No sienta que tiene que mantener el formato o límites de cualquier foto original. Los editores de fotos saben que usted puede contar historias completamente diferentes seleccionando una porción diferente de una imagen.
Observe este impresionante diseño de Nick Finck.
Pienso que la página principal de Nick es una obra de arte del aumento. Le dice exáctamente lo que necesita hacer a primera vista (y no más). Otros contenidos y opciones de navegación son reducidos en alcance pero maximizados en tamaño & notabilidad. ¡Excelente trabajo!
No hay prácticamente nada en la página que no esté lleno de contenido. El efecto resultante es un sitio en el que simplemente tiene que creer. El contenido es tan llano, frontal y claro que los valores de la marca de honestidad y trato directo brillan.
En el límite opuesto del espectro, aquí hay otro sitio simple pero efectivo que es deliberadamente mucho más clásico en estilo.
Observe como las pinturas clásicas son aumentadas a una presencia óptima en el sitio de Jesús de Cameron Moll, resultando en un gran balance de elegancia e impacto visual.
fuente:
webdesignfromscratch.com
traduccion profesional :
Ismael Rodríguez
Okhosting Translations
