Ideas e inspiración para diseñar sitios web

Si le falta la inspiración para diseñar su sitio, no piense más. Si desea ideas para diseñar su sitio web, es mejor que comience a leer esto. Todo comienza con un plan de sitio. Con el plan frente a sus ojos, tendrá una idea más clara sobre el sitio web que desea crear. Este sitio web debe ser visual y eficientemente atractivo: más que hermoso, un sitio web debe alcanzar sus objetivos y lograr resultados. Aquí el compromiso interviene. Las piezas de inspiración y las ideas eficientes de diseño de sitios web 1. Los aspectos de la página podrían hacer que las personas sean hasta diez veces más inclinadas a tomar decisiones rápidas, una página está en tendencias, pero ¿por qué? Su objetivo es presentar solo la información necesaria para tomar una decisión.
Según Smashingmagazine, las personas no leen una página completa para tomar decisiones óptimas. Detente en la primera ocasión que parece alcanzar sus objetivos. Por lo tanto, se ha convertido en la mejor práctica para limitar la información a la cantidad mínima requerida. Y esta información mínima también implica un número mínimo de opciones. Según la ley de Hick, al aumentar el número de opciones, el tiempo de decisión también aumenta (una consecuencia inevitable de aumentar la cantidad de información en un sitio web). La buena dirección es ir al revés.

Fuente 2. Diseño de tarjeta para imágenes estimulantes: una imagen merece 60,000 palabras es buena para los blogs que se mantienen al día con los últimos cambios en el comportamiento de los navegadores web. Se basa en el poder de lo visual. Y va de acuerdo con la práctica habitual de escanear páginas web (no lineales, pero aleatorizadas).
Es precisamente a través del diseño de la tarjeta, la apariencia consiste en varios libros. Cada libro contiene una imagen y una breve descripción, así como un enlace a los detalles sobre el tema. Ejemplos de diseño de tarjetas: las imágenes ayudan a conectarse emocionalmente con los usuarios y tienen el poder de transmitir más información en una presentación sintética. Es por eso que se ha dicho que una imagen vale 60,000 palabras. Para mejorar la potencia de la apariencia de una tarjeta, puede agregar micro interactividad a la tarjeta: efectos de ampliación (que aumentan las imágenes cuando se pasan con el mouse), como o compartir botones al lado de cada tarjeta, etc.

3. El efecto de paralaje enfatiza el contenido y aumenta el compromiso en aproximadamente un 20% en primer lugar, ¿qué es paralelo? El efecto de paralaje consiste en imágenes de fondo que se mueven más lentamente que el primer plano, cuando los usuarios ejecutan una página en un sitio web. Ayuda a concentrarse en lo que es más importante desde un mensaje para transmitir a los usuarios. Un experimento en línea ha demostrado que el paralaje influye en el comportamiento del usuario de dos maneras: la ruta indicativa (frío percibido, claridad percibida) y la ruta de acción (mapeo natural, facilidad percibida). Determina la mayor participación de los usuarios.
Ejemplo de efecto de paralaje aplicado a un sitio web:
En relación con las estadísticas, como dije en el título de esta sección, Paralax Scroll puede atraer hasta el 20 por ciento de los usuarios más involucrados en el contenido de una página, como lo ha demostrado la investigación. 4. Los separadores de contenido pueden generar ingresos con aumentos de hasta 112% son elementos gráficos que delimitan un encabezado / sótano de la página web del resto del contenido de la página. También se utilizan para delimitar claramente las distintas secciones de contenido. En algunos temas de WordPress, estos separadores gráficos pueden tener diferentes formas geométricas (ondas, triángulos, montañas, libro, libro negativo, etc.). Se pueden alinear horizontalmente o verticalmente. El papel de los separadores de contenido es proporcionar a la información una jerarquía y garantizar un flujo de legibilidad. Establecieron un ritmo en una página. “¿Por qué debería estructurarse mi contenido jerárquicamente?” Podrías preguntar. Es mucho más fácil para los usuarios seguir una estructura de contenido clara y lógica e indicar indicaciones para llevarlos a información esencial para ellos. Esto da como resultado una experiencia de usuario mejorada. La mejor experiencia del usuario en un sitio web puede provocar un aumento en los ingresos hasta en un 112%, según un estudio citado por Neil Patel en este artículo.

Aquí hay un ejemplo de divisores de contenido:
Fascinante demostración 5. Algunas ideas simples para diseñar sitios web: el espacio en blanco hace que el contenido sea más fácil de entender con un 20% de espacio en blanco es un elemento clave en el diseño web. Si no sabe qué elementos colocar en un sitio web, a veces no debe ponerlos en absoluto. El espacio en blanco podría ser el mejor elemento que debe usar en esa parte de la página. Tomemos sus efectos uno por uno: el espacio en blanco entre diferentes aspectos y elementos de aspecto guía el aspecto del contenido que rodea. Estos se llaman espacios macro blancos, delimitando los elementos principales en un diseño de página web. La pala blanca entre las líneas de párrafo y el espacio en los bordes superior / derecha / izquierda del texto aumenta la comprensión. Se llama micro espacio en blanco y puede mejorar la legibilidad + comprensión del texto hasta en un 20% (como se estableció prototypr.io). Ejemplo de espacio en blanco “en acción”:
6. Los CTA (exhortaciones) generan conversiones, aproximadamente el 90% de los usuarios leen (después de los títulos) de acuerdo con las estadísticas relacionadas con las exhortaciones, casi el 90% de los visitantes del sitio leen títulos y CTA infantiles. Muchos de ellos no leen nada más. Por lo tanto, la máxima importancia de los CTA. Debe mostrar una buena copia, una copia que se convierte. Pasando más allá de la psicología de los colores (que debe ser roto por el tradicionalismo) y las formas de los botones (que deberían respetar mejor las reglas convencionales), deben ser convincentes.

Hay cuatro dimensiones de CTI que debe considerar al diseñar el sitio web: diseño, mensaje, ubicación y pruebas continuas. Tenga en cuenta el destino y el destino de colocación. Colocación estratégica: Prezi lo invita a “ver cómo funciona” desde el encabezado: 7. Las imágenes de héroes de la atención de gran tamaño, aumentan el interés y aumentan las ventas en hasta un 40% de imágenes de héroes son el primer artículo que las personas ven en una página. Las imágenes grandes que ocupan hasta el 80% de toda la pantalla pueden tener un gran impacto en los usuarios. Primero, instantáneamente capta la atención. Una vez que se capta la atención de los usuarios, puede centrarse fácilmente en el contenido del sitio web.
Las pruebas del sitio de Salomon han demostrado que la fuerza de una imagen de héroe puede aumentar las ventas en aproximadamente un 40%. Así es como se ve su página inicial:

Si vinculamos la imagen con el modelo AIDA y sus pasos de compra, notamos que: 3 de los 4 pasos involucrados en un proceso de compra se cubren simplemente viendo la imagen del héroe del sitio web de Solomon Ecommerce:
Conciencia: aumenta la imagen grande.

Interés: se despierta por la imagen de las personas que comparten el mismo pasatiempo con los visitantes que han aterrizado en la página.
Deseo: la imagen sirve como modelo para las personas que quieren ser como los dos corredores.

Acción.
8. El menú de hamburguesas (porque cambia y refina, podría aumentar las ventas en aproximadamente un 4%) el menú de hamburguesas (menú fuera de la pantalla) se utiliza para la visualización móvil de opciones de navegación, detrás de un icono que tiene este formulario: este elemento de diseño se usa para guardar real Estado, en pantallas móviles más pequeñas. Algunas personas dicen que los menús de hamburguesas no son tan buenos para la experiencia del usuario. Parecen ser bastante contradictorio, porque las opciones de navegación están ocultas detrás de este símbolo, y la navegación en sí está sujeta a un proceso elaborado. Además, es difícil poner características especiales en el frente, cuando verlas depende de hacer clic y expandir el menú de hamburguesas. Si todavía opta por un menú de hamburguesas, considere diseñar una versión óptima de este componente. Esto significa que el icono del menú de hamburguesas (ver arriba) debe ir acompañado de la palabra “menú” o incluso completamente reemplazado por el término “menú”. Dichas versiones del componente han aumentado los ingresos (mostraron pruebas). 9. La tipografía establece los estándares de legibilidad: una condición clave para el empleo (con cifras) sin ser nueva, es esencial seleccionar estilos de impresión para un sitio web y determina la legibilidad del texto. A su vez, la legibilidad influye en la conversión, para bien o para mal. En lugar de proporcionar ejemplos de conversiones maximizadas, cumpliremos con las condiciones básicas para la impresión para mejorar la lectura de los usuarios: la fuente no debe ser inferior a 16 píxeles. De lo contrario, el público abandonaría el sitio, lo que conduciría a la pérdida de ventas.
La longitud de la línea de texto no debe exceder los 50-75 caracteres. De lo contrario, las personas percibirán que el texto es más difícil de leer. La longitud de la sección de texto debe incluir 4 a 5 alturas de línea. De lo contrario, los usuarios percibirán que los párrafos son difíciles de viajar.
Se recomiendan posibilidades para el texto del cuerpo, en lugar de la serie. Sin embargo, tiene permiso para usar estilos decorativos para títulos.
En cuanto al tipo de caracteres (también conocido como Font Family), aquí hay un informe sobre el más popular:
Fuente Los efectos de la tipografía tienen como objetivo hacer que los lectores se sientan inspirados, más motivados y más inclinados a actuar y continuar leyendo (… para hacer una compra). Las fuentes también tienen su propia personalidad y, en algunos casos, incluso pueden hacer que el texto escrito se vea más “serio”. Es parte de por qué Georgia es tan popular, porque puede ir a cualquier tema, desde una revisión del servicio de transmisión hasta blogs ordinarios, sobre el estilo de vida. Más allá de los estándares, no dude en experimentar y ver los resultados. Solo debe conocer las mejores prácticas y anclar estos experimentos en buenos consejos de la investigación ya realizada. 10. Los videos de fondo para el marketing experimental conducen a una mejora de los videos de fondo del 10% o 20% pueden ser innovadores. Si se usa sabiamente. Son buenos para proporcionar experimentos en línea por:
El uso de un producto
Visitando un lugar
Participando en un evento, etc.
Simplemente dicho, son inmersivos. Dan la fuerza básica a las páginas del sitio web. Según el sitio webBudedExpert.com, el uso intencional de un video de video puede conducir a una mejora del 10% o 20% en la participación de las personas con un sitio web. Solo tiene que mostrar el contenido claramente para que un fondo de video no reduzca la legibilidad del contenido. Y es preferible que el video sea único. Aquí hay un ejemplo de un buen uso de un fondo de video: siga insertando un video como fondo o de otro modo puede considerar un enfoque más audaz: para aplicar un fondo de video para toda la página. 11. Otras ideas para diseñar sitios web: los controles deslizantes también pueden crear y también pueden romper el compromiso … las diapositivas presentan imágenes en un flujo, como en un carrusel giratorio. Por lo general, se insertan en los encabezados de la página inicial, con la intención de llamar la atención sobre el sitio y hacerlo con un alto impacto. Son modernos. Y son fáciles de agregar a un sitio web. Ejemplo de diapositiva en una página de inicio del sitio web:
Sin embargo, las diapositivas no parecen clasificarse muy bien en la lista de elementos de diseño de sitios web extremadamente eficientes y cautivadores. Pero, ¿no es posible aprovechar al máximo el impacto visual de las diapositivas y convertir sus desventajas en ventajas? Así es como puede optimizar las diapositivas para una mejor participación:

La primera diapositiva de diapositivas debe ser la más impactante de todas las imágenes
No use una rotación automática de diapositivas; Es aconsejable permitir que los usuarios pasen manualmente a las siguientes diapositivas y solo si eligen hacer esto
Asegúrese de que el control deslizante afecte la velocidad de carga mínima del sitio web. Las animaciones agregan 10 puntos al lado de entretenimiento (el 84% de las personas esperan de un sitio web) las animaciones hacen que el contenido sea más fácil de leer. Esto se debe al aspecto de entretenimiento de estos artículos. Nos gustan las animaciones de texto, porque son divertidas. Nos gustan los botones sensibles al mouse porque atraen y distraen la atención al mismo tiempo.
Según DreamGrow.com, la animación agrega 10 puntos al lado del entretenimiento. Y eso es exactamente lo que los usuarios se esperan de un sitio web. 80% de ellos. Por lo tanto, incluidas las animaciones en su sitio web puede garantizar que más de la mitad de los visitantes que lleguen a su página permanecen en ella para obtener más contenido. Lo que es tan atractivo sobre las animaciones del sitio:
Proporcionan comentarios visuales a los usuarios, de modo que los visitantes se sientan instantáneamente incluidos en el bucle de comunicación.

Proporcionan información sobre cómo usar ciertos elementos en una página (por ejemplo, los botones cambian su color al pasaje).

Es importante considerar cuándo comienza a construir un sitio web, si se siente a gusto por la creación de animaciones (para estos fines). Si necesita crear un sitio web en WordPress, por ejemplo, debe buscar funciones animadas. Por ejemplo, el tema de Mesmeris o el complemento fácil de textura. 13. Gamificación: Entretenimiento + Experimentación, que lidera con un 650% más de compromiso, la gamificación es una forma moderna y completamente válida de estimular la participación con un sitio web. Esta técnica utiliza el factor de entretenimiento para hacer que los usuarios experimenten. Aquí hay algunos elementos de juego que puedes concentrarte: obtener puntos de experiencia, niveles, etc.
Encontrar objetos
Competencia
Pruebas y rompecabezas, etc.
El juego hace que los usuarios se sientan a gusto por explorar el sitio web y más inclinado a percibir el mensaje que su empresa quiere transmitir. Por lo tanto, más compromiso y más conversiones. A continuación se muestra un ejemplo de Interland:

Según un estudio, los registros de interscope han logrado un aumento del 650% en la participación e interacción con el sitio web. Sin embargo, la gamificación implica un mayor nivel de conocimiento de la programación de diseño web e implementación. Asegúrese de que un profesional cree el sitio web para evitar costos innecesarios de hacerlo solo. Le permitiremos estimar qué ROI generar, incluidos los juegos en su propio sitio web, en función de sus propios requisitos y presupuesto. 14. Nuevas ideas para el diseño de sitios web: experiencias virtuales, cuando el 66% de los consumidores desean las experiencias virtuales de compras de realidad virtual determinan el éxito garantizado si la realidad virtual está de acuerdo con uno (o más) de los siguientes aspectos: la realidad virtual es cautivadora. Maximizar el compromiso. E incluso justifica las figuras anteriores. Las primeras 3 estadísticas son particularmente interesantes:
Como el 81% de las personas que intentan contarle a sus amigos al respecto, su sitio web estará sujeto a una maravillosa campaña bucal (la palabra en la boca es una de las técnicas de marketing más efectivas)
Dado que el 73% de Gen Zes dice que están interesados ​​en la realidad virtual, puede apuntar a un gran nicho con un gran potencial de ventas
Debido a que el 66% de los consumidores desean compras de realidad virtual, puede convertir su sitio web en un automóvil electrónico de última generación.
15. Acordeón para varios bienes inmuebles y efecto sorpresa, con hasta un 31% más de compromiso ¿Cuál es primero un menú de acordeón? Es un elemento de control gráfico que reúne elementos en una lista apilada verticalmente. Cada artículo puede ampliarse o restringirse para revelar el contenido asociado con él. Puede haber cero elementos extendidos, uno o más elementos extendidos una vez, dependiendo de la configuración. Este es un ejemplo de un componente de acordeón en una página web: por su diseño, tiene un impacto positivo en la administración de la página web. Los usuarios harán clic y expandirán los elementos solo si están interesados ​​en encontrar más. Es práctico. Y es efectivo. La efectividad es que el mero proceso de expansión de objetos aumenta la curiosidad. Querrá averiguar qué hay detrás de una etiqueta. Y, por supuesto, querrás que el contenido te sorprenda. La curiosidad y la sorpresa son conexiones con los usuarios, emocionales. Según las mediciones, las campañas de comunicación y marketing son más efectivas si atraen más “cerebro” emocional:
Fuente 16. Efecto de desplazamiento para la imagen de micro-interacciones que estimula este tipo de efecto ofrece un aspecto moderno a un sitio web y crea micro-interacciones. Las microinteracciones, a su vez, aumentan la participación de los usuarios con el sitio y hacen que permanezcan más en las páginas de su sitio web. Verifique algunos ejemplos de efectos de superposición de imágenes simples:
17. Entre otras ideas para diseñar sitios web: efectos de sombra de cajas para aumentar la familiarización con un sitio web y, por lo tanto, sus ventas son características de diseño web que se utilizarán cuidadosamente a la ventaja del sitio web. Un elemento prominente que podría beneficiarse de los efectos de la sombra es el botón CTA. Es extremadamente importante diseñarlos correctamente, ya que controla directamente las ventas: un botón CTA debe permanecer en formas tradicionales que indican que este es un botón
Un botón CTA puede tener decoraciones de diseño adicionales, pero estas deben ser secundarias a las formas ordinarias de botones.
Los efectos de la sombra caen en la categoría de decoraciones adicionales. Aquí hay algunos ejemplos de sombras de caja:

El papel de los efectos de la sombra (si se usa coherentemente en un sitio web) podría ser aumentar la familiarización con el sitio respectivo. Y la familiaridad desencadenará conversiones. 18. Menús verticales y acceso directo a todos los elementos importantes en una página Estos menús se muestran verticalmente en una página web y podrían ocupar toda la altura de la página respectiva. Son efectivos, porque podrían proporcionar acceso directo a varios elementos en un sitio web, que si se mostraran horizontalmente (y ocultarían elementos en los menús desplegables). No soy una norma en términos de diseño del menú, por lo que las personas pueden encontrarlos un poco extraños. Debe equilibrar el aspecto inusual con la facilidad de acceso: el descubrimiento de contenido hace que las personas sean más inclinadas a leer y recibir el ejemplo de su mensaje de un menú vertical:

19. Ideas para diseñar sitios web para su participación: efectos del mouse, interactividad y su impacto en las conversiones Los efectos del mouse cubren una amplia gama de elementos, comenzando desde el simple cruce del mouse y pasando a pintura al óleo, órbita del mouse, etc. Son hermosos elementos de interacción, buenos para los usuarios que reciben comentarios visuales del comportamiento de su página, lo mejor para la experimentación y la participación. Un análisis interesante de los efectos del ratón sería la búsqueda del tiempo promedio en una página en un tiempo finito. 20. Galería de productos, una experiencia de uso más consistente, un aumento de las conversiones en las galerías de productos son beneficiosas para los sitios comerciales electrónicos. Ejemplo de galería de productos: puede considerar uno o más de los siguientes:
Las galerías de productos muestran múltiples imágenes de un producto, para informar mejor a los visitantes sobre las características de ese producto.
Muestran imágenes con productos de la misma categoría, para que los usuarios puedan comprar un conjunto de productos en lugar de un solo producto (técnica de venta)
Las galerías de productos pueden proporcionar una experiencia en línea de usuarios con el producto, como en una tienda física; Puedo evaluar mejor un producto, visualizarlo desde diferentes ángulos y experimentar este proceso de evaluación como en una tienda física (por ejemplo, la moda y la ropa, una galería de productos puede implicar mostrar un vestido en un muñeco, etc.)
No hace falta decir que una experiencia de uso más consistente conduce a una selección y compra de productos más rápida. 21. Ideas de diseño efectivas para sitios web: informe de contraste para una mejor legibilidad Este parámetro se refiere al contraste entre el color de fondo y el color de los elementos en la página. Por ejemplo, el texto blanco debe colocarse sobre un fondo más oscuro, mientras que el texto más oscuro debe configurarse para contrastar con un fondo de color claro. El contraste se puede ajustar en todos los aspectos de los colores: brillo, saturación y sombra, donde el brillo ofrece el contraste más visible. Según la guía de accesibilidad del contenido web, se requiere una relación de contraste mínima de 3: 1 para un texto superior a 18 px. Consulte el siguiente ejemplo para obtener una buena ilustración de contraste: para verificar la relación de contraste y asegurarse de que se realicen los parámetros óptimos, puede usar esta herramienta. 22. Haga clic en Agradecer a la tarjeta / clic en la solicitud para la cotización acorta la ruta de conversión Esta característica es aplicable a los sitios de comercio electrónico. Consiste en limitar la cantidad de clics necesarios para hacer una compra. También facilita el proceso de toma de decisiones. Corto el camino hacia la conversión. La ruta de conversión habitual: haga clic en la página de inicio / Lista de productos -> Haga clic en la página Categoría del producto -> Haga clic en la página del producto -> Agregar al carrito. Ruta acortada: haga clic en la página de inicio -> Haga clic para agregar al carrito. O agregue un producto al carrito -> Haga clic para agregar a los accesorios. Aquí hay un ejemplo:

Puede experimentar con esta característica, con pruebas A / B. Comparando los resultados, puede encontrar que la camarilla para agregar al carrito es la solución óptima para su sitio de comercio electrónico. 23. Grandes ideas para diseñar sitios web: imagen con desfile lateral por efectos sorprendentes, ya hemos hablado sobre imágenes grandes y su impacto en la participación de los usuarios. Las imágenes con desfile lateral son adecuadas para los encabezados del sitio web y se ven así: son adecuadas, es decir, para sitios de fotografía. Crean una experiencia cautivadora desde el comienzo de las visitas de los usuarios al sitio. Por lo tanto, garantiza la participación y aumenta las posibilidades de transformar a los visitantes en clientes potenciales. 24. Por último, pero no menos importante, para las ideas de diseño de los sitios web: cambie la barra lateral para una mejor disposición de página, una barra de conmutación lateral se refiere a un elemento de control que permite que la barra lateral se esconda / se muestre dependiendo del comportamiento de navegación de los usuarios. Ejemplo: