10 Web Design-Elemente, die Sie nicht übersehen sollten
Wenn es um das Entwerfen und Erstellen von Websites geht, scheint es nie schnell genug zu gehen.
Angesichts dieses schnellen Tempos bleiben viele kleine Details, die schließlich zum Aufbau der Website erforderlich sind, oft aus dem Designprozess heraus. Während diese Details möglicherweise geringfügig sind, sind sie, was eine Website von nett zu wirklich großartig nehmen.
Diese Details sind oft leicht zu übersehen, da sie nicht das allgemeine Erscheinungsbild der Website beeinflussen. Das Problem ist, dass Ihr Entwicklungsteam, wenn es das Design durcharbeitet, gezwungen sein wird, diese Elemente für Sie zu entwerfen und zu erstellen.
Sie könnten den Produktionszyklus so anpassen, dass die Entwickler Zeit haben, diese Assets an Sie zurückzugeben, aber warum sollten Sie nicht einfach alles im Voraus erledigen, damit der Prozess so viel sauberer ist?
Schlimmer noch, das Entwicklungsteam könnte sich dazu entschließen, vorauszuschreiten und die Assets einfach so zu erstellen, wie sie es tun.
Während viele Entwickler ein scharfes Auge für Design haben, sollte der Kreative, der mit der Gestaltung der Website beauftragt ist, letztendlich derjenige sein, der diese Elemente plant. Vorausplanung für die feinsten Nuancen kann einen tiefgreifenden Einfluss auf die Qualität des Endprodukts haben.
Jedes Element in diesem Artikel stammt aus einer Frage, die ein Entwickler den Designer fragen würde, wenn ein Element im Design fehlen würde.
Lassen Sie uns in die 10 wichtigsten Elemente eintauchen, die Sie beim Polieren Ihrer Website berücksichtigen sollten.
1. Links
Während das Stylen der verschiedenen Zustände einer Verbindung in der Tat ziemlich einfach ist, könnten Sie überrascht sein, wie oft alle zusätzlichen Details übersehen werden. Fügen Sie für alle Links auf der Seite die folgenden Status ein:
- Normal
Dies ist der Standardstatus eines Links. dh eine Person, die nicht über die Maus bewegt wird oder auf eine URL geklickt wird, die der Benutzer bereits besucht hat. Dies ist das Link-Format, das die Mehrheit der Designer immer abdecken. - hat besucht
Dies ist ein Link, der nicht über den Mauszeiger bewegt oder angeklickt wird, sondern dessen Ziel vom Benutzer besucht wurde. - Aktiv
Ein aktiver Link ist ein Link, auf den der Benutzer gerade klickt. Die meisten Entwickler replizieren hier den Hover-Status, wenn ihnen kein Style zur Verfügung gestellt wird. - Schweben
Schließlich zeigt der Hover-Zustand, wie der Link aussieht, wenn der Benutzer darüber mausiert. Dies und die normalen Zustände sind die, auf die sich die meisten Designer vorbereiten.
Ein Detail, das häufig übersehen wird, ist, dass diese verschiedenen Staaten für alle Regionen einer Website geplant werden müssen. Zum Beispiel haben viele Webseiten dunkle Körperkopien vor einem hellen Hintergrund, aber der Kontrast ist in der Fußzeile umgekehrt. Sie müssen für alle verschiedenen Kontexte der Links planen, die auf der Seite gefunden werden.
Auf Vollmond BBQ Zum Beispiel sehen wir grundlegende rote Links in der Inhaltsregion und grundlegende weiße Links in der Fußzeile darunter. Wieder ein kleines Detail, aber trotzdem wichtig.
2. Formulare
Für viele Designer ist die Konfiguration von Formularen kritisch und nicht zu übersehen. Für viele andere scheint es jedoch ein entfernter nachträglicher Einfall zu sein.
Das Problem mit letzterer Einstellung ist, dass Formulare oft die einzige Möglichkeit darstellen, Besucher in Kunden zu verwandeln. Und ohne geeignete Planung und Design könnte die Verwendbarkeit dieser Formulare flach fallen und den einzigen Umwandlungspunkt der Website lähmen. Die Vorbereitung auf diese Elemente ist wichtig, auch wenn sie für die Kunden weniger wichtig erscheinen als Farbe, Branding und Bilder.
Zwei der wichtigsten Überlegungen beim Auslegen eines Formulars sind:
- Formularbezeichnung
Formulare sammeln in der Regel personenbezogene Daten, die Nutzer nur ungern weitergeben. Daher ist es sinnvoll, den Benutzer genau über den genauen Zweck des Formulars zu informieren. - Eingabefelder und Etiketten
Zweitens, planen Sie, wie die Eingabefelder des Formulars auf der Seite angeordnet werden und wie die Beschriftungen für diese Felder formatiert und relativ zu den Feldern ausgerichtet werden.
Wenn sie auf ihren Standardwerten belassen werden, können Formulare peinlich aussehen. Aber mit der richtigen Vorbereitung wird die Website nahtlos aussehen und viel effektiver sein. Schauen wir uns ein gutes Beispiel an, das mit guter Planung begonnen haben muss:
Diese geschäftskritische Form weiter Genial war klar durchdacht. Die gesamte Mission und der Zweck der Seite wurden sorgfältig geprüft. Vom Titel und der Einführung bis zum Layout jeder Gruppe von Feldern mit ihren Beschriftungen und Steuerungsstilen ist diese Form ein Modell der Planung.
Die Planung von Formularen führt uns zu einigen anderen Überlegungen ...
3. Tastenverhalten
Schaltflächen können für verschiedene Zwecke auf einer Website verwendet werden, aber auch sie scheinen oft vernachlässigt zu werden, ebenso wie die verschiedenen Zustände eines Buttons. Die vier Zustände eines Buttons sind:
- Standard
Dies ist der Standardzustand einer Schaltfläche, die darauf wartet, angeklickt zu werden. Die meisten Designer decken diesen Bereich ab, verpassen aber die anderen. - Schweben
Der Hover-Status wird angezeigt, wenn der Benutzer über die Schaltfläche mausiert. Dieser Status ist hilfreich, um dem Benutzer anzuzeigen, dass die Schaltfläche ein umsetzbares Element ist. - Klicken
Sobald der Benutzer auf die Schaltfläche klickt, zeigt dieser Status ihnen visuell an, dass sie darauf geklickt haben. Die Bereitstellung dieses visuellen Hinweises kann dazu beitragen, die Frustration der Benutzer zu minimieren. - Behindert
Der deaktivierte Status eines Buttons ist vielleicht der am wenigsten verwendete, kann aber für Entwickler sehr hilfreich sein. Dieser Zustand ist selten geplant, es sei denn, der Designer hat einen Validierungsprozess für das Formular vorbereitet (siehe nächster Abschnitt).
Achten Sie ebenso wie die verschiedenen Zustände von Links auf die verschiedenen Zustände der Schaltflächen, die auf Ihrer Website verwendet werden. Von Popup-Anmeldeformularen über Suchfelder bis hin zu Newsletter-Anmeldeformularen benötigen alle diese Schaltflächen entsprechende Stile.
4. Formularvalidierung
Ein wichtiges relevantes Detail ist die Formularvalidierung. Dies ist der kritische Punkt, an dem die Website die Benutzeranforderungen und Fehler in einem Formular kommuniziert. Es gibt drei Kernpunkte zu beachten:
- Benötigte Felder
Alle erforderlichen Felder sollten angegeben werden. Meistens wird dies mit einem Sternchen gemacht Bitte beginnen Sie von Anfang an :
- Echtzeit-Validierung
Einige Validierung kann in Echtzeit durchgeführt werden, während der Benutzer das Formular ausfüllt. Diese Art der Validierung informiert den Benutzer so schnell wie möglich über Probleme mit den von ihm eingegebenen Daten. Dies kann hiermit sehr gut erreicht werden jQuery-Validierungs-Plug-in :
- Post-Back-Validierung
Diese Art der Validierung findet statt, nachdem der Benutzer das Formular abgeschickt hat. Der für die Echtzeitvalidierung verwendete Stil wird hier oft wiederholt, aber eine andere Option besteht darin, alle Fehler in einer einzigen Nachricht zu gruppieren, wie sie angezeigt wird Muhen :
5. Statusmeldungen: Fehler, Warnungen, Bestätigungen usw.
Benutzer benötigen normalerweise eine Art von Feedback, nachdem sie eine Aktion auf Ihrer Website durchgeführt haben. Das wahrscheinlichste Szenario ist nach dem Absenden eines Formulars, aber es können auch viele andere Ereignisse auftreten. Berücksichtigen Sie sorgfältig Ihre Website und die Aktionen, die Benutzer möglicherweise ausführen, und planen Sie die Nachrichten, die die Website kommunizieren muss.
Auf Leben heute sehen wir eine Überprüfungsmeldung, die leicht als globaler Stil für Fehlermeldungen dienen könnte. Und mit einer leichten Änderung der Farben und Symbole könnte es auch für subtilere Warnungen oder sogar Bestätigungsmeldungen verwendet werden:
6. Erweitern Sie den Hintergrund auf größeren Bildschirmen
Abhängig vom Stil der Website könnten die Hintergrundelemente ein Problempunkt für Ihre Entwickler sein. Die meisten Hintergründe sind einfach und erfordern nicht viel Vorbereitung, aber einige sind durch Farbverläufe, Muster und Bilder kompliziert.
Wenn man bedenkt, dass große Monitore immer alltäglicher werden und die meisten Designs für eine Basislinie mit 960 Pixeln geplant sind, bleibt viel Platz auf dem Bildschirm. Wenn Ihr Hintergrund etwas Kompliziertes enthält, müssen Sie planen, wie es sich ausdehnen wird, um größere Bildschirme zu füllen.
In dem Beispiel, das ich unten gebaut habe, musste ich eine Holzstruktur berücksichtigen, die sich in alle Richtungen erstreckte. Nicht die Art von Sache, die Sie mit einem schwerfälligen Entwickler in Angriff nehmen wollen.
7. Basieren Sie HTML-Elemente
Für kopierlastige Websites ist das Design und das Design von HTML-Basiselementen von grundlegender Bedeutung und sollten nicht übersehen werden. Aber auf vielen marketing-orientierten Websites, die ein beschäftigtes Layout und einen ausgeprägten visuellen Stil haben, sind die Basiselemente vergessen. Und natürlich ist der Entwickler nie weit genug damit beschäftigt, eine Website zu erstellen, bevor er eine Standard-Seitenvorlage erstellen muss.
Hier sind die Basiselemente, die immer geplant sind: Absätze, Überschriften 1 bis 6, ungeordnete und geordnete Listen, Tabellendaten, Formularfelder, Bilder und fett und kursiv formatierter Text.
Auf vielen Websites, an denen ich arbeite, habe ich einen Style Guide zusammengestellt, der den Entwicklern hilft, etwa so:
8. Website-E-Mails
Eine Sache, für die ich keinen Designer-Plan sehe, sind von der Website generierte E-Mails. Ein solches Grundelement ist leicht zu übersehen, weil es typischerweise nicht der Kern der Website ist. Und dennoch ist E-Mail ein leistungsfähiges Werkzeug, das einen Service fördern und erweitern kann.
Mein Vorschlag ist, die Inhalte der Website in der Planungsphase sorgfältig zu überprüfen, um nach E-Mails zu suchen, die möglicherweise gesendet werden. Einige der häufigsten sind:
- Bestätigung der Mailinglisten-Anmeldung,
- Anmeldebestätigung,
- Bestätigung des Formularabschlusses (z. B. für ein Kontaktformular),
- Bestellbestätigung nach einem Kauf
Wenn Sie Ihre Kunden und Entwickler wirklich begeistern möchten, bereiten Sie auch eine E-Mail-Marketingvorlage für die Website vor. Sie ermöglichen Benutzern einen nahtlosen Übergang von der Website zum Posteingang und Sie behalten eine sorgfältige Kontrolle über das Branding in seinen verschiedenen Formen.
9. Seite dehnen
Die Frage, wie sich ein Design ausdehnt, um sich ändernden Inhalten gerecht zu werden, wird ebenfalls selten behandelt, könnte aber abhängig vom Stil der Website kritisch sein. Schauen wir uns ein Beispiel an, in dem dies hätte durcheinander gebracht werden können:
Vollmond BBQ hat eine enge Homepage. Dieser Entwurf erlaubt nicht viel Bewegung oder Änderung im Inhalt. Alles hat eine bestimmte Größe und Platzierung. Was passiert also, wenn die Eigentümer sich entscheiden, die Begrüßungsnachricht wirklich zu verlängern oder ein Bild hinzuzufügen? Zum Glück haben sie das geplant. Wie Sie in diesem Mock-up sehen können, habe ich die Seite so bearbeitet, dass sie den doppelten Text enthält. Die Seite erstreckt sich perfekt und passt dafür:
Das Vorbereiten alternativer Versionen eines Layouts mit viel mehr Inhalt kann sehr hilfreich sein, um zu demonstrieren, wie man ein solches Szenario plant.
10. Animationen: Pop-ups, Tooltips, Übergänge usw.
Auf einer Standard-HTML- und CSS-Website (dh ohne Flash) sind Animationen und Übergänge so leicht zu übersehen. Und wenn sie übersehen werden, werden sie oft überhaupt nicht untergebracht. Wenn also Animationen wichtig sind, sollten Sie den Entwicklern ein Beispiel geben, wie sie funktionieren sollten, damit das Produkt ordnungsgemäß funktioniert.
Einige der häufigsten Orte, auf denen Animationen zu sehen sind, sind:
- Tooltipps
Diese kleinen Pop-ups, wenn Benutzer Elemente überfahren. - Bildrotatoren
Homepage-Diashows sind der letzte Schrei, und für Übergänge und Stile steht eine große Auswahl an Optionen zur Verfügung. - Leuchtkasten
Sie können nicht nur den Lichtkasten selbst, sondern auch den Übergang dazu gestalten.
Jedes dieser animierten Elemente hat einen eigenen visuellen Stil, der alleine untergebracht werden muss.
Warum sollte es mich kümmern?
Viele der hier präsentierten Elemente scheinen den Entwicklern nützlicher zu sein als die Designer. Fairerweise trifft das teilweise zu: Wenn Sie all diese Elemente im Voraus vorbereiten, werden die Entwickler Sie lieben. Dies sind die Dinge, die die Entwickler nicht mehr benötigen oder die sie selbst herausfinden müssen.
Wenn Sie all diese Arbeiten im Voraus durchführen, halten Sie die Entwickler davon ab, zu raten, und behalten so die Kontrolle über das Design. Und wenn Sie die Kontrolle über das Design behalten, haben Sie eine viel größere Chance, die Art von Politur hinzufügen zu können, die eine gewöhnliche Website zu einer herausragenden Website macht. Einige Designer bezeichnen dies als die geheime Soße, die ihre Designs zum Singen bringt.
Und wenn das nicht Motivation genug ist, bedenken Sie dies. Designer, die das gut planen und ein so vollständiges Paket liefern, sind einfach wesentlich wertvoller. Sie erzeugen nicht nur ein qualitativ hochwertiges Produkt, sondern senken auch die Produktionskosten. Das heißt, es gibt mehr Raum für Profit, was natürlich alle glücklich macht.
Also, behalten Sie alle diese feineren Details im Gedächtnis und viel Spaß beim Planen Ihrer Website. Ehrlich gesagt, machen diese Details den Spaß daran, für das Web zu entwerfen, das sich ständig verändernde Medium, das Benutzerinteraktion und wechselnden Inhalt aufnimmt.
Patrick McNeil ist freiberuflicher Schriftsteller, Entwickler und Designer. Insbesondere liebt er es, über Webdesign zu schreiben, Menschen in der Webentwicklung zu schulen und Websites zu erstellen. Patricks neuestes Buchprojekt ist Das Web-Handbuch des Designers ; Es enthält viele zusätzliche Themen in diesem Artikel. Sie können mehr darüber erfahren TheWebDesignersIdeaBook.com . Folge Patrick auf Twitter @designmeltown .
Was designst du dafür, dass alle anderen zu vergessen scheinen? Haben Sie Ihren Kunden schon einmal Extras wie diese präsentiert? Was denkst du, was Entwickler immer von einem Design verlangen?