Conceptos

Diseño de paginas web

Diseño de paginas web

El diseño web implica trabajo relacionado con el layout y diseño de páginas online, así como la producción de contenido, aunque generalmente se aplica a la creación de sitios web.

En este caso, los diseñadores web crean las páginas utilizando lenguajes de marcado como HTML o XML.

Por otro lado, la parte visual de los sitios está a cargo del CSS, término utilizado para estilizar los elementos escritos en HTML.

Por lo tanto, es común que los diseñadores web utilicen ambos para construir un site porque juntos definirán cómo aparecerán las páginas en los navegadores.

El proceso de creación de sitios se puede realizar mediante programas de codigo abierto como los famosos Content Management Sistem o CMS que son plataformas de administración de contenido, como WordPress que es uno de los más conocidos y prácticos porque tiene una serie de templates que pueden basar el sitio. El web designer tiene la tarea de instalarlos y personalizarlos según lo que cada cliente quiera.

Elementos del diseño web

1. El tiempo de carga

A nadie le gusta esperar y menos cuando tiene otras opciones a la mano. Así que una de las primeras cosas que debes considerar al momento de diseñar tu sitio es que el tiempo de carga sea menor.

Cuida el peso de las imágenes y las integraciones que realizas para que tu sitio vaya disminuyendo su tasa de rebote.

2. Usabilidad

Aquí nos referimos a que sin importar quién acceda a tu sitio, el usuario pueda entender cómo está organizado y cómo funciona. Esto evitará que se frustre y lo abandone porque no encuentra lo que está buscando.

Por eso son muy importantes las A/B tests, pues te permitirán saber qué es lo que funciona y lo que no, para poder hacer optimizaciones oportunas y mejorar la experiencia de usuario.

3. Legibilidad

Con esto nos referimos a que los elementos que la conforman, por ejemplo los colores de las diferentes secciones deben ser amigables y no cansar la vista del lector. De lo contrario podría aumentar la tasa de abandono.

En los últimos años el minimalismo se ha apropiado de las tendencias de diseño web, en especial aquellas que lo utilizan como fondo para maximizar la legibilidad para el usuario y de las arañas de los motores de búsqueda.

En este aspecto la tipografía también es muy importante. Quizás el color de tu sitio y la estructura estén muy bien y sean fáciles de entender, pero si la tipografía es ilegible tampoco va a funcionar.

Además cuando se trata de una sección muy larga o de un contenido de blog, debes evitar párrafos muy largos porque puede parecer pesado y desanimar al usuario a terminar la lectura.

Diseño responsivo

El diseño responsivo se adapta a cada dispositivo, es decir que es un mismo diseño que va reestructurándose de forma automática dependiendo del dispositivo en donde se acceda al sitio.

El objetivo de esta reestructuración es que todos los elementos puedan hacer que la experiencia del usuario sea la mejor, aprovechando los espacios y características del dispositivo para que el contenido del sitio sea accesible y legible.

Por ser un poco más complejo, este tipo de diseño emplea diferentes hojas de estilos CSS, y puede requerir de un tiempo más largo de carga. Las medidas son proporcionales y van variando de acuerdo a la pantalla.

Este diseño se ha convertido en casi una norma (aunque depende del presupuesto y las necesidades de cada uno) en la industria.

Usabilidad Web

La usabilidad web (UX o user experience, en inglés) es el grado de facilidad de uso que tiene una página web para los usuarios que acceden e interactúan con ella. Jacob Nielsen está considerado el padre de la usabilidad y, en 2000 lanzó al mercado el libro Designing Web Usability: The Practice of Simplicity (1999) ​donde expone los 10 principios que deben regir la usabilidad de cualquier web​.

Estos principios son:

  • Visibilidad del estado del sistema. El sistema, es decir la web o aplicación, siempre debe mantener en todo momento a los usuarios informados sobre lo que está sucediendo, a través de mensajes en tiempo y forma.
  • Coincidencia entre el sistema y el mundo real. El sistema debe hablar el idioma de los usuarios, con palabras, frases y conceptos familiares para el usuario y no con términos técnicos.
  • Control y libertad del usuario. Dar la posibilidad a los usuarios a corregir sus errores en la navegación por la página web.
  • Consistencia y estándares. Los usuarios no deberían tener que preguntarse si diferentes palabras, situaciones o acciones significan lo mismo. Uno de los grandes retos como diseñadores es saber usar de forma habitual las convenciones o recursos habituales de las páginas web.
  • Prevención de errores. Incluso mejor que los buenos mensajes de error es un diseño cuidadoso que evita que nos equivoquemos. Un buen diseño web debe eliminar las condiciones propensas a errores.
  • Reconocimiento en lugar de recuerdo. Debemos minimizar en lo posible que el usuario haya de recordar de que ha hecho previamente haciendo visibles los objetos, las acciones y las opciones.
  • Flexibilidad y eficiencia de uso. Los aceleradores, que no son vistos por el usuario novato, a menudo pueden acelerar la interacción para el usuario experto, de modo que el sistema puede atender tanto a usuarios inexpertos como experimentados.
  • Diseño estético y minimalista. En diseño web menos es más. Debemos mostrar la información estrictamente necesaria para que el usuario no se pierda o marche. Debemos conducirlo por donde nos interesa.
  • Ayudar a los usuarios a reconocer, diagnosticar y recuperarse de errores.
  • Ayuda y documentación. Aunque es mejor si el sistema se puede utilizar sin documentación, puede ser necesario proporcionar ayuda y documentación.