Programando un blog desde 0. #2 Diseñando la página 2


Una vez superado el escollo de ponerle los cimientos al proyecto, ahora queda ir poniendo ladrillo a ladrillo y verlo crecer. ¿Por donde empezar? Tenemos dos opciones: O la la webapp que hará de cliente, que ya arrancamos en el primer capitulo, o el servidor que la va a proveer de datos. Podríamos pensar que sin servidor no hay cliente, ya que este no tendría ningún dato que mostrar. Sin embargo, prefiero empezar mis proyectos por la parte visual y manejar la parte tangible desde el principio. Me motiva mas y en este tipo de proyectos en solitario es importante no perder el ímpetu para no abandonarlos. Crearemos un proveedor de datos falseados y mas adelante lo sustituiremos por el servidor de producción.

Preambulo

Podría abrir mi editor de texto y empezar a teclear javascript como un loco. Pero la experiencia me indica que esta estrategia solo me va a llevar un código poco mantenible, ilegible y difícil de escalar. Por tanto, voy a optar por el enfoque mas racional y parecido a como lo hariamos en el trabajo: Pensar un poco las cosas antes de ponerse manos a la obra.

Partir de una idea, plasmarla en papel, de ahí a una aplicación de diseño (photoshop, sketch, illustrator…), a una de interfaces (invision, marvel…), maquetarla en html y css y, darle funcionalidad con javascript… Es decir, me imagino que el proceso tendrá una estructura similar, dado que mi desempeño profesional se limita tan solo al último paso. No obstante, y sin entrar en tantísimo detalle, voy a intentar ceñirme a ese flujo de trabajo. Para la entrada de hoy me gustaría centrarme en los tres primeros pasos: Partir de una idea sencilla y que he boceteado en una servilleta e implementarla en un programa de dibujo vectorial, a ver que tal queda. Una vez tengamos este diseño expresado a modo de concepto será mucho mas facil implementarlo como web.

Así que en la entrada de hoy no habrá nada de código, solo dibujitos. A disfrutar!

Gravit

En un mundo ideal, realizaría esta labor con Sketch. La he probado un par de ratos en el trabajo y me parece la herramienta definitiva para plasmar interfaces. Pero como no estamos en ese mundo ideal, la licencia cuesta 100€ anuales y, lo que es peor, solo está disponible para Mac. Y yo, al menos en el ambito personal, sigo siendo fiel al pinguino.

Adobe tiene un par de alternativas muy interesantes: Por un lado Illustrator, y por otro XD. El primero es una herramienta multiusos para dibujo vectorial. Es decir, no sirve exclusivamente para dibujar interfaces, pero es lo suficientemente versatil como para hacerlo. En el pasado he hecho algunas cosas con ella (diseño textil básicamente) y me gusta mucho (muchísimo, mas bien), pero la suscripción de adobe es igualmente prohibitiva (aunque el primer mes es free) y tampoco está disponible para linux.

El segundo, XD, es una herramienta relativamente reciente que han sacado para el diseño de interfaces gráficas. Aun no la he probado, pero tiene una pinta estupenda y me gustaría hacerlo en breve. No va a ser el caso porque tampoco está disponible para linux ¡qué manía nos tienen!

Buscando alternativas, finalmente dí con Gravit designer. Y la sorpresa fué mayúscula:

  • Herramienta de dibujo vectorial multiplataforma. Así que esta sí, disponible en Linux, Mac y Windows.
  • Se puede usar como una webapp. Sin instalar nada y desde tu navegador.
  • Ofrece un servicio de almacenamiento en la nube muy util y gratis.
  • Es gratis.
  • Disponible como paquete Snap, muy facil de instalar en Linux si tienes un sistema operativo mas o menos reciente.

Probando la aplicación he descubierto que no solo cumple con el trabajo sino que lo hace a las mil maravillas. La interfaz está bien diseñada y se deja usar con una facilidad pasmosa. A grandes rasgos, y salvo cosas muy puntuales, no he echado de menos ninguna de las caracteristicas que ya usaba en Illustrator. Si eres un usuario avanzado de esta última, probablemente Gravit se te quede corto. Si solo necesitas una herramienta ligera para dibujo vectorial que usar de vez en cuando, como es mi caso, no sé como expresarte lo muchísimo que la recomiendo. Dicho esto, empecemos a trabajar con ella.

DISCLAIMER

Quizas no haya quedado claro en la entrada aun, pero no soy nada ni remotamente cercano a un diseñador de interfaces, aplicaciones, gráfico, web, etc. En serio, lo poco que sé sobre la disciplina es lo que he adquirido por curiosidad en unos pocos videos de youtube y en algun artículo que he leido por ahí. Así que vamos a relajarnos y a disfrutar de como Fran hace un ridiculo jugando a pinta-y-colorea de webs. Si eres diseñador, ya me disculpas el bochorno 😀

Objetivo del día

Obtener una serie de pantallas que sirvan de guía a la hora de desarrollar la página, en cuestiones tales como estructura, color, medidas, distribución y tipografías. Plantear las posibles interacciones del usuario con la página y como debería esta reaccionar a cada una de ellas. En cuanto al alcance, no quiero cubrir el 100% de las vistas del proyecto, sino establecer unos básicos para empezar a desarrollar cómodamente. Mas adelante y conforme a las necesidades seguiré añadiendo features al diseño.

Diseño base

La idea con la que arranqué es muy sencilla:

  • Diseño a tres columnas, con ancho central fijo y el resto a repartir: Básicamente el texto queda en el centro, y dos columnas vacías lo enmarcan. La idea es mantener el texto agrupado donde sea cómodo de leer, en lugar de desperdigarlo por toda la página, sobre todo en pantallas panorámicas. Un ejemplo de esto último es forocoches, que a parte de una web muy polémica, es un dolor de leer. A parte de mantener el texto en el centro, es importante minimizar el peso de lo que tiene a los lados para que no distraiga del contenido.
  • Una barra de navegación en la parte superior de la página. Debería mostrar un isotipo a la izquierda y botones de navegación a la derecha. Esta se mantiene siempre visible, no se desplaza con el scroll de la página.
  • En la columna izquierda colocar el footer de modo que quede siempre visible independientemente del scroll. De ese modo puedo mostrar constantemente el copyright, enlaces relevantes o dar crédito a los recursos de terceros que use.
  • En la columna derecha opciones de interacción de la pagina, como abrir los comentarios o indicar que te gusta la página. Igual que el anterior, siempre visible.
  • Como parte del artículo, una foto de cabecera que es a la vez una foto de fondo, y que envuelve al título y subtitulo de la entrada.

En base a estas premisas salió esta maqueta:

Iteración 1 de diseño

Iteración 1 de diseño

Como color principal, elegí un rojo tipo cereza. En contraste, el blanco hueso y el gris muy oscuro permiten que el texto se lea bien sin quemar los ojos, como ocurriría con el blanco/negro. El tamaño de letra es de 18 pixeles para el párrafo y 36 para el encabezado. El título se enmarca en un rectángulo al que he tenido que añadir un fondo blanco en transparencia para que no se funda con la foto del fondo. He usado una fuente de mas impacto para los títulos (Oswald) y otra mas suave para el cuerpo del artículo que creo que se lee bastante bien (Cabin). Ambas están disponibles en Google Fonts, lo que me permitirá usarlas después sin demasiados problemas.

Bajo la foto y a tres columnas he colocado la fecha de publicación, los creditos de la foto y los tags de la entrada. Respecto a la fecha, creo que queda en un lugar central y muy a la vista, pero sin captar demasiado protagonismo, de modo que puedes ubicar temporalmente la entrada pero no te molesta para seguir el contenido. Los creditos de la foto igual, quedan en un lugar muy localizable, e incluso lógico (el propio pie de foto) y a su vez integrados en el flujo de la página. Finalmente, los tags se muestran dentro de una burbuja con el mismo rojo del tema, que los relaciona entre si como tags, pero les da autonomía a cada uno.

Respecto al header, el logo personalizado trata de evocar una F y una B dentro de un cuadrado, aunque parece mas bien un rayo… Los enlaces a la derecha de la cabecera siguen un esquema de blanco para el seleccionado, y rojo para el que no lo está. Sobre el footer, el copyright incluye una vez mas el logo, para reforzar la marca personal. Dado que he colocado la autoría del píe de foto bajo la misma, no es necesario replicarla aquí. A la derecha del texto quedan las opciones de interación con el mismo, en texto plano.

En general no quedé excesivamente contento con el diseño (en la servilleta molaba bastante mas). Pero si que me gustó como base para seguir puliendo y llegar a un resultado satisfactorio.

Iteración 2

Analizando la primera iteración del diseño y el por qué no me gustaba tanto como debería llegué a la conclusion de que la foto y los títulos tienen demasiado peso. Ademas, estos últimos quedan desconectados del cuerpo de la entrada, dado que el rectángulo transparente está flotando por encima. Trabajé sobre el diseño para obtener lo siguiente:

Iteración 2 del diseño

Iteración 2 del diseño

El primer cambio es que la foto pierde altura y, por tanto, relevancia en el diseño. El rectángulo blanco se pega a la parte inferior, conectando el bloque de títulos y el cuerpo de la entrada y generando una continuidad entre ambos. Para mejorar la legibilidad del header, añadí mas brillo a la imagen de fondo de modo que hiciera un mayor contraste.

Dado que el fondo de los títulos es transparente, y el del cuerpo de la entrada opaco, cambie el primero por un gradiente que transicionara de uno a otro. De este modo no se nota un salto sobre el pie de página. Ademas, y para independizar aun mas la imagen del resto de elementos, añadí una sombra hacia arriba del rectangulo de titulos. Al final el efecto es como de un vidrio a traves del cual vemos la imagen de fondo. A mi me gusta el resultado, pero recordemos:

Así que vamos a relajarnos y a disfrutar de como Fran hace un ridiculo jugando a pinta-y-colorea de webs.

Sobre el titulo y el subtitulo: Al primero le he quitado la negrita, dado que ya tiene suficiente peso por tamaño y por fuente, y creo que queda mas elegante así. Al segundo le he cambiado el color al gris oscuro para que conecte aun mas con el cuerpo de la entrada y funcione visualmente como una transición entre el título el cuerpo de la entrada.

Una vez «arreglado» el problema mas grande (por tamaño) de la página, podemos empezar a entrar en el grano fino de las cosas.

Iteración 3

Habiendo «arreglado» un poco el centro de la página, dirigí mi atención a las elementos periféricos. Empezando por la navegación, en la esquina superior derecha. Las secciones se ven muy cutres, no hay contraste con el fondo y no queda claro en cual estamos ya que la convención blanco seleccionado/rojo para el resto no resulta evidente a simple vista.

Iteración 3 del diseño

Iteración 3 del diseño

Lo primero fue reducir el tamaño la fuente y ponerla en el color temático (rojo cereza). Lo segundo, añadir un fondo encuadrando la opción seleccionada actualmente, de modo que resulte evidente cual tiene mas peso en cada momento. De paso, y dado que me sobraba espacio en esta sección, decidí añadir aquí las redes sociales con unos iconos muy chulos que conseguí en FlatIcon.

Al resultado quizás le sigue faltando contraste con el fondo, (si bien este depende también de la imagen de fondo). En cualquier caso creo que mejora en mucho a lo anterior, aporta mas funcionalidad, es mas compacto  y rellena esa parte de la página.

Iteración 4

Iteración 4

Iteración 4

A continuación centré mi atención al menu de opciones de entrada, en la esquina inferior derecha. Cambié las dos opciones que había anteriormente por algo con un poco mas sentido. En primer lugar puse el texto en color rojo (utilizando la misma convención que en la navegación para la opción resaltada por el cursor), fuente de impacto (recordemos, Oswald), mayúsculas y añadí iconos para que las opciones sean mas intuitivas. Por el camino eliminé el botón «Me gusta», por varias razones:

  • ¿Realmente necesito esa métrica?
  • ¿El usuario se va a molestar en dar me gusta a una entrada de blog?
  • Un «Me gusta» implica trazar qué usuario le ha dado ya, lo que implica autenticación, cuentas, etc… ¿Alguien va a registrarse solo para dar un me gusta?
  • Todo lo que implica a nivel de infraestructura de servidor los puntos anteriores.

Por tanto, el «Me gusta» va fuera. Dado que no será necesario registrarse en la página, la interacción se realizará de forma anónima. En el caso de los comentarios, será el usuario el que deje un email para identificarse a su discreción. Esto abre la puerta a los trolles, pero no han sido un gran problema hasta ahora, así que de momento trabajaré bajo este planteamiento.

Aproveche aquí para unificar el estilo de los tags con el resto de la pagina, afilando las esquinas. Por último, añadí una navegación entre entradas, con entrada siguiente y anterior y una opción para desplegar la lista de entradas. Tanto la lista como los comentarios deberían mostrarse en un modal o panel deslizante, pero esto aun no lo tengo muy claro y lo estudiaré mas adelante.

Iteración 5

En este punto empecé a hacer mejoras menos puntuales y mas generales, veamos:

Isotipo

En primer lugar, rediseñé el isotipo por completo. Veamos en detalle:

Detalle isotipos

Detalle isotipos

A la izquierda está el antiguo isotipo que cree el año pasado cuando empece a invertir tiempo en esto del blog. El del centro es el primer boceto que diseñé para esta etapa. Y a la derecha, una fusión de ambos.

El primero está basado en mi firma. Me gusta como se funden la F con la B. Pero el resultado es demasiado orgánico y muy poco sutil. Por eso decidí meterle un repaso.

El segundo fue lo primero que se me paso por la cabeza. Quería trasladar la identidad a un cuadrado y utilizar formas mas regulares pero sin renunciar a la naturaleza algo caótica de una firma. Por eso en los trazos interiores no hay dos lineas paralelas. Haciendo en esfuerzo puedes reconocer la F en la parte izquierda y, haciendo otro aun mas grande, la B en la derecha. El problema es que el conjunto parece… un rayo.

En la última iteración decidí fundir los dos conceptos. En la parte izquierda la F se reinventa con trazos rectos y gruesos regulares, siendo mucho mas facil de reconocer. Por la derecha, todos los vértices pasan a estar redondeados y el contorno de una B queda totalmente reconocible en negativo. Me gusta mucho el juego que hacen lo ocupado y lo vacío. El isotipo queda finalmente menos agresivo pero transmite mucho mejor la idea y es, en mi opinión, bastante mas original que el anterior. Y aquí su integración en el conjunto:

Iteración 5

Iteración 5

Navegación

En cuanto a la navegación, decidí darle mas oxigeno a esta parte, ya que se veía un poco asfixiada. Aumenté los margenes horizontales y añadí una tercera sección navegable, el portafolio. A la sección seleccionada la hize resaltar con una sombra. Tambien apliqué esta medida en la opción resaltada del menú lateral de la entrada.

Menu lateral

En cuanto a este, añadí una linea que parte del mismo hasta la parte superior del bloque de titulos. Con esto pretendí integrar aun mas este bloque con el cuerpo de la entrada, para dar mayor sensación de continuidad. Por si aun no habí quedado claro, tanto el footer como este menu tienen una posición fija en pantalla, por lo que el scroll no les afecta.

Iteración 6

Con esta iteración le pegué una vuelta bastante interesante a todo el diseño. Veamos:

Sexta iteración

Sexta iteración

En este punto empecé a buscar bastante información tipo como diseñar una web en 2018 10 errores comunes en el diseño de páginas web. Entre otras muchas cosas, leí sobre la importancia de darle espacio a las cosas y conjugar colores. Veamos como lo apliqué:

Encabezado de la entrada

Empecé dandolé bastante mas espacio vértical y añadiendo un icono de entrada. El icono no transmite, a priori, información pero dado que suelo escribir los articulos como parte de series, me gustaría utilizarlo como una forma de identificar estas series. Esto, añadido al cambio del alineado del título y el subtitulo a centrado, ya le dá bastante mas presencia a este elemento, que es lo que le faltaba anteriormente.

A parte de esto, busqué un color secundario para utilizar en elementos de menor importancia, pero que se hubieran de distinguir del texto plano. Para ello utilicé paletton, que para buscar temas de color para tu página está muy bien. Acabé con un burdeos oscuro. Apliqué este color secundario en el subtitulo de la entrada, reduciendo el contraste tan feo que hacía el negro, y en otros elementos como la fecha o el píe de foto.

Logotipo

Aquí quise aportar un poco de personalidad utilizando otro color a parte del blanco, así que usé el color principal para la palabra Fran.

Fondo de la página

Un detalle sutil, pero apliqué una textura de ruido para darle un «tacto» mas agradable al fondo de la página. Esto probablemente dará problemas luego a la hora de implementar, sobre todo en la parte transparente del encabezado. Así qué quizas en la versión final haya de desaparecer.

A parte de todo lo dicho, añadí las opciones sociales al menu de la entrada. Tambien habrá que ver como implementarlas, porque la de twitter es muy sencilla pero la de facebook tiene algo mas de follon. Quedan ahí provisionalmente.

Iteración 7

Con la página casi terminada, toca dar el último retoque:

Septima itración

Septima iteración

Como suelo ser un brasas y escribir artículos muy largos, me pareció buena idea añadir una navegación de artículo en la entrada. En principio pensé en lado derecho, sobre las opciones de entrada. Pero se me ocurrió llevarlo al izquierdo, replicar la franja y dejar perfectamente encuadrada la columna de la entrada. El resultado queda muy vistoso y, a mi gusto, equilibrado. Para terminar de darle preponderancia a la entrada, decidí que tanto esta navegación como las opciones de entrada, deberian estar con la opacidad al 10% hasta que tengan el ratón encima. Por último, le quité la negrita al subtitulo de la entrada y lo puse en color principal.

Y con esto queda el diseño base terminado.

Interacción

Obviamente, la página no está definida por completo. ¿Que pasará cuando el usuario haga scroll? Veamos, lo primero es que el pico del encabezado de la entrada pasaría peligrosamente cerca de la última opcion de navegación. Por tanto, cuando el pico se acerqué, las opciones de navegaciñon deberian contraerse ligeramente para dejarle pasar. Sería conveniente estudiar como funciona esto en varios anchos de pantalla y dispositivos, pero lo dejo para mas adelante. Otra interacción interesante se produce al pasar la foto haciendo scroll. En ese caso, tanto la navegación como el logotipo transicionarian con una animación a una versión escalada y en gris:

Septima iteración con scroll

Septima iteración con scroll

Otra interacción son los menus de comentarios y lista de entradas, que se podran invocar con las opciones de la entrada. Ambos surgiran mediante un modal a la derecha, algo así:

Menu modal selector de entrada

Menu modal selector de entrada

Obviamente, mucho mas trabajado: Debería haber filtros por fecha y serie, presentar la información con iconos y demas. Pero el sitio sería ese.

Back to code

Si bien la base ya la tenemos, quedan muchisimas cosas que definir en el diseño. Sin embargo, para no aburrirme yo (llevo mas de un mes para escribir esta entrada) y no hacer la entrada demasiado pesada, prefiero empezar a meterle mano a la implementación cuanto antes. Asi que a partir de aquí, vamos a implementar una web app que sea capaz de servir información mockeada (es decir, falsa) en el formato que hemos definido en esta entrada.

Y nada mas por hoy. Gracias por leer hasta aquí, espero que te esté gustando esta serie y hasta la próxima!


Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

2 ideas sobre “Programando un blog desde 0. #2 Diseñando la página

  • felix tineo

    No soy de los que deja comentarios en ninguna parte, quizas por ego, fastidio o ambas cosas. Pero me gusta tu trabajo, incluso me sorprende que no tengas mas comentarios o sea una de las primeras entradas de facebook, es un gusto leerte y se entiende. Espero sigas publicando.