Dirección de contenido visual lo que necesita saber
los dirección visual del contenido Es un aspecto menos discutido pero crucial del diseño web de alta conversión. Cada visitante "absorbe" un nuevo sitio en la carga de la primera página, ya sea que lo hagan conscientemente o no.
La estética juega un papel, pero se trata más de la sensación general del diseño. Este sentimiento puede verse afectado por espacios en blanco, tipografía, simetría, pero principalmente relaciones entre elementos de página.
Los diseñadores quieren que los visitantes permanecer en la pagina y seguir desplazándose capturando su atención y manteniéndolos interesados en el sitio. Los principios de diseño siempre deben centrarse en función antes de forma. Esto significa que el diseño debe complementar el contenido, No lo empujo como una ocurrencia tardía.
En este post, me gustaría mostrarte algunos consejos sobre cómo puedes Mejora tus diseños y flujos de contenido visual. en tu sitio.
Centrarse en la composición
Cada pieza de un sitio web se construye sobre el diseño general. Este diseño general crea una composición que sigue las reglas de la teoría Gestalt que establece que El todo es siempre mayor que la suma de las partes..
Las áreas individuales de una página se unen para formar un todo. Los elementos de diseño necesitan construir un atracción gravitatoria en el contenido; todo en la página debería Naturalmente guíe a los visitantes hacia abajo hasta que lleguen al final de la página..
Es por esto que las relaciones entre las diferentes partes del contenido (imágenes, texto, botones, etc.) son muy importantes para el diseño..
Tu objetivo debe ser animando a la gente para navegar por el sitio desde su propia inclinación. Es más fácil decirlo que hacerlo, pero puedes aprender mucho con estudiando ejemplos reales.
La página de inicio de Monkop es un gran ejemplo de jerarquía visual con tanto texto como visuales. Se utiliza mucho espacio entre los elementos, y la tipografía complementa las ilustraciones vectoriales de marca..
Mientras te desplazas, te darás cuenta. bloques de página horizontales rectas Dividido por colores, bordes y gráficos. Estos están construidos con patrones de diseño en mente para ofrecer consistencia a lo largo de la pagina.
Hacia el fondo, encontrarás un división de dos columnas Con imágenes en un lado, texto en el otro. Las imagenes tambien intercambiar lados en un patrón de derecha-izquierda-derecha-izquierda. Esto llama la atención, y rompe la monotonia de la página típica mientras todavía manteniendo un flujo natural en el contenido.
UNA similar diseño estético se puede encontrar en el sitio web de Picjumbo, una página de inicio para un complemento de fotos para usuarios de Photoshop y Sketch.
Los lugares de la página de inicio se centran en el logotipo y el video de vista previa. A medida que te desplazas, notarás animaciones personalizadas que se mueven a lo largo de la página. Esta animacion realmente capta la atención, y consigue el espectador interesado en mantener el desplazamiento.
En general, la página se siente abierto y fácil de navegar. El contenido es dividido en bloques horizontales Con tipografía nítida e iconos limpios..
Considere la forma en que diferentes elementos de la página. equilibrio juntos, El espacio entre los elementos, el contraste entre los colores y las diferentes formas. Todas estas cosas juegan un papel en la composición general. Cada sitio naturalmente atrae un cierto peso sobre el contenido.
No hay una respuesta absoluta porque es diferente para cada sitio. Por ejemplo, Algunos enlaces de navegación se ven mejor cuando son grandes y de gran tamaño.. Otros encajan mejor cuando están pequeño con letras mayúsculas.
Te sugiero que estudies otros sitios web en tu nicho. Realmente analizar cómo se ponen juntos. Incluso intente reconstruir diseños para ver qué elementos finalmente hacen que el diseño se "junte".
Tipo de diseño importa
La forma en que diseñes tu tipografía será afecta la dirección del contenido en tu sitio. Esto tiene que ver con la jerarquía de tipos y la Estilos de diseño de diferentes elementos de la página. como párrafos, encabezados, listas con viñetas, citas y elementos de diseño especiales como columnas o tablas.
Visuales También puede afectar el diseño, por lo que es una buena idea diseñar contenido con una progresión natural. Escribe contenido de una manera que fluye por la página, y mantiene a la gente leyendo a través de cada párrafo.
La mejor herramienta que tienes a tu disposición es tu ojo para el diseño. Aprenda a reconocer las diferencias en los elementos tipográficos y cómo se relacionan con otros elementos de la página. Crear relaciones entre las secciones de la página para distinguir las áreas de contenido..
Algunas cosas que podría considerar:
- Tamano del texto
- Familia tipográfica
- Contraste de color
- Relaciones de sección de página
- Altura de línea y márgenes de párrafo.
- Espacio entre letras y mayúsculas / minúsculas
Por ejemplo, mira la página de inicio de Campaign Monitor. Los enlaces de navegación superior utilizan mayúsculas con letras pequeñas. Otros encabezados en la página sigue este mismo diseño de mayúsculas cual crea un sentido de uniformidad.
Otros encabezados más grandes en el sitio son mucho más prominente, Y realmente saltan de la página. Con solo mirar un diseño de cabecera típico, debería ser fácil di la diferencia entre un encabezado y su copia de cuerpo emparejado.
Los estilos de diseño tipográfico en Campaign Monitor son exquisitos, y mezcla naturalmente en el diseño. Se necesita práctica para lograr un resultado como este, pero cuanto más lo intentes, más fácil será.
Para aprender un poco más, recomiendo altamente los siguientes enlaces:
- Principios de diseño: peso visual y dirección
- Trabajando con peso visual en tus diseños
- 19 factores que impactan el equilibrio compositivo
Contenido guía
Entiende eso diferentes tipos de sitios web tener diferentes metodos Para guiar a los visitantes a través del sitio. Por ejemplo, las páginas de destino quieren guiar a los visitantes con trocitos de información, iconos pequeños, capturas de pantalla, y testimonios.
Otros sitios como los blogs no suelen llevar gente a la página de inicio a la vez. La mayoría de la gente aterrizar en una página de artículo, por lo que los diseños de entradas de blog están destinados a resaltar el titular, y dibujar personas más en el contenido. Aquí es donde entra en juego la calidad de la redacción publicitaria porque quiere que los lectores se queden sin palabras..
Necesitan redes sociales y aplicaciones web. experiencia de usuario de calidad, así que ese es un tema ligeramente diferente, pero considera cómo el feed de Facebook está diseñado para Fomentar el desplazamiento y la interacción del usuario..
Los métodos de diseño que emplees para que la gente navegue por el sitio cambian con el tiempo. Pero en general, tu objetivo es guiar a los visitantes con una dirección de contenido visual.
Echemos un vistazo a un página de destino y un diseño de blog para detectar las diferencias.
Cactus es un generador de sitio estático para OS X. Su página de inicio sigue de cerca el estilo de diseño de Apple - Un montón de espacios en blanco y fuentes delgadas sans-serif.
El contenido se organiza en columnas, bloques y trozos de texto con gráficos simples. Estas mismas estéticas son común con los productos de Apple, para que los usuarios de Mac disfruten este estilo de diseño.
La información sobre el producto, incluidas las características y la configuración, se encuentra en la página de inicio. La pagina en si alienta el desplazamiento a través de contenido único, iconos básicos y un patrón de columna alternativo de bloques de contenido izquierdo / derecho.
El objetivo aquí es proporcionar información a Usuarios existentes, y vender usuarios nuevos la idea de cactus.
Ahora compare ese diseño con la página de inicio de The Next Web. El contenido es mucho más esporádico en la página de inicio de un blog, porque hay muchos temas diferentes.
Los rectángulos crean un sistema de cuadrícula que encapsula múltiples publicaciones en un solo diseño. El objetivo aquí es obtener usuarios leyendo contenido en el sitio. No importa si los visitantes descargan algo, pero sí importa si quédate para leer algo.
La manera de hacer que la gente lea es con fotos geniales y titulares pegadizos. TNW hace un gran trabajo de esto, y su diseño es construido para mantener a la gente navegando con miniaturas de publicaciones relacionadas en la barra lateral y el área de contenido posterior.
Guiar a los visitantes a una acción en particular es diferente en cada sitio. Pero puede aprender mucho estudiando qué hacen otros sitios exitosos y aprendiendo a copiar..
Confía en tus ojos
Las propiedades de diseño individuales pueden explicarse analíticamente, pero la implementación cambia para cada sitio. Una imagen de héroe con un enlace "Desplazarse más lejos" no realiza lo mismo en todos los sitios web.
Aprender a diseñar es mucho proceso visual. Tu ojo para el diseño es el aspecto más importante. Necesitas ver las cosas correctamente para identificar esto jerarquía visual. Si puede verlo en otros sitios web, podrá replicarlo en sus propios sitios..
El mejor consejo que tengo es solo confía en tus ojos. Crea una lista de tus sitios web favoritos y dedica 5 minutos a explorar cada uno. Escriba sus elementos favoritos en la página y cómo afectan el diseño. Esto te ayudara Interiorizar estos conceptos desde una perspectiva UI / UX., en lugar de la perspectiva de un usuario.
Además, no tengas miedo de probar cosas! Nadie tiene buen diseño sólo leyendo artículos sobre diseño. Sí, ayudan, en realidad pueden ayudar mucho. Pero tu necesitar a Crea cosas desde cero para aprender que trabajos y qué no hace.
Entrena tu ojo estudiando los diseños de sitios web que te gustan y recrearlos. Con el tiempo, creará una biblioteca de patrones en su mente que facilita mucho el diseño de nuevos sitios.
Terminando
Con suerte, estos consejos lo ayudarán a comenzar y le darán una hoja de ruta básica a seguir. No es fácil convertirse en un diseñador web, pero el mundo necesita talento y nunca ha sido tan fácil enseñarte estos conceptos fundamentales..
Estudiar Los mejores ejemplos de sitios web con elementos de página que disfrutas.. Entrenar su ojo para reconocer las relaciones, y rápidamente desarrollar las habilidades necesarias para reproducir exactamente esas relaciones en tu propio trabajo.
