Diseño del blog
Ha pasado un poco de tiempo desde la última entrada, y entre muchos motivos, uno de los principales fue que me propuse tener una idea general del diseño a nivel de UI y UX; y entre mi desconocimiento y exigencias personales de tener algo bueno que compartir en esta entrada terminé entrando en un bloqueo que felizmente parece estar parcialmente resuelto y aquí les cuento cómo fue el proceso.
Fuentes de inspiración
El producto a construir que se ha mencionado en esta serie de posts es un blog, ¿qué tan difícil puede ser crear un diseño para esto?. Bueno, mi motivación principal de construirlo es que en mi opinión, no encuentro uno con el contenido, simplicidad, experiencia de lectura, experiencia de usuario y accessibilidad que a mi me gustaría.
Teniendo en cuenta los puntos anteriores, a continuación les comparto mis referencias:
Simplicidad
Overreacted by Dan Abramov — En mi opinión, este es un blog con una UI simple y directamente enfocada en el contenido, lo cual me parece genial dado que a mi punto de vista ese es el objetivo principal de compartir conocimiento en línea.
Experiencia de lectura
Aquí tengo varias referencias y trataré de cubrir los aspectos principales que considero de cada una.
Medium — Muy buena cuando está enfocada a lectura de texto, me parece que la fuente usada es muy similar a la usada en libros y no hay elementos de distracción. Sin embargo, para blog post de tecnología, siento que leer código no es la mejor experiencia.
Kent C. Dodds blog — La forma en la que resalta bloques de código y el contraste de colores que tiene para hacer llegar el mensaje clave en sus posts me parece una muy buena estrategia.
Josh W. Comeau blog — La interactividad que existe en sus posts me parece buenísima para entender los conceptos sobre los que hace mención en su contenido.
Experiencia de usuario
También diversas referencias aunque algunas ya mencionadas anteriormente:
Josh W. Comeau blog — Navegación y contraste de colores simple y limpia. Forma de cambiar entre dark/light mode sencilla.
CSS Tricks — La interfaz a mi gusto me parece un poco abrumadora, sin embargo la forma que han seccionado el contenido acompañado de algunas animaciones al interactuar con diversos componentes me parece interesante.
Learn Svelte — La interactividad de los tutoriales que te retan a que tú escribas código mientras aprendes me parece de las mejores formas de poner en práctica lo que estás leyendo.
Kent C. Dodds blog / Smashing Magazine — No la UI que más me agrada, pero en términos de funcionalidad de poder tener tags, una barra de búsqueda y poder seccionar contenido definitivamente las agradezco sobre todo cuando tienes tanta variedad de contenido.
Contenido
Overreacted by Dan Abramov — Recuerdo haber leído la entrada que hago énfasis en el enlace, y el enfoque que Dan le pone hacia los modelos mentales para entender conceptos de cierta complejidad me parece definitivamente una muy buena estrategia.
MartinFowler.com — El enfoque en patrones y abstracciones para creación de software es un tipo de contenido muy enriquecedor.
Scotch.io (antes de que lo comprara Digital Ocean) — Probablemente una opinión muy personal, pero a mi me encantaba poder seguir un tutorial con un mix de tecnologías muy variadas y terminar con un proyecto usable que después podía investigar más a fondo para entender lo que había escrito.
FastAPI docs — Si han usado FastAPI, probablemente han seguido su documentación y en mi humilde opinión es una de las más sencillas de ingerir, sobretodo porque explica de manera muy sencilla y concisa cómo el framework funciona y te ayuda a distintas tareas que quieras resolver. Además de enlaces complementarios al contenido en mención.
Angular In Depth — Personalmente me encanta entender aunque sea a un alto nivel el cómo las herramientas que uso funcionan internamente, este tipo de contenido es uno de los que más me gusta.
Accessibilidad
Josh W. Comeau blog — Navegación por teclado, contraste de colores, screen reader. Features que parecieran que todos los sitios lo toman en cuenta pero lamentablemente no siempre es así.
Diseño inicial a implementar
Una vez analizado las referencias, podemos determinar el diseño que implementaremos. Sin embargo, como mencioné al inicio, considero que este es uno de los skills que no me siento muy cómodo y aunado a mi intención de perfeccionismo, me compliqué de más. Inicialmente quise diseñarlo desde 0 con las ideas que tenía en mente, crear un user persona, luego definir un user flow y finalmente crear un wireframe de baja fidelidad y por último reflejado en una UI creada en Figma.
Todo lo mencionado, era mi ideal y en el camino fui descubriendo que ignoro muchas habilidades de esa área, así que a pesar de haber comenzado algunos cursos en línea y leído algunos posts en línea, probado plugins de Figma basadas en IA (e.j. builder.io); terminé probando hacer una búsqueda de proyectos públicos que pueda tomar como base para después definir de manera iterativa el diseño final a implementar. Así fue como di con este template que tiene lo mínimo que estoy buscando para empezar: The Blog — A Web Personal Blog.
Este template combina parte de la simplicidad y experiencia de usuario que mencionaba en la sección previa. Aun así, faltan definir algunos features que me interesan y detalles a nivel de accessibilidad.
Por otro lado, una preferencia personal de trabajar cualquier proyecto que tenga que ver con el front-end, es tener una librería de un sistema de diseño de componentes. Y para esto, otra vez una búsqueda rápida me permitió dar con: Bahram l Free Blog UI Template, el cual si bien no sigue el concepto de UI que describo anteriormente, tiene un template de un sistema de diseño de componentes que tomaré como punto de partida.
La mayor ventaja que encuentro al tener esta librería de componentes por separado es que los cambios futuros a nivel de UI que quiera realizar (que estoy seguro que habrán) podrán estar centralizados en una capa separada que al hacer rollout de una nueva versión y el proyecto que la consuma haga un upgrade, se aplicará de manera muy sencilla. Hablaremos de esto con mayor detalle más adelante.
¿Cómo sería esta etapa dentro de una empresa?
La gran diferencia con este proceso al trabajar en un producto de una empresa, es que probablemente cuente con recursos para que una persona o un equipo encargado de diseño pueda realizar el prototipo inicial a seguir y hacer pruebas de UX con posibles usuarios y obtener feedback incluso antes de implementar alguna línea de código. El resultado final estaría enlazado en el product spec que mencionamos en la entrada anterior.
Conclusiones
Entré en un limbo de perfeccionismo sobre el diseño, pero felizmente logré salir de ahí al encontrar referencias públicas que usaré como primera iteración para construir a partir de ahí y espero en algún momento poder compartir un Figma propio con las diferentes iteraciones que termine realizando hasta llegar a una versión con la que me sienta cómodo.
Si bien UI/UX no es mi habilidad primaria, al querer un construir un producto del que yo he sido usuario en diversas etapas de mi carrera, me permito tomar diversas fuentes de inspiración y resaltar detalles de usabilidad que a mi como usuario me gustan. En el futuro, cuando el blog ya esté en marcha y tenga mis propios usuarios, intentaré ir obteniendo feedback y mejorarlo en base a ello.
Ahora si, con las bases definidas, podremos comenzar a crear esto y escribir código que permita volver este producto una realidad. Nos leemos en la siguiente entrada 😉.
