Häufige Fehler bei der Webgestaltung

Für die Benutzer ist es einfacher, Informationen zu verdauen, wenn sie in logischen Blöcken gruppiert sind. Setzen Sie die Auffüllung auf 120-80 Pixel und trennen Sie Textblöcke durch farbige Hintergründe.

Um logische Blöcke sollten gleich große Abstände gesetzt werden. Andernfalls sieht Ihre Seite unübersichtlich aus, und die Benutzer berücksichtigen die einzelnen Abschnitte möglicherweise nicht gleichermaßen.

Um zu vermeiden, dass logische Teile ineinander übergehen, sollten Sie sie getrennt halten und einen großen Abstand (mindestens 120 Pixel) zwischen ihnen einfügen.

Es sollte ein ausreichender Kontrast zwischen Text und Hintergrund bestehen. Um den Text hervorzuheben, legen Sie einen kontrastierenden Filter über das Bild. Schwarz ist eine beliebte Farbe, aber Sie können auch helle Farben verwenden und diese mischen.

Eine andere Möglichkeit ist, von Anfang an ein kontrastreiches Bild zu verwenden und die Kopie über einem dunklen Abschnitt eines Fotos zu platzieren.

Zu viele typografische und gestalterische Stile auf einer Seite lassen sie unprofessionell und schwer lesbar erscheinen. Um dies zu vermeiden, beschränken Sie sich auf eine einzige Schriftart und zwei Schriftstärken. Zum Beispiel: normal und fett.

Vermeiden Sie es, schmale Seitenelemente mit Farbe zu betonen. Das sieht einfach nicht gut aus. Überschriften zum Beispiel sind durch ihre Größe, Schriftstärke und Abstände bereits gut gekennzeichnet. Möchten Sie einen bestimmten Punkt auf einer Seite hervorheben? Verwenden Sie einen farbigen Hintergrund für den gesamten Block, einschließlich der zugehörigen Überschrift und des Textes.

Es ist schwer zu lesen, wenn viel Text in schmalen Spalten steht, weil die Besucher der Website von einer Zeile zur nächsten springen müssen. Außerdem sieht es einfach nicht gut aus! Am besten ist es, die Anzahl der Spalten zu reduzieren und den Text zu kürzen. Sonst wird ihn niemand lesen.

Die Zentrierung von Text auf der Seite funktioniert gut, wenn wenig Text vorhanden ist, da es sonst für die Benutzer schwierig ist, effizient zu navigieren. Erhöhen Sie gleichzeitig die Schriftgröße ab 24 Pixel.

Wenn Sie viel Text einfügen müssen, verwenden Sie die Blöcke mit ausklappbarer Textkopie (bei Tilda die Blöcke TX12, TX16N oder die Schaltfläche BF703).

Vermeiden Sie es, wichtige Teile oder kleine Details eines Bildes mit Text zu überdecken. Auf diese Weise verdecken Sie nicht nur das Bild, sondern machen auch den Text unleserlich. Probieren Sie verschiedene Positionen für die Textzeilen aus, z. B. zentriert, linksbündig oder sogar vertikal.

Damit die Informationshierarchie auf einer Seite deutlich sichtbar ist, sollte die Überschrift auf dem Deckblatt größer sein als die übrigen Überschriften oder zumindest die gleiche Größe haben. Dies gilt insbesondere, wenn die Überschrift lang ist, zum Beispiel.

Das gleiche Prinzip gilt für die visuelle Hierarchie innerhalb eines logischen Blocks. Die Überschrift sollte das größte Gestaltungselement auf der Seite sein, gefolgt von einer kleineren, weniger auffälligen Unterüberschrift. Die darauf folgenden Feature-Titel sollten deutlich kleiner als die Überschrift sein und die gleiche Schriftgröße haben. Die kleinste Schriftart sollte für die Beschreibungen der Merkmale verwendet werden.

Dies hilft den Besuchern der Website, zwischen wichtigen und weniger wichtigen Informationen zu unterscheiden.

Ein bildschirmfüllendes Bild oder eine Galerie, die auf einen Textteil folgt, wirkt wie ein separater, unabhängiger Block. Wenn Sie die Galerie mit einem Rahmen versehen, wirken der Text und die Bilder dank eines gemeinsamen Hintergrunds wie ein logisches Ganzes.

Eine sehr große Schrift ist ideal für einen kurzen Satz. Wenn die Überschrift lang ist, verwenden Sie eine kleinere Schriftart. So ist sie leichter zu lesen und lässt viel Platz für alle anderen Gestaltungselemente auf der Seite.

Umrandungen sind notwendig, wenn eine Schaltfläche transparent ist. Das Hinzufügen eines Rahmens für eine farbige Schaltfläche ist nicht sinnvoll. Es ist nur ein weiteres sinnloses Designmerkmal, das eine Seite überfrachtet und das Lesen erschwert.

Die Verwendung zu vieler Farben auf einer Seite ist verwirrend. Außerdem ist es unklar, welche Teile wichtiger sind. Eine oder zwei Farben reichen aus, um dem wirklich Wichtigen visuelles Gewicht zu verleihen.

Menschen besuchen Websites, um Lösungen für ihre Probleme zu finden, helfen Sie ihnen! Verwenden Sie das Menü, um den Besuchern die Navigation auf der Website zu erleichtern und das Gewünschte schnell und einfach zu finden. Überfrachten Sie sie nicht mit zu vielen Informationen. Es genügen 5 bis 7 Menüpunkte.

Eine Wand aus Text macht das Lesen schwer verständlich. Um die Navigation zu erleichtern, sollten Sie den Text in Absätze unterteilen oder Unterbrechungen einführen, z. B. durch Schlagworte, Zitate oder Bilder.

Eine Überschrift sollte nicht in gleichem Abstand zwischen den Kapiteln "hängen", weil sie zu dem darauf folgenden Absatz gehört. Der Abstand über einer Überschrift sollte 2-3 mal größer sein als der Abstand unter der Überschrift. Gleichzeitig sollte der Abstand unter einer Überschrift ungefähr dem Abstand zwischen den Absätzen entsprechen oder etwas größer sein. Auf diese Weise verweist die Überschrift visuell auf den nachfolgenden Text.

In der Typografie werden Kontraste verwendet, um verschiedene Textebenen visuell zu unterteilen und eine strenge Hierarchie zu schaffen. Die Hauptüberschriften sollten auf der Seite am stärksten hervortreten; die Zwischenüberschriften sollten deutlich kleiner, aber immer noch gut sichtbar sein.

Wenn die Blöcke gleich schwer sind, sollten sie auch gleich aussehen und sich gleich anfühlen und in gleichem Abstand zueinander angeordnet sein.

Einerseits bilden die Abbildung und die Bildunterschrift eine Einheit, andererseits handelt es sich um zwei getrennte Elemente, und die Bildunterschrift sollte das Bild nicht beeinträchtigen.

Die Zwischenüberschrift und der darauf folgende Text gehören zusammen, aber wenn der Abstand zwischen den Absätzen in einem Artikel größer ist als der Abstand zwischen der Zwischenüberschrift und dem nächsten Absatz, wirkt der Artikel unzusammenhängend.

Elemente, die als Ausdruck der Betonung verwendet werden, wie Schlüsselsätze oder Zitate, sind eigenständige Objekte. Um sie wirklich hervorzuheben, setzen Sie sie 75-120 Pixel vom Haupttext entfernt.

Wenn Sie einen bestimmten Satz hervorheben möchten, machen Sie ihn fett und 10-15 Pixel größer als den Haupttext. Lassen Sie den Schlüsselsatz wirklich vom Rest des Textes abheben.

Wenn Sie einen kleinen Abschnitt der Seite hervorheben wollen, z. B. Informationen über den Autor, müssen Sie ihn nur mit genügend Abstand anordnen, um den Eindruck von Platz zu vermitteln. Platzieren Sie diesen Abschnitt nicht auf einem farbigen Hintergrund; er würde deplatziert wirken.

Wenn Sie mehrere bildschirmfüllende Bilder in einer Sequenz verwenden, vermeiden Sie es, einen Abstand zwischen den Bildern zu lassen. Der Rahmen ist immer noch sichtbar, und es besteht keine Notwendigkeit, ein zusätzliches Element hinzuzufügen. Es fügt einfach nichts hinzu, es ist sinnlos.

Design-Akzente (wie hier die Fettschrift) funktionieren gut, wenn es nur wenige davon gibt. Wenn Sie zu viele setzen, stört das den Lesefluss auf der Seite.

Das Design sollte die Lesbarkeit nicht beeinträchtigen. Je weniger typografische Stile es gibt, desto besser sind wichtige Elemente sichtbar. Es reicht aus, Überschriften und Zwischenüberschriften hervorzuheben und Schlüsselbegriffe kontrastreich zu gestalten.

Überschriften und Zitate werden in der Regel zentriert, um sie vom Rest des Textes zu unterscheiden. Ein langer Text, der mittig ausgerichtet ist, ist schwer zu lesen.

Eine Überschrift ist ein eigenständiges Gestaltungselement. Sie sollte nicht zu nah an einem Bild platziert werden, das darauf folgt. Eine gelungene Kombination ergibt sich, wenn Sie einen Abstand von mindestens 60 Pixeln wählen und eine Zwischenüberschrift hinzufügen: Sie entfaltet den Inhalt der Seite und setzt den richtigen Akzent, wo er benötigt wird.

Kursivschrift wird verwendet, um ein Wort oder einen kurzen Satz im Text hervorzuheben. Sie ist nicht so auffällig wie die fette Schrift, aber sie ermöglicht eine Hervorhebung, wo es nötig ist.

Verwenden Sie keine Kursivschrift für Ihren Text und Ihre Überschriften. Wenn im Text serifenlose Schriftarten verwendet werden, sollten Sie kursive Schriftarten gänzlich vermeiden.

Sie können diesen ärgerlichen Fehler selbst entdecken, wenn Sie nach der Bearbeitung Ihrer Seite (Änderung der Schriftgröße, der Ausrichtung oder des Abstands) eine kleine Pause einlegen und sich das Ergebnis noch einmal ansehen.