Por qué pensar en el futuro es crucial en el diseño web

La diferencia entre construir un gran sitio web y uno mediocre generalmente se determina desde el principio. A menudo se trata de que un diseñador web pinte su proyecto en una "esquina" virtual. Ahí es donde un diseño se vuelve inflexible e incapaz de adaptarse a varios casos de uso.

Esto tiende a suceder en la fase de creación de prototipos. Dedicamos mucho tiempo y energía creativa a una idea que se ve increíble. A nuestros clientes les puede encantar tanto como a nosotros. Pero solo cuando realmente comenzamos a construirlo, comenzamos a comprender completamente las consecuencias.

Una maqueta de diseño sirve como brújula para nuestros proyectos de sitios web. Si no pensamos en el futuro con respecto a lo que requieren ciertos elementos, podría significar estar atrapado en una mala situación. El resultado final es un sitio que tiene que hacer algunos compromisos serios para funcionar en diferentes dispositivos y navegadores. Eso puede afectar negativamente la accesibilidad, el rendimiento y el cumplimiento de las mejores prácticas.

Afortunadamente, un poco de planificación lo ayudará a evitar un proceso de compilación desordenado. Echemos un vistazo a algunos elementos clave a considerar antes de compartir sus ideas con un cliente.

Cómo se adaptan los elementos a diferentes pantallas

Hay una razón por la que se habla tanto de un enfoque de "primero móvil" para el diseño web. En esencia, esto nos permite comenzar con lo esencial de un sitio web. A partir de ahí, podemos agregar y mejorar a medida que la ventana gráfica se hace más grande.

Aún así, cada uno de nosotros tiene sus propias preferencias para construir prototipos. Para aquellos que aún utilizan un enfoque basado en el escritorio, es importante pensar en cómo funcionarán todos esos elementos de diseño sofisticados en un teléfono.

Si planea implementar CSS Grid o Flexbox, serán de gran ayuda en términos de hacer el mejor uso del espacio disponible en la pantalla. Pero otros elementos pueden requerir más esfuerzo para que funcionen.

Los controles deslizantes grandes, por ejemplo, pueden volverse muy difíciles de usar en pantallas pequeñas. Las imágenes complejas pueden no ser tan impactantes y el texto puede sobrepasar los límites. El rendimiento también puede retrasarse.

En este caso, es posible que deba decidir si vale la pena mostrar el control deslizante en el dispositivo móvil. O tal vez podría refactorizarse para adaptarse mejor al trabajo en todas las situaciones.

Impactos de accesibilidad

El diseño comienza con la elección de las fuentes y los colores apropiados. Ambos están profundamente conectados con la marca y la accesibilidad.

Las fuentes deben ser nítidas y de tamaño adecuado para que sean legibles. Si bien la escritura elegante y el tipo decorativo pueden verse hermosos, debe ser lo suficientemente grande para leer y restringir el uso en los encabezados. Si esos requisitos no se pueden cumplir razonablemente, puede ser mejor eliminarlos de su proyecto por completo.

Además, el contraste de color también debería ser una preocupación importante. Los colores de fondo y de primer plano deben lograr una relación de contraste aceptable para que se consideren accesibles. Además, es solo una buena práctica.

Si no está seguro acerca de su paleta, use una herramienta en línea para determinar su idoneidad. A veces, incluso un ligero ajuste es todo lo que se necesita para pasar los estándares WCAG AA.

Más allá de esos dos elementos, también es bueno tener un plan sobre cómo mostrará elementos como iconos. ¿Son intuitivos? ¿Irán acompañados de texto?

Compatibilidad al revés

No todos los sitios web tienen que ser totalmente compatibles con, por ejemplo, Internet Explorer 9. Y los navegadores heredados no necesariamente deberían disuadirnos de usar el último CSS o JavaScript. Pero se debe pensar un poco en la compatibilidad con versiones anteriores.

De particular preocupación son los elementos de diseño que harán que un sitio web quede completamente inutilizable en software antiguo. Incluso si un navegador en particular constituye un pequeño porcentaje de los visitantes de su sitio, todavía deja algunas conversiones potenciales sobre la mesa.

Vale la pena considerar qué efecto tendrán las decisiones de diseño en estos usuarios. Los recursos alternativos disponibles para una tecnología determinada pueden ser suficientes para mantener las cosas con un aspecto decente y utilizable. Aún mejor es que pueden ser bastante simples de implementar.

Antes se esperaba que los diseñadores se aseguraran de que los elementos se vieran y funcionaran exactamente igual en todos los navegadores. Eso puede ser demasiado pedir en estos días. Siempre que un usuario pueda navegar y consumir contenido en algunos de los software más antiguos, eso podría ser suficiente.

Escenarios que aún no han sucedido

Incluso los sitios web más pequeños tendrán la necesidad de evolucionar con el tiempo. A medida que se agreguen nuevos tipos de contenido, deberán tenerse en cuenta en el diseño. Si no está preparado, la implementación de estos elementos podría entrar en conflicto con lo que ya existe.

Piense en agregar una serie de videos, por ejemplo. Si bien el proceso de agregar ese contenido puede ser bastante fácil, ¿cómo encajará en el aspecto que ya ha establecido? ¿Utilizará una interfaz de usuario de navegador predeterminada o creará algo que coincida con su marca?

Si bien no siempre puede predecir el futuro, puede planificar todo tipo de posibilidades. Esto es parte de lo que un sistema de diseño le permite lograr. Al establecer algunas pautas predeterminadas desde el principio, le resultará más fácil lidiar con futuras adiciones.

La realidad es que lo que diseñamos hoy probablemente cambiará en el futuro. Por lo tanto, vale la pena estar preparado para esa eventualidad.

Construyéndolo bien la primera vez

Crear esa primera maqueta es mucho más que solo hacer que las cosas se vean bien. Incluso va más allá de impresionar a sus clientes. De hecho, es un ejercicio que nos obliga a mirar nuestro proyecto como un todo.

La estética debe ser agradable a la vista. Pero el diseño también debe ser accesible y capaz de adaptarse a varias pantallas. Además, es posible que deba adaptarse a diferentes tipos de contenido a medida que evolucionan las cosas.

Si eso suena abrumador, respire profundamente. Aquí es donde su experiencia y pericia pueden venir al rescate. Las herramientas adecuadas también pueden colaborar.

Piense en lo que ha funcionado (y lo que no) en sus proyectos anteriores. Busque formas de implementar características que sean resilientes. ¡Haz eso y estarás en camino a un proyecto exitoso!