Gestaltung verstehen, Pixel für Pixel.
PlanetPixel erklärt, wie gute Websites und Grafiken entstehen: von Raster, Schrift und Farbe über Bildformate und Auflösung bis zu Logo, Druckdaten und barrierefreien Seiten. Unabhängig, ohne Fachchinesisch und mit vielen Beispielen.
Vier Prinzipien, die fast jedes Layout trägt
- 01
Hierarchie
Das Wichtigste zuerst und am größten. Größe, Gewicht und Position sagen, in welcher Reihenfolge gelesen wird.
Mehr dazu - 02
Kontrast
Unterschiede machen Inhalte sichtbar: hell und dunkel, groß und klein, ruhig und laut. Und Text muss lesbar sein.
Mehr dazu - 03
Raster
Spalten, Abstände und Achsen ordnen eine Seite. Ein Raster spart Entscheidungen und lässt Layouts ruhig wirken.
Mehr dazu - 04
Konsistenz
Gleiches sieht gleich aus. Wiederkehrende Farben, Schriften und Bausteine machen eine Website verständlich.
Mehr dazu
Alles rund um Web, Grafik und Pixel
- 01Webdesign-Grundlagen
Hierarchie, Raster, Kontrast und Konsistenz: die Prinzipien, nach denen gute Websites aufgebaut sind, und wie Sie sie im eigenen Projekt anwenden.
- 02Webdesign-Tipps
Konkrete Verbesserungen für neue und bestehende Websites: vom ersten Bildschirm über Lesbarkeit und Bilder bis zu Buttons, mit Checkliste zum Abhaken.
- 03Typografie
Schriftklassen, Größen, Zeilenabstand und Zeilenlänge, Schriftpaare und Webfonts: wie Texte im Web gut aussehen und mühelos lesbar bleiben.
- 04Farbgestaltung
Farbkreis, Farbschemata, Farbwirkung und Farbcodes: wie eine stimmige Palette für Website und Marke entsteht und worauf es beim Kontrast ankommt.
- 05Bildformate und Auflösung
Was ein Pixel ist, warum dpi im Web kaum zählt, welche Bildgröße wirklich nötig ist und welches Format zu Foto, Logo, Screenshot oder Icon passt.
- 06Logo gestalten
Wortmarke, Bildmarke oder Kombination: wie ein Logo entsteht, welche Dateien Sie am Ende brauchen und was es mit Nutzungsrechten und Markenschutz auf sich hat.
- 07Barrierefreies Webdesign
Kontraste, Alternativtexte, Tastaturbedienung und klare Formulare: was eine Website zugänglich macht und welche Pflichten das BFSG seit Juni 2025 mit sich bringt.
- 08Print und Grafikdesign
Vom Bildschirm aufs Papier: wie Sie Flyer, Plakate und Booklets druckfertig anlegen, mit CMYK, Beschnitt, ausreichender Auflösung und sauberem PDF.
- 09Social-Media-Profil gestalten
Profilbild, Titelbild und Bio als kleine Visitenkarte: wie Sie Profile gestalterisch stimmig anlegen und dabei persönliche Daten und Konto schützen.
- 10Design-Werkzeuge
Welche Programme es für Webdesign, Bildbearbeitung, Vektorgrafik und Layout gibt, was kostenlos ist und welche kleinen Helfer im Alltag Zeit sparen.
- 11Webdesigner beauftragen
Ein neutraler Leitfaden für Auftraggeber: wie Sie ein Briefing schreiben, Angebote vergleichen, Kosten einordnen und im Vertrag die wichtigen Punkte regeln.
Welches Bildformat wofür?
Die Wahl des Formats entscheidet über Dateigröße, Schärfe und Transparenz. Die Tabelle zeigt die Faustregeln, der Ratgeber Pixel, Auflösung und Bildformate erklärt die Hintergründe, von Pixeldichte bis Komprimierung.
| Format | Typischer Einsatz | Kompression |
|---|---|---|
| JPG | Fotos ohne Transparenz | verlustbehaftet |
| PNG | Grafiken, Screenshots, Transparenz | verlustfrei |
| WebP | Fotos und Grafiken im Web | beides möglich |
| AVIF | Fotos mit sehr kleiner Datei | beides möglich |
| SVG | Logos, Icons, Illustrationen | Vektor, skalierbar |
Zuletzt erschienen
- Responsive Webdesign
Mobile First, flexible Raster, Breakpoints und Touch-Ziele: wie Websites auf dem Smartphone genauso gut funktionieren wie am großen Monitor.
- Microsoft Excel lernen
Zehn Excel-Grundlagen, die im Alltag am meisten bringen, erklärt an Beispielen aus Gestaltungsprojekten: Kalkulation, Zeitplan, Bild- und Inhaltslisten.
- Bildgrößen für Websites
Wie breit muss ein Titelbild sein, wie groß ein Beitragsbild, wie klein darf ein Galerie-Vorschaubild werden? Die wichtigsten Pixelmaße mit Begründung.
- Farbschema finden
Vom Logo, vom Foto, vom Farbkreis oder vom Wettbewerb aus: sieben Wege zu einer Palette, die zur Website passt und im Alltag funktioniert.
- WCAG-Kontrastwerte
Was 4,5 zu 1 bedeutet, welche Elemente welchen Wert brauchen, wie die Formel funktioniert und wie Sie Farbpaare in wenigen Minuten prüfen.
- RGB, CMYK, Pantone
Warum das Bildschirm-Violett im Druck stumpf wird und wie Sie eine Markenfarbe für Web, Office und Druckerei richtig festlegen.
Seit 1999 im Netz, heute ein unabhängiger Ratgeber
Die Domain planetpixel.de ist eine der älteren deutschen Adressen rund um Gestaltung. Über die Jahre standen hier unterschiedliche Angebote verschiedener Betreiber. Heute nutzen wir sie für einen redaktionellen Ratgeber, der Gestaltung verständlich erklärt.
Wir sind keine Agentur, gestalten nichts im Auftrag und vermitteln keine Dienstleister. Wer eine Website oder ein Logo machen lassen möchte, findet im Ratgeber Webdesigner beauftragen eine neutrale Checkliste für Briefing, Angebot und Vertrag.
Über PlanetPixelWebdesign-GrundlagenTypografieFarbgestaltung
Fragen und Antworten
Was ist der Unterschied zwischen Webdesign und Grafikdesign?
Grafikdesign ist der Oberbegriff für visuelle Gestaltung, etwa Logos, Plakate, Verpackungen oder Bücher. Webdesign wendet diese Grundlagen auf Websites an und kommt mit eigenen Anforderungen dazu: verschiedene Bildschirmgrößen, Bedienung per Maus, Finger und Tastatur, Ladezeit und Barrierefreiheit.
Welche Programme brauche ich für den Einstieg?
Für erste Entwürfe reicht ein kostenloses Werkzeug. Figma läuft im Browser und ist für Webdesign verbreitet, für Bildbearbeitung gibt es GIMP, für Vektorgrafiken Inkscape. Wichtiger als die Software ist, die Grundlagen von Typografie, Farbe und Layout zu verstehen.
Welches Bildformat ist das beste für Websites?
Für Fotos sind WebP und AVIF meist die beste Wahl, weil sie bei gleicher Qualität deutlich kleiner sind als JPG. Logos und Icons gehören als SVG eingebunden, Screenshots mit viel Text können als PNG oder verlustfreies WebP sinnvoll sein.
Bietet PlanetPixel Webdesign oder Logos im Auftrag an?
Nein. PlanetPixel ist ein unabhängiger redaktioneller Ratgeber. Wir gestalten nichts im Auftrag, vermitteln keine Dienstleister und stehen in keiner Verbindung zu früheren Angeboten unter dieser Domain. Wie Sie einen passenden Dienstleister auswählen, erklärt der Ratgeber Webdesigner beauftragen.