Las páginas web estáticas se han convertido ya en una cosa del pasado, y los desarrolladores web son una parte crucial del proceso de diseño de las nuevas páginas, ya que son los que se ocupan de ponerlas en marcha y llevar los diseños a la vida: un desarrollador es, al final, un diseñador de código.
Con la necesidad inherente a las nuevas tecnologías de crear contenido responsive, es necesario que los diseñadores tengamos algunas cosas en cuenta a la hora de diseñar para hacer el trabajo más fluido y mantener un código más limpio:
· Apréndete los tamaños que emplea el framework para el que vas a trabajar. Si el framework sobre el que se va a construir la web ya tiene márgenes pre-creados para diferentes tamaños de pantalla, usa esos. Usa también el mismo tamaño de medianil (espacio entre columnas). Sólo 2px de diferencia pueden hacer que lo que hayas diseñado no se ajuste bien una vez aplicado, las cajas se monten y los textos se vuelvan ilegibles. Ten en cuenta también el tamaño más pequeño para el que vas diseñar a la hora de escoger tipografías y módulos. También ten en cuenta que la moda actual es no trabajar con ningún framework: pregúntale a tu programador de confianza qué y cómo lo necesita.
· Crea un sistema de retículas. Sistemas como Bootstrap y 960 Grid usan un sistema de 12 columnas, ya que es un número fácilmente divisible entre números pequeños: puedes tener 12, 6, 4, 3, 2 o hasta 1 columnas con espacios iguales, que restringe el espacio y le permite al desarrollador crear clases dentro del código que se correspondan con estos tamaños de columna, para que no tengan que crear de forma individual cada bloque.
Muchos de los programas que se emplean para crear diseños de páginas web tienen ya incluidas opciones de diseño de retículas: Sketch tiene una gran variedad, y existen plantillas y ajustes de guías para Photoshop e Illustrator para todas las retículas típicas de los frameworks más usados, y si no siempre puedes crear las guías tu mismo. Te simplificará y te reducirá el trabajo (y el estrés), al no tener que rehacer ajustes cuando no se adapten al framework.
· Mantén la retícula Es habitual que los diseñadores queramos ser «rompedores» y hacer cosas «nunca vistas» para añadirle interés visual o enfásis a nuestro diseño, pero plantéate si ese objeto que has puesto en ese punto concreto, desalineado con respecto a la rejilla, o ligeramente más grande de tamaño, vale el trabajo extra del desarrollador y el trabajo extra del mantenimiento de la web, ya que para poner un objeto fuera de la retícula, hay que moverlo de manera manual usando una posición absoluta que se mantendrá a través de los dispositivos, por lo que hay que ajustarla manualmente cada vez.
· Mantén los elementos correlativos Cuando estás empleando un diseño de varias columnas, o tus filas tienen muchos objetos, para pantallas pequeñas a veces tendrán que cambiar de posición. Esto está bien, pero por norma general los elementos sólo pueden moverse a izquierda, derecha o unos encima de otros. Si mueves un objeto más lejos, por ejemplo, dos elementos más allá, tendrás que duplicar código o usar algún script para solucionarlo.
Básicamente: el código se escribe en líneas, que crean bloques. Sin CSS, los elementos de estas líneas se alinearan en la misma línea de izquierda a derecha o en columna unos encima de otros, dependiendo de la etiqueta HTML. El CSS le dice a los elementos dónde tienen que colocarse, pero si queremos colocar algo lejos de su posición natural (todos los elementos unos detras de otros) sin usar una posición absoluta, tendrás que copiar el código en dos sitios (el primero donde aparece en las pantallas grandes y el segundo, su posición en las pequeñas) y después, ocultar el bloque inactivo con CSS o Javascript. Esto crea líneas extra de código que hay que crear y mantener: y esto quieres evitarlo.
· Usa iconos y reglas consistentes. El diseño de interfaces va de hacer que el usuario se acostumbre a tu página con el menor tiempo y uso del cerebro posible, por lo que de manera ideal deberías usar símbolos que ya le sean familiares para indicarle una acción o proveerle con información. Piensa en el famoso «hamburger menu» o en el símbolo más (+) para indicar un desplegable. Son símbolos conocidos y los usuarios más o menos habituales de páginas web ya los conocen.
¿El problema? Hay muchos iconos y símbolos que se emplean para lo mismo, y muchas acciones que pueden representarse con el mismo símbolo: mantén durante todo tu diseño el mismo uso de acción/símbolo, emplea la lógica. Ser consistente hace feliz a tu desarrollador y es bueno para la comprensión del usuario final.
· No necesitas más de tres cambios de tamaño de fuente. Vas a usar dispositivos de pequeño tamaño como son los móviles y pantallas grandes de escritorio, el tamaño intermedio son las tablets y, en realidad, no necesitas cambiar los tamaños de fuente más de tres veces: una para cada «tipo» de dispositivo. No necesitas que cada texto se adapte perfectamente a todas y cada una de las pantallas que van a mostrarlo, mientras no sea demasiado grande o demasiado pequeño, los usuarios estarán bien: a menos que haya un beneficio directo para el usuario, un código más pequeño y menos tiempo de desarrollo (además de menos tiempo de diseño, ya que no tendrás que revisar cada pantalla y elegir el tamaño adecuado) es generalmente lo ideal.
· Los diseños curvilíneos son complicados. En Illustrator o Sketch es extremadamente fácil crear una curva, solo necesitas estirar un par de puntos con el ratón. Sin embargo, las curvas son una ecuación matemática dada entre esos dos puntos, por lo que pasarlas a código es muy complicado. CSS3 y HTML5 han hecho que las esquinas redondeadas y los círculos no sean un problema, pero las curvaturas irregulares son algo que probablemente sólo se va a poder conseguir con una imagen.
Y el problema de las imágenes para el diseño responsive es que están basadas en pixeles y son rígidas: cambiarles el grosor o la forma requiere de una nueva imagen que habrá que incluir en el código, una nueva petición HTML para el navegador y más partes móviles del código en el que las cosas pueden salir mal. El diseño responsive se basa en que debe ser flexible y fluido, y elementos basados en imágenes rígidas son la antítesis de esto.
Y para terminar, un disclaimer: no tienes por qué seguir ninguna de estas «normas». A veces para que tu diseño sea efectivo o se ajuste a la normativa de tu marca, tendrás que romper estas «reglas». Este artículo es para que comprendas los costes de no hacer caso de estas sugerencias: vas a crear retos para tu desarrollador y debes evaluar el coste VS el beneficio de las decisiones que has tomado para asegurarte de que son las ideales. Cuando puedes comunicarte con un desarrollador y entender su proceso de trabajo, es más probable que intente comprender y ajustarse a tu proceso y entre los dos lleguéis a una solución que sea buena para ambos, y resulte en un producto mejorado. Al final, de eso es de lo que se trata: de darle al usuario un producto excelente, hecho a medida para sus necesidades.
