Canva macht satt – aber nicht glücklich: Gedanken über echtes Webdesign

Es fiel irgendwann auf, dass Premium-Websites und kuratierte Blogs fast immer „teurer“ wirken als ein einfacher Hobby-Blog. Dabei liegt der Unterschied oft nicht an der Kamera, nicht am Motiv und nicht einmal am Talent – sondern an der Art, wie Text und Bild zusammengeführt werden.

3D Typography Explosion
MAKI
AI Image · Midjourney

3D Typography
Explosion

↓ Prompt kopieren
Abstract 3D typography explosion, letters floating in a dark void, mix of serif and sans-serif fonts, chaotic but aesthetic composition. Tiny and huge letters, "A", "b", "{", "}", code symbols. Deep black background with atmospheric fog. Minimal sharp accent lighting in red #d20404. Macro photography style, shallow depth of field, bokeh effect, hyper-realistic, 8k, editorial design style.
Midjourney · Gemini
--ar 2:3 --v 6.0

Texte, die direkt in Canva oder ähnlichen Tools auf ein Foto geschrieben werden, funktionieren hervorragend für Social Media. Schnell, sichtbar, sofort verständlich. Für eine Website jedoch entsteht dabei oft ein anderes Gefühl: Die Schrift wirkt wie ein fester Bestandteil des Bildes, nicht wie ein Element der Gestaltung. Sie lässt sich nicht flexibel anpassen, reagiert nicht auf Bildschirmgrößen und verliert schnell an Klarheit, sobald sich Auflösung oder Darstellung ändern.

✦ MAKI Photo Lab
Hobbyfotografie · Visuelle Geschichten

MAKI

Blog · Fotografie · Inspirationen

AI… AI… — manchmal klingt das ja fast wie ein Seufzer aus einem Sci-Fi-Film 😄. Aber ganz ehrlich: ein ziemlich genialer Helfer, und nicht nur bei der Arbeit. Gefühlt schiebt er ständig Projekte ein Stück weiter Richtung Realität. Im eigenen Fall ganz konkret: beim Überlegen, wie Text sauber auf Fotografien platziert werden kann, ohne dass alles gleich nach Bastelstunde aussieht.

Genau hier beginnt der Unterschied zwischen einem „gebauten“ Layout und einer Grafiklösung.

maki-photo.html
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <style>
    .maki-photo {
      width: 100%;
      aspect-ratio: 2/3;
      overflow: hidden;
    }
  </style>
</head>
  </div>
</section>
<!-- overlay gradient -->
<div class="overlay"></div>
<h2 class="title">Fotografie</h2>
</div>
</body>
</html>
<img src="foto.webp" >
MAKI Foto im HTML
</img>
HTML · Fotografie · MAKI
Fotos neu erzählen —
mit Code als Gestaltungsmittel
Beim Arbeiten mit HTML und CSS wird Text nicht ins Bild „eingebacken“, sondern als eigenständige Ebene darübergelegt. Dadurch entsteht Struktur. Abstände, Zeilenhöhe, Padding, Kontraste und responsive Skalierung greifen ineinander wie ein System. Auf einem großen Monitor, auf einem Tablet oder auf einem Retina-Display bleibt die Typografie sauber, scharf und ruhig.
— Irina

Das ist einer der Gründe, warum redaktionelle Layouts so harmonisch wirken. Sie folgen Regeln:
klar definierte Grid-Systeme, konsistente Weißräume, einheitliche Schriftlogik und kontrollierte Proportionen. Nichts ist zufällig platziert. Selbst kleinste Details – etwa der Abstand zwischen Bildkante und Caption – tragen zur Gesamtwirkung bei.

Bei vielen Hobby-Blogs passiert das Gegenteil. Texte werden als Bildbestandteil behandelt, Abstände entstehen nach Gefühl, Schriftgrößen sind nicht aufeinander abgestimmt, und jedes Element funktioniert isoliert statt als Teil eines Systems. Das Ergebnis wirkt nicht unbedingt schlecht – aber oft unruhig, uneinheitlich und optisch „schwerer“.

Heide Bokeh RF 100mm
Natur · Makro · 2024

Bokeh

als Bildsprache —
warum ich dieses Objektiv liebe

RF 100mm Macro f/2.8

Erst beim intensiven Durchstöbern von Design-Plattformen wurde sichtbar, wie groß dieser Unterschied tatsächlich ist. Besonders inspirierend wirken derzeit Awwwards und Behance. Dort zeigt sich sehr deutlich, wie stark saubere Typografie, durchdachte Layout-Raster und responsive Strukturen die Wahrnehmung eines Projekts verändern können.

Interessant ist auch, dass moderne KI-Tools zunehmend eine Brücke zwischen Design und Code schlagen. Sie helfen, Layout-Ideen schneller zu verstehen, CSS-Strukturen zu erzeugen und komplexe Designprinzipien verständlich zu machen. Gerade für Hobby-Projekte entsteht dadurch ein neuer Zugang: weniger technischer Frust, mehr Raum für Gestaltung.

Trotzdem bleibt eine Erkenntnis besonders klar:
Gutes Webdesign entsteht nicht durch einzelne schöne Elemente, sondern durch ein konsistentes System. Ein Grid, das alles zusammenhält. Einheitliche Typografie. Kontrollierte Abstände. Und vor allem die Trennung von Inhalt und Darstellung.

Und genau hier endet für mich auch jeder Anspruch auf Professionalität. Ich bin keine Webdesignerin, keine Grafikerin, keine Agentur. Eher das Gegenteil: einfach jemand, der gerne abends im Internet sitzt, Layouts anschaut, Schriften testet und mit kleinen Ideen spielt. Ohne Auftrag, ohne Druck — nur aus Interesse.

Vielleicht ist es genau das, was den Reiz ausmacht. Nicht perfekt sein zu müssen. Sondern neugierig zu bleiben.

Inspiration finde ich dabei selten im leeren Kopf, sondern eher draußen im Netz. Gute Typografie, saubere Layouts und spannende Ideen lassen sich heute überall entdecken — auf Design-Plattformen, in kuratierten Galerien oder sogar auf Pinterest, auch wenn die Seite längst kein Geheimtipp mehr ist.

Ich sammle dort Eindrücke, speichere Beispiele und schaue mir an, wie andere Probleme lösen. Oft entsteht daraus kein eigenes „geniales Konzept“, sondern eher eine Art stilles Lernen durch Nachvollziehen. Vieles probiere ich einfach nach — nicht grafisch per Hand, sondern über Code.

Rothenburg ob der Tauber RF 28mm
Reise · 2025

Rothenburg ob der Tauber

Mittelalterliche Gassen —
weit und nah zugleich

RF 28mm f/2.8

Deshalb entsteht langsam eine klare Entscheidung: Im eigenen Blog wird künftig konsequent mit HTML gearbeitet. Wenn eine Fotografie eine Bildunterschrift bekommt, soll diese nicht mehr als Teil der Grafik existieren, sondern als echtes Layoutelement. Nur so bleibt sie flexibel, sauber skalierbar und ruhig im Gesamtbild.

Pomeranian Hundephotografie
MAKI
Portrait · Tier · 2025

Hundefotografie Mein liebstes Modell

RF 70–200mm f/2.8

Texte im Web sind nie endgültig festgelegt. Alles bleibt beweglich: Layouts lassen sich verschieben, Schriftarten austauschen, Proportionen anpassen. Inspiration findet sich in Beispielen, in Templates, in kleinen Details anderer Seiten — und oft entsteht daraus Schritt für Schritt ein eigener Stil.

P.S. In anderen Plattformen, besonders innerhalb von Google-basierten Strukturen, sind diese Möglichkeiten stark eingeschränkt. Dort lassen sich bestehende Beiträge kaum noch verändern. Variationen in der Typografie, präzise Positionierungen oder feine Abstandslogik sind praktisch nicht umsetzbar. Die Gestaltung bleibt fest eingebunden und damit statisch.

Aktuelle Schriftkombination · MAKI Blog  —  Georgia als Display  +  Inter als Text
Display · Serif
Georgia
Display Hallo, Welt.
Italic Fotografie
H2 Visuelle Geschichten
Quote „Das beste Stück Weser"
Text · Sans-serif
Inter
800 MAKI
700 Bokeh als Bildsprache
500 UC Natur · Makro · 2024
300 Mit 100 mm rücken kleine Dinge ganz nah.
Georgia
Hero · Seitentitel
Photo
Archive
Georgia Italic
Zitate · Akzente
„Mein liebstes
Objektiv"
Inter 500 UC
Kategorien · Labels
Reise · Rothenburg · 2025
Inter 300
Fließtext · Beschreibung
Das Teleobjektiv schafft Nähe, ohne zu stören. Besonders bei Tieren macht das den Unterschied.

Jeder Beitrag wird dabei fast wie ein eigener kleiner Design-Test: Wie wirkt eine Caption mit mehr Weißraum? Wie verändert sich die Wahrnehmung, wenn Text nicht direkt auf dem Motiv liegt, sondern bewusst daneben positioniert wird? Wie ruhig kann ein Bild wirken, wenn Typografie nicht dekoriert, sondern strukturiert?

01 · Editorial Dark
Playfair Display
+ DM Sans
Display
Licht &
Schatten
Subheading
wie Fotografie entsteht
Fließtext
Das Licht fällt schräg durch das Fenster. Genau dieser Moment macht den Unterschied.
Label
Reise · 2025
Vogue · Monocle · NYT Magazine · Editorial
02 · Warm & Organic
Fraunces
+ Epilogue
Display
Stille &
Weite
Subheading
Notizen aus dem Alltag
Fließtext
Kleine Dinge erzählen große Geschichten. Man muss nur genau hinschauen.
Label
Journal · Stillleben
Substack · Are.na · Readymag Blog · Personal · Essay
03 · High Contrast
Cormorant Garamond
+ Outfit
Display
Form &
Stille
Subheading
Architektur des Moments
Fließtext
Zwischen den Linien liegt die eigentliche Komposition. Das Objektiv entscheidet.
Label
Architektur · Reise
Dezeen · Wallpaper · Kinfolk Art · Architecture · Fine Art
01
01 · New Editorial
Instrument Serif
+ Space Grotesk
Display
Nah &
Fern
Subheading
was das Objektiv entscheidet
Fließtext
Zwischen Brennweite und Gefühl liegt der Moment, den kein Algorithmus plant.
Label
Makro · 2026
Linear · Loom · AnthropicTech · AI · Product
02
02 · Brutalist Editorial
Bebas Neue
+ Newsreader
Display
Licht
Schatten
Subheading
wenn Stille zur Komposition wird
Fließtext
Der Kontrast zwischen Schrift und Bild erzeugt Spannung. Genau das ist die Absicht.
Label
Portrait · Reise
032c · Fantastic Man · i-DZine · Fashion · Culture
03
03 · Future Serif
DM Serif Display
+ Syne
Display
Zeit &
Raum
Subheading
eine visuelle Sprache entwickeln
Fließtext
Fotografie ist keine Technik. Sie ist eine Art zu sehen — und zu denken.
Label
Architektur · Nacht
Vercel · Framer · CosmosFuture · Dark · Digital

Es bleibt letztlich ein offener Prozess ohne klares Ende. Manche Ideen werden weiterverfolgt, andere bleiben kleine Experimente. Und oft entstehen neue Impulse ganz nebenbei — beim Fotografieren, beim Stöbern in inspirierenden Projekten oder beim ruhigen Durchsehen von Plattformen wie Behance oder Awwwards.

Was als Nächstes kommt, lässt sich deshalb nie genau planen. Mal ist es eine neue visuelle Entdeckung, mal ein technisches Detail, manchmal einfach nur ein Bild, das eine neue Richtung vorgibt.

Bis dahin bleibt die Neugier der wichtigste Antrieb — und der nächste Gedanke wartet wahrscheinlich schon irgendwo im nächsten offenen Tab:-)

Journal
MAKI · Journal

Deine Geschichten

warten auf dich.

Im Journal schreibe ich über Fotografie, Reisen, kleine Entdeckungen und die Dinge, die mich bewegen. Persönlich, ehrlich und mit viel Liebe zum Detail.

Fotografie Reise Stillleben Gedanken KI & Technik
MAKI Photo Lab
Weiter
Weiter

7 radikale Fotografie-Trends, die 2026 definieren