Acompañamiento de las nuevas Anartistas

He hecho un primer intento de presentación de la interfaz del social. Esa sería la idea… Lo he puesto en el proyecto de bienvenida del penpot.

A ver qué os parece!

2 Me gusta

He hecho una para el picto también:

2 Me gusta

Jejejejeje las exporto desde penpot y lo pongo en la página :wink:

Jaja, no hace falta correr, que igual alguien lo mejora! :stuck_out_tongue_winking_eye:

Qué te han parecido? Sigo en la línea?

Hola @marcelcosta (Y toda la gente que quiera entrarle al penpot),

Hice una copia del archivo que hiciste en penpot y le hice algunas correcciones, usando el tamaño correcto de la tipografía, los colores (Color oscuro de fondo y tipografía blanca) y los border-radius de 8px (Que es el mismo del resto de los elementos en la página web).

2 recomendaciones:

1. Penpot te permite usar una cosa llamadas “recursos”

Los recursos son colores, tipografías incluso componentes que puedes reutilizar…no sé, serían algo así como variables
Hay recursos locales (Que son los que creas en tu archivo) y recursos desde otros archivos, justo cree un recurso que se llama anartist.org website con los colores, tipografías, iconos y componentes de la página que rediseñé

Para la tipografía

Seleccionas el texto y luego seleccionas la variable correcta que aparece en la columna izquierda en el apartado de recursos, como verás hay estilos para h1, h2, h3, body, etc

Para el color

Seleccionas el elemento al que le quieras dar color, das click en relleno en la columna de la derecha, y seleccionas el color de la paleta que aparece en la parte de abajo del selector de color

Trucazo magazo al respecto
Si seleccionas un grupo puedes ver en la columna de la derecha todos los colores que hay en el grupo y modificarlos desde ahí

2. Layouts

Por último tambien una herramienta que ahorra mucho tiempo que se llama layout, la opción que se llama flex es la más sencilla (En mi opinion)
Captura de Pantalla 2024-06-15 a las 22.47.41

Esta opción te permite crear “reglas de css” para los elementos, por ejemplo si seleccionas un elemento como un texto puedes ponerle padding y un background, entonces puedes tener un texto con un fondo y un padding de 12px para crear las cajitas de texto que tienes actualmente con las leyendas de “Ajustes de cuenta” “Edita tu perfil” etc.
Captura de Pantalla 2024-06-15 a las 22.47.49

Y si seleccionas varios elementos también te permite alinearlos con margenes y puedes hacer un layout que crezca con las mismas reglas si añades un elemento nuevo. Creo que en este video lo explican mejor Grid Layout brings HTML to Penpot's table - Events and Announcements - Penpot Community

Espero me de a entender

1 me gusta

Que currazo!!!

Muchas gracias! Cuando vuelva a ponerme con ello lo leo bien y me fijo.

Un abrazo!