Aprovecha Nuestra Mejor Guía de Diseño Web

Un excelente diseño web es una parte esencial de comenzar en la web. Por esta razón, es muy importante que tenga una guía superior para el diseño web de todas sus páginas en el sitio. Pero el diseño no son solo gráficos y colores, debes tomar en consideración algunos temas como menús, flujos de usuarios y otros que ofrezcan una buena experiencia de usuario a tus visitantes.

En este artículo sabrá cómo debe diseñar y desarrollar una estructura sólida para su sitio web. Cuántos temas implica un mejor diseño y cómo aplicarlos en su trabajo. ¡Vamos!

Pautas para un Excelente Diseño Web para Tontos

Todos los consejos en estas pautas deben cumplir con una tecnología receptiva, el diseño web debe mostrar una excelente experiencia a los visitantes desde una computadora de escritorio, tableta y dispositivo móvil. Salvo que quieras diseñar por separado para estos tamaños, lo ideal es que tu web esté preparada para una reordenación de los elementos en cada uno de los tamaños de pantalla que tienen estos dispositivos.

Diseño Web para Dummies Consideraciones para Móviles

Día a día, los usuarios de Internet de dispositivos móviles crecen. En este momento, casi el 50% de los usuarios acceden a la web desde dispositivos móviles en todo el mundo. Es una razón para comenzar este artículo explicando las cosas que debe usar para satisfacer a los visitantes que desde un dispositivo móvil consultan su sitio web.

¿Qué significa esto para un diseñador web? Significa que debemos tener una estrategia móvil para cada sitio web que diseñes.

Ideal para Diseño Web Receptivo

Es esencial optimizar su sitio web para varias pantallas y resoluciones. Aquí hay algunas pautas clave a seguir:

  • Elija un diseño web de una sola columna, un diseño de una sola columna generalmente funciona mejor en pantallas móviles.
  • Utilice el patrón «Prioridad+» para priorizar la navegación a través de los puntos de interrupción. Prioridad+ expone los elementos más importantes de su sitio web y oculta los elementos menos importantes detrás de un botón «más».
  • Defina imágenes de tamaño adecuado para pantallas y plataformas.

De Clickable a Tappable

En la web móvil, los toques con los dedos (no los clics del mouse) crean interacciones. Esto significa que se aplican reglas diferentes al diseñar objetivos táctiles e interacciones.

  • Objetivos táctiles del tamaño adecuado. Todos los elementos interactivos (como enlaces, botones y menús) deben poder tocarse y ser un poco más grandes.
  • Significantes visuales más fuertes de la interactividad. En dispositivos móviles, no hay un estado de desplazamiento para proporcionar comentarios visuales adicionales a su usuario.

Inicio del Proceso de Diseño

Después repasamos la importancia del diseño responsive para los usuarios actuales de internet. Comenzaremos a definir los principales elementos a considerar dentro del diseño web contemporáneo y las pistas básicas para lograr el éxito en su aventura en Internet en su sitio web.

¿Cómo diseñar páginas individuales?

Ahora que hemos revisado los conceptos básicos del flujo de usuarios, es hora de aprender a diseñar las páginas web individuales. A continuación, resumimos las pautas clave de diseño de sitios web que debe conocer.

Consejos para Desarrollar una buena Estrategia de Contenidos

Cuando se trata de diseño de páginas web, lo más importante es diseñar en torno a los objetivos de la página. La estrategia de contenido, que se refiere a la planificación, creación y administración de contenido en su sitio web, ayudará con este ejercicio. Cada página tiene su propio objetivo, como informar a los visitantes sobre algo o alentarlos a convertirse. Una vez que comprenda el objetivo de la página, solo entonces debe trabajar en el diseño o escribir el contenido.

Aquí hay algunos consejos prácticos para considerar su estrategia de contenido:

  • Prevenir la sobrecarga de información. Sí, demasiada información en una página puede abrumar fácilmente a los visitantes.
  • Evite la jerga y los términos específicos de la industria.
  • Minimiza las oraciones largas. Escriba en segmentos pequeños y escaneables. no más de 20 palabras por oración.
  • Evite poner en mayúscula todas las letras. El texto en mayúsculas está bien para acrónimos y logotipos.

Construye una Buena Estructura de Página

Una página correctamente estructurada ayudará a los visitantes a encontrar cada elemento de la interfaz de usuario. Si bien no existen reglas únicas para todos, existen algunas pautas de diseño de sitios web que lo ayudarán a crear una estructura sólida:

  • Haz que tu estructura de página sea predecible para los visitantes.
  • Use una cuadrícula de diseño para diseñar la página. Una buena cuadrícula de diseño divide una página web en regiones principales y define las relaciones entre los elementos en términos de tamaño y posición.
  • Use una estructura alámbrica de baja fidelidad para privatizar elementos esenciales.

Diseño con Jerarquía Visual

Es más probable que las personas exploren rápidamente una página web que lean todo lo que hay allí. Por lo tanto, es una buena idea optimizar el diseño de su página web para un escaneo rápido.

Puede ayudar a los visitantes a encontrar lo que necesitan con una buena jerarquía visual, que se refiere a la disposición o presentación de los elementos en una página web de manera que indique su importancia (es decir, dónde deben enfocar sus ojos primero, segundo, etc.) . Una buena jerarquía visual puede mejorar significativamente la capacidad de escaneado de la página.

  • Utilice patrones de escaneo naturales.
  • Prioriza visualmente los elementos importantes. Haga que los elementos importantes, como el contenido clave o los botones principales de llamada a la acción, sean los puntos focales para que los visitantes los vean de inmediato.
  • Cree maquetas para aclarar la jerarquía visual. Las maquetas son artefactos de diseño de alta fidelidad que permiten a los diseñadores ver cómo se verá el diseño final.

Comportamiento de desplazamiento (Scrolling)

Un mito persistente entre los diseñadores web es que las personas no se desplazan. Para ser claros: todo el mundo se desplaza y la gente comienza a desplazarse casi instantáneamente cuando llegan a una nueva página.

Sabiendo esto, puedes mejorar la experiencia del usuario con estos consejos:

  • Anime a los usuarios a desplazarse. A pesar de que la gente suele empezar a desplazarse tan pronto como se carga la página, el contenido en la parte superior de la página sigue siendo muy importante. Pon tu contenido más convincente en la parte superior:
    • Haz una buena introducción.
    • Comprometerse con buenas imágenes.
  • Oriente a sus Usuarios, especialmente cuando cree páginas extensas, tenga en cuenta que los visitantes aún requieren un sentido de orientación.
  • Proporcione comentarios visuales al cargar contenido nuevo.
  • No secuestre el desplazamiento. Muchos usuarios odian esta situación.

Imágenes

Como dice el refrán, una imagen vale más que mil palabras. Los seres humanos somos criaturas altamente visuales y las imágenes son una forma poderosa de captar la atención del usuario. Una sola imagen puede transmitir más al espectador que un bloque de texto elaborado con un diseño elaborado. Además, las imágenes cruzan las barreras del idioma de una manera que el texto simplemente no puede.

Los siguientes principios lo ayudarán a integrar imágenes en el diseño de su página web:

  • Asegúrate de que las imágenes sean relevantes.
  • Evite fotos genéricas de personas.
  • Utilice activos de alta calidad sin distorsión.

Carga de Contenido

Si bien lo mejor es una respuesta instantánea, hay ocasiones en las que su sitio web necesitará más tiempo para entregar contenido a los visitantes. Una mala conexión a Internet podría provocar una reacción lenta, o una operación en sí podría tardar un poco más en completarse. Pero sin importar la causa de tal comportamiento, su sitio web debería aparecer rápido y receptivo. Aquí hay algunas maneras de lograr esto:

  • Asegúrese de que la carga regular no lleve mucho tiempo.
  • Use pantallas de esqueleto durante la carga.

Las pantallas Skeleton son una excelente alternativa a esto. Estos contenedores son esencialmente una versión en blanco temporal de la página, en la que la información se carga gradualmente. En lugar de mostrar un indicador de carga, los diseñadores pueden usar una pantalla esquelética para centrar la atención de los usuarios en el progreso real y crear anticipación para lo que está por venir. Debido a que la información se muestra de forma incremental en la pantalla, parece que las cosas suceden de inmediato.

Botones

Los botones son elementos interactivos de la interfaz de usuario que juegan un papel clave en el flujo conversacional. Vale la pena prestar atención a estas mejores prácticas básicas para los botones:

  • Asegúrese de que los elementos en los que se puede hacer clic realmente parezcan clicables.
  • Etiquete los botones según lo que hacen.
  • Botones de diseño consistentemente.

Videos

Los videos son más populares que nunca, debido al aumento de las velocidades de Internet, ahora es posible ver videos largos. Es totalmente bueno, especialmente considerando que extienden el tiempo de permanencia en el sitio.

Hoy en día, el video está en todas partes. Lo estamos viendo en nuestras computadoras de escritorio, tabletas y teléfonos. Cuando se usa de manera efectiva, el video es una de las herramientas más poderosas disponibles para atraer a una audiencia, transmite más emoción y realmente le da a la gente una idea de un producto o servicio.

Si desea utilizar video en su sitio web, tenga en cuenta las siguientes recomendaciones:

  • Configure el audio en «apagado» de forma predeterminada, con la opción de encenderlo.
  • Mantenga los videos promocionales lo más cortos posible.
  • Proporcione una forma alternativa de acceder al contenido.

Call-to-action Botones (CTAs)

Los llamados a la acción (CTA) son botones que guían a los usuarios hacia su objetivo de conversión. El objetivo de un diseño de CTA es dirigir a los visitantes a una acción específica. Algunos ejemplos comunes de llamadas a la acción son:

  • “Iniciar una prueba”
  • “Descargar el libro”
  • “Regístrese para recibir actualizaciones”
  • “Obtener una consulta”

Consejos a tener en Cuenta a la hora de Diseñar Botones CTA

  • Tamaño de los botones CTA para llamar la atención.
  • Prominencia visual de Button.
  • Espacio negativo para obtener más atención del visitante.
  • Use etiquetas para orientar la acción para CTA.

Consejo muy importante:

Use una «prueba de desenfoque» para probar su CTA. Una prueba de desenfoque es una técnica rápida para determinar si el ojo del usuario irá donde tú quieres que vaya.

Diseñar los formularios Web

El llenado de formularios es uno de los tipos de interacción más importantes para los usuarios en la web. Los usuarios deben poder completar formularios rápidamente y sin confusión.

Aquí hay algunas recomendaciones de diseño que lo ayudarán a mejorar el diseño de su formulario:

  • Pregunte solo lo que se requiere. Cada campo adicional que agregue a un formulario afectará su tasa de conversión. Cuanto más pregunte, menos motivados estarán los usuarios para proporcionar los datos. Siempre piense por qué está solicitando cierta información de los usuarios y cómo la usará.
  • Ordena la forma lógicamente. Por ejemplo, pedir la dirección de alguien antes de su nombre puede parecer extraño.
  • Agrupe los campos relacionados. La agrupación crea un flujo de un conjunto de preguntas al siguiente. Agrupar campos relacionados también ayuda al usuario a comprender la información.

Diseño de los Flujos de Usuario

Lo primero que debes considerar es tu flujo de usuarios, o la ruta por la que el visitante navegará a través de tu sitio web. Después de todo, el diseño de páginas web no se trata de crear una colección de páginas individuales; se trata de crear flujos.

Esta ruta es una serie de pasos que el visitante realiza desde el punto de entrada (la primera página en la que aterriza) hacia la acción específica que desea que realice (normalmente, una acción de conversión, como un registro, una compra, etc.) .

Lo siguiente lo ayudará a determinar sus flujos de usuarios a medida que diseña su sitio web.

Arquitectura Informacional

La Arquitectura de la Información (IA) es un área profesional que permite gestionar el orden de la información de forma clara, utilizando un flujo lógico. Permitió que sus visitantes revisaran su sitio web más cómodos y se sintieran bien. Estos profesionales (arquitectos de la información) analizarán cómo debe ir la estructura de la información de los usuarios y crearán una jerarquía que se alinee con las expectativas del usuario.

Good IA es el resultado de una sólida investigación de usuarios y pruebas de usabilidad.

Lo más importante y principal logro de IA se utiliza para definir la navegación y los menús del sitio. Para probar estos menús, es necesario usar una técnica llamada «prueba de árbol» para probar el buen funcionamiento y que funcionará. La prueba del árbol ocurre antes de diseñar la interfaz final.

¿Cómo Diseñar la Navegación Global?

Este es un tema importante para su diseño web. Si su diseño web no puede navegar para sus visitantes, probablemente no les gustará su sitio web y lo abandonarán. La navegación en su sitio web debe seguir algunos principios importantes:

  • Consistencia. Desarrolle un estándar para la estructura de su sistema de navegación, debe ser el mismo para todas las páginas de su diseño web.
  • Sencillez. La forma sencilla de presentar su sitio web, ayudará a sus visitantes a comprender mejor sus asuntos y obtendrán lo que buscan con el menor número de clics posibles.
  • Claridad. Presente claramente las opciones de navegación para que sus visitantes puedan acceder a ellas fácilmente.

Algunos Consejos para diseñar la navegación web desde tu Sitio Web

Cuando comience a diseñar la navegación web, considere algunas cosas en todas sus páginas:

  • Seleccione un patrón de navegación basado en las necesidades del usuario.
  • Prioriza las opciones de navegación.
  • Hacer siempre visible la navegación.
  • Comunique la ubicación actual usando migas de pan.

Establish a Consistent Layout for the Web Links

Los enlaces son un elemento clave en la navegación web. Su diseño visual y funcional tiene un impacto directo en la usabilidad. Siga algunas reglas con estos elementos interactivos:

  • Vuelva a verificar todos los enlaces para evitar la página de error 404.
  • Cambia el color de los enlaces visitados.
  • Reconocer la diferencia entre enlaces internos y externos.

Breadcrumbs

Las migas de pan son un conjunto de enlaces contextuales que funcionan como una ayuda para la navegación en los sitios web. Es un esquema de navegación secundario que generalmente muestra la ubicación del usuario en un sitio web. Una cosa importante es separar claramente cada nivel. Sí, use puntas de flecha como separadores, no barras oblicuas.

Pon un Botón «Atrás» en la Parte Superior

Evite eventos en los que al hacer clic en «atrás» los usuarios vuelvan a la parte superior de la página inicial, especialmente en páginas largas. Coloque el botón Atrás en el lugar correcto o permita que el usuario haga clic en el botón Atrás del navegador.

Perder su lugar obliga a los usuarios a desplazarse por el contenido que ya han visto, lo que les hace perder más tiempo y genera costos innecesarios.

Términos de búsqueda en su sitio web

Los visitantes actuales llegan a un sitio web en busca de un artículo específico. Si su sitio web tiene la función «Buscar», la usarán y actuará como un acceso directo en este caso. Tenga en cuenta estas pocas reglas al diseñar el cuadro de búsqueda:

  • Es mejor utilizar un icono de lupa para llamar la atención sobre la zona.
  • Diseñe el tamaño del cuadro de entrada de forma adecuada.
  • Ponga el cuadro de búsqueda en cada página.
  • Coloque el cuadro de búsqueda donde los usuarios esperan encontrarlo.

Accesibilidad del Diseño Web

La accesibilidad es otra pauta esencial de diseño de sitios web. Los productos de hoy deben ser accesibles para todos, independientemente de las habilidades de una persona. Diseñar para usuarios con discapacidades debe ser una parte integral del diseño del producto.

Experiencia Amigable con el Teclado

Algunos usuarios, en especial aquellos con problemas de motricidad, navegan por Internet utilizando su teclado. Para atender y ayudar a este grupo, es muy importante habilitar la navegación basada en teclado.

Algunas reglas para la navegación con el teclado que podrías tener en cuenta:

  • Todos los elementos interactivos deben ser accesibles.
  • Verifique que el enfoque del teclado sea visible y obvio.

Consulte este enlace para conocer la interacción con el teclado: sección «Patrones de diseño y widgets» del documento «Prácticas de creación de WAI-ARIA» del W3C. Te abrirá los ojos sobre este asunto.

Usuarios Ciegos

Las personas ciegas utilizan tecnologías de asistencia, como lectores de pantalla, para interpretar sitios web. Los lectores de pantalla «leen» las imágenes utilizando el texto alternativo atribuido a la imagen y la descripción de la misma. Si no escribe ese texto, no podrán obtener la información según lo previsto.

Cuando esté creando alternativas de texto y descripción para imágenes, tenga en cuenta estos consejos:

  • No se necesita una alternativa de texto solo en la imagen decorativa.
  • Todas las imágenes “significativas” requieren un texto alternativo descriptivo.

Diseño Usuarios con Vista

Muchos sitios web usan bajo contraste para la copia de texto. Si bien el texto gris sobre un fondo blanco puede verse bien, también es ilegible e inaccesible. El bajo contraste es especialmente problemático para los usuarios con baja visión y aquellos que luchan con la sensibilidad al contraste.

El texto de bajo contraste es difícil de leer en una computadora de escritorio, pero se vuelve aún más difícil en un dispositivo móvil. Imagine tratar de leer texto de bajo contraste en un dispositivo móvil mientras camina bajo la luz del sol.

Las Pautas de accesibilidad al contenido web (WCAG) del W3C incluyen una recomendación de relación de contraste. Recomiendan estas relaciones de contraste para las páginas web del cuerpo:

  • El texto pequeño debe tener una relación de contraste de al menos 4,5:1 con respecto a su fondo. Es preferible una proporción de 7:1.
  • El texto grande (en negrita de 14 puntos y normal de 18 puntos en adelante) debe tener una relación de contraste de al menos 3:1 contra su fondo.

Pruebe el contraste de su página con WebAIM Color Contrast Checker y obtenga el rango óptimo de contraste.

Usuarios Daltónicos y con Baja Visión

Se estima que el 4,5 % de la población mundial experimenta daltonismo (es decir, 1 de cada 12 hombres y 1 de cada 200 mujeres), el 4 % sufre de baja visión (1 de cada 30 personas) y el 0,6 % es ciego (1 de cada 188 personas).

Para hacer que el diseño sea accesible para estos usuarios, evite usar el color solo para transmitir significado. Como establece el W3C, el color no debe usarse «como el único medio visual para transmitir información, indicar una acción, provocar una respuesta o distinguir un elemento visual».

En el formulario anterior, el diseñador debe dar instrucciones más específicas, como: «La dirección de correo electrónico que ingresó no es válida», o al menos mostrar un ícono cerca del campo que requiere

Poniendo a Prueba tu Diseño Web al Fin

Finalmente, su trabajo está casi terminado. Obtiene un logro: ha diseñado todo su sitio web utilizando todas las técnicas explicadas anteriormente. Ahora, una de las cosas importantes para usted es hacer una prueba de velocidad de su sitio web.

Lo sé, incluso si ha utilizado todas las pautas de diseño de sitios web anteriores, no significa que funcionará para sus usuarios. Una buena estrategia general es «realizar pruebas pronto y con frecuencia» para saber si su diseño web funcionará bien.

Prueba Iterativa

Como cualquier otra parte del ciclo de diseño, la prueba es un proceso iterativo. Recopile comentarios al principio del proceso de diseño e itérelos en todo momento.

Tiempo de Carga de la Página de Prueba

Los usuarios odian las páginas web de carga lenta. Es por eso que el tiempo de respuesta es un factor crítico para los sitios web modernos. Según Nielsen Norman Group, existen tres límites de tiempo de respuesta:

  • Sube en 0,1 segundos. Esto se siente instantáneo para los usuarios.
  • Tu página se sube en 1 segundo. El usuario notará un ligero retraso.
  • Demasiado tiempo, más de 10 segundos. Los usuarios pueden abandonar el sitio web inmediatamente.

Obviamente, no deberíamos hacer que los usuarios esperen 10 segundos por nada en nuestros sitios web. Pero incluso unos pocos segundos de retraso pueden hacer que la experiencia sea desagradable.

¿Qué suele causar un tiempo de carga lento?

Hay muchas razones para reducir la velocidad del sitio web, aquí algunas cosas que podrían estar afectando el rendimiento web:

  • Objetos con mucho contenido (como video incrustado y widgets de presentación de diapositivas)
  • Código de back-end no optimizado
  • Problemas relacionados con el hardware (infraestructura que no permite operaciones rápidas).

Para verificar la velocidad de las páginas, solo use esta herramienta:  PageSpeed Insights de Google. Estoy seguro de que te ayudará a encontrar las causas. Otras páginas de prueba que pueden ayudar a mejorar la velocidad de su sitio web son: GTmetrix, WebPagetest, YSlow, Pingdom.

Make a A/B testing

Una prueba A/B es ideal cuando te cuesta elegir entre dos versiones de un diseño. Este método de prueba consiste en mostrar una de dos versiones al azar a un número igual de usuarios y luego revisar los análisis para ver qué versión logró su objetivo de manera más efectiva.

Entrega de Diseño Web

El proceso de diseño de UX tiene dos pasos importantes: crear un prototipo del diseño y desarrollar una solución funcional. El «traspaso» es el paso que conecta los dos.

Tan pronto como el diseño está listo para el desarrollo, los diseñadores preparan una especificación, que es un documento que describe cómo codificar el diseño. Una especificación asegura que el equipo implemente el diseño de acuerdo con la intención original.

Una buena especificación es fundamental porque sin ella, los desarrolladores tendrán que confiar en conjeturas al crear el sitio web o volver al diseñador para obtener respuestas a sus preguntas. Pero ensamblar una especificación manualmente puede ser un dolor de cabeza y, por lo general, lleva mucho tiempo, según la complejidad del diseño.

Conclusiones

  • Por supuesto, estos consejos de diseño web son solo el comienzo. Mezcla y combina estas ideas con las tuyas para obtener los mejores resultados. Trate su sitio web como un proyecto en constante evolución y utilice análisis y comentarios de los usuarios para mejorar constantemente la experiencia.
  • Una cosa importante que tienes presente todo el tiempo: el diseño web no es solo para diseñadores, está pensado para los usuarios.
  • El diseñador web debe brindar atención exclusiva a la usabilidad del sitio web para que los visitantes puedan encontrar la información adecuada fácilmente. Los diseñadores web receptivos piensan que las páginas web de sus clientes deben ser accesibles para cada visitante, brindándoles una experiencia óptima, independientemente del dispositivo que utilicen.
  • El plan es sostenible, por lo que puede gastar un poco más en eso. Para estar seguro de que su diseño web es ideal y en armonía con el público objetivo.
  • El diseño web abarca muchas habilidades y disciplinas únicas en la fabricación y mantenimiento de sitios. Plataforma de negocios completa de diseño web Comprender la práctica de desarrollo de un servicio o producto es vital, ya que ayuda a darse cuenta de su importancia y ventajas.
  • Hay muchos pasos involucrados si necesita diseñar un sitio web extremadamente adecuado. Si desea tener un sitio web ideal que sea adecuado para su propósito, debe tener mucho cuidado con su diseño.
  • El diseño web debe completarse de la manera correcta para que su empresa reciba una apariencia nueva y refrescante.
  • El diseño de un sitio web o interfaz de usuario nunca debe interferir con la capacidad del usuario para consumir el contenido del sitio web.
  • La Guía para el diseño de sitios web para dummies es una herramienta increíble para resolver los problemas de diseño y te permite llegar más fácilmente al éxito.

Permítanme mostrarles un video tutorial llamado «Tutorial de diseño web para principiantes para 2018 – Parte 1 de 2», del canal DesignCourse, Youtube.com

Si te gusta este artículo, compártelo con tus amigos y familiares.

Se el de compartir esto en las Redes Sociales,

Tu opinión es importante para nosotros, dejanos la tuya en la caja de comentarios.

¿Quieres colaborar con nosotros? Dejanos tus ideas en el formulario de contacto, estaremos encantados de saber de ti.

Entradas Relacionadas

0 comentarios

Últimos Artículos