Während jeder Designer einen anderen Plan haben mag, wenn es um den Aufbau einer Website geht, gibt es doch eine gemeinsame Checkliste. Egal, wie sehr man versucht, sie zu vermeiden, es gibt einige Elemente, die jede Website enthalten sollte (und normalerweise auch enthält).
Von viel Weißraum und großartigen Bildern bis hin zur Suchfunktion und klaren Handlungsaufforderungen – diese gemeinsamen Elemente sind die Dinge, die Benutzer erwarten, wenn es darum geht, eine Website problemlos zu nutzen.
Heute werfen wir einen Blick auf zehn Elemente, die Sie auf Ihrer Website priorisieren sollten, perfekt gestaltete Beispiele für jedes Element und Tipps, wie Sie jedes in Ihrem nächsten Webdesign-Projekt verwenden können. Wie das Sprichwort sagt: „Der Teufel steckt im Detail.“
1. Raum
Raum ist eines der wichtigsten Designtools, da er alles bestimmt – vom Fluss bis zur Lesbarkeit. Designer beginnen, Raum auf eine Weise zu nutzen, die wir vor einem Jahrzehnt im Web nicht gesehen haben. Mehr Website-Designs umfassen weite Räume, erhöhte Abstände zwischen Textzeilen und eine insgesamt offene Raumnutzung.
Wichtige räumliche Beziehungen umfassen die Konsistenz in der Abstandsgestaltung. Ähnliche Elemente sollten ähnliche Abstände aufweisen. Der Abstand zwischen den Zeilen in einem Absatz sollte derselbe sein, ebenso wie der Abstand um Bilder herum.
Raum ist auch wichtig, wenn es darum geht, einen Fokuspunkt für Benutzer zu schaffen. Ein Bild oder ein Textstück, das von weißem Raum umgeben ist, erscheint größer und wichtiger als eines, das in einen kleineren oder engeren Bereich des Designs gequetscht ist.
Es ist auch wichtig zu beachten, dass Raum nicht immer weiß ist. Er bezieht sich auf das Fehlen von Elementen und könnte genauso gut eine Hintergrundfarbe oder eine Textur sein.
Wie man es verwendet: Beginnen Sie mit Schlüsselelementen wie Navigationsmenüs. Stellen Sie sicher, dass die Elemente so organisiert sind, dass sie festgelegte Abstände zwischen den Elementen aufweisen. Dies wird jede Schaltfläche oder jedes Wort klarer hervorheben.
2. Einfache Navigation
Die Navigation muss nicht kompliziert sein. Sie sollte leicht zu identifizieren und einfach zu bedienen sein. Es ist auch wichtig, Navigationsmenüs auf ein Minimum zu beschränken, um Benutzer nicht zu überfordern. Abhängig von der Art der Website sollten Sie fünf bis zehn Menüpunkte anstreben.
Die Navigation umfasst auch Tools, die Benutzern helfen, sich durch eine Website zu bewegen. Websites mit Parallax-Scrolling enthalten beispielsweise oft Richtungspfeile, um die Website benutzerfreundlicher zu gestalten. Je einfacher es für die Menschen ist, Ihre Website zu nutzen und zu navigieren, desto länger werden sie wahrscheinlich mit ihr interagieren.
Die obigen Beispiele zeigen zwei sehr unterschiedliche Arten der Navigation: Zola’s, die ein einfaches Menü und eine Fortschrittsnavigation mit klickbarem Text als Schaltflächen enthält, und Anet Design, das einen kreativeren Schaltflächenstil zeigt. Was beide Websites gemeinsam haben, ist, dass die Hauptnavigation niemals bewegt oder verändert wird, was Konsistenz und Fluss auf jeder Website schafft.
Wie man es verwendet: Verwenden Sie die einfache Navigation als Rahmen für den Aufbau Ihrer Website. Denken Sie daran, dass Benutzer ein paar wichtige Dinge von der Navigation erwarten: Wissen, wo sie sich auf der Website befinden, eine Möglichkeit, zurückzugehen (oder nach Hause), und Anweisungen (wenn Ihre Website eine ungewöhnliche oder kompliziertere Oberfläche hat).
3. Über uns
Es ist besonders wichtig für ein kleines Unternehmen oder einen Website-Betreiber, den Benutzern mitzuteilen, wer sie sind. (Dies ist weniger wichtig für große Unternehmen, die Haushaltsnamen sind, obwohl es immer noch eine gängige Praxis ist.)
Die „Über uns“-Seite sollte den Benutzern mitteilen, wer Sie sind und was Sie tun. Sie kann Unternehmensphilosophien oder -ziele oder die Entstehung der Website skizzieren. Diese Seite kann auch der Ort für Kunden- oder Benutzerbewertungen und Erfolgsgeschichten sein. Diese Art von Seite kann auch als Gateway zu verwandten Seiten oder sogar zu Social-Media-Profilen dienen.
Das eine Problem, das oft bei Über-uns-Seiten auftritt, ist, dass sie lang und wortreich werden. Halten Sie die Seite einfach; geben Sie den Benutzern gerade genug Informationen, um interessiert zu sein, aber nicht gelangweilt. Und denken Sie daran, das Design interessant zu halten.
Wie man es verwendet: Verwenden Sie die Über-uns-Seite, um Ihrer Marke ein wenig Persönlichkeit zu verleihen. Erwägen Sie, Fotos Ihres Teams und eine kurze Unternehmensbiografie aufzunehmen.
4. Kontaktinformationen
Kontaktinformationen erscheinen üblicherweise auf eine von zwei Arten – im Header / Hauptnavigation oder als Kontaktseite mit einem Formular oder erweiterten Informationen. Beide Optionen können gut funktionieren, abhängig von Ihrem Website-Design.
Der Schlüssel ist, sie gut sichtbar zu machen. Kontaktinformationen wie eine Telefonnummer, eine physische Adresse oder ein Formular, um den Website-Betreiber zu kontaktieren, verleihen Ihrer Website und Ihrem Unternehmen Legitimität. Es kann frustrierend für Benutzer sein, Sie finden zu wollen und die Informationen nicht klar auf der Website aufgeführt zu finden.
Wie man es verwendet: Fügen Sie Kontaktinformationen zu allen statischen Headern und/oder Footern hinzu. Wenn Sie eine physische Geschäftsadresse haben, fügen Sie Standortinformationen hinzu. Erwägen Sie ein Kontaktformular, damit Benutzer direkt von der Website aus eine E-Mail senden können.
5. Handlungsaufforderung (oder Anmeldung)
In den meisten Fällen ist eine Website das Tor zu einer Aktion – einen Verkauf tätigen, Informationen bereitstellen und Kontaktinformationen sammeln. Um diese Aktion sicherzustellen, müssen Handlungsaufforderungen offensichtlich und stark sein.
Bestimmen Sie zunächst, was Ihre Website tun soll. Entwerfen Sie sie dann so, dass die Aktion offensichtlich ist und Benutzer dazu führt. Techniken wie Farbe, Kontrast und Raum können dazu beitragen, Benutzer zu den „richtigen“ Schaltflächen zu führen. Connect Mania möchte beispielsweise, dass Benutzer eine App herunterladen. Der einzige klickbare Bereich über das Scrollen auf der Landing Page bringt Sie zum App Store.
Eine weitere beliebte Handlungsaufforderung ist ein Anmeldeformular. Wenn dies Ihr Ziel ist, platzieren Sie das Formular an einem prominenten Ort und gestalten Sie es auffällig. Machen Sie das Formular einfach und schnell auszufüllen. (Wenn Sie mehr als zwei oder drei Informationen benötigen, erwägen Sie eine Folge-E-Mail anstelle eines komplizierten Anmeldeformulars.)
Wie man es verwendet: Machen Sie Handlungsaufforderungen offensichtlich. Die Platzierung sollte in einem gut sichtbaren Teil der Seite und neben dem Element sein, auf das es sich bezieht. Schaltflächen sollten in einer kontrastreichen Farbe sein und genau sagen, was Sie tun sollen: Jetzt kaufen, Beitreten, Herunterladen, Kostenlos anmelden.
6. Suche
Wie oft wollten Sie ältere Informationen oder etwas finden, an das Sie sich auf einer Lieblingswebsite erinnern? Hier kommt die Suche ins Spiel. Das Tool ist entscheidend für wiederkehrende Benutzer. Gestalten Sie das Feld so, dass es unauffällig, aber einfach zu bedienen ist. Stellen Sie sicher, dass das Feld groß genug ist, um Begriffe von Ihrer Website einzugeben. Wenn Sie ein Symbol für die Suche verwenden, müssen Sie nichts Neues erfinden; verwenden Sie das Standard-Lupe-Symbol.
Wie man es verwendet: Entwerfen Sie ein einfaches Feld, das sich oben auf Ihrer Website befindet. Die obere rechte Ecke ist der beliebteste Ort, da dieser Bereich erwartet wird und für Benutzer leicht zu finden ist.
7. Footer
Ein Footer ist eine Möglichkeit, mit Ihrem Publikum mit einer Fülle von Informationen in Kontakt zu treten, ohne das Design zu stören. Da sich der Footer am unteren Rand der Seite befindet, ist er ein logischer Ort für eine kleine Sitemap, Unternehmens- oder Kontaktinformationen, Links und Kontext für Ihre Website.
Machen Sie den Footer nützlich und halten Sie ihn einfach. Ob Sie sich für ein paar Schaltflächen oder einen Link-Stil entscheiden, der Footer sollte so gestaltet sein, dass er zu Ihrer Website passt, aber möglicherweise ein viel minimalistischeres Gefühl hat. Machen Sie ihn einfach zu bedienen.
Wie man es verwendet: Einige der besten Footer kombinieren viele der oben genannten Elemente. Der Footer ist oft eine Wiederholung von Elementen, die anderswo zu finden sind (z. B. die Suche oben auf der Seite in der Hauptnavigation und erneut im Footer). Er kann auch einige der oben genannten Elemente einführen und beherbergen, wenn es keinen anderen logischen Ort im Design gibt.
8. Stil für Schaltflächen
Jede Schaltfläche auf einer Website sollte als Schaltfläche erkennbar sein. Sie sollten unabhängig von Zweck oder Standort die gleiche Form, Designeffekte und das gleiche Gefühl haben. Die Erstellung eines eindeutigen Satzes von Schaltflächen kann für Websites mit vielen klickbaren Elementen eine gewisse Herausforderung darstellen. Erwägen Sie die Verwendung eines Design-Kits, um einen konsistenten Satz von Elementen zu erstellen.
Wie man es verwendet: Entwickeln Sie einen Satz von Schaltflächen, die für Ihre Website einzigartig sind. Erstellen Sie ein konsistentes Farbthema – jede Schaltfläche hat eine einzige Farbe – oder einen Gesamtstil, wie Form oder Textur.
9. Großartige Bilder
Menschen lieben es, Dinge in Aktion zu sehen. Erstellen Sie beeindruckende visuelle Elemente, um Benutzer auf Ihre Website zu ziehen. Großartige Bilder oder Illustrationen sind eine einfache Möglichkeit, dies zu tun. Mit einem relativ kleinen Satz großartiger Fotos können Sie Produkte, Menschen oder was auch immer zeigen, um Benutzer zu Ihrer Website zu locken.
Beide oben gezeigten Websites machen einen großartigen Job mit Bildern, die ihr Produkt und ihren Stil zeigen. Diese Art von benutzerdefinierten Bildern ist wichtig. Seien Sie vorsichtig mit der Verwendung von zu vielen Stockbildern, da Ihre Website sonst wie etwas anderes aussehen könnte.
Wie man es verwendet: Beauftragen Sie einen Fotografen oder Illustrator, um einen großartigen Satz von Bildern für Ihre Website zu entwickeln und zu erstellen. Verlassen Sie sich auf benutzerdefinierte Bilder anstelle von Stockbildern für ein einzigartiges visuelles Erlebnis.
10. Webfonts
Das Web war einmal mit einer Handvoll Schriftarten gefüllt – Arial und Courier fallen einem ein – weil sie von den meisten Computern und Browsern lesbar waren. Das ist keine Einschränkung mehr für Designer. Aber Webfonts sind immer noch aus zwei wichtigen Gründen wichtig – Kompatibilität und Lizenzierung. Durch die Verwendung eines Webfont-Dienstes ist Typografie auf dem Web Typografie, was für die Suchmaschinenoptimierung wichtig ist, und Designer müssen ihre Typografie nicht in Bilder umwandeln, um ein bestimmtes Aussehen beizubehalten.
Wie man es verwendet: Beginnen Sie mit einem Dienst wie Google Web Fonts, der kostenlos ist, um einen Satz schöner und interessanter Schriftarten in Ihr Website-Design zu implementieren, ohne ein Vermögen für Lizenzierung ausgeben zu müssen oder sich um Kompatibilitätsprobleme sorgen zu müssen.
Fazit
Während es viele wichtige Komponenten für ein effektives Website-Design gibt, können diese zehn Schlüsselelemente einen Unterschied machen. Achten Sie darauf, mit Raum, einfacher Navigation, Über uns, Kontaktinformationen, Handlungsaufforderungen, Suche, Footer-Informationen, Schaltflächen, Bildern und Webfonts zu designen. Diese oft übersehenen Details können Ihr gesamtes Website-Design machen oder brechen.
Bildquellen: Tagxedo.com, The Tea Factory, Fixate Web & Design, Zola’s, Anet Design, bagaball, Andrew Reifman, Eight Hour Day, Spokes Pedicabs, Denise Chandler, iGivings, Karlyn/a>, Connect Mania, Tastebook, Tennessee Vacation, The Noun Project, Rdio, Housing Works, Campaign Monitor, Dropbox, Karma Wi-Fi, Pure Fix Cycles, Rook und The Status Bureau.
