Los diseñadores tienen un tremendo impacto en el rendimiento de una web que depende de cómo diseñan, antes de que se haya escrito una sola línea de código. Este artículo explica cómo se puede diseñar teniendo en mente el rendimiento y que hay que tener en cuenta.
La velocidad es una parte fundamental en la experiencia que tiene el usuario de la web. Está demostrado que el rendimiento web tiene un impacto directo sobre cómo la gente usa un sitio web y en su intención de volver a usarla. Con el incremento del uso del móvil para internet, es más importante que nunca centrarse en el rendimiento. Aun así, el rendimiento es ignorado con frecuencia por la mayoría de los diseñadores. Esto sucede por distintos motivos, pero el origen está con frecuencia en que los diseñadores consideran que optimizar el tiempo de carga de una página es trabajo de otros.
La base para crear diseños con buen rendimiento es estar concienciados
Hay multitud de artículos que explican cómo hacer una web más rápida y casi todos proporcionan consejos como el minificado del CSS y la optimización de las imágenes. Estos consejos son importantes, pero no resuelven el problema de base.
El paso más esencial es poco tangible, requiere un cambio de mentalidad. No importa cuanto tiempo hayas invertido en la optimización, una web con tres mil líneas de CSS, diez plugins jQuery y cinco imágenes a pantalla completa va a ser lenta. Se puede mejorar el rendimiento, pero no verás grandes mejoras hasta que no hagas de este aspecto un principio central del diseño.
Diseñar con el rendimiento en mente requiere de compromiso para maximizar las necesidades y eliminar lujos superfluos. Se necesita un enfoque más práctico del diseño en el que cada elemento tenga un impacto tangible y netamente positivo sobre el resultado final. Esto no niega la importancia de la estética, sino que señala que no se le debe conceder un cheque en blanco.
La simplicidad y la eficiencia como objetivo
No hace falta decir que los diseñadores conocen la importancia de la simplicidad. No obstante, la eficiencia es ignorada en el léxico de los diseñadores. La simplicidad y la eficiencia no están directamente relacionadas. Muchos sitios web «bien diseñados» son atractivos, claros, intuitivos y absolutamente inflados.
Como diseñadores, queremos hacer algo que resulte atractivo a nuestros sentidos. Con este objetivo estamos viendo muchas webs que usan fotografía, texturas y detalles de acabado pulidos a alta resolución. Es difícil discutir los resultados desde un punto de vista estrictamente visual.
Diseñar para la eficiencia nos fuerza a crear una experiencia igualmente significativa con menos. ¿Puedes atraer el interés y la imaginación de tu audiencia sin usar como recurso una imagen a pantalla completa? Yo diría que sí puedes y que merece la pena.
Como ejemplo de un diseño sencillo, pero aun así ineficiente tenemos la página de inicio de Karma. El diseño de Karma es estupendo y claro, pero pesa alrededor de 1MB y realiza 45 solicitudes. No me malinterpretes, me encanta el aspecto de la web de Karma, pero falla en el test de rendimiento y, por tanto, en última instancia carece de un diseño acertado.
Un diseño eficiente no tiene que ser por naturaleza un diseño austero y sin personalidad. Si no que más bien, la existencia de cada elemento debe ser analizada y estar justificada. Los diseños eficientes no carecen de estilo, simplemente existe un muy buen motivo por el que se ha añadido ese estilo concreto. Es fácil encontrar algo en Dribble y añadirlo a tus diseños solo porque es bonito. Pero un enfoque respecto al diseño sin reflexión crea ineficiencia.
La estética «Flat Design» o diseño plano
Ha habido mucho debate sobre el «flat desing«. Cabría pensar que un estilo minimalista impulsa la velocidad, pero no es así necesariamente. El flat design puede disminuir el impacto, pero no hay garantías. Una muestra de ello es el ejemplo anterior, la web Karma.
Existen ciertos estilos visuales tendentes a proporcionar un mejor rendimiento, pero todo depende al final de su ejecución y de la manifestación del estilo en el diseño final.
Lo que te queda por leer:
Ejemplos concretos
- Diseño sin muletas
- Mejora tus habilidades de escritura
- Céntrate en la resolución de problemas
- Aprende código
- Perfecciona tu técnica
Deja una respuesta