diseño-pagina-web

Las buenas páginas web no nacen por accidente. Una página web es considerada exitosa si es útil, relevante y bien diseñada. Aunque diferentes proyectos de diseño web de páginas web tengas diferentes necesidades, existen algunos principios y prácticas que son universales. En este artículo, te brindaremos cinco consejos para revivir tu página web.

diseño-pagina-web-1

1. Considera las conversiones

El diseño va más allá de la estética. Sí, debes hacer que tu diseño web sea atractivo, pero primero debes considerar que una página web no es una obra de arte. Las personas no ingresan a una para apreciar la estética, lo hacen para encontrar cierta información o para llevar a cabo una tarea en particular.

Una página web exitosa es aquella que comprende las necesidades, por lo tanto, su diseño web debe hacer que las personas hagan que lo desean. Con esto en mente, debes considerar que el potencial de conversión de la página web es un elemento integral del diseño de la misma.

La conversión significa la transición de las personas de ser visitantes casuales y ser en visitantes que pagan, convirtiéndose en miembros de una página, suscribiéndose en boletines o completando un formulario de consulta.

Cada aspecto del diseño web juega un papel al llevar a los clientes a sus destinos y convirtiéndolo:

  • Imágenes. Las imágenes deben ser interesantes, únicas y de buena calidad.
  • Color. ¿El esquema de colores es atractivo?
  • Texto. Esto incluye su uso para mensajes, descripciones, instrucciones y etiquetas.
  • Navegación. ¿Cuán fácil los usuarios pueden navegar en tu página web?

Estos son solo algunos elementos que contribuyen a conversiones exitosas. Básicamente, si algo es parte del diseño web, es un factor en la conversión de personas.

Considera las dos páginas de ejemplo y decide cuál tendría más conversiones.

diseño-pagina-web-2

diseño-pagina-web-3

¿Cómo sabes si tomaste la mejor decisión desde la perspectiva de conversiones? No solo debes tomar una decisión y esperar lo mejor, debes probar tus decisiones y ser capaz de realizar los cambios necesarios.

Las pruebas A/B son una buena forma de comparar resultados entre dos variantes de diseño web. Por ejemplo, si tienes un botón de llamada a la acción en tu página de inicio, podrías querer saber qué color, texto y ubicación será la mejor para tal botón.

diseño-pagina-web-4

Al llevar a cabo una prueba donde los usuarios ven una opción (A) y otros una opción diferente (B), puedes medir los resultados para ver qué configuración funciona mejor y resulta en más conversiones de usuarios. Luego, puedes realizar cambios y otros experimentos para encontrar la mejor opción de botón posible.

diseño-pagina-web-5

2. No tengas miedo del espacio en blanco

Otra propiedad importante de una buena página web es el uso efectivo del espacio en blanco. Para las personas que no son diseñadores, los espacios en blanco parecen áreas donde no se aplicó el diseño web; sin embargo, para los expertos en diseño de páginas web, cada parte del espacio que usan alrededor de las imágenes, contenido escrito, botones de llamada a la acción y cualquier otros elemento de la página se diseña deliberadamente.

Con demasiada frecuencia, las empresas piensan que las páginas de inicio son como un periódico. Luchan por llenar cada píxel libre con cualquier tipo de contenido, del mismo modo como se llenarían las columnas de un periódico. Este agresivo uso del espacio tiene sentido para la impresión de periódicos, pero las páginas web no lo son y las personas no consumen el contenido web de la misma forma como consumen el contenido impreso.

Para los visitantes de páginas web, un espaciado adecuado entre elementos en una página permite una mejor experiencia lectora. También les permite concentrarse en piezas individuales de una página sin ser abrumados por todo lo demás en ella. El espacio en blanco permite que el contenido brille sin tener que luchar por tener atención.

Una forma interesante de usar el espacio en blanco es el desplazamiento parallax. El parallax es un efecto donde las imágenes de primer plano se mueven a una velocidad diferente que las imágenes de fondo, dando un impresión de profundidad y movimiento. Este efecto puede ser utilizado para la narración. Los diferentes elementos de una página (imágenes, textos, etcétera) pueden aparecer en ciertos momentos mientras el usuario se desplaza en la página. Para hacer que estos elementos tengan un máximo impacto, es esencial un buen uso del tiempo y espaciado.

diseño-pagina-web-6

3. Tipografía, tipografía, tipografía

Aunque los buenos videos y fotografías se llevan toda la gloria en la web, la realidad es que es el texto el que predomina en la web. Si existe un área de tu página web donde la atención parece no prevalecer, esa es la tipografía.

Por años, las páginas web se vieron limitadas a solo ser capaces de usar unas pocas «fuentes seguras» para la web, como:

  • Arial
  • Verdana
  • Times New Roman
  • Georgia
  • Tahoma
  • Lucida
  • Impact

Antes estaba asegurada la instalación de estas fuentes en tu computadora, pero, en los últimos años, la selección de fuentes para la web ha avanzado con la introducción de @font-face.

Es bueno tener acceso a más fuentes, pero es importante cómo las usas. De hecho, con un gran número de posibilidades disponibles para los diseñadores web, es más crítico que nunca contar con buenas habilidades tipográficas. Además, tener un exceso de fuente de las cuales escoger es bueno, pero igual necesitas tomar la decisión adecuada para tu proyecto en particular. Comprender el tipo de fuente (serif, sans-serif, slab-serif) que usarás es esencial.

La tipografía no solo se trata de seleccionar fuentes, sino también del tamaño y color que usas para el mensaje, además del paso de las letras, el espaciado entre las palabras y letras, y mucho más. Se trata de hacer que se disfrute el proceso de lectura. Aquí tienes un buen ejemplo:

diseño-pagina-web-7

Design can change es un buen ejemplo del uso de los elementos adecuados mencionados en este artículo. La fuente blanca y negra en varios tamaños clarifica el mensaje dentro de un fondo rojo brillante con el suficiente espacio en blanco que te lleva a leer el corto, pero empoderante mensaje.

Recuerda que una página web no es una imagen bonita que solo debe ser admirada. Si tiene textos, estos deben ser leídos. Puede que sea el trabajo del redactor generar el mensaje correcto, pero una buen tipografía asegurará que el mensaje sea claro y directo.

diseño-pagina-web-8

4. Añade menos, no más

Cuando uno crea un diseño web, tiene la necesidad de añadir más cosas. Los clientes solicitan que se añadan características especiales. Quieren que se apilen más cosas en la página.

Está bien añadir elementos o contenidos que son necesarios, pero cualquier persona que ha tenido estas conversaciones, sabe que no todo lo que se añade es necesario. Con mucha frecuencia, los elementos que se añaden puede crear un desorden en lugar de claridad; por lo tanto, en lugar de contemplar qué más puedes añadir a tu diseño de página web, mira lo que ya tienes y determina lo que puedes quitar.

ecocentury-gestion-integral-residuos

Diseño de página web Ecocentury

Un ejemplo del principio «menos es más» es cuando tratas de enfatizar en elemento de tu página web. Piensa un momento en la típica página de inicio. Muchas empresas usan sus páginas de inicio como una plataforma para promover todo tipo de contenido que un usuario pueda necesitar. Añaden tanto contenido a esta página tratando de enfatizar todos los elementos haciéndolos más grandes, brillantes y atrevidos. El resultado es que nada termina enfatizado.

Cuando cada elemento de una página grita por atención, el mensaje y propósito de dicha página se pierde. Al remover elementos, los que queden tendrán más atención. En lugar de añadir elementos visuales a una parte específica de la página, trata de quitar los elementos que lo rodean y usa los principios de espacio en blanco.

5. Diviértete, pero no exageres

Es probable que uno de los objetivos que tengas para tu presencia online es que desees crear una impresión en tus visitantes. Quieres que te recuerden tu empresa. Una de las mejores formas de lograr esto es añadir un poco de «diversión» a la experiencia. Después de todo, las personas disfrutan una experiencia divertida, y tal experiencia, con frecuencia, es memorable.

Una página que ofrece este tipo de experiencia es The dangers of Fracking. Esta es una página que habla sobre el peligro de la fracturación hidráulica, un tema que no pensarías que es divertido, pero que se convierte en atractivo, interesante y memorable por el uso de las ilustraciones, animaciones y un efecto de narrativa estilo parallax. Es un buen ejemplo de diversión en un tema serio para hacer más empoderante el mensaje y el experiencia.

Sin embargo, no debes olvidar que existe una línea que no debes cruzar cuando añades «diversión». Es fácil ir demasiado lejos y distraerse del objetivo principal. Cuando uses este enfoque, es importante saber dónde se encuentra esa línea para evitar cruzarla. Solo recuerda que siempre hay espacio para la diversión en una página web, pero tu labor como diseñador web es encontrar la línea entre «demasiado» y «lo suficiente» y ayudar a que tu página logre ese balance.

diseño-pagina-web-9

Si tu página necesita una renovación o una mejora, Staff Creativa puede ayudarte. Utilizamos las últimas y mejores tendencias de diseño web que hará que tu página web genere el tráfico que necesitas. ¡Contáctanos!

Este artículo fue originalmente publicado en 1st web designer, y ha sido traducido y adaptado al español por Staff Creativa, agencia de marketing digital en Lima, Perú. Si encuentras contenido online en inglés sobre diseño de páginas web, gestión de imagen corporativa, marketing digital o packaging, no dudes en contactarnos. Nos encargaremos de traducirlo y publicarlo, y te avisaremos!

2 Comments

Deja una respuesta