9 Grundlagen im Webdesign, die man sich zu Herzen nehmen sollte – 99designs

Read Time:13 Minute, 24 Second

2022-09-05 04:53:00

Webdesign ist für Neulinge keine einfache Sache. Es basiert auf jahrhundertealten Grafikdesign-Theorien und jahrtausendealten ästhetischen Grundsätzen und braucht mehr als ein ganzes Leben, um es zu beherrschen. Doch bevor du den Mut verlierst: Die gute Nachricht ist, dass du Webdesign nicht perfekt beherrschen musst, um ein oder zwei schicke Seiten zu kreieren – du musst nur die richtigen Grundsätze des Webdesigns befolgen.

Betrachte die unten aufgeführten Grundlagen im Webdesign als unsere „Zehn Gebote“ des Webdesigns – nur, dass es nur neun sind, denn heutzutage ist alles etwas optimierter als noch vor 3.000 Jahren. Wenn du noch am Anfang deiner Designkarriere stehst oder einfach eine Web site selbst erstellen möchtest, nimm dir diese Grundlagen im Webdesign zu Herzen.

Illustration von OrangeCrush

1. Die visuelle Hierarchie bestimmt, was die Menschen zuerst (und zuletzt) wahrnehmen

Die visuelle Hierarchie ist einer der Eckpfeiler des Grafikdesigns. Im Grunde bestimmt sie, was am meisten und was am wenigsten Aufmerksamkeit erregt, wenn sich mehrere Bilder und Grafiken an einer Stelle befinden (z. B. auf einer Web site). Durch Anpassung der visuellen Hierarchie können Designer und Designerinnen theoretisch Einfluss darauf nehmen, in welcher Reihenfolge die einzelnen Elemente wahrgenommen werden. Das nennt man „visuellen Fluss“.

Beispiel für Webdesign-Grundsätze: visuelle Hierarchie
Mithilfe von Wellenlinien, sich überschneidenden Grafiken und unterschiedlichen Größen erzeugt diese Seite einen visuellen Fluss von einem Aspect zum nächsten. Webdesign von DSKY.

Im Webdesign ist visuelle Hierarchie von größter Bedeutung. Webdesigner und -designerinnen müssen den wichtigsten Elementen die höchste Priorität einräumen – additionally Navigationstools, Seitenüberschriften, Calls-to-Motion, Person Controls – und gleichzeitig dafür sorgen, dass weniger wichtige Elemente nicht ablenken.

Auch wenn es viele Techniken gibt, die Aufmerksamkeit erregen oder das Gegenteil bewirken (von denen einige unten behandelt werden), nutzen Designer und Designerinnen in der Praxis diese drei Strategien, um die visuelle Hierarchie festzulegen:

  • Größe – Wie du dir vorstellen kannst, erregen große Elemente mehr Aufmerksamkeit, wohingegen kleine Elemente weniger Aufmerksamkeit erregen.
  • Farbe – Helle, leuchtende Farben werden schneller wahrgenommen als gedecktere und gedämpftere Farben. (Du kannst auch Farbkontrast nutzen, um den Effekt zu steigern. Mehr dazu erklären wir weiter unten.)
  • Platzierung – Da die meisten Leute instinktiv von oben nach unten lesen, werden Elemente, die oben platziert sind, als Erstes wahrgenommen.

Airplane deine visuelle Hierarchie bereits im Vorhinein, wenn du ein Format für eine Web site erstellst, indem du eine Liste mit all deinen Elementen in der Reihenfolge erstellst, in der die Leute sie wahrnehmen sollen. Wende dann die entsprechende Technik auf das jeweilige Aspect an.

2. Person sollten nicht nachdenken müssen

Im Jahr 2000 veröffentlichte der Auto und Computerwissenschaftler Steve Krug sein bahnbrechendes Buch Don’t Make Me Suppose, welches als Beginn der Person Expertise-Bewegung gilt. Die zentrale Lektion des Buchs – gestalte deine Designs so simpel und leichtverständlich wie möglich – ist auch 20 Jahre später noch immer ein Grundstein der Grundsätze des Webdesigns.

Die Idee ist, dass jedes Mal, wenn Person darüber nachdenken müssen, wie sie etwas machen sollen oder wo der Button ist, den sie suchen, sie von ihrer eigentlichen Aufgabe abgehalten werden. Wenn deine Person beispielsweise deine App nutzen wollen, um eine E-Mail zu schreiben, sollten sie sich einzig und allein auf das Schreiben der E-Mail konzentrieren und nicht erst den Button zum Senden finden müssen oder sich fragen, wie man die Schriftart ändert.

Krugs Idee hebt auch den menschlichen Trieb hervor, sich für die erste Lösung zu entscheiden und nicht unbedingt für die beste. Es liegt dann an der Particular person, die das Design geschaffen hat, dafür zu sorgen, dass die beste Lösung leicht bemerkt wird, damit Person keinen unerwarteten und ineffizienteren Weg gehen.

Beispiel für die Grundsätze der Webgestaltung: Zwing mich nicht zum Nachdenken
Was machst du, wenn du eine Pizza bestellen möchtest? Die Sache ist ziemlich klar… Webdesign von arosto

Designer und Designerinnen sollten immer nach Wegen suchen, ihre Designs zu optimieren und zu vereinfachen. Die visuelle Hierarchie spielt eine große Rolle, Usern dabei zu helfen, schnell das zu finden, wonach sie suchen, aber auch andere Strategien können nützlich sein.

Nehmen wir beispielsweise Jakob’s Regulation – benannt nach einem weiteren UX-Pionier namens Jakob Nielsen. Er empfiehlt, Symbole und Muster zu nutzen, die die Person bereits von anderen Seiten kennen. Die meisten Seiten nutzen heutzutage beispielsweise eine Lupe am oberen Rand der Seite, um auf eine Suchleiste hinzuweisen. Wenn du dasselbe Image auf deiner Seite verwendest, müssen die Person nicht darüber nachdenken, wie man die Suchfunktion auf deiner Seite verwendet. Und wenn du sie am oberen Rand der Seite platzierst, müssen sie nicht überlegen, wo sie sie finden.

3. Kontrast und Bewegung erregen Aufmerksamkeit

Apropos Techniken zum Erregen von Aufmerksamkeit: Denke daran, dass Gegensätze sich anziehen. Kontrast ist ein beliebtes Mittel für Designer und Designerinnen, um sich die starken Unterschiede sowohl zwischen Farben als auch Größen zunutze zu machen.

Gegensätzliche Farben nebeneinander zu platzieren ist ein großartiger Weg, um Aufmerksamkeit zu erregen. Es ist eine der besten Strategien, um CTA-Buttons hervorzuheben; dabei wird für den CTA-Button die entgegengesetzte Farbe zum Hintergrund verwendet.

Beispiel für die Grundsätze der Webgestaltung: Kontrast
Diese Seite nutzt einen starken Kontrast zwischen hell und dunkel, wodurch die hellen, orangen Akzente noch auffälliger werden. Webdesign von  Mediaspace

Ebenso funktionieren unterschiedlich große Elemente sehr intestine, wenn sie nebeneinander platziert werden. Wenn du viele Elemente auf der Seite hast und keinen Platz, alles größer zu machen, versuche, etwas Kleines neben einem Aspect zu platzieren – dadurch sieht es größer aus und ist leichter wahrzunehmen.

Auch Bewegung erregt Aufmerksamkeit. Hier machen sich Designer und Designerinnen unseren Instinkt aus der Zeit zunutze, in der wir noch Jäger und Sammler waren. Du verwendest kleine Animationen für spezielle Elemente, damit diese schneller wahrgenommen werden – zum Beispiel ein hüpfendes Image, wenn es eine neue Benachrichtigung gibt.

Achte nur darauf, nicht zu viele Animationen zu verwenden. Wenn sich auf deinem Bildschirm zu viele Dinge bewegen, kann man sich schlecht konzentrieren. Setze Animationen stattdessen sparsam ein, damit sie nicht an Wirkung verlieren.

4. Mit Weißraum kannst du den visuellen Fluss kontrollieren

Weißraum, auch „Negativraum“ genannt, ist ein weiteres beliebtes Mittel erfahrener Designer:innen, Fotograf:innen und Kunstschaffender. Der Begriff Weißraum bezieht sich schlicht auf leeren Raum oder die Teile deines Bildschirms ohne visuelle Elemente, abgesehen vom Hintergrund vielleicht.

Der Weißraum einer Web site ist genauso wichtig wie alle anderen Inhalte – sogar noch wichtiger, wenn du ihn proaktiv nutzt. Zunächst einmal ist Weißraum notwendig, um das Gleichgewicht einer Seite zu steuern; zu viele Elemente können verwirren und ablenken, daher ist ausreichend Weißraum für ein umfassendes Format nötig.

Darüber hinaus kann Weißraum durch dieses easy Webdesign-Prinzip die visuelle Hierarchie beeinflussen: Je mehr Weißraum sich um ein Objekt befindet, umso mehr Aufmerksamkeit erhält dieses Objekt. Das bedeutet, dass wenn du ein Aspect mit viel Weißraum umgibst, wird es mehr Aufmerksamkeit erhalten, als wenn du dasselbe Aspect mit anderen Grafiken umgibst.

Beispiel für Webdesign-Prinzipien: Weißraum
Während die Illustration selbst Weißraum intestine nutzt, hat der Designer die beste Stelle für den Textual content gewählt. Webdesign von DSKY

Und schließlich ist Weißraum wichtig, um bestimmte Elemente voneinander zu trennen oder zu gruppieren. Zusätzlicher Weißraum zwischen zwei Objekten hilft dabei, sie voneinander zu unterscheiden, wohingegen weniger Weißraum zwischen ihnen sie miteinander verbindet.

Weißraum zur Gruppierung zu nutzen ist hilfreich, um bestimmte Elemente nach Gemeinsamkeiten zu trennen. Sagen wir beispielsweise, du musst zwei verschiedene Navigationsmenüs auf einer Seite voneinander trennen, zum Beispiel ein Menü für deine Weblog-Kategorien und eines für deine gesamte Seite. Wenn du alle Elemente in einem Menü mit wenig Weißraum zusammenfasst, hilft das den Usern zu verstehen, dass sie zusammengehören. Wenn du dagegen zusätzlichen Weißraum zwischen den beiden Menüs lässt, denken die Person nicht, dass sie zusammengehören.

5. Zu viele Informationen überfordern die Person

Eine weitere maßgebliche Grundlage des Webdesigns ist, die Menge der Informationen zu beschränken, die du deinen Usern präsentierst. Das menschliche Gehirn kann nur eine gewisse Menge an Informationen verarbeiten, vor allem das Kurzzeitgedächtnis, daher ist es hilfreich, die Informationen in kleinere Dosen aufzuteilen – auch das passt zu Krugs Rat, die Person nicht zu viel nachdenken zu lassen.

Das Prinzip zeigt sich am besten in Miller’s Regulation, welches auf der Arbeit des Psychologen George Miller aus dem Jahr 1956 beruht. Miller fand heraus, dass der durchschnittliche Mensch nur 7 Informationen (Plusminus 2) gleichzeitig in seinem Kurzzeitgedächtnis speichern kann.

Leider haben viele Webseiten mehr als sieben Dinge zu sagen. Millers eigene Recherche empfiehlt die Technik des sogenannten „Chunkings“. Das bedeutet, zusammengehörige Informationen in kleinen Stücken (engl. „chunks“) zusammenzufassen, damit sie leichter verständlich sind. Beispiele für Chungking sieht man bei Telefonnummern: Die Vorwahl ist ein Stück, die ersten drei Zahlen ein weiteres Stück und die letzten vier Zahlen das letzte Stück.

Beispiel für die Grundsätze der Webgestaltung: Millersches Gesetz
Diese Homepage ist voll, ohne überladen zu sein, und teilt nur mit, was sie mitteilen muss. Webdesign von Paul Adrian I.

Speziell bei einem Webdesign hilft es, deine Seite in „Screens“ zu unterteilen. Damit sind alle Informationen gemeint, die gleichzeitig auf einem Display zu sehen sind. Wenn die Person alle Informationen auf einem Display verarbeitet haben, scrollen sie runter, um zu einem völlig neuen Display mit neuen Informationen zu gelangen.

Alternativ kannst du auch nur die nötigsten Informationen präsentieren. Dieser Ansatz battle zum Teil der Auslöser für den Pattern zum Minimalismus im Webdesign, bei dem Webseiten über jede Menge Weißraum und nur die absolut nötigsten Elemente wie beispielsweise die Bedienelemente verfügen. Dieser Stil eignet sich dank des Nebeneffekts der schnelleren Ladezeiten intestine für Webdesign.

6. Interaktive Bereiche sollten leicht zu erreichen sein

Fitts’ Gesetz ist schmerzhaft offensichtlich, wird aber gleichzeitig oftmals übersehen. Es besagt, dass die meisten interaktiven Bereiche am einfachsten zu erreichen sein sollten.

Für Dektop-Webdesigns besagt Fitts‘ Gesetz, dass die Distanz verringert werden muss, die die Maus der Person zurücklegt. Wenn du Funktionen hast, die zusammen verwendet werden, sollten sie so nah wie möglich beieinander platziert werden, beispielsweise ein Textfeld für Kommentare und der „Posten“-Button.

Diese Grundlage des Webdesigns begründete auch das Dropdown-Menü, das mit einem Rechtsklick geöffnet wird, das Fitts‘ Gesetz perfekt illustriert. Das Rechtsklick-Menü ist Effizienz in Reinkultur; die Bedienelemente erscheinen direkt dort, wo der Mauszeiger sich bereits befindet, wodurch die Maus nicht mehr weit bewegt werden muss.

Beispiel für die Grundsätze der Webgestaltung: Fitts'sches Gesetz
Unabhängig vom Gerät befinden sich die Optionen alle in Reichweite. Webdesign von MVB

Für cell Webseiten empfiehlt Fitts‘ Gesetz, die am häufigsten verwendeten Bedienelemente in dem Bereich des Bildschirms zu platzieren, die am besten mit den Fingern (vor allem dem Daumen) zu erreichen sind. Angenommen, die Person halten ein Smartphone hochkant und nutzen ihren Daumen für die Bedienung, dann liegen die Hotspots des Bildschirms in den zwei unteren Ecken. Du wirst merken, dass sich in den meisten Apps die Bedienelemente unten statt oben befinden.

Sowohl für Desktop-Designs als auch cell Designs empfiehlt Fitts‘ Gesetz, die Buttons und Bedienelemente groß genug zu machen, damit Person sie bequem anklicken können. Größere Buttons sorgen dafür, dass Person ihren Mauszeiger oder ihre Finger nicht so weit bewegen müssen – aber mache sie nicht zu groß, da sie sonst zu viel Platz auf dem Bildschirm einnehmen.

7. Die Typografie hat Einfluss darauf, was die Person über dich denken

Beim Umgang mit unabdingbaren Webdesign-Elementen wie Buttons, Symbole und Bilder, gerät häufig die Typografie in Vergessenheit. Aber gerade weil Typografie so unauffällig ist, ist sie so nützlich –  das Aussehen deines Textes hat noch immer Einfluss darauf, welche Meinung Person über dich haben, selbst wenn sie sich dessen nicht bewusst sind.

Die Schrift, die Größe und der Stil deines Textes vermitteln, welche Artwork Marke oder Particular person du bist, von witzig und locker bis hin zu seriös und professionell. Aber Typografie hat nicht nur Auswirkungen darauf, wie du wirkst; sie fügt sich auch in die visuelle Hierarchie ein, vor allem für die Texte von Buttons und CTAs.

Beispiel für die Grundsätze der Webgestaltung: Typografie
Die schlichte und doch einzigartige Typografie zeigt auf subtile Weise die kreative Seite dieses Unternehmens, ohne die Professionalität zu opfern. Webdesign von Yevhen Genome

Zuerst muss man zwischen kurzen und langen Texte unterscheiden. Kurze Texte sind Texte, die nur aus einem Wort, einer Zeile oder einem einzelnen Satz bestehen und für sich stehen. Dazu gehören Seitenüberschriften, Button-Texte, Slogans oder kurze Anleitungen. Lange Texte sind zum Lesen gedacht, beispielsweise Weblog-Artikel und Fließtexte auf Webseiten oder alles, was länger ist als ein paar Sätze.

Das grundlegende Prinzip im Webdesign für Typografie lautet, dass auffällige und ausgeschmückte Typografie nur für kurze Texte verwendet und einfachere Typografie, bei der die Lesbarkeit im Vordergrund steht, für lange Texte verwendet wird. Du kannst additionally große, farbenfrohe Schriften mit Verzierungen für deinen Seitentitel nutzen, solltest aber für längere Textblöcke bei Standardschriften und einfachen Farben bleiben, damit sie besser lesbar sind.

Unabhängig davon solltest du dich für eine Typografie entscheiden, die am besten deine Marke repräsentiert. Eine der häufigsten Entscheidungen liegt zwischen Serifenschriften und serifenlosen Schriften; Schriften mit Serifen wirken formaler und strenger, wohingegen serifenlose Schriften freundlicher und lockerer wirken.

8. Die Komposition sagt viel über dich aus

Die Planung der Komposition deiner Seite ist einer der ersten Schritte in deinem Webdesign und als Erstes wirst du dich zwischen Symmetrie und Asymmetrie entscheiden müssen. Noch vor Jahren battle es selbstverständlich, dass die meisten Webseiten symmetrisch designt wurden, aber in letzter Zeit haben asymmetrische Stile an Beliebtheit gewonnen.

Im Grunde lassen sich symmetrische Webseiten leichter überfliegen, allerdings kann es ihnen an Originalität mangeln, weshalb die Menschen sie oft langweilig finden. Asymmetrischen Webseiten stechen dagegen heraus und erregen die Aufmerksamkeit der Person. Es kann aber auch schwieriger sein, sie zu durchstöbern und alles zu sehen.

Beispiel für die Grundsätze des Webdesigns: Komposition
Strukturiert und kreativ zugleich, nutzt diese Seite nur einen Hauch von Asymmetrie, um ein ansonsten starres Format auszugleichen. Webdesign von arosto

Für Branding, und die Artwork und Weise, wie die Menschen dein Unternehmen wahrnehmen, wirken symmetrische Webseiten strukturierter und geordneter, wohingegen asymmetrische Webseiten moderner und kunstvoller wirken. Du kannst wählen, welches von beiden besser zum Stil deiner Marke passt. Wenn du viele verstreute Elemente zeigen musst, zum Beispiel Produkte auf einer E-Commerce-Seite, kann Symmetrie es leichter machen, alles zu ordnen.

Ebenso battle das Rasterformat das Standardmodell, wenn eine Seite viele Elemente anzeigen musste. Schließlich sind Spalten und Zeilen das vernünftigste Format, um all diese Elemente zu gruppieren.

Da aber das Raster so gewöhnlich ist, hilft ein aufgelockertes und chaotisches Format dir, herauszustechen. Moderne Designer und Designerinnen haben bemerkt, dass sie ihre Seiten aus der Masse herausstechen lassen können, indem sie einfach ihre Spalten und Zeilen ein wenig durcheinanderbringen. Während dieser Stil für traditionellere Marken unpassend sein kann, ist es der perfekte Look für Marken, die fortschrittlich oder ausgefallen aussehen wollen.

9. Einheitlichkeit stärkt jede Designentscheidung

Zu guter Letzt ist gutes Webdesign einheitlich. Jedes Mal, wenn du eine kluge Designentscheidung wiederholst, stärkst du ihre Wirkung. Sagen wir beispielsweise, du entscheidest dich für Rot als Akzentfarbe, weil du leidenschaftlich wirken möchtest. Immer wenn du Rot als Akzentfarbe auf anderen Seiten verwendest, wirkst du noch leidenschaftlicher.

Beispiel für die Grundsätze der Webgestaltung: Konsistenz
Diese Seite verwendet auf allen Seiten denselben Blauton, dieselbe Typografie und dasselbe Format. Webdesign von ludibes

Ein einheitliches Webdesign nützt jedem Aspekt deiner Seite und hat Auswirkungen auf die Navigation, das Format, da Farbschema, die Typografie, die Bilder und alle anderen Bereiche. Dies deckt sich mit der Bedeutung der Einheitlichkeit im Branding, wo die Verwendung derselben Logos, Farben und Slogans die Assoziationen mit der Marke bei jeder neuen Nutzung verstärkt.

Wenn das nicht genügt, um dich davon zu überzeugen, wie wichtig Einheitlichkeit ist: Das Gegenteil ist noch schlimmer. Denke mal darüber nach, wie frustrierend es für deine Person wäre, wenn jede Seite andere Symbole für die Bedienung hätte und diese auf jeder neuen Seite woanders platziert wären. Das würde bedeuten, die Person müssten immer und immer wieder herausfinden, wo sich etwas befindet und wie etwas funktioniert – dadurch würdest du das Prinzip brechen, dass Person nicht nachdenken sollten.

Die Grundlagen im Webdesign für den Einstieg

Hoffentlich hat dich unsere Liste mit den Grundlagen im Webdesign nicht zu sehr überfordert. Es ist nicht einfach, solch eine umfangreiche Disziplin in eine Handvoll kurzer Informationen zu packen. Denke nur daran: Je mehr dieser Grundlagen du anwendest und umsetzt, umso mehr Sinn werden sie ergeben und es wird nicht lang dauern, bis sie dir ganz in Fleisch und Blut übergehen.

Und wenn du wirklich Probleme haben solltest, dein gewünschtes Webdesign zu kreieren, kannst du jederzeit freiberufliche Designer oder Designerinnen für dein Projekt engagieren – sie alle haben längst die Grundlagen des Webdesigns und mehr gemeistert!

Du möchtest die perfekte Web site für dein Unternehmen?
Dann arbeite mit unserer talentierten Design-Group.



Supply hyperlink

Happy
Happy
0 %
Sad
Sad
0 %
Excited
Excited
0 %
Sleepy
Sleepy
0 %
Angry
Angry
0 %
Surprise
Surprise
0 %

Average Rating

5 Star
0%
4 Star
0%
3 Star
0%
2 Star
0%
1 Star
0%

Leave a Reply

Your email address will not be published.