1. Dizajn Filozofija: Estetika Povjerenja 1. Design Philosophy: Aesthetics of Trust 1. Designphilosophie: Ästhetik des Vertrauens

Dizajn nije samo ukras, već psihologija. Svaka odluka u paleti boja i tipografiji donesena je s ciljem izazivanja osjećaja smirenosti, stabilnosti i pristupačnosti. Design is not just decoration, but psychology. Every decision in the color palette and typography was made with the aim of evoking feelings of calmness, stability, and accessibility. Design ist nicht nur Dekoration, sondern Psychologie. Jede Entscheidung bei Farbpalette und Typografie zielte darauf ab, Ruhe, Stabilität und Zugänglichkeit zu vermitteln.

Paleta Boja Color Palette Farbpalette

Navy Blue

#1D3557 • Profesionalnost & Autoritet #1D3557 • Professionalism & Authority #1D3557 • Professionalität & Autorität

Cream

#FDFBF7 • Vizualna Mekoća #FDFBF7 • Visual Softness #FDFBF7 • Visuelle Weichheit

GOLD

PEACH

TEAL

Tipografija & Kontrast Typography & Contrast Typografie & Kontrast

Elegancija Elegance Eleganz

Playfair Display

Kombinacija fontova osigurava modernu čitljivost i čistoću informacija, ključnu za intuitivno korisničko iskustvo na svim uređajima. The font combination ensures modern readability and clarity of information, crucial for an intuitive user experience on all devices. Die Schriftkombination sorgt für moderne Lesbarkeit und Klarheit der Informationen, entscheidend für eine intuitive Benutzererfahrung auf allen Geräten.

Primarna Akcija

2. Tehnološki Stack: Povratak Osnovama 2. Tech Stack: Back to Basics 2. Tech Stack: Zurück zu den Grundlagen

U eri teških frameworka, odabrao sam "Vanilla" pristup radi performansi. Prioritet je bio stvoriti stranicu koja se učitava trenutno, bez obzira na snagu uređaja. In an era of heavy frameworks, I chose a "Vanilla" approach for performance. The priority was to create a page that loads instantly, regardless of device power. In einer Ära schwerer Frameworks habe ich mich aus Leistungsgründen für einen "Vanilla"-Ansatz entschieden. Priorität hatte eine Seite, die unabhängig von der Geräteleistung sofort lädt.

Semantika Semantics Semantik

Vanilla

Tailwind

// Zero-dependency animations
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('reveal-active');
    }
  });
});

3. UX i Motion Dizajn: Oživljavanje Sučelja 3. UX and Motion Design: Bringing the Interface to Life 3. UX und Motion Design: Schnittstelle zum Leben erwecken

Implementirao sam niz suptilnih interakcija kako bi navigacija bila fluidna i angažirajuća. Elementi ulaze u fokus tek kada postanu relevantni (Scroll Reveal). I implemented a series of subtle interactions to make navigation fluid and engaging. Elements come into focus only when they become relevant (Scroll Reveal). Ich habe eine Reihe subtiler Interaktionen implementiert, um die Navigation flüssig und ansprechend zu gestalten. Elemente rücken erst in den Fokus, wenn sie relevant werden (Scroll Reveal).

Mikro-interakcije Micro-interactions Mikro-Interaktionen

Prijeđite mišem. Kartice reagiraju na korisnika, pružajući jasnu povratnu informaciju i osjećaj "taktilnosti". Hover over. Cards react to the user, providing clear feedback and a sense of "tactility". Fahren Sie mit der Maus darüber. Karten reagieren auf den Benutzer und geben klares Feedback und ein Gefühl von "Taktilität".

Interakcija →

IMG

Organska Dinamika Organic Dynamics Organische Dynamik

Animirani SVG oblici razbijaju rigidnost klasičnog grida i daju dinamičan okvir. Animated SVG shapes break the rigidity of the classic grid and provide a dynamic frame. Animierte SVG-Formen brechen die Starrheit des klassischen Rasters und bieten einen dynamischen Rahmen.

Parallax & Glassmorphism

Logo

Pozadina se kreće sporije od sadržaja (Parallax) za osjećaj dubine. Background moves slower than content (Parallax) for a sense of depth. Hintergrund bewegt sich langsamer als Inhalt (Parallax) für Tiefenwirkung.

Zaključak i Rezultati Conclusion and Results Fazit und Ergebnisse

Rezultat je moderna web platforma koja uspješno balansira između estetike i funkcionalnosti. Tehnička optimizacija osigurala je Lighthouse score od 95+ za performanse, dok pažljiv UX dizajn osigurava da korisnici svih profila mogu lako doći do informacija. The result is a modern web platform that successfully balances aesthetics and functionality. Technical optimization ensured a Lighthouse score of 95+ for performance, while careful UX design ensures that users of all profiles can easily access information. Das Ergebnis ist eine moderne Webplattform, die Ästhetik und Funktionalität erfolgreich in Einklang bringt. Die technische Optimierung sorgte für einen Lighthouse-Score von 95+ bei der Leistung, während sorgfältiges UX-Design sicherstellt, dass Benutzer aller Profile leicht auf Informationen zugreifen können.