Basix Häufige Fehler im Webdesign

Wir alle machen Fehler. Es ist die menschliche Natur. In der Webdesignbranche können jedoch viele Elemente falsch eingefügt werden, da nur wenige Anpassungen erforderlich sind, um sie zu einem Star zu machen. Diese reichen von Typografie bis zum Auffüllen, wobei eine einzelne Ziffer Ihr Webdesign drastisch beschädigen kann. Glücklicherweise können Sie mit ein paar Klicks und wenigen Klicks auf Ihrer Tastatur ein sinkendes Design retten, sobald Sie die häufigsten Fehler erkannt haben. Heute werfen wir einen Blick auf einige Fehler im Webdesign, auf die jeder Designer achten sollte.


Wir alle machen Fehler? einige sind unordentlicher als andere.

Über Basix

In unseren Basix-Beiträgen geht es um den Einstieg in das Webdesign. Ganz gleich, ob Sie Web-Design ganz neu sind oder seit einiger Zeit im Web arbeiten und an "formalen" Schulungen interessiert sind. Die Artikel und Tutorials in dieser Bibliothek sollen Ihnen dabei helfen, ein wenig Erfahrung unter Ihnen zu sammeln Gürtel, so dass Sie später schwierige Projekte abrocken können!


Typografie

Typografie ist eines der wichtigsten Merkmale eines Designs. In den meisten Designs dominiert Text die Mehrheit der Seite, so dass eine saubere, gut zugeschnittene Typografie der Schlüssel zum Erschließen des Potenzials Ihres Themas sein kann. Es gibt viele Fehler, die neue oder erfahrene Designer machen können, die den sonst ansprechenden Reiz der Typografie einer Seite beeinträchtigen können.

Sans Serif vs Serif

Ich gehe davon aus, dass der Leser weiß, was eine Serifenschriftart ist. Es gibt eine gewisse Eleganz in Serifenschriften, die auf einer Webseite verwendet werden, und ein moderneres Gefühl, wenn ein Designer die breite Palette von serifenlosen Schriftarten verwendet. Diese beiden Effekte mischen sich jedoch nicht, um bei gleichzeitiger Verwendung zum Inbegriff einer guten Typografie zu werden. In der Tat kann das Mischen der beiden unter normalen Umständen zu hybriden Ergebnissen führen, die, ehrlich gesagt, einfach nicht gut aussehen.

Das bedeutet nicht, dass Serifen- und Sans-Serifen-Schriften miteinander vermischt werden noch nie funktioniert. In einigen Fällen funktioniert es sogar ziemlich gut, insbesondere wenn die Schriftarten auf verschiedenen Ebenen einer Hierarchie verwendet werden. Zum Beispiel verwendet A List Apart eine Serifenschriftart für einen Titel, während eine Sans-Serif-Schriftart für den Haupttextinhalt verwendet wird.

Anzahl der Schriften

Ein weiterer schwerwiegender Fehler, dem einige Designer begegnen, ist die Verwendung vieler verschiedener Schriftfamilien anstelle eines ausgewählten Paares. Die Verwendung mehrerer Schriftarten kann zu einem nicht verbundenen Design führen, das die Lesbarkeit Ihres Inhalts beeinträchtigt. Wenn Sie versuchen, eine Schriftartfamilie pro Ebene der visuellen Hierarchie des Designs zu verwenden, wird im Allgemeinen ein besseres Schriftartschema erstellt, das hier und dort viel mehr vereinigt als eine Reihe zufälliger Stile wirkt.

Ebenso kann eine zu große Änderung der Schriftgröße und des Zeilen- / Buchstabenabstands zu einem unzusammenhängenden Leseerlebnis und insgesamt einem schlechten Endbenutzererlebnis führen. Halten Sie es konstant und vertraut.

Mangel an Kontrast

Ein Hauptproblem, das sich stellen kann, ist der mangelnde Kontrast zwischen Typografie und Hintergrund. Dies kann zu Lesbarkeitsproblemen führen, da einige Benutzer Schwierigkeiten haben, zwischen den beiden Farbsätzen zu unterscheiden. Nehmen Sie zum Beispiel das vorige Beispiel. Welches ist leichter zu lesen, links oder rechts? Rechts die Linke!

Es gibt keine komplexe Theorie hinter Kontrast. Sie würden schwarze Schrift nicht auf einen schwarzen Hintergrund setzen, da Sie nicht bestimmen können, was geschrieben wird und was der Hintergrund ist. Der einzige Vorschlag ist, die Textfarbe dem entgegengesetzten Ende des Hintergrunds nahe zu bringen, ohne andere ästhetische Qualitäten zu beeinträchtigen, um Frustration beim Endbenutzer zu vermeiden. Das Ellipsis-Design zeigt im oberen Kopfbereich einen guten Kontrast. Würde stattdessen ein hellrosa oder lila arbeiten?


Polsterung, Ränder und Abstand

Wir kämpfen nicht mehr auf winzigen Monitoren (wir denken hier hauptsächlich über das Desktop-Browsing, nicht über das Smartphone). Stattdessen leben wir auf 21-Zoll-Bildschirmen und suchen nach Auflösungen, die höher als HD sind, was Designern viel mehr Platz zum Arbeiten bietet. Daher sollten Sie sich keinesfalls gequetscht fühlen und mehr Platz für Polsterung und Ränder verwenden, um die Ästhetik von zu verbessern Ihr Design. Nehmen wir zum Beispiel das Design von Apple, das viel Weißraum verwendet und alle Farben und Aktionen auf den Inhalt konzentriert, für den es wichtig ist. Das heißt nicht, dass Sie eine Menge davon haben sollten Weiß Raum, aber Ihre Entwürfe könnten von einer größeren Sichtbarkeit profitieren, so dass sie leicht voneinander unterschieden werden können.

Es ist wichtig, dass der Abstand in Ihrem gesamten Design so konstant wie möglich ist, und zwar sowohl hinsichtlich der inneren Polsterung als auch der äußeren Ränder. Ein Beispiel finden Sie in der folgenden Abbildung. Die zweite Hälfte sieht viel besser aus, da alle Ränder den gleichen 18px-Raum haben. Alles ist auf das gleiche Rasterlayout ausgerichtet. Es ist klar und jeder Bereich unterscheidet sich von anderen, aber es verschwendet nicht unbedingt Platz.

Rastersysteme

Ebenso ist das Raster ein wichtiges Merkmal der meisten erfolgreichen Webdesigner. Die Verwendung eines Rasters hält alles in Ordnung und räumt Konstruktionen mit einheitlichen Rinnen auf. Das netzbasierte Design macht alles so viel organisierter. Dieser Abschnitt ist nicht in diesem Artikel enthalten, da es ein Fehler ist, keinen zu verwenden. Betrachten Sie ihn als Lösung, wenn Sie das Gefühl haben, dass Ihre Entwürfe in einem Bereich versagen, zu dem sie beitragen.


Alte Werte bewahren

Die Branche des Webdesigns ist schnelllebig, und die neuen Entwicklungen erscheinen konstant. Eines der schlimmsten Dinge, die Ihrem Design schaden können, ist, sich auf die Art und Weise weiterzuentwickeln, die vor Jahren populär war. Im Jahr 2003 hatte Microsoft Frontpage ein Tool für "Layout-Tabellen", aber kein guter Entwickler sollte sich jemals trauen, ein Table-Tag im Namen des Layouts zu öffnen. Ebenso sind die erstaunlichen animierten GIFs und die Hintergrundmusik vergangener Jahrzehnte ein absolutes No-No. Oh, und denken Sie nicht daran, Frames als Teil Ihres Webdesigns zu verwenden. Alle diese Themen sind Usability und andere Probleme und es ist einfach nicht mehr so, wie wir Dinge tun.

Speider Schneider hat bei Tuts + einen großartigen Artikel über "Die Steinzeit des Webdesigns" veröffentlicht. Vergewissern Sie sich, dass Sie ein Tutorial zu Ihrer Website finden sollte nicht aussehen wie.


Ältere Techniken wie das Verwenden von Tabellen oder iFrames mögen verführerisch erscheinen, aber es gibt oft einen eleganteren Weg, um Dinge zu erledigen, wenn Sie sich modernere Ansätze ansehen.

Anteil und Größe

Ihre Entwürfe sollten sich immer an eine Art Hierarchie halten, zu der Größe und Proportionalität beitragen. In einfachen Worten, Ihre wichtigsten Elemente sollten die größten sein und sie mit zunehmender Größe verkleinern lassen. Das bedeutet nicht, dass das unwichtigste Element 4px groß sein muss, es sollte jedoch Ihre Roadmap für die Skalierung der Elemente auf einer Seite sein. Sie sollten immer in einem angemessenen Verhältnis zur Eingabegenauigkeit des von Ihnen entworfenen Geräts stehen und leicht zu erkennen sein. Wenn sie überhaupt da sind, werden sie aus einem bestimmten Grund da sein.

Dies alles ergibt sich aus einer Sicht der Benutzerfreundlichkeit, die darauf hindeutet, dass jedes Element leicht zugänglich sein sollte und keiner Begründung bedarf: Lassen Sie den Benutzer nichts weiter tun, als nur etwas anzusehen. Kein Schielen, kein Zoomen, keine übermäßigen Versuche, etwas anzuklicken, das winziger als ein Grashalm ist.

Sie haben wahrscheinlich auch von göttlicher Proportion oder "The Golden Ratio" gehört. Obwohl sich nicht jedes Design an dieses Prinzip halten muss, sollten die meisten Standarddesigns dies wahrscheinlich um jeden Preis versuchen. Das Verhältnis von 1 zu 1,62 (in abgerundeter Form) wird allgemein als Golden Ratio bezeichnet und wird nicht nur im Webdesign verwendet, obwohl wir einige Anerkennung für seine Verwendung verdienen.

Der Goldene Schnitt stellt Balance in einem Webdesign dar, da wir Menschen daran gewöhnt sind; Das Verhältnis des Unterarms zur Hand beträgt 1: 1,62, ebenso wie das menschliche Lächeln. Die Suche nach einem attraktiven Partner kann auch auf der Goldenen Ratio basieren, weshalb wir die Goldene Ratio als "natürlich" empfinden. Wenn Sie alles so ausbalancieren, dass ein Webdesign besser aussieht, können Sie sich besser und glücklicher fühlen, da es für den Benutzer natürlicher ist.

Weitere Informationen zum Goldenen Schnitt und zum Einfluss von Mathematik auf das Webdesign finden Sie hier.


Vergessen, warum du das tust

Den Hauptzweck Ihres Designs zu vergessen, ist immer schlecht. Wenn Sie für E-Commerce entwerfen und diese brillante Idee für einen Kick-Ass-Slider haben, der einfach nicht in das aktuelle Projekt passt, sollten Sie ihn nicht einfach so integrieren. Wenn Sie die Angewohnheit haben, dieses fantastische Dropdown-Menü zu verwenden, an dem Sie unzählige Stunden gearbeitet haben, dies jedoch die Verwendbarkeit der jeweiligen Website beeinträchtigt, sollten Sie es nicht verwenden. Lassen Sie sich nicht durch etwas anderes ablenken, außer wozu Ihr Design letztendlich verwendet wird. Treten Sie in regelmäßigen Abständen zurück und überlegen Sie, ob das Ziel mit dem aktuellen Design übereinstimmt, und manipulieren Sie es, wenn dies nicht der Fall ist.


Für das ThemeForest Inclined

Natürlich besteht eine höhere Chance, dass Sie ein ThemeForest-Autor sind, wenn Sie diesen Artikel lesen. Daher habe ich ein paar Tipps, die Sie mit Ihnen teilen sollten, basierend auf den üblichen Ablehnungsfaktoren, mit denen das Überprüfungsteam regelmäßig zu kämpfen hat.

  • Zeilenhöhe - Das Wiki weist darauf hin, dass vielen eingereichten Designvorlagen eine ausreichende Höhe der Linienhöhe und / oder der Abstand fehlt. Eine großzügige Linienhöhe von 1,3-1,6 mm trägt zur besseren Benutzerfreundlichkeit Ihres Designs bei und macht es auch sauberer. Wenn Sie den Wert "em" zum Messen der Zeilenhöhe verwenden, halten Sie ihn auch im Verhältnis zu Ihrem Text.
  • Visuelle Hierarchie - Wie bereits erwähnt, kann eine starke, unterscheidbare visuelle Hierarchie auch von Vorteil sein, da der Benutzer dabei unterstützt, zu bestimmen, was er zuerst lesen soll, und sich dann die Hierarchie durcharbeiten kann. Dies kann insbesondere auf Websites nützlich sein, die etwas verkaufen möchten. Dies hilft, die Aufmerksamkeit des Lesers auf ein bestimmtes Element auf der Seite zu lenken, z. B. die erstaunlichen Dinge, die ein Produkt leisten kann, oder es ist ein sorgfältig aufgenommenes Bild, während die weniger attraktiven Dinge erhalten bleiben. wie der Preis - etwas versteckter.
  • Browser-Kompatibilität - Eine der schlimmsten Sachen, die Sie tun können, ist die Entfremdung eines Teils der potenziellen Zielgruppe Ihrer Website, indem Sie dafür sorgen, dass eine Website mit dem von Ihnen ausgewählten Browser nicht funktioniert. Die Chancen stehen gut, dass der Benutzer die Website verlässt, anstatt frustriert zu sein, wenn er versucht, sich durch das Design zu bewegen. Es ist immer ratsam, zumindest alle wichtigen Browser abzudecken, und es sollte sichergestellt werden, dass korrekte Tests durchgeführt werden. Wenn Sie keinen Mac haben, holen Sie sich einen Apple Store herunter und probieren Sie Ihre Website aus, wenn sie dazu beiträgt, dass das endgültige Design besser aussieht.

Hoffentlich haben Sie etwas zum Nachdenken darüber, was Sie nicht tun sollten. Kehren Sie jetzt zur Startseite zurück und entdecken Sie, was Sie tun sollte tun!