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

Alle Beiträge zum Thema "Design"

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 […]

24. August 2023

So erstellst du eine Prozessgrafik mit HTML & CSS.

Eine Prozessgrafik (oder Ablaufdiagramm) ist ein sinnvolles Gestaltungselement um Abläufe zu visualisieren. Z.B. so: Step 1 Lorem ipsum dolor sit amet consectetur adipisicing elit. Step 2 Exercitationem officiis doloribus quo pariatur reiciendis aliquid, laborum natus quibusdam? Step 3 Fugit eum aspernatur maiores ab odio voluptas explicabo inventore suscipit nobis accusamus. Für die Darstellung der Pfeile […]

27. Juli 2023

Schicke kostenlose Icons

Seeehr viele schicke, zeitgemäße Icons gibt es auf www.streamlinehq.com. Einige Sets sind kostenlos, wer mehr braucht, kann für 20$/Monat ein Premium-Paket buchen. Besonders praktisch: Für den Mac gibt es Streamline auch als App. Damit kannst du die Icons direkt per Drag & Drop als Vektorgrafik in dein Grafikprogramm ziehen. Tipp: Wenn du ein Icon direkt […]

28. Juni 2023

DearFlip macht aus PDFs schicke FlipBooks

Endlich mal ein FlipBook-Plug-in, das schlicht, schick und simpel ist, nicht mit Werbung oder Wasserzeichen nervt und „out of the box“ genau so funktioniert, wie man sich das vorstellt: Dearflip Dearflip macht aus einem PDF in wenigen Sekunden ein schickes FlipBook. Und das Beste: Als WordPress-Plug-in ist es sogar kostenlos. Für den Einsatz außerhalb von […]

27. Juni 2023

CSS PageFlip-Effekt für einen Magazin-Titel

Mit folgendem HTML-Snippet lässt sich schnell und unkompliziert eine schicke kleine Animation erzeugen, die einen kleinen Einblick auf Seite 3 eines Print-Magazins gewährt und z.B. auf das PDF des Magazins verlinken könnte.

Datenschutz Impressum