Über Web, Tech, Games, Art,
Musik, Code & Design

Alle Beiträge zum Thema "Design"

27. Dezember 2025

Video-Effekt „Blob-Tracking“ – kostenloses Browsertool

Blob Tracking ist ein Verfahren der Computer Vision, bei dem bewegte Objekte oder Bildbereiche erkannt, lokalisiert und über mehrere Frames hinweg verfolgt werden. Die sogenannten Blobs entstehen dabei als zusammenhängende Gruppen ähnlicher Pixel, die sich etwa durch Farbe, Helligkeit oder Textur definieren lassen. Einsatz findet diese Technik unter anderem bei Interaktionen, Zählungen und Analysen, etwa […]

27. Dezember 2025

Kostenlose minimalistische Design-Vektor-Maps

Auf anvaka.github.io/city-roads/ kannst du minimalistische Straßenkarten von jeder beliebigen Stadt erzeugen und als svg exportieren. Die Karten werden aus den Daten von OpenStreetMaps generiert und können in beliebigen Projekten eingesetzt werden, z.B. als Poster, auf Websites oder im Editorial Design. anvaka.github.io/city-roads/

20. Dezember 2025

Die Grundlagen der Typografie in Print & Web

Typografie ist mehr als eine ästhetische Nebensache – sie ist ein zentrales Werkzeug der Kommunikation. Ob im Print oder im Web: Typografische Regeln sorgen dafür, dass Inhalte lesbar, verständlich und glaubwürdig wirken. Gute Typografie führt das Auge. Durch klare Hierarchien, saubere Abstände und stimmige Zeilenlängen wird Text nicht nur schöner, sondern auch schneller erfassbar. Leser:innen […]

1. Oktober 2025

Kostenlose Mockups – Magazine, iPhones, iMacs, T-Shirts…

Auf www.free-mockup.com gibt es unzählige sehr gute Photoshop-Mockups, die auch kommerziell genutzt werden dürfen. Wie z.B. dieses Magazin-Mockup: Oder dieses iPhone-Air-Mockup: Dein eigenes Design, kannst du mit wenigen Klicks im Smartobject in Photoshop einfügen. Auch der Hintergrund kann problemlos geändert werden. Sehr praktisch.

21. April 2024

INTRCLCK – Ein Uhrzeit-Bildschirmschoner

Hier hatte ich schon geschrieben, wie man Websites als Screensaver für den Mac nutzen kann. Hierzu muss lediglich das zip „WebViewScreenSaver-2.0.zip“ runtergeladen werden: https://github.com/… Unter folgender URL, findest du eine Website, die als Uhrzeit-Bildschirmschoner eingesetzt werden kann: https://www.fbnfrtg.de/rndm/intrclck/

24. März 2024

Visily – kostenloses Wireframing-Tool mit KI-Unterstützung

Visily ist ein Wireframing-Tool, mit dem du einfach und schnell Screendesigns für Websites oder Apps erstellen kannst und ist somit vergleichbar mit Adobe XD, Figma & Co. Eine große Anzahl an Templates ermöglicht den schnellen Einstieg und Start. Mit der StickyNotes-Funktion können Kolleg*innen oder Kunden ihre Kommentare direkt im Entwurf platzieren. Eine Besonderheit von Visily, […]

30. Dezember 2023

Bootstrap-Layout Text und Bild 50/50

Ein beliebtes Gestaltungselement auf Websites ist die Kombination aus Text und Bild, wobei das Bild die Hälfte der Bildschirmbreite einnehmen soll, der Text aber wiederum innerhalb des Containers bleiben soll. Demo: www.fbnfrtg.de/demo/text-und-bild-50-50.html Hier ist das perfekte Snippet für diesen Zweck: Mobil werden die Elemente gestapelt, wobei das Bild immer vor dem Text dargestellt wird, unabhängig […]

12. November 2023

So kannst du Logos auf einer Website gleichmäßig darstellen

Endlich habe ich die ultimative Lösung gefunden um Logos auf einer Website darzustellen. Viele Jahre habe ich mit „float“, „margin“, Spacern & Background-Images gearbeitet und das Ergebnis war nicht immer zufriedenstellend. Die CSS-Eigenschaften „display: grid“, „gap“ & „aspect-ratio“ sind hier echte Game-Changer. Mit folgendem Code kannst verschiedenste Logo – egal hoch Hoch oder Querformat – […]

17. Oktober 2023

Farbpaletten – praktisches Hilfsmittel und Inspirationsquelle

Bei der Entwicklung eines (Screen-)Designs, müssen viele Entscheidungen getroffen werden. Layout, Raster, Schriften, Größen uvm… Wenn die Farben nicht vom Kunden oder vom Projekt vorgegeben sind, lohnt es sich, mal einen Blick auf fertige Farbpaletten zu werfen. So erhältst du auf einen Blick Farbvorschläge, dazu passende Farben und einen ersten Eindruck, wie die Farben zusammen […]

16. Oktober 2023

Eigene Farben im Gutenberg-Editor definieren / Span-Styles in WordPress

Wie man Blöcken im Gutenberg-Editor eigene Klassen zuweisen kann, hatte ich hier schon mal beschrieben. Hierbei wird die Klasse jedoch immer auf den gesamten Block angewendet. Will man eine Klasse jedoch nur auf einzelne Wörter anwenden, z.B. um sie in einer anderen Farbe darzustellen, muss man einen anderen Weg gehen. Markiere das gewünschte Wort und […]
Datenschutz Impressum

FRTG - Traces
Jetzt bei Apple Music & Spotify.