Los 8 mejores consejos de diseño web para conseguir el sitio web ideal

Seamos claros: el diseño web es una disciplina implicada que puede llevar toda una vida para dominar. Como si eso no fuera suficientemente difícil, también es un campo que evoluciona a cada segundo a medida que la tecnología sigue avanzandola frustración de Imagine da Vinci si la gente se quejaba de que la Mona Lisa “parecía vieja” después de sólo cinco años.

El diseño web es algo con lo que casi todo el mundo en el extremo directivo de un negocio tiene que lidiar, pero sólo los profesionales del diseño lo entienden de verdad. Si quieres un gran diseño web, tienes que aprender lo básico, para poder comunicar lo que quieres. Incluso si contratas a un profesional para que diseñe tu página por ti, todavía necesitas información de fondo para distinguir a un diseñador web talentoso de uno mediocre y explicarle lo que necesitas que haga.

Sabemos lo difícil que es para los no diseñadores acostumbrarse a todo este asunto del diseño web, así que hemos creado esta práctica guía para guiarte a través de lo básico. Aquí están los diez mejores consejos de diseño web que necesitas saber (además de algunos útiles dos y don$0027ts ), divididos en tres categorías: Composición, Estética y Funcionalidad . Ya sea que estés contratando a un diseñador o haciendo bricolaje, revisa tu diseño web final para estos diez fundamentos.

Composición

1. Despeja el desorden.

Primero, abordemos uno de los errores más comunes de los principiantes en el diseño web: una pantalla desordenada. La mayoría de la gente tiene una lista de todo lo que quiere en su sitio web, y sin saber nada mejor, simplemente lo ponen todo en la pantalla y en la misma página.

Diseño web por Slaviana

Básicamente, cada elemento que añades a tu diseño web diluye todos los demás. Si incluyes demasiados elementos de distracción, tu usuario no sabe dónde mirar y pierdes una experiencia coherente. Por el contrario, si sólo incluyes los elementos necesarios, esos elementos son más potentes ya que no tienen que compartir el centro del escenario.

Más espacio en blanco significa menos desorden y eso es lo que realmente importa en un diseño web minimalista y limpio.

– Slaviana

Vea cómo la pantalla de inicio del ejemplo de Intenz del diseñador de alto nivel Slaviana no presenta nada más que lo esencial: menú de navegación, logo, tagline, llamada principal a la acción (CTA) y algunas imágenes escasas para la atmósfera y para mostrar el producto. Presentan otra información, por supuesto, pero la presentan más tarde para que sus pantallas nunca estén demasiado llenas. Es el equivalente visual del ritmo.

Para que un diseño de web sea efectivo, debe ser racionalizado – debe haber un camino o caminos claros para el usuario. Hay muchas maneras diferentes de lograrlo (algunas se explican a continuación), pero el primer paso es siempre crear espacio para los elementos de alta prioridad eliminando los de baja prioridad.

Do :

  • Recorta la grasa. Audite sus diseños para lo esencial. Si un elemento no añade o mejora la experiencia general, quítalo. Si un elemento puede vivir en otra pantalla, muévelo allí.
  • Limitar los menús desplegables. Los menús desplegables (desplegables, desplegables, etc.) son una buena forma de reducir el desorden, pero no se limiten a barrer sus problemas “bajo la alfombra”. Si es posible, trata de limitar estos menús ocultos a siete elementos.

No :

  • Usa las barras laterales. Los nuevos visitantes probablemente no las usarán. Además, si todas las opciones no encajan en tu menú de navegación principal, necesitas simplificar tu estructura de navegación de todos modos (ver abajo).
  • Usa los deslizadores. El movimiento y las nuevas imágenes en un deslizador distraen y debilitan tu control sobre lo que ven tus usuarios. Es mejor mostrar sólo tus mejores imágenes, todo el tiempo.

2. Usar un amplio espacio en blanco.

¿Cómo vas a llenar todo ese espacio que creaste después de limpiar el desorden? ¿Podemos sugerir que lo llene con nada?

Diseño web por Hitron

El espacio negativo (también conocido como espacio blanco) es el término técnico en las artes visuales para las áreas de una imagen que no atraen la atención . Típicamente, están vacíos o en blanco, como un cielo sin nubes o una pared monocroma. Aunque es aburrido por sí mismo, cuando se utiliza artísticamente, el espacio negativo puede complementar y realzar el tema principal, mejorar la legibilidad y hacer que la imagen sea más fácil de “asimilar”.

Mi mantra es: lo simple es siempre mejor. Llama la atención sobre lo que es importante para el usuario casi al instante. Además, lo simple es atractivo.

– Hitron

En el ejemplo de Streamflow del diseñador de alto nivel Hitron, el eslogan y el CTA toman el foco principal, no porque sean llamativos o chillones, sino por todo el espacio negativo que los rodea. Esta pantalla de aterrizaje hace más fácil para el usuario entender lo que la compañía hace y dónde en el sitio para ir a continuación. También incluyen magníficas imágenes de las nubes, pero de una manera hermosa y minimalista, una composición inteligente con mucho espacio negativo estratégico.

Hazlo:

  • Rodea tus elementos más importantes con espacio negativo. Cuanto más espacio negativo haya alrededor de algo, más atención recibe.
  • Evita los diseños aburridos con imágenes secundarias. Otros elementos estéticos como el color o la tipografía (ver más abajo) pueden recoger la holgura visual cuando hay mucho espacio negativo.

No:

  • Enfatiza el elemento equivocado. Rodea sólo los elementos de máxima prioridad con espacio negativo. Por ejemplo, si tu objetivo son las conversiones, rodea tu correo electrónico o tu CTA de ventas con un espacio negativo, no tu logotipo o tu discurso de venta.
  • Usar fondos ocupados. Por definición, se supone que los fondos pasan en gran medida desapercibidos. Si tu fondo no tiene suficiente espacio negativo, robará la atención de tus elementos principales.

3. Guíe los ojos del usuario con una jerarquía visual.

Si el uso de un término técnico como “espacio negativo” no te ha puesto en fase, ¿qué piensas de la “jerarquía visual”? Se refiere al uso de diferentes elementos visuales como el tamaño o la colocación para influir en los elementos que tu usuario ve primero, segundo o último. Presentar un título grande y en negrita en la parte superior de la página web y una minúscula información legal en la parte inferior es un buen ejemplo del uso de la jerarquía visual para priorizar ciertos elementos sobre otros.

Diseño web por Canvas Creation

El diseño web no se trata sólo de lo que añades a tu página web, sino de cómo lo añades. Tomemos los botones de CTA; no basta con que estén simplemente ahí; los diseñadores hábiles los colocan deliberadamente y les dan colores llamativos para resaltar y un texto sugerente para fomentar los clics. Elementos como el tamaño, el color, la colocación y el espacio negativo pueden aumentar o disminuir el compromiso.

El ejemplo de la página de inicio de Shearline anterior prioriza tres elementos: el título, la imagen del producto y el llamado a la acción. Todo lo que el menú de navegación, el logo, el texto explicativo, todo parece secundario. Esta fue una elección consciente del diseñador, llevada a cabo a través de un uso inteligente del tamaño, el color y la colocación.

Gráfico que explica los fundamentos de la jerarquía visual. A través de los estudios de Orbit Media.

Revise este gráfico de los Estudios de Medios de Orbita para aprender cómo atraer o repeler la atención. Es una simplificación excesiva de un tema complejo, pero funciona bien para entender lo básico.

Hazlo:

  • Diseño para la escaneabilidad. La mayoría de los usuarios no leen cada palabra de una página. Ni siquiera ven todo lo que hay en una página. Diseña para este comportamiento haciendo que tus prioridades sean difíciles de ignorar.
  • Prueba múltiples alternativas. Debido a que la jerarquía visual puede complicarse, a veces el ensayo y error funciona mejor. Crear unas cuantas versiones diferentes (“maquetas”) y mostrarlas a un nuevo grupo de ojos para diferentes opiniones.

No:

  • Usar elementos de la competencia. La jerarquía visual es sobre el orden: primero esto, luego aquello. Escalona la atención que recibe cada uno de tus elementos esenciales para que los ojos de tus usuarios sigan fácilmente un camino claro.
  • Ir por la borda. Hacer que los elementos sean demasiado grandes o que tengan demasiado contraste de color puede tener el efecto opuesto. Usa sólo tantas tácticas para llamar la atención como necesites y nada más.

Estética

4. Elija sus colores estratégicamente.

Ahora que está familiarizado con los conceptos de una buena composición, hablemos de los detalles de esa composición. Empezaremos con el color, una herramienta poderosa para cualquier diseñador.

Diseño web por Desinly

Para empezar, cada color tiene una connotación emocional diferente. Si su identidad de marca es apasionada y energética, un rojo estimulante encajaría mejor que un azul tranquilo. Además de elegir los mejores colores para representar su marca, también necesita usarlos bien, como contrastar los colores entre sí para establecer una jerarquía visual.

Para usar el color de manera efectiva en el diseño web tienes que entender cómo se forman los colores y cómo se relacionan entre sí. La armonía y el equilibrio son las claves del éxito.

– Desinadamente

Mira cómo el diseñador de alto nivel Desinly usa el naranja en el diseño web de la clase magistral de Arenas Petrolíferas. En primer lugar, el naranja es una elección inteligente porque a menudo se asocia con el equipo de operaciones pesadas con el que la empresa trata. Además, combinan el naranja con un fondo negro para que destaque más. También usan el mismo color de manera consistente para resaltar las palabras clave y los botones, e incluso lo integran en la fotografía de fondo.

Hazlo:

  • Establecer una jerarquía de colores. Utiliza un solo color para cada uno de tus elementos principales (primarios), resaltados (secundarios) y otros elementos menos importantes (fondo).
  • Sigue con temas consistentes. Una vez que tengas una paleta de colores establecida, sigue con ella. Mantén tus colores primarios, secundarios y de fondo consistentes en todo el sitio.

No:

  • Elige tus colores favoritos. Los efectos de los colores tienen un efecto probado en el marketing. Investiga la teoría del color y no desperdicies una oportunidad de marca crítica.
  • Colores de choque. Elegir los colores lógicamente no es suficiente; también tienen que ir bien entre ellos. El púrpura y el rojo pueden representar bien su marca, pero el efecto se pierde si chocan y hacen un feo diseño final.

5. No escatime en la fotografía.

Diseño web por JPSDesign

Aunque es opcional, si eliges usar fotografía de la vida real en tu diseño web, asegúrate de hacerlo bien. La fotografía efectiva y significativa puede favorecer sus objetivos empresariales, pero las fotos de baja calidad le frenan.

Con la fotografía tiene que haber una conexión entre la marca y el concepto. La fotografía puede crear contraste, llamar la atención o incluso atraer los ojos a la siguiente sección de la página.

– JPSDesign

El uso de la fotografía en el diseño web sigue muchas de las mismas pautas de la buena fotografía en general. Una foto impresionante colgada en una galería de arte puede ser igual de impresionante en un sitio web, pero el estado de ánimo, el estilo y los temas tienen que coincidir. Sólo mira la tentadora fotografía en el diseño web del diseñador de alto nivel JPSDesign arriba. Esos arándanos se verían deliciosos en cualquier lugar, pero es particularmente efectivo en el sitio web de un tendero.

Hazlo:

  • Usa gente real. Las imágenes de personas tienden a atraer a los usuarios más que las fotos de su personal o clientes reales.
  • Establecer la atmósfera correcta. La fotografía viene en casi infinitos estilos, así que usa los que mejor reflejen lo que tu sitio web busca. Si quieres un sitio web alegre, usa fotos de gente sonriendo.

No:

  • Utiliza la fotografía de archivo obvia. La palabra clave es “obvio”. Las imágenes de stock pueden ser beneficiosas, pero sólo si el usuario no se da cuenta de que es stock.
  • Usar resoluciones bajas. Esta es la era de la alta definición, por lo que la fotografía de baja resolución hace que una marca parezca vieja o infructuosa. Consejo extra: usa un compresor para reducir los tamaños de archivo grandes para que puedas tener tu pastel y comerlo también.

6. Optimizar la tipografía para construir su marca.

Si bien las palabras que usted o su redactor escogen son extremadamente influyentes, también puede mejorar su eficacia dándoles la apariencia adecuada.

Diseño web por Studio Ubique

La tipografía abarca todos los aspectos visuales del texto, en particular las fuentes, pero también otros elementos como el tamaño, el color del texto, el estilo (cursiva, negrita, etc.) y el espacio entre las letras, las palabras y las líneas. Todo esto impacta en la jerarquía visual y en la forma en que se percibe la marca.

La tipografía puede ser visualmente atractiva, pero si utilizas fuentes que distraen, el lector no podrá concentrarse en lo que estás tratando de decir y puede irritarse con tu sitio web. Combinar la tipografía en negrita con un giro minimalista es tu boleto ganador.

– Studio Ubique

Al igual que los colores y la fotografía, la tipografía viene en una amplia gama de estilos, así que elige el que más complementa tu marca. Para añadir un poco de sofisticación al diseño web de Her Habesha, el diseñador de alto nivel Studio Ubique utiliza una tipografía llamativa pero con clase para los títulos. Pero noten cómo la tipografía cambia a sutiles y modernas sans-serifs para los títulos de los productos debajo de las imágenes para lograr un equilibrio.

Hazlo:

  • Usar las fuentes web. Para toda la variedad de fuentes, recuerde atenerse a las “fuentes seguras para la web” verificadas que pueden mostrarse en la mayoría de los dispositivos y monitores de computadora. Puede aprender a identificarlas aquí.
  • Estudia los diferentes tipos. ¿Sabes lo que es una serifa? La tipografía es extremadamente matizada, así que estudia los cinco tipos de fuentes para darte un poco de contexto.

No:

  • Usar demasiado las fuentes llamativas. Las fuentes llamativas y llamativas pueden funcionar bien para los títulos o las palabras independientes, pero distraen demasiado cuando se usan en exceso.
  • Usa la misma tipografía para todo. Como en el ejemplo de Her Habesha, la tipografía funciona mejor cuando está equilibrada. Usa diferentes conjuntos para los encabezados, subencabezados y el texto del cuerpo y mantente consistente con estos conjuntos en todo el sitio.

Funcionalidad

7. Racionalizar la navegación.

Por último, pasamos a la funcionalidad: lo que su sitio puede hacer. La conversación sobre la funcionalidad siempre debe comenzar con la navegación, la columna vertebral de cualquier sitio web.

Diseño web por martinthehorrible

Cada uno tiene sus propios métodos para encontrar su camino en un sitio web. Un buen diseño web abastece su navegación a sus usuarios objetivo de manera que se sienta intuitiva, cuanto menos usuarios tengan que pensar en ello, mejor.

Pero no es una hazaña fácil. Comienza con la organización del sitio: lo que tiene su propia página, lo que pasa a una subpágina, lo que aparece y lo que no aparece en el menú principal. Cada una de estas preguntas debe ser respondida antes de que el diseño web real despegue.

A partir de ahí, tienes que diseñar tu navegación de manera que sea fácil de usar para los visitantes, como en el ejemplo anterior.

Hazlo:

  • Encuentra un balance para la cantidad de opciones. Quieres dar a los usuarios muchas opciones, pero no quieres abrumarlos. Organiza las categorías de tu página de manera que se satisfagan estos objetivos contradictorios.
  • Construir la navegación alrededor de los datos reales del usuario. Al comprar zapatos en línea, algunos usuarios buscaban en “ropa” y otros en “accesorios”. Diferentes grupos de usuarios tienen diferentes preferencias; construye tu arquitectura de navegación alrededor de cómo piensan tus usuarios, de acuerdo a datos reales. Puedes realizar algunas pruebas de usuario si estás en la oscuridad.

No:

  • Experimentar con formatos inusuales. Aunque la experimentación en dosis saludables puede provocar algunas nuevas y grandes ideas, no es recomendable para algo tan vital como la navegación. Para evitar que el usuario se lo piense demasiado, aténgase a las convenciones que ya comprende: menú de navegación de la cabecera superior, logotipo vinculado a la página de inicio, barra de búsqueda con icono de lupa, etc.

8. Priorizar el móvil.

Diseño web por Ink$0027d

La gente mayor (pero no vieja !) tiende a pensar en el diseño web en términos de pantallas de escritorio, pero la verdad es que hoy en día la gente hace la mayor parte de su navegación en los dispositivos móviles. Por eso es necesario asegurarse de que su sitio móvil está en condiciones óptimas. No sólo por el bien de su usuario, sino también por el de Google, ya que el algoritmo de Google tiene en cuenta los factores de respuesta del móvil a sus clasificaciones de búsqueda.

La “respuesta móvil” se refiere a lo bien que aparece su sitio en los dispositivos de pantalla pequeña. Si su sitio web se corta en los dispositivos móviles o las imágenes aparecen en los lugares equivocados, sus visitantes no tendrán una experiencia agradable al usar su sitio web. Además de las pantallas más pequeñas, los dispositivos móviles también tienen todo un nuevo conjunto de pautas de diseño, incluyendo controles como “swipes”, así que no suponga que su versión de escritorio se traducirá sin problemas.

Hoy en día es muy importante considerar un primer acercamiento móvil. La gente tiende a usar los diseños de los móviles de manera diferente a las versiones de escritorio, por lo que la forma en que el sitio web se desempeñará en el móvil es parte integral de un diseño eficaz. Concéntrese en un diseño mínimo y limpio y elimine el desorden para que los usuarios puedan concentrarse más fácilmente en el contenido.

– Tinta

Su versión móvil debería ser una consideración primordial, desde el principio. Pero eso no significa que puedas descuidar tu versión de escritorio. Su sitio web debe verse bien sin importar el dispositivo que la gente use para mirarlo. Echa un vistazo al diseño web de arriba para ver cómo el diseñador de alto nivel Ink ha creado variaciones de un diseño y con algunos ligeros retoques hace que se vea bien tanto en pantallas grandes como pequeñas.

Hazlo:

  • Diseña primero la versión para móviles. Cuando diseñas la versión móvil, trabajas sólo con lo esencial debido al espacio limitado de la pantalla. Es más fácil abordar la versión móvil primero y luego agregar elementos a la versión de escritorio en lugar de diseñar la versión de escritorio primero y luego eliminar elementos.
  • Priorizar los dispositivos en base a los datos del usuario. Dispositivos “móviles” es un término genérico, pero los diferentes tipos de teléfonos y tabletas tienen diferentes tamaños de pantalla y consideraciones técnicas. Consulte los datos de usuario para ver qué dispositivos utilizan más sus visitantes y luego priorícelos en el diseño.

No:

  • Utiliza los sitios m.dot. Esos sitios móviles que tienen “m.” en su URL fueron una solución temprana para los diseños de respuesta móvil antes de que los diseñadores supieran que el móvil superaría al escritorio. Hoy en día, son más lentos de cargar y perjudiciales para el SEO – la mejor opción es diseñar un solo sitio que funcione en todos los dispositivos relevantes.

admin

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Publicar un comentario