¿Cómo comunicar un proceso de 3 pasos de forma clara y concisa?

Tengo la siguiente sección en nuestro sitio web, y ahora, cuando la miro, siento que se ve poco profesional y un poco confusa.

Traté de dividir la sección "Cómo funciona" en 3, con la segunda sección resaltada solo con fines estilísticos (no es que sea importante que otra sección).

Me imagino que este sitio es principalmente sobre diseño, así que trataré de apegarme a eso, pero si cree que ciertos párrafos podrían reformularse, por favor avísenos.ingrese la descripción de la imagen aquí

Si alguien requiere una aclaración adicional, ¡hágamelo saber!

Gracias por todos los comentarios amablemente proporcionados, eche un vistazo a la revisión y hágamelo saber.ingrese la descripción de la imagen aquí

ACTUALIZAR 3ingrese la descripción de la imagen aquí

ACTUALIZAR 4ingrese la descripción de la imagen aquí

ACTUALIZAR 5ingrese la descripción de la imagen aquí

Los iconos que usas son un poco pequeños. Podría intentar hacerlos más grandes y centrarlos arriba o a la izquierda de las líneas de texto.
Gracias por la sugerencia. ¿Qué tamaño debe tener el icono? El doble de tamaño. 1.5, etc.? Los íconos ya están centrados, ¿podría dar más detalles sobre su segundo punto?
Los íconos se ven centrados sobre el texto, pero el texto (y por lo tanto los íconos) no parecen estar centrados en los cuadros. Por ejemplo, en el cuadro 1, el margen izquierdo aparece más ancho que el margen derecho. Además, actualmente el cuerpo del texto en el cuadro 1 es más bajo que los cuadros 2 y 3. Alinear el cuerpo del texto lo haría mucho más agradable de leer.
Nooooo. ¡No me hagas esto!. ¡Mi respuesta ahora necesita un paso 4! No use el mismo color para los 3 cuadros si no está usando un margen para separarlos.
Mejor. Observe que sus números de paso están centrados. Tus títulos están centrados. y su copia del cuerpo está alineada a la izquierda. ¿Qué sugiere eso?
Ok, Rafael, hice otra actualización con un color diferente en el medio, ya que amablemente me sugeriste que debería hacerlo, ya que no hay margen, ¿es lo suficientemente bueno?
¿Qué te dice tu autoevaluación crítica? ¿Estás satisfecho?
Bueno, no creo en la perfección, pero lo suficientemente bueno, así que creo que esto es lo suficientemente bueno, ¡gracias!
¿Soy solo yo o el escalón del medio parece más pequeño que los otros dos? Sé que esto es una ilusión óptica basada en el color de la caja del medio, pero vale la pena tenerlo en cuenta.
Este es un punto válido, Paul, he ajustado los márgenes, así que creo que todo está igual ahora (ver actualización 4)
ok, echa un vistazo a la actualización 5. El bac utilizado es #D7D7D7, una versión de tono más claro de #ccc

Respuestas (3)

Menos es más

  • Elimina pequeños íconos de los párrafos.
  • Reduzca el espacio entre el primer y el segundo párrafo en cada columna (aproximadamente a la mitad).
  • Elimine el resaltado de color en la columna central: si desea separar por bloques de color, use tres colores diferentes. Pero sugeriría simplemente usar uno y dejar que el espacio en blanco los divida.

Mantente consistente

  • Haga titulares de longitud similar en todas las columnas: ocupe una línea o dos; no ambos.
  • Haga párrafos de longitud similar en todas las columnas.
  • Haga que los números dentro de los círculos tengan el mismo tamaño de punto que los titulares, y probablemente ponga los números en negrita.
  • Use márgenes consistentes.
  • [Redacción] Use una voz y un tono coherentes.

Ejemplo

Mockup de 3 secciones

Gracias Pablo He agregado una revisión en mi publicación editada, ¡déjame saber lo que piensas!
Hola Paul, acabo de ver tu foto de ejemplo y me encanta. ¿Cuál es el color de fondo que usas?
principal {color de fondo: #ccc; }
¡Gracias! Algunas personas piensan que el gris crudo se puede ver como un color de fondo opaco, pero creo que está bien. ¿Pensamientos?
Solo elegí un fondo gris simple para la maqueta; No estaba tratando de sugerir explícitamente ese color de fondo exacto. Pero creo que estamos hablando de una opinión subjetiva en este punto. Un color o tono de gris no es aburrido por sí solo, pero varias combinaciones de colores o grises pueden parecer aburridos según el contenido y el contexto. Si desea inyectar algo de verde en ese fondo gris, baje un poco los valores de rojo y azul: #caccca.

Se ve bien, pero no se lee bien en absoluto. Me gustaría ver un estilo de escritura armonioso. La armonía no está sólo en el aspecto de la pieza. La construcción paralela en la escritura ayudaría mucho. Algunas palabras que usas no existen. ¿Reclutar?

  1. Obtenga reconocimiento como un desarrollador superior. (Voz pasiva. La voz activa sería una mejora). Prueba "Ser reconocido". o "Construir reconocimiento".

2, hacer recomendaciones. (Esta es una voz activa que comienza con un verbo). Está bien como está.

3: Gana dinero. (Otra vez en voz pasiva. Hacer que te hagan algo es más débil que tomar una acción directa). Prueba algo como "Usar comisiones" o "Enviar factura".

La alineación es crucial. (Vea el insulto en mi respuesta inmediatamente anterior sobre cómo las cosas pequeñas pueden ser muy notorias).

La cuadrícula para la copia de cabeza/cuerpo para los tres puntos no es la misma. La copia del cuerpo comienza más abajo en 1 que en 2 y 3 debido al ajuste de línea para el título largo en el punto #1.

En resumen, esfuércese por mantener la coherencia en todo el diseño.

1: Crear reconocimiento, 2: Recomendar a otros, 3: Recibir pago
Gracias a todos por sus comentarios. Estoy usando la fuente profesional del código fuente con el objetivo de apuntar a los desarrolladores.
He subido una actualización en mi publicación de edición, ¡háganme saber si están satisfechos!
Está progresando. El texto del cuerpo debe ser algo más legible, como un tipo de letra serif. Utilice fuentes monoespaciadas para representar fragmentos de código reales. Además, cada sección probablemente debería estar alineada al centro oa la izquierda, a menos que haya una muy buena razón para mezclarlas de esa manera. Los párrafos definitivamente piden más márgenes laterales.

Mis 2 centavos:

  1. Elimina los iconos.

  2. Tanta separación en los párrafos los convierte en un proceso de dos pasos cada paso. 6 en total.

  3. Usa una fuente mejor.

¿Cómo comunicar un proceso de 3 pasos de forma clara y concisa?
RespuestasAquíPolítica de privacidad1y, 1v