Rol · Marca y diseño webEntregado · Blog publicadoHerramientas · Figma · HTML · CSS · JavaScript
El problemaEl tema espanta antes de que empiece la lectura.
Lo que hiceDefiní la identidad y el tono, y diseñé el artículo a una columna.
El resultadoUn artículo largo de finanzas se lee de corrido, sin adornos que estorben.Blog publicado en 2023 · marca, plantilla de artículo y cartera.
01
El contexto
Qué había antes
Cuatro CS habla de finanzas personales, ahorro e inversión. El problema no era solo diseñar un blog bonito, sino hacer que un tema normalmente denso se pudiera leer con naturalidad y sin sensación de estar perdido.
Fig. 1 · La página de inicio
02
El proceso
Qué decidí y por qué
Organicé las categorías para que cada persona entre por el tema que le interesa, lea artículos largos con fluidez y consulte una cartera de acciones con la información justa.
Que un artículo largo se lea de corrido no sale de una decisión, sino de tres: una escala de texto con nombre, una columna estrecha y el justificado partiendo palabras. Ninguna se nota al leer.
css/general.css
/* El texto no tiene tamaños sueltos: tiene una escala, y cada peldaño tiene nombre. */.body_1_xlarge {font-size: 1.375rem;
line-height: 1.5;
}
.body_2_large {font-size: 1.2rem;
line-height: 1.5;
}
css/articulo_concreto.css
/* La columna de lectura no ocupa el ancho de la pantalla. */.wrapper {width: 50vw;
}
/* Las imágenes sí: se salen de ella por los dos lados. */.gallery-img__wrapper {width: 120%;
}
/* Justificado, pero nunca sin partir palabras: se abren ríos de blanco. */.body_1_xlarge,.body_2_large {text-align: justify;
hyphens: auto;
}
Fig. 2 · Categoría de mercados
Fig. 3 · Subcategoría de inversión
Fig. 4 · Plantilla de artículo
Fig. 5 · Herramienta de cartera
03
El resultado
Cómo quedó
La identidad quedó seria pero no fría, y la educación financiera se lee como un artículo bien contado.
