PUNKT3

PUNKT3 (Punkte) [ˈpʊŋktə] ist eine Vorlage für Ihre persönliche Website, die mit Nuxt und Tailwind CSS erstellt wurde.

Die gesamte Designphilosophie dieser Frontend-Vorlage basiert auf Punkten. Die Zahl 3 steht für die drei Hauptaspekte des Frameworks:

• Persönliche Website
• Portfolio
• Blog

Es präsentiert ein neuartiges Design, das durch einen sanften Retro-Brutalismus-Stil besticht. Jedes Detail wurde sorgfältig durchdacht, um eine nutzungsfreundliche Bedienung zu gewährleisten. Auf dem Desktop und auf mobilen Geräten.

Es kann direkt ausprobiert werden, denn Sie befinden sich in diesem Moment auf einem Portfolio, das mit PUNKT3 erstellt worden ist!

PUNKT3 wurde von Anfang an für alle Darstellungsgrößen optimiert.

Besonders bei Webanwendungen ist es wichtig, bereits von Beginn an auf eine flexible Anpassung an verschiedene Bildschirmgrößen zu achten und diese entsprechend umzusetzen.

Daher besitzt PUNKT3 eine maximale Breite, um Nutzenden beim Lesen keine zu langen Zeilen anzubieten. Gleichzeitig nutzt es den vorhandenen Platz effektiv, indem die beiden Menüs großzügig neben dem eigentlichen Inhalt positioniert werden. Sobald sich die verfügbare Anzeigefläche verkleinert, wandert das Untermenü automatisch unter das Hauptmenü, um ausreichend Platz für den Inhalt zu schaffen.

Bei kleinsten Anzeigengrößen, etwa bei Smartphones, werden die Menüs in einer Menüschaltfläche zusammengefasst. Besonders hervorzuheben ist dabei, dass sich diese Schaltfläche in der unteren rechten Ecke befindet und nicht, wie leider häufig noch üblich, in einer der oberen Ecken. Durch die Positionierung unten rechts bleibt der Menüknopf auch bei einhändiger Bedienung stets bequem erreichbar.

Sanfter Retro-Brutalismus als angenehme Nutzungserfahrung

Mit dem eigens definierten Konzept des „sanften Retro-Brutalismus“ wollte ich bewusst ein angenehmes und freundliches Nutzungserlebnis schaffen. Klassischer Brutalismus bietet oft klare Strukturen, wirkt aber häufig aggressiv und anstrengend. Mein Ansatz kombiniert dagegen aufgeräumte und klare Gestaltung mit weichen, abgerundeten Formen, subtilen Animationen und pastellfarbenen Akzenten. Dies erzeugt eine behagliche Atmosphäre und animiert Nutzende, länger in der Anwendung zu verweilen.

Bewusst habe ich mich gegen eine sogenannte One-Page-Anwendung entschieden, da dies häufig zu „Scroll-Müdigkeit“ führen kann. Stattdessen habe ich Podinu klar strukturiert und in mehrere Seiten untergliedert, um die Aufmerksamkeit der Nutzenden auf jeweils relevante Inhalte zu lenken. Dabei besteht zwar eine gewisse Gefahr von „Klickmüdigkeit“, dieser begegnete ich aber mit reduziertem Einsatz von Klickinteraktionen und abwechslungsreichen Hover-Animationen, die gezielt zum Interagieren anregen. Abgesehen von Seitenwechseln und dem mobilen Menü sind alle Informationen jederzeit sichtbar, sodass nichts verborgen bleibt oder erst durch zusätzliche Klicks sichtbar gemacht werden muss.

Als wiederkehrendes gestalterisches Element habe ich Punkte gewählt, da sie einfach umzusetzen sind und im Webdesign nicht übermäßig verbreitet sind. Zudem arbeite ich gezielt mit drei Hauptfarben, um Interaktivität und Orientierung deutlich zu machen:

• Rot signalisiert stets Interaktionsmöglichkeiten und lenkt somit intuitiv auf klickbare Elemente.
• Orange markiert wichtige, aber nicht interaktive Elemente, beispielsweise ausgewählte Zustände oder hervorgehobene Informationen.
• Blau dient primär dekorativen Zwecken und unterstützt dabei, einzelne Komponenten visuell abzugrenzen.

Zusätzlich führe ich Nutzende mit auffälligen, gepunkteten Linien gezielt durch die Anwendung. Diese visuellen Pfade machen interaktive oder zusammenhängende Elemente deutlich und sorgen dafür, dass Inhalte einfach und schnell erfasst werden können.

Was neu ist

• Themes
• Dunkelmodus
• animierte Icons
• Nuxt-Studio
• Anpassungen für Safari
• Drittanbieter-Anbindung für E‑Mail-Versand