Archiv

Alle Artikel

Hier stehen alle Ratgeber und Artikel von PlanetPixel, geordnet nach Themenwelt. Jede Themenwelt beginnt mit einem Überblick, die Artikel darunter gehen in die Tiefe: vom passenden Farbschema über Bildgrößen bis zur Checkliste für den Relaunch.

11 Themenwelten · 32 Artikel

Webdesign-Grundlagen

Hierarchie, Raster, Kontrast und Konsistenz: die Prinzipien, nach denen gute Websites aufgebaut sind, und wie Sie sie im eigenen Projekt anwenden.

  • Responsive WebdesignMobile First, flexible Raster, Breakpoints und Touch-Ziele: wie Websites auf dem Smartphone genauso gut funktionieren wie am großen Monitor.
  • NavigationVon der Inhaltsinventur bis zum mobilen Menü: wie eine Navigation entsteht, die Besucher ohne Nachdenken bedienen.
  • Landingpage-AufbauEin Ziel, eine Botschaft, eine Hauptaktion: welche Bausteine eine Landingpage braucht und in welcher Reihenfolge sie überzeugen.
  • Webdesign-Trends 2027Große Typografie, Bento-Raster, sanfte Übergänge und Barrierefreiheit als Standard: welche Trends Bestand haben und welche Effekte Sie getrost auslassen können.
  • Goldener Schnitt und RasterProportionen und Raster geben Layouts Ordnung. Was am Goldenen Schnitt dran ist, was Mythos ist und wie ein Spaltenraster in der Praxis hilft.

Webdesign-Tipps

Konkrete Verbesserungen für neue und bestehende Websites: vom ersten Bildschirm über Lesbarkeit und Bilder bis zu Buttons, mit Checkliste zum Abhaken.

  • WeißraumFreier Raum gruppiert Inhalte, lenkt den Blick und macht Texte lesbar. So setzen Sie Abstände systematisch statt nach Gefühl.
  • Above the FoldÜberschrift, Nutzen, Hauptaktion, Beleg: was Besucher ohne Scrollen sehen sollten und welche Elemente den Startbereich verstopfen.
  • Call-to-Action-ButtonsWelche Farbe, welcher Text, wie groß und wo: so werden Buttons als Hauptaktion erkannt und auch mit Tastatur und Finger gut bedient.
  • MicrointeractionsEin Häkchen, das sich setzt, ein Button, der nachgibt: Wie kleine Rückmeldungen Bedienung verständlicher machen, ohne zu nerven oder zu bremsen.

Typografie

Schriftklassen, Größen, Zeilenabstand und Zeilenlänge, Schriftpaare und Webfonts: wie Texte im Web gut aussehen und mühelos lesbar bleiben.

  • Schriftarten kombinierenZwei Schriften, die sich ergänzen statt beißen: nach welchen Regeln Sie Font-Paare wählen, welche Kombinationen sich bewährt haben und wie Sie sie testen.
  • Google Fonts lokal einbindenSchriftdateien herunterladen, per @font-face selbst ausliefern und versteckte Aufrufe zu Google finden: die Anleitung für datenschutzfreundliche Webfonts.

Farbgestaltung

Farbkreis, Farbschemata, Farbwirkung und Farbcodes: wie eine stimmige Palette für Website und Marke entsteht und worauf es beim Kontrast ankommt.

  • Farbschema findenVom Logo, vom Foto, vom Farbkreis oder vom Wettbewerb aus: sieben Wege zu einer Palette, die zur Website passt und im Alltag funktioniert.
  • Dark Mode gestaltenWarum Invertieren nicht reicht, welche Hintergrundtöne funktionieren, wie Akzentfarben angepasst werden und wie der Dunkelmodus technisch umgesetzt wird.

Bildformate 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.

  • Bildgrößen für WebsitesWie breit muss ein Titelbild sein, wie groß ein Beitragsbild, wie klein darf ein Galerie-Vorschaubild werden? Die wichtigsten Pixelmaße mit Begründung.
  • WebP, AVIF, JPG oder PNGFotos, Screenshots, Grafiken mit Transparenz: welches Bildformat für welches Motiv die beste Wahl ist und wie Sie mehrere Formate mit Rückfall ausliefern.
  • BildlizenzenKostenlos heißt nicht rechtefrei: was Plattformlizenzen und Creative Commons erlauben, wo Rechte Dritter greifen und wie Sie Lizenzen dokumentieren.
  • Favicon erstellenVom Logo zum kleinen Symbol im Browser-Tab: welche Favicon-Dateien heute genügen, wie Sie sie gestalten und mit wenigen Zeilen HTML einbinden.
  • Icons im WebdesignWelcher Icon-Stil zu welcher Website passt, warum SVG Icon-Fonts abgelöst hat, wie Icons zugänglich werden und welche Lizenzen freie Icon-Sets haben.
  • SVG im WebdesignLogos, Icons und Grafiken, die auf jedem Bildschirm gestochen scharf bleiben: wann SVG das richtige Format ist und wie Sie es schlank einbinden.
  • Ladezeit durch Bilder und SchriftenBilder und Webfonts machen oft den größten Teil einer Seite aus. Wie sie LCP und CLS beeinflussen und mit welchen Handgriffen die Seite spürbar schneller wird.

Logo 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.

  • Was kostet ein Logo?Vom Logo-Generator bis zur Markenentwicklung durch eine Agentur: welche Preisrahmen üblich sind, was im Preis steckt und welche Kosten oft vergessen werden.
  • Corporate Design MinimumKein Handbuch mit 80 Seiten, sondern fünf Bausteine: So legen Selbstständige ein schlankes Erscheinungsbild fest, das überall gleich aussieht.

Barrierefreies Webdesign

Kontraste, Alternativtexte, Tastaturbedienung und klare Formulare: was eine Website zugänglich macht und welche Pflichten das BFSG seit Juni 2025 mit sich bringt.

  • WCAG-KontrastwerteWas 4,5 zu 1 bedeutet, welche Elemente welchen Wert brauchen, wie die Formel funktioniert und wie Sie Farbpaare in wenigen Minuten prüfen.

Print und Grafikdesign

Vom Bildschirm aufs Papier: wie Sie Flyer, Plakate und Booklets druckfertig anlegen, mit CMYK, Beschnitt, ausreichender Auflösung und sauberem PDF.

  • RGB, CMYK, PantoneWarum das Bildschirm-Violett im Druck stumpf wird und wie Sie eine Markenfarbe für Web, Office und Druckerei richtig festlegen.

Social-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.

  • Social-Media-Bildgrößen 2027Profilbild, Titelbild, Beitrag, Story und Link-Vorschau: die gängigen Pixelmaße der großen Netzwerke in einer Übersicht, mit Safe Zones und Exporttipps.

Design-Werkzeuge

Welche Programme es für Webdesign, Bildbearbeitung, Vektorgrafik und Layout gibt, was kostenlos ist und welche kleinen Helfer im Alltag Zeit sparen.

  • Wireframe, Mockup, PrototypStruktur, Aussehen, Verhalten: was die drei Entwurfsstufen unterscheidet und welche Sie für Ihr Projekt wirklich brauchen.
  • Figma für EinsteigerVon der ersten Datei bis zum klickbaren Prototyp: die wichtigsten Funktionen und Tastenkürzel für den Einstieg in Figma.
  • Moodboard erstellenWie aus einer vagen Vorstellung eine sichtbare Gestaltungsrichtung wird: Schritt für Schritt zum Moodboard, das Diskussionen abkürzt und Entwürfe lenkt.
  • Styleguide und DesignsystemFarben, Schriften, Abstände und Komponenten einmal festlegen und überall gleich verwenden: wie ein Styleguide entsteht und wann daraus ein Designsystem wird.
  • Microsoft Excel lernenZehn Excel-Grundlagen, die im Alltag am meisten bringen, erklärt an Beispielen aus Gestaltungsprojekten: Kalkulation, Zeitplan, Bild- und Inhaltslisten.

Webdesigner beauftragen

Ein neutraler Leitfaden für Auftraggeber: wie Sie ein Briefing schreiben, Angebote vergleichen, Kosten einordnen und im Vertrag die wichtigen Punkte regeln.

  • Relaunch-ChecklisteVon der Bestandsaufnahme bis zur Kontrolle nach dem Livegang: zwölf Schritte, mit denen ein Relaunch weder Besucher noch Suchmaschinen-Sichtbarkeit kostet.
  • Baukasten oder individuellSelbst klicken oder gestalten lassen? Eine nüchterne Gegenüberstellung von Baukasten, Content-Management-System mit Theme und individueller Website.