Wie kommuniziert man einen dreistufigen Prozess klar und prägnant?

Ich habe den folgenden Abschnitt auf unserer Website, und wenn ich ihn mir jetzt ansehe, finde ich, dass er unprofessionell und etwas unklar aussieht.

Ich habe versucht, den Abschnitt "Wie es funktioniert" in 3 Teile zu unterteilen, wobei der zweite Abschnitt nur aus stilistischen Gründen hervorgehoben wurde (nicht, dass er wichtiger wäre als andere Abschnitte).

Ich denke, dass es auf dieser Seite hauptsächlich um Design geht, also werde ich versuchen, mich daran zu halten, aber wenn Sie der Meinung sind, dass bestimmte Absätze umformuliert werden könnten, geben Sie mir bitte einen Rat.Geben Sie hier die Bildbeschreibung ein

Wenn jemand zusätzliche Erläuterungen benötigt, lassen Sie es mich wissen!

Vielen Dank für all das freundliche Feedback, werfen Sie einen Blick auf die Überarbeitung und lassen Sie es mich bitte wissenGeben Sie hier die Bildbeschreibung ein

AKTUALISIERUNG 3Geben Sie hier die Bildbeschreibung ein

UPDATE 4Geben Sie hier die Bildbeschreibung ein

AKTUALISIERUNG 5Geben Sie hier die Bildbeschreibung ein

Die Symbole, die Sie verwenden, sind etwas klein. Ich könnte versuchen, sie größer zu machen und sie über oder links von den Textzeilen zu zentrieren
Danke für den Vorschlag. Wie groß soll das Symbol sein? Doppelt so groß. 1,5 usw.? Die Symbole sind bereits zentriert. Könnten Sie Ihren zweiten Punkt näher erläutern?
Die Symbole scheinen über dem Text zentriert zu sein, aber der Text (und damit die Symbole) scheinen nicht in den Feldern zentriert zu sein. Beispielsweise erscheint in Feld 1 der linke Rand breiter als der rechte Rand. Außerdem ist Ihr Fließtext in Feld 1 derzeit niedriger als in den Feldern 2 und 3. Wenn Sie den Fließtext ausrichten, ist er viel angenehmer zu lesen.
Neinoooo. Tun Sie dies nicht zu meeeeeee!. Meine Antwort braucht jetzt einen Schritt 4! Verwenden Sie nicht die gleiche Farbe für die 3 Kästchen, wenn Sie keinen Rand verwenden, um sie zu trennen.
Besser. Beachten Sie, dass Ihre Schrittzahlen zentriert sind. Ihre Titel sind zentriert. und Ihr Fließtext ist linksbündig. Was bedeutet das?
Ok Rafael Ich habe ein weiteres Update mit einer anderen Farbe in der Mitte gemacht, da Sie freundlicherweise vorgeschlagen haben, dass ich es tun sollte, da es keinen Rand gibt, ist es gut genug>
Was sagt Ihnen Ihre kritische Selbsteinschätzung? Bist du zufrieden?
Nun, ich glaube nicht an Perfektion, aber gut genug, also denke ich, das ist gut genug, danke!
Liegt es nur an mir oder sieht die mittlere Stufe kleiner aus als die anderen beiden? Ich weiß, dass dies eine optische Täuschung ist, die auf der Farbe der mittleren Box basiert, aber es lohnt sich, daran zu denken.
Dies ist ein gültiger Punkt Paul, ich habe die Ränder angepasst, also denke ich, dass jetzt alles gleich ist (siehe Update 4)
ok, schau dir update 5 an. bac verwendet wird #D7D7D7, eine hellere Version von #ccc

Antworten (3)

Weniger ist mehr

  • Entfernen Sie winzige Symbole aus Absätzen.
  • Kürzen Sie den Abstand zwischen dem ersten und zweiten Absatz in jeder Spalte (um etwa die Hälfte).
  • Entfernen Sie die Farbhervorhebung in der mittleren Spalte – Wenn Sie nach Farbblöcken trennen möchten, verwenden Sie drei verschiedene Farben. Aber ich würde vorschlagen, einfach einen zu verwenden und sie durch Leerzeichen trennen zu lassen.

Bleiben Sie konsequent

  • Machen Sie Überschriften über Spalten hinweg ähnlich lang – nehmen Sie eine oder zwei Zeilen ein; nicht beide.
  • Machen Sie Absätze über Spalten hinweg ähnlich lang.
  • Stellen Sie sicher, dass die Zahlen in den Kreisen die gleiche Punktgröße wie die Überschriften haben, und machen Sie die Zahlen wahrscheinlich fett.
  • Verwenden Sie konsistente Ränder.
  • [Copywriting] Verwenden Sie eine konsistente Stimme und einen einheitlichen Ton.

Beispiel

Mockup von 3 Abschnitten

Danke Paul. Ich habe eine Überarbeitung in meinem bearbeiteten Beitrag hinzugefügt, lassen Sie mich wissen, was Sie denken!
Hey Paul, ich habe gerade dein Beispielbild bemerkt und bin begeistert. Welche Hintergrundfarbe verwendest du?
main { Hintergrundfarbe: #ccc; }
Vielen Dank! Einige Leute denken, dass rohes Grau als matte Hintergrundfarbe angesehen werden kann, aber ich denke, es ist in Ordnung. Gedanken?
Ich habe einfach einen einfachen grauen Hintergrund für das Mockup gewählt; Ich habe nicht versucht, genau diese Hintergrundfarbe explizit vorzuschlagen. Aber ich denke, wir reden hier von subjektiver Meinung. Eine Farbe oder ein Grauton allein ist nicht langweilig, aber verschiedene Kombinationen von Farben oder Grautönen können je nach Inhalt und Kontext langweilig wirken. Wenn Sie etwas Grün in dieses Hintergrundgrau pumpen möchten, verringern Sie die Rot- und Blauwerte ein wenig: #caccca.

Es sieht gut aus, aber es liest sich überhaupt nicht gut. Ich wünsche mir einen harmonischen Schreibstil. Harmonie liegt nicht nur in der Optik des Stückes. Parallelbau im Schreiben würde sehr helfen. Einige Wörter, die Sie verwenden, existieren nicht. Rekrutieren?

  1. Werde als Top-Entwickler anerkannt. (Passive Stimme. Aktive Stimme wäre eine Verbesserung.) Probieren Sie "Erkannt werden" aus. oder "Erkennung aufbauen".

2, Empfehlungen abgeben. (Dies ist eine aktive Stimme, die mit einem Verb beginnt.) Okay, wie es ist.

3: Bezahlt werden. (Nochmals passive Stimme. Es ist schwächer, etwas mit Ihnen zu tun zu bekommen, als direkt zu handeln.) Versuchen Sie es mit etwas wie "Provisionen verwenden" oder "Rechnung einreichen".

Die Ausrichtung ist entscheidend. (Siehe Beleidigung in meiner Antwort direkt oben, wie geringfügige Dinge sehr auffällig sein können.)

Das Raster für die Kopf-/Körperkopie für die drei Punkte ist nicht dasselbe. Aufgrund des Zeilenumbruchs für den langen Titel in Punkt 1 beginnt der Fließtext in 1 tiefer als in 2 und 3.

Kurz gesagt, bemühen Sie sich um Konsistenz im gesamten Layout.

1: Anerkennung aufbauen, 2: Andere empfehlen, 3: Zahlung erhalten
Vielen Dank an alle für Ihren Beitrag. Ich verwende die Quellcode-Pro-Schriftart, die darauf abzielt, Entwickler anzusprechen.
Ich habe ein Update in meinen Edit-Post hochgeladen, lasst mich wissen, ob ihr zufrieden seid!
Es macht Fortschritte. Fließtext sollte besser lesbar sein, wie eine Serifenschrift. Verwenden Sie Monospace-Schriftarten, um tatsächliche Codeausschnitte darzustellen. Außerdem sollte jeder Abschnitt wahrscheinlich entweder alle zentriert oder linksbündig ausgerichtet sein - es sei denn, es gibt einen sehr guten Grund, sie so zu mischen. Absätze betteln definitiv um mehr Seitenränder.

Meine 2 Cent:

  1. Entfernen Sie die Symbole.

  2. So viel Trennung in den Absätzen macht sie zu einem zweistufigen Prozess. 6 insgesamt.

  3. Verwenden Sie eine bessere Schriftart.