La semana pasada os mostré el diseño de tres secciones de la Home que han sido renovadas. Con eso finalizamos, al menos en principio, el diseño de la página de Inicio. Ahora pasamos a un apartado muy importante del sitio: el blog. Esto está dividido en dos partes: la página principal del blog y las entradas. Ahora os muestro cada uno de los elementos que contiene el nuevo diseño estas dos páginas. Comencemos por la página principal del blog.
Encabezado del blog
He decidido que el color del fondo sea el color primario, bermellón, porque es visualmente atractivo y resalta el color principal de la marca. Entonces, estando este color de fondo he tenido que utilizar la versión naranja del logotipo. La idea es que al hacer scroll el header cambie sus colores y que el logo también cambie, aunque esto se gestionará más adelante.
Para el título he usado los mismos estilos que tiene el encabezado principal de la página de inicio. Debajo se encuentra el mismo texto que tiene ahora la web. Más abajo está, como era de esperar en un blog, la barra de búsqueda. Esta filtra por palabras clave y la búsqueda se efectuará posiblemente usando Ajax y CPTs. Al lado hay un desplegable en el que se pueden elegir las categorías.
Artículo destacado
Considero que es una muy buena idea tener una sección de «artículo destacado» en la web. Esto permite resaltar la información que quieres que tus usuarios vean. Y brinda una gran flexibilidad también, porque puedes cambiar la información cada vez que sea necesario, o hacerlo de forma dinámica.
En este caso el encabezado y la imagen se encuentran a la izquierda y el resto de la información a la derecha. De arriba hacia abajo se ve la categoría, el encabezado del artículo, el extracto, el botón de «leer más» y al final de todo la información del autor y la fecha.
Cards
En este apartado no hay mucha diferencia en comparación al diseño que tiene actualmente el blog. Me parece bien de esa manera por lo que lo he dejado así. Igualmente, de arriba a abajo: imagen, foto del autor, encabezado, extracto y «leer más». Debajo de las cards hay un botón de «ver más» para cargar más artículos. Otra cosa que añadir es que el fondo lo he hecho blanco puro, al igual que el de la sección de «artículo destacado»; de esta manera no hace un gran contraste con el fondo de la página pero se deja ver la diferencia, logrando así una apariencia bien cuidada.
Ahora entramos en la página individual de las entrada. En general no cambia mucho de cara al diseño que estás viendo ahora mismo, así que haré hincapié en los aspectos más importantes.
Imagen destacada y meta-información
La imagen destacada no puede faltar. Debajo está la meta-información: autor, fecha y categoría. Y más abajo los iconos de las redes sociales. Eso sí, ahora la disposición de estos elementos está mucho mejor lograda.
Debajo de esto está el párrafo introductorio y la tabla de contenidos. No hay nada más que decir.
Contenido del artículo e información del autor
Aquí sí que hay un cambio importante que tiene que ver con los márgenes de la página. Ahora estos se reducen para una mejor apariencia y por aprovechar mejor el espacio. Eso ayuda mucho sobre todo a la versión móvil. Además, en escritorio se ha eliminado la sección lateral con la barra de búsqueda, los comentarios y las entradas recientes. En su lugar he añadido una sección adicional en la parte baja de la entrada.
Artículos relacionados
Esta nueva sección de «artículos destacados» es un gran agregado a la página de entrada. Permite mantener al usuario enganchado al blog, donde puede seguir leyendo artículos de su interés. La información de estos artículos que se muestran viene en forma de cards, con la misma apariencia que las que aparecen en el blog.
De lleno a la implementación
El diseño está por fin completo. Ahora sólo queda implementarlo. Iremos paso por paso, componente a componente, sección por sección. Una vez terminado el restyling podréis ver por vosotros mismos el nuevo diseño de la web de Kodyto. Y claro que sí, seguiré actualizando el progreso del restyling en este mismo blog que también está siendo renovado. Hasta el próximo artículo.
