Hoy en día, con tantos themes premium, page builders y plugins parece muy sencillo crear un sitio web «bonito». Pero si queremos un sitio web que nos sea realmente útil deberemos tener en cuenta al menos 6 principios fundamentales.
Sí, solo he escogido 6. ¿Tan sencillo es? Las respuesta es NO. Para poder cumplir con cada uno de ellos tenemos que tener en cuenta muchas más cosas que se relacionan entre sí.
-
Que cumpla su función.
Lo primero que se debe pensar es para qué queremos un sitio web.
¿Se trata de dar una imagen de empresa? ¿Qué tipo de empresa? ¿Cuáles son sus clientes? ¿A qué público nos estamos dirigiendo?
¿Se busca promocionar y vender unos productos?
¿Se trata de un portfolio para un freelance? o ¿Es un portal de noticias?
Para tener claro todo esto necesitamos apoyarnos en un Brief. Una vez lo tengamos el diseñador necesitará el contenido, los textos, la manera de utilizar el lenguaje dependiendo del público al que nos queramos dirigir.
El diseño deberá basarse en las necesidades de tus posibles clientes.
Lógicamente querrás tener muchas visitas, evitar que se marchen nada más entrar (o reducir el porcentaje de rebote), conseguir que lleguen a ser recurrentes y por supuesto que tus visitantes se conviertan en clientes.
Cada página de tu sitio web debe tener un propósito claro y satisfacer una necesidad específica de los visitantes de la manera más eficaz posible. No solo es importante plantear el diseño en base a la función de la web, sino también y en primer lugar en base al contenido. -
Que transmita la imagen de marca.
-
El diseño tiene que ser fiel a la imagen de marca.
Si contamos con manual de identidad visual deberemos cumplir sus indicaciones.
-
Tipos de letra:
No transmite lo mismo un tipo de letra sans-serif (o sin remates) como es la Arial, que otras serif, como la Times o la Georgia. Tampoco es lo mismo un botón que un titular o el texto normal de párrafo. No es recomendable usar más de 3, yo no suelo pasar de 2 aunque juegue con variantes de grosor y estilo.
-
Color:
Siempre debemos partir de los colores corporativos. Estos deben ser compatibles entre sí y adecuados para la marca, atendiendo a la simbología y psicología del color. A partir de ahí podemos crear una paleta de colores que favorezca una buena experiencia de usuario. Seguir una gama crea equilibrio y armonía. El uso de colores que contrasten para el texto y el fondo hace la lectura más fácil. Los colores saturados llaman mucho la atención por lo que deben utilizarse en espacios más pequeños (por ejemplo, para botones y llamadas a la acción). Por último, pero no menos importante, debemos saber cuándo hemos de utilizar texto en positivo o en negativo (texto blanco sobre fondo oscuro).
-
Formas:
Para explicar la influencia de las formas voy a poner como ejemplo lo que transmite un logo según las formas que presente. Algunos logos pueden transmitir suavidad por sus curvas y otros dureza y dinamismo por el uso de lineas rectas y diagonales. Todo esto debemos tenerlo en cuenta.
-
Imágenes:
Una imagen puede dar mucho impacto visual y transmitir una idea sin palabras. La elección de las imágenes adecuadas puede ayudar con el posicionamiento de marca y la conexión con nuestro público objetivo. Si no tenemos fotos profesionales podemos comprar imágenes de pago.
Podemos trabajar dichas imágenes en base a los colores corporativos, o bien enmascararlas en base a las formas del logo.
-
-
Usabilidad:
Si queremos reducir el porcentaje de rebote necesitamos un sitio web que resulte fácil de usar. El usuario debe encontrar todo fácilmente, no podemos hacerle pensar. ¿Cómo lo conseguimos?
-
Con una navegación sencilla.
Debe ser lo más sencilla posible para que los visitantes puedan decidir cómo moverse por nuestro sitio web rápidamente. Desde distintos sitios diferentes y básicamente con el menor número de clics, ese es el primer principio de la usabilidad.
-
Con información rápida y clara.
A pesar de la fuerza que pueden dar las imágenes, el texto sigue siendo el rey. Cuando navegamos queremos la información al instante, por lo que es importante comunicarse con claridad y hacer que la información sea fácil de leer y digerir. Los usuarios no leen los textos completos sino que escanean el contenido. Es necesario organizar y jerarquizar la información utilizando titulares, subtítulos, bloques, citas y elementos de lista. No podemos olvidar uno de los puntos más importantes: LOS ESPACIOS EN BLANCO. Para ello podemos apoyarnos en el siguiente punto.
-
Diseño con rejilla:
Muy importante para diseñar con orden y proporción. Los diseños basados en cuadrícula organizan el contenido en secciones, columnas, medianiles y cuadros que se alinean y se distribuyen de manera proporcional, lo que conduce a un diseño equilibrado, limpio y ordenado. Esto es algo que siempre se ha usado en el diseño editorial. Probablemente lo más interesante de Bootstrap es su rejilla responsive de 12 columnas.
-
Con optimización para móviles o diseño responsive
Creo que esto ya, en 2017, no haría falta ni explicarlo. Todos sabemos que cada vez se utilizan más dispositivos móviles y tablets con múltiples tamaños de pantalla. Un sitio web no optimizado es muy difícil de usar desde un móvil. Así que nuestra página web debe ser responsive sí o sí, para que se ajuste a diferentes anchos de pantalla. No solo influye en la usabilidad, también en la experiencia de usuario y en el posicionamiento en buscadores.
-
-
Experiencia de usuario:
Se trata del conjunto de sensaciones que un usuario puede obtener al visitarnos. Si los puntos anteriores son imprescindibles, la experiencia de usuario positiva va un paso más allá. Una vez tengamos un sitio funcional, podremos centrarnos en hacer más agradable al usuario su estancia en él.
-
DISEÑO
Aquí vuelve a influir el diseño ordenado, el uso de la tipografía, color e imágenes. De hecho sigue siendo lo más importante. He visto muchos sitios web que contenían muchos efectos, animaciones de jQuery y otros elementos llamativos, pero con un diseño poco adecuado.
-
Tiempo de carga:
Siguiendo con la idea de facilitar la navegación al usuario y hacer su experiencia más agradable, está claro que no podemos hacerle esperar. Como usuarios somos muy impacientes y si un sitio web no carga rápido nos vamos a otro. También influye en el SEO o posicionamiento en buscadores. Para conseguir esta rapidez debemos optimizar el tamaño y la compresión de las imágenes, cargar únicamente el código CSS y JS necesario, evitando themes o plantillas con múltiples opciones, utilizar el menor número de plugins posible y minimizar HTML, CSS, JavaScript (comprimirlo para acelerar el tiempo de carga). También podemos utilizar plugins de caché. .
-
Innovación, animaciones, efectos, jQuery…
En su momento los sliders, las pestañas, los toggles o efectos de acordeón, los botones de subir arriba, el parallax, etc.
-
-
SEO:
Realmente el SEO empieza a trabajarse desde la elección de palabras clave y el contenido, además también influyen los enlaces externos.
Los diseñadores y desarrolladores podemos ocuparnos de las características técnicas que influyen en él, como la estructura, títulos de página, encabezados, enlaces, mapa del sitio XML, código semántico, etiquetas ALT, rapidez de carga, optimización para móviles… -
Accesiblidad:
Lo ideal es hacer un internet para todos. Para personas con discapacidades como visibilidad reducida, daltonismo, incluso para invidentes. Para ello se usarían navegadores de voz, audiodescripciones y muchas otras soluciones en las que, afortunadamente, cada vez vamos avanzando más. He tenido que dejar este aspecto para el final porque suele ser el más sacrificado y lo será hasta que sea obligatorio por ley.
Por último, hemos de tener en cuenta que internet es algo tan nuevo que en ella todo crece y cambia de manera rapídisima. Muchos de los sitios web actuales e incluso este post pronto quedarán obsoletos. Seguro que me he dejado algunas de las últimas innovaciones, como las páginas AMP, pero espero que pueda servirte de algo.
¿Qué opinas sobre la importancia del diseño web?
Comparte este artículo:
Deja una respuesta