Verstehe einer die Design-Sprache…
Erziele mit unserem Kopf & Hand Design-Glossar bessere Ergebnisse durch einfachere Kommunikation!
Hier findest du alles, was du über Design und seine Begriffe wissen musst. Von A wie „Ausrichtung“ bis Z wie „Zeilenabstand“. Designer:innen sprechen ihre eigene Sprache und es kann dir total weiterhelfen, wenn du ein paar wichtige Begriffe kennst. Gerade, wenn du mit Designer:innen zusammenarbeitest, ist es wichtig, auf einer gemeinsamen Wellenlänge zu sein, um das beste Ergebnis zu erzielen. Keine Sorge, wir wollen hier nicht nur Fachjargon absondern, sondern auch unterhaltsam und verständlich erklären, was es mit Begriffen wie „Longtail Keyword“ oder „Negative Space“ auf sich hat. Ob als Designer:in oder Laie – hier ist für jeden etwas dabei. Keine Bange, du musst diese Designbegriffe nicht auswendig lernen, aber es ist gut, sie im Hinterkopf zu haben, falls du mal einen brauchst. Also schnapp dir ein Käffchen, lehn dich zurück und lass uns gemeinsam in die Welt des Designs eintauchen. Speichere diese Seite als Lesezeichen ab, um sie immer griffbereit zu haben – mit unserem Design-Lexikon wirst du zum Design-Experten und kannst mitreden, wenn es um die Gestaltung von Websites, Logos oder anderen Design-Projekten geht.
Inhaltsverzeichnis
Grafikdesign-Grundlagen
Grafikdesign-Grundlagen sind der Schlüssel zu erfolgreicher Gestaltung. Hier erfährst du alles, was du wissen musst, um mit Farben, Formen, Schriften und Layouts umzugehen. Ob du ein professionelle:r Designer:in werden willst oder nur deine eigenen Projekte verschönern möchtest, diese Grundlagen sind ein unverzichtbarer Startpunkt. Lerne die Regeln und wie man sie bricht, um einzigartige und ansprechende Designs zu schaffen. Los geht’s!
Die Gestaltgesetze
Diese Regeln sind essentiell für jede Designarbeit, denn sie helfen dabei, ein visuell harmonisches Bild zu erschaffen. Die Gestaltgesetze beschreiben, wie das menschliche Gehirn Formen, Linien und Flächen wahrnimmt und ordnet. Wenn du dich an diese Regeln hältst, wirst du sicherstellen, dass deine Designs nicht nur schön aussehen, sondern auch leicht zu verstehen sind. Dabei geht es nicht darum, sie stur zu befolgen, sondern sie als Leitfaden zu nutzen, um deine kreative Freiheit auszuleben. Die Gestaltgesetze sind eine Art Werkzeugkasten für Designer:innen und können dir dabei helfen, deine Kreationen auf die nächste Stufe zu bringen.
Komposition und Layout
Wenn es um Design geht, geht es auch um die Art und Weise, wie die Dinge auf einer Seite angeordnet sind. Das nennt man Komposition. Eine gute Komposition sorgt dafür, dass dein Auge immer weiter schaut und gefesselt bleibt. Manche nennen es auch Layout, genau wie Form in der bildenden Kunst. Die Komposition besteht aus einer Menge verschiedener Designelemente wie zum Beispiel Gleichgewicht, Nähe, Ausrichtung, Wiederholung, Kontrast und Leerraum.
Gleichgewicht
Beim Design geht es darum, wie du Dinge auf einer Seite anordnest. Du willst nicht, dass es aussieht, als würde alles auf einer Seite rumwackeln. Deshalb ist es wichtig, dass du alles so hinlegst, dass es gleichmäßig aussieht – wie wenn du ein paar Dinge auf einer Waage abwägst. Es gibt drei Methoden, um das Gleichgewicht hinzukriegen: Du kannst alles symmetrisch (genau gleichmäßig) ausrichten, asymmetrisch (unsymmetrisch) oder radial (wie von einem Zentrum aus).
Was ist symmetrisch?
Wenn du auf der Suche nach einem ausgewogenen Look bist, dann ist Symmetrie das Richtige für dich! Hierbei werden alle Design-Elemente auf beiden Seiten einer Mittellinie genau gleich platziert, sodass alles perfekt ausbalanciert aussieht.
Was ist asymmetrisch?
Im asymmetrischen Design sind Texte und Grafiken nicht genau auf beiden Seiten einer mittigen Linie ausgeglichen. Hier gibt es trotzdem eine Balance, aber die Elemente sind einfach ungleichmäßig auf der Seite verteilt.
Was ist radial?
Ein radiales Design ist, wenn alle Designelemente von einem Mittelpunkt ausgestrahlt werden und so für Ausgewogenheit sorgen.
Nähe
Wie die Elemente in einem Design beieinander liegen, nennen wir Nähe. Ob sie eng beieinander stehen oder weiter auseinander, es beeinflusst das Aussehen und die Wirkung des Designs.
Ausrichtung
Ausrichtung meint, wie der Text oder die Grafiken auf einer Seite ausgerichtet sind. Man kann sie linksbündig, rechtsbündig, zentriert oder als Blocksatz anordnen. Es ist wichtig, dass die Ausrichtung mit dem Design übereinstimmt und den Inhalt gut hervorhebt.
Wiederholung
Wiederholung ist, wenn Designer:innen die gleichen Dinge immer und immer wieder im Design einsetzen, um ein einheitliches Aussehen zu bekommen. So, wie dein Kind dich nach einem Keks fragt – es wiederholt sich immer wieder.
Kontrast
Kontrast bedeutet, dass im Design verschiedene Elemente verwendet werden, die sich stark voneinander unterscheiden. Dies kann durch Farben, Formen, Texturen, Größen oder Schriftarten erreicht werden, um das Design interessanter zu gestalten.
Negative Space / Weißraum
Negative Space ist der leere Raum, der um ein Objekt herum entsteht. Es ist sozusagen der Darth Vader zum Luke Skywalker, das Ying zum Yang. Negativer Raum wird oft als Gestaltungsprinzip verwendet, um den Fokus auf das Wesentliche zu lenken. Es ist wie das Versteckspiel, nur dass du es bewusst einsetzt.
Drittel-Regel
Mit der Drittel-Regel kannst du als Designer:in bestimmen, wo deine wichtigen Design-Elemente platziert werden sollen. Du teilst einfach dein Design in drei Teile ein, sowohl vertikal als auch horizontal, und die Stellen, wo sich die Linien treffen, werden zu den Fokuspunkten.
Fibonacci Spirale
Die Fibonacci-Spirale ist die spiralförmige Darstellung einer mathematischen Sequenz, die auf der Zahl Phi basiert. Klingt kompliziert, oder? Keine Sorge, du musst kein Mathematik-Genie sein, um diese schöne Spirale zu verstehen. Lass mich dir erklären, wie sie im Grafikdesign verwendet wird, um harmonische Proportionen und eine ästhetische Balance zu erzeugen.
Teile dein Bild durch das Verhältnis 1:1,618 und du erzeugst diese ästhetische Balance. Dieses Verhältnis wird gerne in der Kunst, der Architektur, in Fotografien und im Grafikdesign eingesetzt. Als Voraussetzung musst du geeignete Bildausschnitte oder Kompositionen bestimmen und die Positionierung der wichtigsten Bildelemente anhand der Schnittpunkte und Linien ausführen. So wird mit dem Goldenen Schnitt dann jedes deiner Motive zu einem echten Hingucker.
60/30/10-Prinzip
Das 60/30/10 Prinzip ist eine Regel für die Farbgestaltung, bei der 60% einer dominierenden Farbe, 30% einer unterstützenden Farbe und 10% einer akzentuierenden Farbe verwendet werden. Das Ziel ist es, ein harmonisches und gut ausgewogenes Farbschema zu erstellen, das gleichzeitig interessant und ansprechend ist. Designer:innen nutzen diese Regel oft als Grundlage für ihre Farbwahl, um sicherzustellen, dass ihre Designs harmonisch und ausgewogen aussehen.
Raster
Kurz gesagt, ein Raster ist eine Art Gitter, das Designer:innen hilft, die Elemente in ihrem Design auszurichten und in Beziehung zueinander zu setzen. So wird sichergestellt, dass alles ordentlich und ausgewogen aussieht.
Mock-up
Mit einem Mock-up kannst du deine Designideen vorab testen, bevor du sie endgültig umsetzt. Es ist ein digitales oder reales Modell, das dir einen realistischen Eindruck davon vermittelt, wie dein Design später in der Praxis aussehen wird. So kannst du bereits frühzeitig Feedback sammeln und Veränderungen vornehmen, bevor es zu spät ist.
Fotografie und künstlerische Arbeit
In der Fotografie und künstlerischen Arbeit gibt es viele wichtige Begriffe, die es zu kennen gilt, um ein erfolgreiches Design zu erstellen.
Auflösung
Je höher die Auflösung, desto mehr Details kann man in einem Bild erkennen, was es schärfer und klarer aussehen lässt. Es ist wichtig zu wissen, dass höhere Auflösungen auch größere Dateigrößen bedeuten, also sollte man darauf achten, dass man die richtige Balance zwischen Detailreichtum und Dateigröße findet.
DPI/PPI
DPI steht für „dots per inch“ und misst die Qualität eines Druckers. 300dpi ist die empfohlene Anzahl für hochwertige Drucke. PPI steht für „pixels per inch“ und ist die Maßeinheit für die Pixeldichte bei elektronischen Geräten wie Scannern, Kameras, Fernsehern oder Monitoren. Es unterscheidet sich von DPI.
Anschnitt
Kurz und knapp, Anschnitt bedeutet, dass ein Design ein bisschen über die gedruckte Fläche hinausreicht, um sicherzustellen, dass es nach dem Druck keine weißen Ränder gibt.
Beschnitt
Die endgültige Größe eines gedruckten Stückes wird als Beschnittgröße bezeichnet. Das Beschneiden (auch Trimmen genannt) findet an bestimmten Stellen statt, die durch Beschnittmarkierungen angezeigt werden.
Pixel
Pixel sind kleine Quadrate, die ein digitales Bild ergeben. Je mehr dieser Pixel vorhanden sind, desto höher ist die Auflösung des Bildes.
Crop
Ein:e Designer:in kann Teile von einem Bild wegschneiden, um das Bild besser aussehen zu lassen, wichtige Dinge hervorzuheben oder das Verhältnis von Breite und Höhe anzupassen.
Stock-Fotos
Stock-Fotos sind Fotos, die man kaufen und benutzen kann, die von anderen Leuten gemacht wurden. Man kann sie benutzen, um Geld zu sparen, das man sonst für ein eigenes Fotoshooting ausgeben müsste.
Typografie
Es gibt verschiedene Klassifizierungen für Schriftarten, aber die gängigsten sind Serifen-Schriften, Sans-Serif-Schriften, Display-Schriften, Handschriften-Schriften und Monospace-Schriften.
Typografischer Grundlagen
Serifen-Schriften
Serifen sind kleine Striche oder Verzierungen, die an den Enden der Buchstaben angebracht sind. Sie geben einer schriftlichen Arbeit ein traditionelles oder klassisches Erscheinungsbild und können dazu beitragen, dass Texte leichter lesbar sind. Die Serifen verbinden die Buchstaben optisch miteinander und helfen, den Lesefluss zu erleichtern. Sie werden oft in Printmedien wie Büchern oder Zeitungen verwendet, um eine formelle oder seriöse Atmosphäre zu schaffen. Ein älterer Begriff für Serifen-Schriften ist: Antiqua.
Serifenlose Schriften
Eine serifenlose Schrift wird auch als „Grotesque“ oder „Sans Serif“ bezeichnet, wobei „Sans“ aus dem Französischen stammt und „ohne“ bedeutet. Im Gegensatz zu Schriftarten mit Serifen haben diese Schriften keine kleinen Linien oder Füßchen am Ende ihrer Buchstaben. Einige populäre Sans Serif Schriftarten sind Helvetica, Arial und Verdana.
Handschrift (Script)
Script Fonts sind eine besondere Art von Schriftarten, die an Handschrift erinnern. Sie verleihen jedem Design eine persönliche Note und sind ideal für Einladungen, Briefe und andere Dokumente, die eine persönliche Note benötigen.
Blockserifen (Egyptienne)
Blockserifen Fonts, auch bekannt als slab serifs, sind Schriftarten, die durch ihre markanten und dicken Serifen auf beiden Seiten der Buchstaben gekennzeichnet sind. Diese Schriftarten sind besonders beliebt für Überschriften und Logos, da sie eine starke und selbstbewusste Aussage machen. Sie vermitteln eine Art von „Kraft“ und „Robustheit“, die bei anderen Schriftarten nicht zu finden ist. Aber Vorsicht: Verwende sie nicht für lange Texte, da der Text durch die Wuchtigkeit schnell überladen wirkt und die Lesbarkeit dadurch beeinträchtigt werden kann.
Mikro- und Makrotypografie
Mikrotypografie bezieht sich auf die Details und Feinheiten der Schriftgestaltung, wie z.B. die Abstände zwischen Buchstaben und Zeilen, die Größe der Satzzeichen oder die Form der Buchstaben. Makrotypografie dagegen betrifft die Gesamtgestaltung eines Textes, wie z.B. die Auswahl der Schriftart, die Anordnung von Überschriften und Absätzen oder die Verwendung von Farben und Grafiken. Kurz gesagt, Mikrotypografie geht um die kleinen Dinge, während Makrotypografie sich auf die großen Gestaltungsentscheidungen konzentriert.
Oberlänge
Das ist der Teil von Kleinbuchstaben, der über den Rest des Buchstabens hinausragt, z.B. bei den Buchstaben „b“ oder „h“.
Grundlinie
Alle Buchstaben sitzen auf einer Linie, die die niedrigste Stelle für Großbuchstaben und viele Kleinbuchstaben ist.
Unterlänge
Das ist der Teil von Kleinbuchstaben, der unter den Rest des Buchstabens fällt, wie bei „g“ oder „p“.
Mittellänge / x-Höhe
Diese ist die Höhe, auf der die meisten Kleinbuchstaben ihre höchste Stelle erreichen sollten. Es hängt von der Höhe des Buchstabens „x“ in einer bestimmten Schriftart ab.
Punze
Altherkömmlich sind Punzen kleine Stempel, mit denen Buchstaben in eine Metallplatte eingraviert wurden. Diese Platten wurden dann verwendet, um die Schriftarten zu gießen. Heutzutage nennt man die Hohl- und Innenräume des „A“, „B“ oder auch „O“’s Punze.
Schriftabstand
Der Abstand zwischen den Buchstaben und Zeilen einer Schriftart kann angepasst werden, um das Aussehen zu verändern. Wir sprechen hier vom vertikalen und horizontalen Abstand.
Unterschneidung
Die Unterschneidung beschreibt den Abstand zwischen Buchstaben in einem Wort. Man kann sie verändern, um den Text besser aussehen zu lassen und einfacher zu lesen.
Zeilenabstand
Der Zeilenabstand ist der Abstand zwischen zwei Textzeilen.
Laufweite
Die Laufweite in der Typografie ist der Abstand zwischen den Buchstaben einer Zeile. Man kann sich das so vorstellen: Je weiter die Buchstaben auseinander stehen, desto mehr Platz hast du zum Atmen.
Buchstabengröße
Majuskel (Großbuchstaben)
Deine Mutter verwendet sie, um dich versehentlich anzuschreien, wenn sie dir schreibt.
Minuskel (Kleinbuchstaben)
Minuskeln sind die kleinen Buchstaben, die wir jeden Tag verwenden, um Nachrichten zu schreiben, ohne jemanden anzuschreien. Ohne sie, könnten wir nicht texten wie normale Menschen.
Kapitälchen
Klein aussehende Großbuchstaben, um zu verhindern, dass groß geschriebene Wörter auf einer Seite zu riesig wirken. Du findest sie oft als erstes Wort in Kapiteln in Büchern.
Schriftstil
Man kann auch die Größenverhältnisse, die Dicke und den Stil von Schriftarten ändern, nicht nur ihren Zeilenabstand und ihre Größe.
Schriftgröße
Weißt du, man sagt, dass Größe nicht alles ist – aber wenn es um Schriftarten geht, dann schon! Die Schriftgröße ist wie der Taillenumfang eines Hemdes: je größer, desto mehr Platz hast du zum Atmen. Und wenn du nicht genug Platz hast, kann es eng werden. Genau wie bei Hemden, sollte man die Schriftgröße immer nach der passenden Größe wählen, ungefähr 28 Punkte pro Zentimeter. Aber keine Sorge, du musst nicht alle diese Punkte zählen, das machen die Designer:innen für dich.
Schriftstärke
Weißt du, warum Schriftstärke so wichtig ist? Weil manche Buchstaben einfach zu fett oder zu dünn sind um ordentlich auszusehen, so wie Menschen, die entweder zu viel oder zu wenig Sport machen. Aber im Ernst, Schriftstärke hilft dabei, Texte klarer und besser lesbar zu gestalten.
Kursiv
Wenn du Buchstaben siehst, die sich nach rechts neigen, dann sind sie kursiv und wollen dir was besonderes sagen! Du weißt schon, wie wenn jemand beim Sprechen den Kopf schief legt, um seine Worte extra zu betonen. Genau so machen es auch kursive Buchstaben, sie wollen einfach mehr Aufmerksamkeit auf sich ziehen.
Lorem ipsum
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Konntest du diesen Absatz verstehen? Lorem ipsum Texte sind Platzhaltertexte und können
Farbe
Farblehre
Weißt du, wie Farben auf uns wirken und wie sie unser Design beeinflussen können? Das nennt man Farblehre. Mit ihr finden Designer:innen heraus, welche Farben am besten für welches Design passen. Wenn man zum Beispiel eine zarte Website gestalten will, kann man Pastellfarben verwenden. Oder wenn man Energie vermitteln möchte, wählt man eine Werbung in Rot und Gelb.
Farbton, Tönung, Ton und Schattierung
Farbton ist pure Farbe, Tönung ist Farbe mit Weiß, Ton ist Farbe mit Grau und Schattierung ist Farbe mit Schwarz.
Sättigung
Hier geht’s um die Intensität einer Farbe. Je intensiver, desto höher die Sättigung.
Palette
Eine Farbpalette ist die Auswahl an Farben, die in einem Design verwendet werden. Designer:innen wählen Farben aus, die gut zusammenpassen und oft ansprechend aussehen, um Konsistenz und ein bestimmtes Gefühl zu erzeugen.
Warme und kalte Farben
Warme Farben sind die eine Hälfte des Farbkreises (Rot, Orange, Gelb, Pink), kalte Farben sind die andere Hälfte (Blau, Grün, Violett).
Monochromatisch
Eine monochromatische Palette verwendet nur eine Farbe.
Graustufe
Hier geht’s um eine monochromatische Palette in Grau.
Analog
Farben, die nebeneinander im Farbkreis liegen, sind analog (z.B. Rot-Violett, Rot und Rot-Orange).
Komplementär
Hierbei handelt es sich um Farben, die sich im Farbkreis gegenüberliegen. Sie schaffen visuelle Spannung und Überraschung.
Triadisch
Hierbei geht’s um drei Farben, die im Farbkreis gleichmäßig verteilt sind. Eine Farbe dominiert, eine unterstützt und eine akzentuiert.
Farbverlauf
Hier geht’s um eine stufenweise Veränderung von einer Farbe zur nächsten (z.B. von Blau zu Grün).
Deckkraft
Hier geht’s um Durchsichtigkeit. Je transparenter, desto niedriger die Deckkraft.
RGB
Jeder Pixel in einem Bild auf einem Bildschirm besteht aus einer Kombination dieser drei Farben, und die Helligkeit jeder Farbe wird durch eine Zahl im Bereich von 0 bis 255 repräsentiert. Indem man die Helligkeit dieser drei Farben ändert, kann man unzählige verschiedene Farben erzeugen, die auf dem Bildschirm sichtbar sind.
Es gibt auch andere Farbräume, die verwendet werden können, um Farben zu repräsentieren, wie zum Beispiel CMYK (Cyan, Magenta, Yellow, Key/Schwarz), die in der Druckindustrie verwendet werden, aber RGB ist der am weitesten verbreitete Farbraum für digitale Bildschirme.
CMYK
CMYK ist eine Farbmodellbezeichnung, die häufig in der Druckindustrie verwendet wird. Die Abkürzung steht für die Farben Cyan, Magenta, Gelb und Schwarz, die zusammen gemischt werden, um eine Vielzahl von Farben zu erzeugen. Im Gegensatz zum RGB-Farbmodell, das für digitale Anwendungen geeignet ist, ist CMYK speziell für den Druck entwickelt und stellt sicher, dass die Farben auf Papier genau wiedergegeben werden.
Sonderfarben (Pantone, HKS, RAL, etc.)
Sonderfarben wie Pantone, HKS, RAL usw. sind wie der besondere Würzstoff in der Farbwelt! Sie sind speziell abgestimmte Farbnummern, die in der Druck- und Designindustrie verwendet werden, um sicherzustellen, dass jedes Projekt in der gleichen, exakten Farbe dargestellt wird. Man könnte sie auch als die Farb-Schlüssel zum Erfolg bezeichnen!
Webdesign
Websitenelemente
Websiteelemente sind die Bausteine einer Website. Ohne sie würde deine Website so aussehen wie ein leeres Blatt Papier. Von der Navigation bis zum Inhalt – jedes Element hat seine eigene Funktion und trägt zum Gesamtbild bei. Als Designer:in ist es unsere Aufgabe, diese Elemente zu nutzen, um eine großartige Benutzererfahrung zu schaffen. Und wenn alles richtig zusammenpasst, wird deine Website so cool aussehen, dass du dich fragst, warum du nicht schon früher darauf gekommen bist!
Navigation & Navigationsleiste
Die Navigation ist sozusagen der Kompass deiner Website. Es hilft deinen Besuchern, sich auf deiner Seite zurechtzufinden und zu den Seiten zu navigieren, die sie suchen. Eine Navigationsleiste ist ein Menü, das normalerweise am oberen oder seitlichen Rand deiner Website platziert wird und Links zu den verschiedenen Seiten enthält. Es ist wie eine Straßenkarte – ohne sie würden sich deine Besucher verirren und nie wieder zurückkehren. Also sorge dafür, dass deine Navigation und Navigationsleiste klar und leicht verständlich sind, damit sich deine Besucher nicht verlaufen.
Burgermenu
Das Burgermenu – auch als Hamburgermenu bekannt – hat nichts mit Fast Food zu tun, sondern ist ein Designelement, das auf vielen mobilen Websites und Apps zu finden ist. Es besteht aus drei horizontalen Linien, die aussehen wie ein aufgeklappter Burger, daher der Name. Wenn du darauf klickst oder tippst, öffnet sich ein verstecktes Menü mit weiteren Links und Optionen. Es ist eine platzsparende Lösung für mobile Geräte, da es weniger Platz benötigt als eine vollständige Navigationsleiste. Also, wenn du auf einer mobilen Website das Burgermenu siehst, weißt du, wo du draufklicken musst, um mehr Optionen zu bekommen.
Breadcrumb Trail (Brotkrümelnavigation)
Breadcrumbs sind nicht nur etwas für Vögel und Märchenfiguren, sondern auch ein wichtiges Element der Webnavigation. Sie sind ein visuelles Hilfsmittel, das auf vielen Websites zu finden ist und dem Benutzer hilft, sich auf der Seite zu orientieren. Breadcrumbs zeigen die Hierarchie der Seite an, auf der du dich befindest, und geben dir die Möglichkeit, direkt zu den übergeordneten Seiten zurückzukehren. Sie werden normalerweise oben oder unten auf der Seite angezeigt und bestehen aus einer Reihe von Links, die wie ein Pfad aussehen. Also, wenn du dich jemals auf einer Website verloren fühlst, schau nach den Breadcrumbs und folge dem Weg zurück.
Links / Hyperlinks
Links sind Verweise, die auf andere Websites oder interne Seiten führen. Sie sind wichtige Elemente auf einer Website, um den Nutzer:innen das Surfen zu erleichtern und ihnen weitere Informationen zu bieten. Ein Klick auf einen Link kann zu einem neuen Inhalt oder einer neuen Seite führen und so die Navigation auf einer Website erleichtern.
Sidebar (Seitenleiste)
Die Sidebar ist ein Bereich auf einer Webseite, der meist auf der rechten oder linken Seite angezeigt wird und wichtige Informationen wie Navigation, Suchfunktionen, Social-Media-Links oder Werbung enthält. Sie dient oft als ergänzender Inhalt zur Hauptspalte und kann für eine bessere Übersichtlichkeit sorgen.
Banner
Ein Banner ist ein grafisches Element auf einer Webseite, das dazu dient, die Aufmerksamkeit der Besucher auf eine bestimmte Information oder Aktion zu lenken. Es kann in verschiedenen Formen und Größen auftreten, zum Beispiel als Header-Banner oder als Werbebanner. Banners sollten ansprechend gestaltet sein und einen klaren Call-to-Action enthalten, um die Conversion-Rate zu erhöhen.
Footer (Fußzeile)
Der Footer ist ein wichtiger Bestandteil einer Website, der sich am unteren Ende der Seite befindet. Er enthält häufig Links zu wichtigen Seiten, Kontaktinformationen oder Urheberrechtsinformationen. Er kann auch als Ort für die Platzierung von Social-Media-Buttons oder Newsletter-Anmeldungen genutzt werden.
HTML
HTML, die Abkürzung für „Hypertext Markup Language“, ist eine Programmiersprache, die verwendet wird, um Webseiten zu erstellen. Mit HTML können Texte, Bilder, Videos und andere Inhalte auf einer Webseite strukturiert und formatiert werden. Es bildet die Grundlage des World Wide Web und ist somit ein essentielles Element der modernen Kommunikation.
Hero Section
Die „Hero Section“ ist der Star einer Website und der erste Eindruck, den ein Besucher bekommt. Diese Sektion, die sich in der Regel oben auf der Startseite befindet, besteht aus einer großen, auffälligen Überschrift und einem atemberaubenden Bild, das die Aufmerksamkeit der Besucher auf sich zieht. Die Hero Section soll das Wesentliche der Website vermitteln und den Besuchern Lust machen, mehr zu entdecken. Eine gute Hero Section macht neugierig und motiviert zum Weiterklicken!
Section
Eine Website kann man sich wie ein Haus vorstellen: Eine Section ist dabei ein Zimmer. Jede Section hat ihren eigenen Zweck und ihre eigene Atmosphäre. So kann eine Section beispielsweise eine Galerie mit Bildern sein, eine Liste von Dienstleistungen oder eine Beschreibung des Unternehmens. Sections helfen dabei, den Inhalt der Website zu organisieren und zu strukturieren. Sie erleichtern den Besuchern die Navigation und tragen somit zu einer besseren User Experience bei. Kurz gesagt: Ohne Sections würde eine Website wie ein verwirrendes Labyrinth aussehen – mit ihnen wird sie zu einem übersichtlichen und einladenden Ort.
Row
Eine „Row“ ist der Fachausdruck für eine Reihe von Website-Elementen, die horizontal nebeneinander angeordnet sind. Oftmals wird eine „Row“ verwendet, um Inhalte wie Bilder, Texte oder Videos in einer bestimmten Anordnung darzustellen. Mit „Rows“ kannst du deine Inhalte übersichtlicher strukturieren und gleichzeitig das Design deiner Website verbessern. Es ist also ein praktisches Werkzeug, um deinen Nutzer:innen ein angenehmeres und informativeres Erlebnis auf deiner Webseite zu bieten.
Column
Eine Column, oder zu Deutsch Spalte, ist ein wichtiges Element im Design von Websites. Hierbei handelt es sich um einen vertikalen Bereich auf einer Website, in dem Inhalte wie Text, Bilder oder Videos platziert werden können. Durch das geschickte Kombinieren mehrerer Spalten können komplexe Layouts und Strukturen geschaffen werden. So wird beispielsweise eine Seite in Header, Navigation, Inhalt und Footer unterteilt, die jeweils in einzelnen Spalten angeordnet sind. Spalten sind somit ein essentieller Bestandteil des Webdesigns und ermöglichen eine klare Strukturierung von Inhalten.
H1-H6
H1-H6 bezieht sich auf die sechs verschiedenen Überschriftsgrößen in HTML. H1 ist die größte Überschrift, während H6 die kleinste ist. Sie helfen dabei, die Struktur einer Webseite zu organisieren und wichtige Informationen hervorzuheben. H1 wird normalerweise für den Titel einer Seite verwendet, während H2-H6 für Untertitel oder Abschnittsüberschriften genutzt werden.
p, a, lu, ul…
Die Begriffe p, a, li und ul sind grundlegende HTML-Tags, die für das Erstellen von Webseiten unerlässlich sind. Das „p“ steht für Absatz, „a“ für Link, „li“ für Listenpunkt und „ul“ für ungeordnete Liste. Mit diesen Tags können verschiedene Arten von Inhalten formatiert und dargestellt werden, um eine ansprechende Website zu erstellen.
CSS
CSS steht für „Cascading Style Sheets“ und ist eine Art von Styling, mit der man Webseiten verschönern kann – sozusagen der Makeup-Artist fürs Internet. Mit CSS kannst du Farben ändern, Schriftarten anpassen und das Layout deiner Website gestalten. Deine Website sieht dann aus wie ein Topmodel, das für den Laufsteg bereit ist!
JavaScript
Ahoi, mein Matrose! JavaScript ist eine Programmiersprache, die Websites zum Leben erweckt. Sie ist die Piratin, die das Schiff der statischen HTML- und CSS-Seiten kapert und es in ein interaktives Erlebnis verwandelt. Mit JavaScript kann man dynamische Animationen, Spiele und sogar komplexe Webanwendungen erstellen – also worauf wartest du noch? Setze die Segel und lass uns loslegen!
CMS
Ein CMS ist wie ein persönlicher Assistent für deine Website, der sich um das Hinzufügen, Bearbeiten und Löschen von Inhalten kümmert, damit du Zeit hast, deinen Kaffee zu trinken. Es steht für „Content Management System“ und ist eine großartige Möglichkeit, deine Website einfach und ohne technisches Know-how zu verwalten. Also, lehn dich zurück und lass dein CMS die Arbeit machen!
Landingpage
Eine Landingpage ist wie ein Tindermatch – entweder es gibt einen Swipe nach oben oder nach unten. Die Seite soll das Interesse des Besuchers wecken und ihn dazu bringen, „Ja“ zu sagen und zu konvertieren. Kein Druck, aber es ist wie ein erstes Date: Stell dich gut dar und überzeuge die Person, dass du der Richtige bist.
404-Seite
Hey, hast du jemals eine Seite besucht und statt der gewünschten Inhalte nur eine leere „404 Fehlermeldung“ erhalten? Das ist frustrierend, oder? Eine 404-Seite ist im Grunde genommen wie eine verlorene Socke in deiner Schublade – sie gehört nicht dorthin und passt nicht zum Rest.
User Interface (UI / Benutzeroberfläche)
Oh, du möchtest wissen, was ein User Interface ist? Das ist ja easy peasy lemon squeezy! Ein User Interface ist das, was dir erlaubt mit einem Computer oder einem Gerät zu interagieren. Obwohl, ich denke „easy peasy lemon squeezy“ ist vielleicht keine offizielle Definition…
User Experience (UX / Nutzererfahrung)
User Experience ist das, was passiert, wenn jemand versucht, ein Produkt zu benutzen, ohne dabei in Tränen auszubrechen. Eine gute UX-Design bringt Menschen zum Lächeln und lässt sie denken „Wow, das ist einfach“. Kurz gesagt, es geht darum, das Leben der Benutzer:innen einfacher und glücklicher zu machen!
Wireframe (Gitternetzmodell)
Wireframes sind so etwas wie das Grundgerüst eines Hauses – ohne sie kann man nicht wirklich bauen. Im Webdesign sind Wireframes ebenfalls das grundlegende Skelett einer Website oder App. Sie zeigen grob, wo Elemente wie Buttons, Texte oder Bilder platziert werden und ermöglichen eine effektive Planung.
Onlinemarketing
Suchmaschinenoptimierung (SEO)
SEO steht für „Suchmaschinenoptimierung“ und ist der magische Zaubertrick, um Websites auf den vorderen Plätzen in den Suchergebnissen zu platzieren. Aber Vorsicht: Es ist keine Raketenwissenschaft, sondern erfordert eine gründliche Analyse, Optimierung von Inhalten und die Arbeit an Backlinks. Wirf also deine Zauberhut an und mach dich bereit für den Kampf um die Spitzenpositionen!
Backlinks
Backlinks sind wie Empfehlungsschreiben für deine Website. Je mehr Links von anderen Websites auf deine zeigen, desto höher ist dein Ansehen bei Suchmaschinen. Aber Achtung: Qualität geht vor Quantität! Lieber ein paar gute Empfehlungen als viele schlechte.
Conversion
Conversion ist, wenn deine Besucher:innen einer Website zu zahlenden Kund:innen werden. Das ist wie bei einem Tinder-Date: Erst muss man Interesse wecken, dann muss man überzeugen und schließlich zum Kaufabschluss kommen. Aber bitte ohne den Kaffee verschütten.
Local SEO
Lokale Suchmaschinenoptimierung (Local SEO) ist wie eine Schatzsuche für dein Unternehmen. Du möchtest deine Zielgruppe in deiner Stadt erreichen? Dann stell sicher, dass dein Unternehmen auf Google Maps erscheint und lokale Bewertungen hat. Du wirst bald mehr Kund:innen an Land ziehen als ein:e Fischer:in am Hafen!
On-Page SEO
On-Page SEO bedeutet, deine Webseite so zu optimieren, dass sie von Suchmaschinen gut gefunden wird. Das ist wie ein Friseurbesuch: Deine Webseite soll schön aussehen, aber auch gepflegt sein! Aber Vorsicht: Zu viel Styling kann auch schnell nach hinten losgehen.
Technik & Meta
Technik und Meta, das klingt fast wie ein geheimer Agenten-Code. Aber keine Sorge, es geht hier nicht um Geheimdienstangelegenheiten. Vielmehr handelt es sich um Begriffe aus dem Bereich der Suchmaschinenoptimierung (SEO). Technik bezieht sich dabei auf die technischen Aspekte einer Website, wie zum Beispiel die Ladezeit oder die mobile Optimierung. Meta wiederum beschreibt die Meta-Tags einer Seite, wie den Titel oder die Beschreibung, die von Suchmaschinen ausgelesen werden. Eine gelungene Kombination von Technik und Meta ist entscheidend, um bei Google & Co. ganz oben zu stehen. Also ran an den Code und optimieren was das Zeug hält!
Struktur
Ohne eine solide Struktur geht nichts – das gilt auch für Websites! Unter dem Begriff „Struktur“ im Zusammenhang mit Webseiten versteht man die übersichtliche und logische Anordnung von Inhalten und Elementen. Eine gute Struktur sorgt für eine bessere User Experience und hilft Suchmaschinen dabei, die Inhalte deiner Seite zu verstehen und richtig einzuordnen. Also nicht nur schön aussehen, sondern auch durchdacht strukturieren!
Inhalt
Wenn es um On-Page SEO geht, ist „Inhalt“ König. Hier geht es um die Qualität der Informationen auf deiner Website. Aber keine Sorge, es geht nicht um die Anzahl an Wörtern auf deiner Seite! Es geht darum, dass deine Inhalte relevant, informativ und gut strukturiert sind, damit deine Nutzer:innen und Google sie leicht finden können. Also, denke immer daran: Inhalte sind nicht nur Text, sondern auch Bilder, Videos und andere Medien, die deine Seite interessanter machen.
SERP
SERP steht für „Search Engine Results Page“ und bezeichnet die Suchergebnisseite, die du bekommst, wenn du etwas bei Google oder anderen Suchmaschinen suchst. Es ist der Ort, an dem dein Ranking darüber entscheidet, ob du der Star oder nur ein Statist bist. Also: Arbeite an deinem SEO, damit du auf der SERP glänzen kannst!
Title-Tag
Wenn eine Webseite eine Person wäre, dann wäre der Title-Tag so etwas wie ihr Namensschild. Er erscheint in den Suchergebnissen und ist das Erste, was potenzielle Besucher sehen. Deshalb ist es wichtig, dass er aussagekräftig und einladend ist, aber auch nicht zu lang. Ein bisschen wie ein gutes Party-Outfit: Es sollte auffallen, aber nicht zu viel Haut zeigen.
Meta-Description
Die Meta-Beschreibung: Eine Miniaturansicht deines Inhalts. Denk dran, sie zu optimieren, denn sie ist das Verkaufsargument in den SERPs. Stell sie dir als das kleine Schild vor, das dein Geschäft vorstellt. Wenn es interessant aussieht, kommen die Kund:innen herein. Wenn nicht, gehen sie weiter.
Meta-Tags
Meta-Tags sind ein wichtiger Bestandteil der On-Page-Optimierung und helfen Suchmaschinen dabei, den Inhalt deiner Website besser zu verstehen. Aber Vorsicht: Zu viele Meta-Tags können auch zu viel des Guten sein und die Suchmaschinen verwirren. Also sei sparsam mit ihnen, sonst könnten sie deine Website in ein Schlagwort-Schlachtfeld verwandeln.
Alt-Text
Der Alt-Text ist eine Beschreibung eines Bildes, die von deinem Browser vorgelesen wird, wenn das Bild nicht geladen wird. Der Alt-Text ist wie ein Augenzeuge, der dem Browser sagt, was auf dem Bild zu sehen ist. Also, wenn du deinen Alt-Text ordentlich schreibst, kann er den blinden Browsern helfen, die Bilder in deinem Content zu „sehen“!
Ranking
Ranking ist, wenn deine Website so beliebt bei Google ist, dass sie ganz oben auf der ersten Seite erscheint. Wie eine VIP-Liste für Websites! Um dort zu landen, musst du gut aussehen und dich benehmen. Mit anderen Worten: du brauchst ein gutes SEO. Sonst sitzt du wie ein einsamer Nerd auf der letzten Seite.
Rich Snippets
Hast du schon mal bemerkt, dass manche Suchergebnisse besonders fancy aussehen? Das sind Rich Snippets, kleine Extras in den Suchergebnissen wie Sternebewertungen, Rezeptbilder oder Produktpreise. Sie machen nicht nur optisch was her, sondern steigern auch die Klickrate auf deine Website. Da will man doch direkt auch mal ein bisschen Rich sein!
Search Console
Oh, die Search Console! Ein Werkzeug, das die Herzen aller SEOs höher schlagen lässt. Mit der Search Console kannst du die Performance deiner Website in den Google-Suchergebnissen überwachen, Probleme erkennen und beheben sowie wertvolle Einblicke in das Verhalten deiner Besucher erhalten. Also, wenn du wissen willst, wie gut deine Website in den Suchergebnissen abschneidet, solltest du dir die Search Console auf jeden Fall genauer anschauen.
Sitemap
Eine Sitemap ist wie eine Landkarte für eine Website. Sie zeigt den Weg zu jeder Seite und hilft Suchmaschinen wie Google, die Seiten zu finden. Aber Vorsicht, keine Schleichwege nehmen! Denn die Suchmaschinen mögen es nicht, wenn man sie in die Irre führt. Eine ordentliche Sitemap macht es leichter, dass deine Website von den Suchmaschinen gefunden wird. Und wer möchte das nicht?
Index / Indexieren
Indexieren klingt wie eine Wissenschaft für Super-Nerds, aber im Grunde bedeutet es nur, dass Suchmaschinen Webseiten in ihre Datenbank aufnehmen. Wenn deine Website nicht indexiert wird, wird sie niemals in den Suchergebnissen erscheinen. Das ist so, als würde man auf einer einsamen Insel sitzen und darauf warten, gerettet zu werden. Also sorge dafür, dass deine Website indexiert wird und die Suchmaschinen dich finden können!
Follow / No follow
Follow / No follow – klingt fast wie eine Entscheidung zwischen einem Hund, der dir folgt, und einem, der nicht folgt. Tatsächlich geht es aber um Links. Ein Follow-Link sagt den Suchmaschinen: „Hey, dieser Link ist cool, folge ihm ruhig.“ Ein No-follow-Link hingegen sagt: „Ey, das ist kein Link, den du verfolgen musst, lass es lieber sein.“
Robots.txt
Robots.txt ist ein bisschen wie ein Türsteher für Suchmaschinen-Roboter. Es sagt ihnen, welche Teile deiner Website sie indexieren dürfen und welche nicht. Es ist sozusagen die VIP-Liste für deine Website. Aber pass auf, wenn du den Robotern den falschen Weg zeigst, könnten sie schnell die Lust verlieren und deine Website links liegen lassen.
Humans.txt
„Humans.txt“ ist sozusagen das Gästebuch einer Website. Hier können Entwickler:innen und Designer:innen Informationen zu sich selbst oder ihrem Team veröffentlichen. Das hat zwar nichts mit Suchmaschinenoptimierung zu tun, zeigt aber, dass hinter jeder Website Menschen mit Herzblut stecken. Aber beeil dich, bevor die Roboter unsere Plätze einnehmen!
Crawler
Lass mich dir von meinen kriechenden Freunden erzählen: Crawler sind kleine digitale Spinnen, die das World Wide Web durchsuchen, um Informationen über Websites zu sammeln. Sie durchstreifen das Netzwerk auf der Suche nach neuen Inhalten und Aktualisierungen. Im Grunde genommen sind sie die fleißigen Bienchen des Internets und tragen dazu bei, dass deine Website in den Suchergebnissen gefunden wird.
Keyword
Stell dir vor, Keywords sind wie ein Schatzkarte für Suchmaschinen, um den Schatz deiner Webseite zu finden. Wenn du die richtigen Wörter verwendest, kannst du dein Publikum anlocken wie ein Piratenkapitän auf der Suche nach Gold. Aber pass auf, verwende zu viele und die Suchmaschinen werden misstrauisch. Finde das perfekte Gleichgewicht und du wirst reich belohnt werden!
Longtail-Keyword
Longtail Keywords sind die Wallflowers unter den Keywords: Sie sind zwar nicht so populär wie ihre kurzen Verwandten, aber wenn man sie erstmal kennenlernt, kann man nicht mehr ohne sie leben. Diese Suchbegriffe sind sehr spezifisch und haben oft ein niedriges Suchvolumen, aber sie können dennoch wertvollen Traffic und Conversions generieren.
Keyword-Stuffing
Keyword-Stuffing ist das ungesunde Fast Food der Suchmaschinenoptimierung. Dabei werden Keywords zwanghaft und übermäßig in den Texten platziert, um bei den Suchmaschinen höher zu ranken. Das schmeckt zwar kurzfristig gut, aber auf lange Sicht schadet es der Gesundheit (des Rankings).
Keyword-Dichte
Ganz schön eng hier! Die Keyword-Dichte gibt an, wie oft ein bestimmtes Wort auf einer Website vorkommt. Aber Vorsicht: Zu viel des Guten kann zu Keyword-Spamming führen und die Lesbarkeit deiner Texte verschlechtern. Halte das Gleichgewicht zwischen Suchmaschinenoptimierung und Lesbarkeit, sonst kann es ganz schön eng werden!
Keyword-Research
Keyword-Research ist wie das Schürfen nach Diamanten – nur dass du statt Diamanten nach den besten Keywords für deine Website suchst. Es ist ein wichtiger Schritt für eine erfolgreiche SEO-Strategie und hilft dabei, die Sprache deiner Zielgruppe zu verstehen. Finde die besten Keywords und lass deine Website strahlen wie ein Diamant!
Fazit
Wenn du eine professionelle und ansprechende Website oder Werbematerialien benötigst, ist es wichtig, dass du eine gemeinsame Sprache mit deinen Kreativdienstleister:innen sprichst. Mit unserem Design-Lexikon musst du dich nicht länger wie ein Außenstehender fühlen. Nun kannst du nicht nur einfacher mit deinem Team oder Kreativdienstleister:innen kommunizieren, sondern auch bessere Ergebnisse erzielen. Du wirst in der Lage sein, detaillierte Anweisungen und Feedback zu geben, um sicherzustellen, dass deine Vorstellungen und Wünsche auch so umgesetzt werden, wie du diese in deinen Visionen hast! Auf diese Weise kannst du sicherstellen, dass deine Website oder Werbematerialien deine Marke und deine Botschaft bestmöglich widerspiegeln.
Wenn du Fragen hast oder weitere Begriffe kennst, die wir in unserem Guide vergessen haben sollten, zögere nicht, es uns in den Kommentaren zu erzählen. Wir freuen uns darauf, von dir zu hören und dir bei deinem nächsten Designprojekt helfen zu können.
Als Kreativ- und Werbeagentur in Wilhelmshaven stehen wir dir gerne mit unserem umfangreichen Know-how im Bereich Design und Marketing zur Verfügung. Wir unterstützen dich dabei, deine Marke zu stärken und deine Zielgruppe auf dich aufmerksam zu machen. Kontaktiere uns jetzt und lass uns gemeinsam dein nächstes Projekt angehen!
Das war unser Beitrag zu „Das Kopf & Hand Design-Lexikon: Ein Design-Glossar von A-Z„.
0 Kommentare