Mejoras UX/UI: página principal

Hola de nuevo, he actualizado la home y la página de comunidad con las nuevas ilustraciones, a ver qué os parecen. Creo que está bien tener algún tipo de mascotilla, y estas calaquitas podrían servir ese propósito.
Con lo que respecta al comentario de @oscarsantis creo que está wai aclarar que esto es mejor y deseable, creo que le da un poco de humor a los textos y reafirma el mensaje.

Con lo que respecta los textos de la página de comunidad qué os parecen?

Besis

3 Me gusta

Me gustan mucho las calaveras!!

A mí muy bien!

Hay una errata en el apartado de “¿Cómo nos organizamos?”:
“precenciales” por “presenciales”

Saludos! Y gracias por el trabajo :slight_smile:

2 Me gusta

Eii está super bién, para mi podemos tirar adelante!

Viendo directamente tu trabajo en Penpot he visto una ilustración de setas que también me ha gustado mucho. Igualmente la mascotilla esta está genial.

1 me gusta

Hola de nuevo gente linda. Creo que podríamos darle un poco más de punch a la página de inicio poniendo a la gente que participa en Anartist, destacar un par de perfiles y poner un carrusel :wink:

A ver qué les parece:

2 Me gusta

A mi me parece buena idea, gracias por el curro!

2 Me gusta

Me parece buena idea! Puede ser una manera de que quién esté interesado en la comunidad tenga un ejemplo de una anartista.

1 me gusta

Hola gente de zona!
Tengo una nueva propuesta fúngica de los iconos con lo que hablamos en persona y el debate: “Buscar una metáfora que nos represente mejor”
También he estandarizado las cards de contenido en el apartado de herramientas. A ver qué les parece
Home


Comunidad

Herramientas

1 me gusta

Qué chulas las setas!!

1 me gusta

Me encanta!!! Bravo :mushroom::mushroom::mushroom::mushroom::mushroom::mushroom:

1 me gusta

Estoy abrumado con tanta novedad Chini. TRABAJAZO!

  1. Una pregunta, ¿cómo está implementado? Veo WordPress con tema propio y muy bien escrito, pero sobre qué base, FSE? (Sobre el debate Divi < WP sin builders < HTML, me parece que habéis elegido la mejor opción).

  2. ¿Se está usando Penpot en grupo o solo tu, Chini? Podéis darme acceso al proyecto en pau(a)kokuradesign.com y quizás pueda aportar algo.

Detalles UI:

El color del “solicitar cuenta”, corporativo (highlight en css root).

:root {
    --bgColor: #111923;
    --bgDarkColor: #0c1212;
    --fontColor: #ffffff;
    --primaryColor: #078274;
    --secondaryColor: #029996;
    --highlightColor: #078274   ;
}

En el menú, el hover de texto verde en fondo negro debe ser el claro (secondary, no primary), y quizás molaría insinuar el botón en oscuro (solo en hover).

.header_menu a:hover {
  color: var(--secondaryColor);
  background: var(--bgColor);
}
 

Lo mismo con el botón verde (current), se ilumina al hacer hover.

.header_menu .current-menu-item a:hover {
  background: var(--secondaryColor);
}

Y por último en los botones de /unirse/, cuidado con poner un botón sólido que al hacer hover se vuelva “outline”, si no especificas el mismo grosor de borde, el botón desplaza el resto del contenido (crece o disminuye). Personalmente, creo que basta con el efecto de “iluminar” el botón sólido, como en el menú principal:

.wp-block-button__link:hover {
  background: var(--secondaryColor);
  border: none;
  color: var(--fontcolor);
}

y ya que estamos, me cargaría la transición animada.

.wp-block-button__link {
  border-radius: 8px;
borrar >> transition: all .5s ease;
  background: var(--primaryColor);
  color: var(--fontColor);
}

Seguimos!

2 Me gusta

Hola Pau, ya te envié invitación al penpot.

  1. He puesto el color azul como highlight para que destaque más el call-to-action. Recomendaría dejarlo de ese color.
  2. Si quieres cambiar los estilos de los hovers a lo que te parezca mejor, veo que tienes acceso al wordpress.
  3. Solo una duda: ¿por qué te cargarías la transición animada?

Gracias por el feedback!

2 Me gusta
  1. Es el tono del azul… que lo veo muy alejado de la gama. En mi modesta opinión, con el sólido de last-child ya destaca sea cual sea el color, pero si quieres se puede iluminar aún más (#03e5e0) que secondary: Ver gama: #029996 Color Hex También puedes buscar uno de la tríada ( #960299 #999602 o el complementario #990205, pero a mí me gusta que la web sea monocroma negro-verde y nos ayuda tener una imagen corporativa más estricta para el resto de plataformas.
.header_menu li:last-child a {
  background: #03e5e0;
  color: #000000;
}

  1. Solo si te parece bien. ¡Tuyo es el diseño!

  2. Supongo que es cuestión de gustos, a mí personalmente me sobran, pero si se pone, todos los botones deberían tener ese comportamiento para dar homogeneidad.

1 me gusta

Hola de nuevo maese!

Defendiendo mi propuesta azulillo:

  1. Creo que el azul es un color que al mismo tiempo llama la atención y se ve cohesivo con el resto de la gama de colores (No es un amarillo por ejemplo, que llama la atención pero no necesariamente es el más armonioso con el resto de la gama)
  2. Como mencionaba en otro hilo: En el mundo digital a veces tienes que ir más a saco que cuando estás en persona, tienes que ser un pelín más agresivo y destacar mucho dónde quieres que alguien de click para motivarlo, pasamos muy poco tiempo viendo una página web, en general leemos en horizontal y queremos un botón grande y destacado para saber qué debo de hacer despues
  3. El color azul además es un estandar de link en la web asi que creo que también tiene una carga de significado añadido que puede orientar a la gente que acaba de llegar

Obviamente la idea es debatir por qué se elige el diseño, creo que el azul funciona mejor en este caso concreto por eso insisto tanto

Besis

2 Me gusta

No digas más, pues. Azul is fine.

2 Me gusta