57 Web Design Dos and Don’ts

Der Führer, ich wünschte, ich hätte vor zehn Jahren.

Diese Regeln sind zwar nicht absolut, können jedoch hilfreich sein, wenn Sie unsicher sind oder kein Risiko eingehen möchten.

Sie sind in Abschnitte unterteilt: Organisieren von Inhalt, Layout, Typografie, Formulare / Dialoge / Modale, Odds & Ends und Kultivierungsressourcen

Inhalt organisieren

  • Vereinfachen und klären. Aggressiv. Ständig. Ich habe noch nie eine Website gesehen, die zu kurz ist.
  • Verwenden Sie Etiketten und Titel, um Dinge zu identifizieren. Platzieren Sie "Anmelden" über Ihrem Anmeldeformular. Fügen Sie "Nicht eingereichte Ausgaben" auf eine Liste der nicht eingereichten Ausgaben. Lassen Sie den Benutzer nicht fragen, "was sehe ich an?"
Etiketten machen die Dinge klarer.
  • Überschriften sollten nicht umbrochen werden. Schreibe sie neu, bis sie kurz sind. Schlecht: "Red Hawk Productions wird mit dem Voice of the Customer Award von BigCo ausgezeichnet."
  • Verwenden Sie für die meisten Symbole Beschriftungen. Dies ist eine feste Wissenschaft. Google-Symbole mit Etiketten für umfangreiche (und interessante) Nachweise.
  • Erstellen Sie eine Inhaltshierarchie mit Schriftarten. Größere, mutigere Überschriften; Untersuchen Sie Zwischenüberschriften, Einfügungen oder Anführungszeichen. kleinere, leichtere Kopie.
Verwenden Sie Schriftarten, um eine Inhaltshierarchie zu erstellen.
  • Gestalten Sie Ihre Seiten einfach, indem Sie Überschriften, Insets, Anführungszeichen, Bildunterschriften usw. verwenden. Die meisten Leute lesen nicht. Wir überfliegen.
  • Lange Absätze sind mühsam zu lesen. Zerbrich sie. Behalten Sie die Absätze 5 bis 7 Zeilen bei.
  • Wenn Sie einen langen Absatz nicht vermeiden können, machen Sie ihn skizzierbar, indem Sie gelegentlich Fett oder Kursiv verwenden. Einige Leute hassen das, aber es kann effektiv sein. Vorsicht, es ist wirklich leicht, es zu übertreiben.
Lange Absätze sind schwer zu überfliegen. Verkürzen Sie sie oder kühne Worte sparsam.
  • Wenn Elemente zusammengehören, fügen Sie sie auf der Seite zusammen. Kontaktinformationen, Adressblöcke, Anmeldeinformationen und ähnliches.
  • Verwenden Sie zentrale, konsistente Navigationselemente. Ein primäres Nav-Element ist eine gute Sache. Links, die in Ihren Inhalt eingebettet sind, sind in Ordnung. Das Einbetten zusätzlicher Navigationsleisten in Ihren Inhalt sollte vermieden werden. Sie schaffen Verwirrung und machen es schwer, Inhalte zu finden.
  • Verwenden Sie Aufzählungslisten, nummerierte Listen und Unterüberschriften, um Informationen auf einen Blick zu vermitteln.
  • Verwenden Sie Datentabellen entsprechend. Tabellarische Daten in Absatzform sind schrecklich!
  • Verlassen Sie sich nicht allein auf die Farbe, um Informationen zu übermitteln (z. B. Fehler bei der roten Prüfung in einem Formular). Benutzer können Farbunterschiede nicht immer erkennen.
  • Geben Sie beim Betreiben eines Diagramms oder Diagramms die Schlussfolgerung an, die das Publikum zeichnen soll. Sag es einfach. Anstelle von "Aktienkurse im ersten Quartal 2018" sagen Sie "Bewertungen wachsen". Anstelle von "Bäume gepflanzt vs. Blumen gepflanzt" sagen Sie: "Hausbesitzer pflanzen mehr Blumen als Bäume." Favoriten!)

Layout

  • Alles mit etwas ausrichten. Keine Floater Dies ist eine dieser Regeln, die Sie brechen können, wenn Sie gut sind.
  • Wenn Sie ein großes Banner (100px +) über der Oberseite verwenden, verkleinern Sie es, wenn der Benutzer die Seite nach unten scrollen soll. Hier ist ein cooles Beispiel für Header- / Scroll-Effekte. Ich denke, ein persistentes Banner mit einer Größe von 64 Pixeln ist für einen Desktop ungefähr richtig. Wenn Sie auf dem Handy die Immobilie benötigen, verbergen Sie das Banner beim Scrollen.
  • Setzen Sie Ihren Logo-Link oben links (auf Desktop-Geräten). Wenn Sie darauf klicken, gelangen Sie zur Startseite. Jeder macht es; Benutzer erwarten es. Auf mobilen Geräten kann ein Hamburger-Menü dorthin gehen.
  • Platzieren Sie die Informationen zur Konten- / Profilverwaltung oben rechts auf einer Desktopseite. Jeder macht es; Benutzer erwarten es.
    • Für mobile Websites sind Navigationsleisten im Overlay-Stil und keine Navigationsbanner erforderlich.
    • Beschränken Sie die Breite der Kopie. Lange Zeilen sind schwer zu lesen. Halten Sie es unter 80 Zeichen pro Zeile. Viele Menschen bevorzugen 40–60 Zeichen. Die Verwendung mehrerer Spalten im Magazinstil kann hilfreich sein.
    • Eine andere Möglichkeit: Verwenden Sie Content Divs mit fester Breite. Auf Desktops sieht ein zentriertes Div schön aus. Dies bedeutet NICHT, Text zu zentrieren. Verwenden Sie Divs in voller Breite auf mobilen Geräten.
    • Vorsicht beim Stapeln und Schachteln visueller Elemente (Karte auf einer Karte; Tabelle in einem Feldset auf einer Karte usw.). Zu viel Baugerüst ist nur ein Durcheinander, das den Inhalt verdeckt. Beginnen Sie mit Text auf einem Hintergrund und fügen Sie Container sparsam hinzu.
  • Dynamischer Inhalt (manchmal kurz, manchmal lang) kann dazu führen, dass Bildlaufleisten ein- und ausgeblendet werden. Lassen Sie nicht zu, dass Ihre Inhalte nach links und rechts springen. Verwenden Sie Vollzeit-Bildlaufleisten oder verwenden Sie diesen eleganteren Fix.
    • Vermeiden Sie das Scrollen von Bereichen auf einer Bildlaufseite. Doppelt so auf dem Handy. Dreifach so mit Karten.
    • Betrachten Sie Ihre gesamte Site mit Blick auf den weißen Raum. Es ist eine Art Kunst. Sehen Sie sich Websites an, die Sie gerne verwenden, und bemerken Sie deren Verwendung von Leerzeichen.
    • Typografie

    • Verwenden Sie kontrastierende Größen und Gewichte. Schauen Sie sich jede professionelle Arbeit an, wie z. B. Zeitschriftenhüllen oder Produktpakete. Beachten Sie, dass der größte Text bis zu 20-mal so groß ist wie der kleinste Text. Sei kein Huhn
  • Verwenden Sie keinen schwarzen Text. Verwende # 333333 oder so ähnlich. (Mittlere Verwendung # 292929.)
    • Verwenden Sie für Textkopien eine Zeilenhöhe von 1,2x - 1,6x der Schriftgröße. Wenn Sie eine dichte Kopie wirklich, wirklich schlecht benötigen, widerstehen Sie dem Drang, die Zeilenhöhe zu reduzieren. Bearbeiten Sie die Kopie besser. Oder brechen Sie es auf.
    • Setzen Sie niemals einen ganzen Absatz in ALL CAPS. Das Fehlen von Wortformen macht sie schwer lesbar.
    • Verwenden Sie keine Blöcke mit zentriertem Text. Wenn Sie Textausrichtungen links (oder rechts) verwenden, können Sie tatsächlich die Ausrichtungslinie sehen. Wenn Sie Text zentrieren, kann Ihr Gehirn diese Linie schätzen oder ableiten. Es ist eine unerwünschte kognitive Belastung.
    • Vermeiden Sie die Verwendung von Arial oder Times New Roman. Du bist nicht so faul.
    • Verwenden Sie die Comic Sans-Schrift nicht, es sei denn, Sie möchten von Trollen eingesetzt werden.
  • Verwenden Sie eine sans-serif-Schriftart für Überschriften, eine serif-Schriftart für die Textkopie (im Allgemeinen).
    • Verwenden Sie nicht mehr als 3 Schriftarten auf einer Seite - eine Serife, eine Sans-Serif und möglicherweise eine dekorative. Varianten (fett, kursiv) zählen nicht zu Ihrer Gesamtsumme. Aber überbeanspruchen Sie sie nicht. Fühlen Sie sich frei, diese Regel zu brechen, wenn Sie gut werden.
    • Erfahren Sie mehr über Typografie. Lernen Sie allgemeine Begriffe und Gebote und Verbote. Dann gehen Sie auf eine "Font Safari" in ein Einkaufszentrum. Wenn Sie wie ich sind (wahrscheinlich nicht), werden Sie für eine Weile da sein. Beachten Sie, welche Schriften verwendet werden, um an Frauen zu verkaufen. Ja wirklich.

    Formulare / Dialoge / Modals

    Es gibt viele Variationen in den Stilen. Ich gebe meine eigenen Vorlieben. Konsistenz ist der Schlüssel.

  • Aktionen gehören unter Formulare. Ein Senden-Button sollte sich unterhalb des Formulars befinden, das er übermittelt, jedoch ggf. in demselben Element (wie auf einer Karte).
  • Richten Sie Blöcke von Aktionsschaltflächen (Senden / Abbrechen) am rechten Rand des übergeordneten Elements aus. Eine einzelne Taste kann zentriert sein. Vermeiden Sie 3-Tasten-Blöcke in Dialogen. Sie erfordern zu viel Nachdenken.
  • Setzen Sie positive Aktionen rechts von negativen Aktionen ab. Positive Maßnahmen sind das Senden, Fortfahren, Löschen, Kopieren und Veröffentlichen. Negative Aktionen sind Dinge wie Abbrechen, Zurücksetzen und Zurück.
    • Nutze Farbe für positive Aktionen und entsättige negative Aktionen.
      • Überbeanspruchen Sie keine Dialoge. Sie sind nützlich, um den Referenzrahmen zu ändern, z. B. beim Speichern von Dateien oder beim Bestätigen von Löschvorgängen. Sie sind schwerfällig, um Inhalte zu präsentieren. Und diese Inhalte werden für Benutzer schwieriger zu entdecken sein.
      • Krimskrams

      • Weniger ist mehr. Fast immer.
        • In Eile? Folgen Sie einer Anleitung. Bootstrap-Sites können ähnlich aussehen (wenn Sie sich an die Standardwerte halten), aber sie sehen ziemlich gut aus. Material Design ebenfalls. Sehen Sie sich die Material Design Spec an, falls dies nicht der Fall ist. Es ist ziemlich cool. So ist der Apple HIG.
        • Sehen Sie sich Websites an, die Sie mögen. Warum magst du sie? Formuliere es in Worte. Schreib sie auf. Mach diese Sachen.
        • Bevorzugen Sie weiße oder sehr helle Hintergründe, insbesondere zum Kopieren. Dunkle Themenliebhaber bringen den Hass, aber weiße Hintergründe können eine helle, luftige Erscheinung erzeugen und die Notwendigkeit für zusätzliche Grafikverarbeitung reduzieren.
      • Leistung ist wichtiger als je zuvor. Dies kann äußerst technisch, kostspielig und schwierig sein. Twitch TV hat nicht zufällig eine bessere Zeit zum ersten Mal als 3G auf 3G in Indien. Das ist ein ernstes Engineering genau dort.
        • Vereinheitliche mit Farbe. Das Konzept der Primär- und Akzentfarbe macht dies leicht. Persönlich vermeide ich den dichten Einsatz von Farbe. Ich bin nicht gut genug, um es konsequent durchzubringen.
        • Animationen richtig machen oder nicht. Gute Bibliotheken folgen den Prinzipien von Squash / Stretch, Beschleunigen / Verlangsamen und mehr. Benutze sie.
        • Animationen konsequent anwenden. Inkonsistente, unerwartete Animationen lenken die Aufmerksamkeit auf sich und weg von Ihrem Inhalt.
        • Quetschen Sie niemals Grafiken. Was bist du, ein Bauer?
        • Lernen Sie eine Photoshop-ähnliche Anwendung. PIXLR ist eine kostenlose webbasierte App, die einige Photoshoppy-Sachen erledigen kann.
        • Erfahren Sie mehr über skalierbare Vektorgrafiken (SVGs). Sie sehen auf jeder Skala perfekt aus. Sie können mit Tools wie D3 animiert werden.
        • Kultivieren Sie gute Ressourcen

          Es gibt unzählige gute Ressourcen online. Hier sind einige, zu denen ich von Zeit zu Zeit zurückkehre.

          • Adobe Color (Kuler)
          • UX Mythen
          • Zeitloser Artikel (ab 1995!): 10 Usability-Heuristiken
          • Creative Bloq
        • Die fabelhaften Design- und Typenbücher für Nicht-Designer
        • Schlechte Designs - ironischerweise schlägt eine sehr schlecht gestaltete Website, die jedoch zum Nachdenken anregt, und lustigen Beispielen für reales Design fehl.
        • Danke fürs Lesen! Wenn es Ihnen gefallen hat, klatschen Sie es bitte, damit andere es auch sehen können.