Inhalt
- 01. Mangel an Gesamtsicht
- 02. Verlieben in Modeerscheinungen und Trends
- 03. Nicht an einem Raster ausrichten
- 04. Schlechte Textbehandlung
- 05. Schlechte Behandlung der Fotografie
- 06. Schlechte Behandlung von Symbolen und Logos
- 07. Dinge unvollendet oder kaputt lassen
Experimentieren und Fehler machen ist ein wichtiger Teil des Lernens. Jedes Jahr sehe ich in meiner Arbeit als Universitätsdozent neue Studenten, die die gleichen Fehler in ihrer Webdesign-Arbeit machen. Wenn wir diese Probleme hier identifizieren, können wir hoffentlich besser lernen, sie zu vermeiden.
01. Mangel an Gesamtsicht
Jede Webseite existiert aus einem bestimmten Grund, sei es, um Informationen zu vermitteln, Unterhaltung zu bieten, ein Produkt oder eine Dienstleistung zu verkaufen oder dem Benutzer die Ausführung einer Aufgabe zu ermöglichen. Jedes Element auf der Seite muss für diesen Zweck arbeiten.
Sehen Sie sich Ihr Design an: Die Funktion jedes Elements sollte klar sein, und alles, was diesen Zweck nicht unterstützt, sollte entfernt werden. Dinge, die anklickbar sind, müssen so aussehen, als wären sie anklickbar - ob durch Unterstreichen, Gestalten als Schaltflächen oder ein anderes visuelles System, der Schlüssel muss konsistent sein.
Sie sollten darauf abzielen, eine klare visuelle Hierarchie zu erstellen, damit der Benutzer die Seite einfach scannen und wichtige Informationen oder Funktionen auswählen kann. Der Ton und das Design Ihrer Seite sollten den Zweck der Website widerspiegeln, aber der Inhalt selbst ist der wichtigste Teil des Designs. Wenn Ihre Website dazu dient, Ihre Fähigkeiten als Webdesigner zu fördern, müssen wir vielleicht nicht von Ihrer Leidenschaft für das Sammeln von Briefmarken hören? Überlegen Sie, warum der Benutzer auf die Website gekommen ist und was er tun soll, wenn er dort ankommt. Überlegen Sie genau, wie Sie die Informationen und Funktionen organisieren. Teilen Sie beispielsweise eine Website nicht unnötig in mehrere Seiten auf, wenn sie als einzelne Seite, die einen Bildlauf durchführt, besser funktioniert.
02. Verlieben in Modeerscheinungen und Trends
Es macht Spaß, mit der Mode Schritt zu halten, aber es ist wichtiger, sich an die wichtigsten Designprinzipien zu halten. Zum Beispiel sehen klassische Plakate der Olympischen Spiele aus der Mitte des 20. Jahrhunderts noch heute fantastisch aus, während viele der skeuomorphen Web 2.0-Websites der frühen 2000er Jahre mit ihren Abschrägungen und Glaseffekten bereits veraltet aussehen. Der stereotype Hipster-Look von silhouettierten Ankern und Schnurrbärten geht bereits in die gleiche Richtung.
Der Schlüssel liegt darin, sich an die Prinzipien von Typografie, Bild und Layout zu halten, anstatt sinnlos bedeutungslose Ikonografie oder knifflige CSS- und Photoshop-Effekte anzuwenden. Manchmal ist weniger mehr und nur weil Sie einen jQuery-Bildkarussell- oder Parallaxen-Scroll-Effekt erstellen können, heißt das nicht, dass Sie dies tun sollten.
Niemand wird mit gutem Geschmack geboren (ich würde es sicherlich nicht behaupten!) Und der Geschmack ist natürlich subjektiv. Aber wenn wir uns gut gestalteten Dingen aussetzen, können wir definitiv eine Wertschätzung für gutes Design gegenüber schlechtem gewinnen und hoffentlich die Fehler in unserer eigenen Arbeit leichter erkennen.
03. Nicht an einem Raster ausrichten
Obwohl die Gitterlinien unsichtbar sind, richten die meisten professionellen Designer ihre Arbeit auf ein strenges Gitter aus, das häufig aus acht, 12 oder 16 dünnen vertikalen Säulen besteht. Diese Säulen sollten gleichmäßig groß und beabstandet sein und durch klare Ränder und Dachrinnen voneinander getrennt sein. Visuelle Elemente können eine oder mehrere Spalten umfassen. In der Praxis können die 12 dünnen "Spalten" in drei tatsächliche Textspalten unterteilt werden. In anderen Fällen kann ein Bild alle 12 Spalten umfassen. Wenn Sie die Aufteilung dieser Spalten variieren, kann dies zum Stoppen beitragen Das Design ähnelt zu sehr einem starren Tisch.
Rastersysteme haben ihren Ursprung im Druckdesign, sind jedoch über Frameworks wie 960 Grid System und neuere reaktionsfähige Systeme wie Skeleton ins Internet gekommen, mit denen Größe und Anzahl der Spalten basierend auf der Bildschirmauflösung dynamisch geändert werden können. Denken Sie daran, dass visuelle Elemente entweder klar ausgerichtet sein sollten oder klar so aussehen sollten, als ob sie nicht dazu gedacht wären. Wo die Dinge fast in einer Reihe stehen, aber nicht ganz, sehen sie merkwürdig aus. Achten Sie auch auf verwaiste Wörter oder Elemente, die sich an unerwarteten Orten befinden. Normalerweise ist es besser, im Browser zu entwerfen als in Photoshop, da Sie eine realistischere Vorstellung davon bekommen, wie die Website aussieht.
Zumindest sollte eine Webseite normalerweise innerhalb der Browserbreite zentriert sein, anstatt den Seiteninhalt links mit einer leeren Leere rechts zu verankern (ich sehe dich an, TSB).
04. Schlechte Textbehandlung
Schüler machen Text oft zu klein. Die Standard-HTML-Schriftgröße stammt aus einer Zeit, in der Websites Desktop-Benutzer mit Monitoren mit einer Auflösung von 800 x 600 berücksichtigen mussten. Im Zeitalter mobiler Geräte und hochauflösender Monitore können wir jedoch größer denken. Designer wie Jeffrey Zeldman haben gezeigt, dass große Schriftgrößen gut für Absatztexte geeignet sind.
Vergessen Sie nicht zu überprüfen, wie Ihre Website mit einer Reihe von Auflösungen aussieht, und verwenden Sie CSS-Medienabfragen, um sie bei Bedarf anzupassen. Überschriften sollten deutlich größer sein als der Absatztext. Stellen Sie außerdem sicher, dass zwischen den Textzeilen genügend vertikaler Abstand vorhanden ist. In der Typografie wird dieser Abstand als "führend" bezeichnet, und in CSS wird er durch die "Zeilenhöhe" gesteuert. Der Standardwert setzt Linien ziemlich nahe beieinander, was bedeuten kann, dass der Leser den Überblick darüber verliert, wo sie sich befinden, wenn sich sein Auge über die Seite bewegt. Versuchen Sie, einen Wert zu verwenden, der 50% größer als Ihre Schriftgröße ist, z. B. 36 Pixel für 24 Pixel Text.
Stellen Sie sicher, dass Sie um den Text herum genügend Leerraum lassen. Dies bedeutet lediglich einen leeren Bereich auf der Seite, der dazu dient, Elemente zu trennen und das Auge auf die Seite zu lenken. Stellen Sie sicher, dass Sie die Breite der Textspalten begrenzen, damit Sie nicht zu viele Wörter in einer Zeile haben. Dies hilft auch sicherzustellen, dass der Leser seinen Platz nicht verliert, wenn sich sein Auge vom Ende einer Zeile zum Anfang bewegt der nächsten Zeile. Im Allgemeinen funktioniert ein Durchschnitt von etwa 10 Wörtern pro Zeile am besten. Vermeiden Sie aus den gleichen Gründen Textausrichtung: Mitte oder Textausrichtung: rechts für Absatztext.
Beschränken Sie sich auf zwei oder drei Schriftarten und vermeiden Sie die Verwendung von Bildern als Text. Dienste wie Google Fonts und Typekit bieten Zugriff auf eine Vielzahl von Web-Schriftarten. Stellen Sie sicher, dass zwischen der Textfarbe und der Hintergrundfarbe ein ausreichender Kontrast besteht. Im Allgemeinen ist dunkler Text auf hellem Hintergrund am besten. Heller Text auf dunklem Hintergrund kann ebenfalls funktionieren, kann jedoch als maskuliner, kalter oder nicht einladender angesehen werden. Online-Tools wie Adobe Kuler können Ihnen bei der Auswahl eines geschmackvollen Farbschemas helfen. Vermeiden Sie kontrastreiche Hintergrundmuster, die die Form von Buchstaben verwirren können.
05. Schlechte Behandlung der Fotografie
Der häufigste Fehler hierbei scheint zu sein, dass Schüler Fotos auf der Seite zu klein dimensionieren, was bedeutet, dass sie ihre Wirkung verlieren. Bilder in voller Browserbreite (wie sie beispielsweise in Treehouse zu sehen sind) vermitteln ein wirkungsvolleres, glänzenderes Gefühl, das eher einem gedruckten Magazin ähnelt. Stellen Sie außerdem sicher, dass die von Ihnen ausgewählte Fotografie die Botschaft vermittelt, die Ihre Website zu vermitteln versucht, und dass Sie das gesetzliche Recht haben, sie zu verwenden. Stock-Fotografie-Websites bieten eine erstaunliche Auswahl an Bildern. Vermeiden Sie jedoch die vielen "kitschigen" Aufnahmen, die Sie dort finden. Wenn Sie Ihre eigene Fotografie verwenden, stellen Sie sicher, dass Sie die Farb- und Kontraststufen anpassen, um sicherzustellen, dass sie druckvoll und nicht verwaschen aussehen, aber dennoch natürlich aussehen.
06. Schlechte Behandlung von Symbolen und Logos
Ein häufiges Problem ist das schlechte Ausschneiden von Kunstwerken mit sichtbaren gezackten Kanten ("Zacken") oder pelzigen gefiederten Kanten. Beherrschen Sie das Stiftwerkzeug in Photoshop oder verwenden Sie das polygonale Lasso und zoomen Sie ganz nah heran. Ein weiteres häufiges Problem sind JPEG-Komprimierungsartefakte. Verwenden Sie daher SVG oder ein hochauflösendes PNG für Symbole und Logos. Stellen Sie sicher, dass Sie keine Grafiken über der nativen Auflösung anzeigen, da diese verschwommen erscheinen. Sie könnten damit für ein Foto davonkommen, aber niemals für eine Symbolgrafik.
07. Dinge unvollendet oder kaputt lassen
Ein professioneller Designer wird niemals wissentlich etwas unvollendet oder kaputt auf einer öffentlichen Website lassen. Größere Designagenturen verfügen möglicherweise über ein engagiertes QS-Team (Quality Assurance), um Fehler zu erkennen. Als Anfänger liegt es jedoch an Ihnen. Fesseln Sie einen Freund, um beim Korrekturlesen und Überprüfen Ihrer Entwürfe zu helfen. Es ist erstaunlich, was ein zweites Augenpaar erkennen kann!
Achten Sie auf Links zu nicht vorhandenen Seiten, "fehlerhaften Bildern", Layoutfehlern, nicht angezeigten Stilen und Rechtschreibfehlern. Liebe zum Detail ist der Schlüssel. Wenn Sie versucht haben, etwas zu implementieren, es aber nicht zum Laufen bringen konnten, nehmen Sie es heraus! Wenn Sie offensichtliche Fehler auf Ihrer Seite haben, werden die Leute nur die Fehler sehen und Ihre Nachricht verpassen.
Und machen Sie natürlich keine einfachen Fehler, wie das Belassen des Seitentitels als "Dokument ohne Titel" oder das Platzieren von Platzhaltertext auf der Seite! Aber keiner von uns würde das tun, oder?! Lorem ipsum dolor ...
Wörter: Iain Lobb Illustration: Elly Walton
