Patrones de diseño. La luz al final del túnel en mis primeros pasos como desarrollador web
En mis inicios estudiando desarrollo web, antes de saber diferenciar entre frontend y backend e incluso antes de siquiera descargar un editor de código en mi portátil, tenía la idea de que hacer sitios web era algo complicado.
Esa incertidumbre se disipó un poco cuando formalmente tuve mi acercamiento a HTML y luego a CSS. Los cursos, documentación y el contenido que muchas personas tenían a disposición en la web hicieron todo más fácil de entender. Se fue el miedo escénico de aprender algo por primera vez.
Pero, como en cualquier ejercicio de aprendizaje, pasé pronto del optimismo total al terreno del estancamiento. Si, entendía el funcionamiento técnico de las etiquetas, las media queries e incluso los principios del diseño responsive... pero apenas me sentaba a teclear un proyecto personal, no avanzaba. En ese momento supe que estaba ignorando algo.
Era común encontrar usuarios en Twitter hablando constantemente de la importancia de los patrones de diseño, pero por lo general hacían referencia a patrones de diseño en el backend. Así que infectado por la duda y a unos clics de distancia descubrí que los patrones de diseño web también existían.
Saber la importancia del diseño web responsive pero ignorar la importancia de los patrones de diseño web me hizo perder mucho tiempo. La mayoría aprendimos o tuvimos conciencia del gran mandamiento web: móvil primero, pero luego nos perdimos en pasar de móvil a escritorio y terminamos usando la fórmula clásica de mantener todo en una misma columna y sólo jugar con los tamaños de letra.
Un patrón de diseño es simplemente una guía que sirve para generar un concepto/maqueta y que dependiendo del campo de aplicación del proyecto web, puede ser de varios tipos. Esto es muy importante, ya que abre las posibilidades a nivel de diseño que existen para una web de una temática específica.
Porque lo difícil no es poner un botón o centrar un div (o tal vez si, ya saben, el chiste de centrar el div jamás morirá), lo complicado es distribuir el contenido para que responda de forma óptima en distintas pantallas de distintos tamaños y que al mismo tiempo tanto la buena experiencia de usuario como el mensaje a transmitir no se pierdan.
Si alguno de ustedes está iniciando en desarrollo web, les recomiendo iniciar aprendiendo sobre los patrones básicos con los que yo me topé: mostly fluid, column drop, layout shifter, tiny tweaks y off canvas (Spoiler alert: tiny tweaks fue el primer patrón que usé sin saber que así se llamaba). Por supuesto que existen muchos patrones más que salen de las combinaciones de estos o que simplemente tienen otros nombres y se enfocan en la forma de servir el contenido al usuario para que haga X o Y acción, pero eso es algo que poco a poco se va descubriendo en este mundo de la web.
Así que nada, esa fue mi experiencia cuando me metí en este mundo del desarrollo web. Más adelante les contaré como me fue recién conocí a JavaScript, posiblemente en Octubre, el mes del terror 😂.