02 Webseitenstruktur und User Experience

02 Webseitenstruktur und User Experience Cover Bild

Präsentationsfolien

Klassische Webseitenarchitektur

Content (Hauptinhalt)

HTML + CSS Praxis Bild Quelle

Alternative Layout Beispiele

trstudio.co.uk trstudio.co.uk

mclaneteitel.com mclaneteitel.com

Klassische Strukturen für Portfolios

One-Page Portfolio

- Hero mit Namen
- Portfolio-Galerie
- Über mich
- Kontakt (einfach eine e-mail Adresse)

Multi-Page Portfolio

- Home
- Portfolio (mit Projekten)
	- Einzelseite je Projekte
- Über mich
- Kontakt (ggf. als Formular, e-mail ist aber immer okay.)

Grundprinzipien:

sitemaps

User Experience Basics: Was will ein Besucher?

Ein typischer Besucher möchte…

  1. Ihre Arbeiten sehen
  2. Den Stil verstehen
  3. Ein paar Informationen über Sie
  4. Einen Kontakt finden (E-Mail, Social Media, Telefon, Formular)

Die 3-Sekunden-Regel: Ein Besucher entscheidet in den ersten 3 Sekunden, ob er bleibt. Diese Regel ist natürlich nicht in Stein gemeißelt, gilt aber zumindest sie als Daumenregel.

Daher muss sofort klar sein:

Content-Audit: Was brauche ich?

Bilder:

Texte:

Organisatorisches:

Qualität vor Quantität: Lieber 10 exzellente Bilder als 30 mittelmäßige. Oder 3-5 Projekte vor 8.

Wireframing

Was sind Wireframes?

Einfache Skizzen, die zeigen:

Wireframe-Elemente:

Wireframing Miro Bild Quelle

Praxis

Responsive Verhalten hinzufügen

Damit unsere Website auch auf allen Geräten gleich gut aussieht, müssen wir nun noch so genannte Media-Queries hinzufügen. Das ist in dem CodeSandbox Link bereits gemacht worden.

Edit 02_01: Praxis Start

/* style.css */

/* Tablet-Ansicht: 2 Spalten statt 3 */
@media (max-width: 768px) {
  h1 {
    font-size: 2rem; /* Kleinere Überschrift */
  }

  header {
    padding: 40px 15px; /* Weniger Padding */
  }

  .portfolio {
    padding: 40px 15px;
  }

  .gallery {
    grid-template-columns: repeat(2, 1fr); /* 2 Spalten auf Tablet */
    gap: 15px; /* Kleinerer Abstand */
  }
}

/* Mobile-Ansicht: 1 Spalte */
@media (max-width: 480px) {
  .gallery {
    grid-template-columns: 1fr; /* Nur 1 Spalte auf Mobile */
    gap: 15px;
  }

  .gallery-item img {
    height: 200px; /* Kleinere Bildhöhe auf Mobile */
  }
}

/* Sehr große Bildschirme: Noch größere Überschrift */
@media (min-width: 1200px) {
  h1 {
    font-size: 4rem;
  }
}

Test: Browserfenster kleiner/größer ziehen

Interaktivität hinzufügen: Lightbox

Was ist eine Lightbox?

Wir lernen:

Edit 02_01: Praxis Start

Die einfachste Möglichkeit, Interaktivität hinzuzufügen, besteht darin, eine CSS-Transition für Effekte wie Mouse Over oder Hover zu verwenden.

/* style.css */

/* Hover-Effekt: Bild wird leicht vergrößert */
.gallery-item img:hover {
  transform: scale(1.05);
}

Um die Seite noch interaktiver zu gestalten, habe ich einen kleinen Bonus vorbereitet. Wir fügen eine Lightbox hinzu. Das bedeutet, wenn man auf ein Bild klickt, wird es mittig groß über anderen Inhalten angezeigt.

/* lightbox.css */

/* Lightbox Overlay - zunächst versteckt */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  display: none; /* versteckt */
  justify-content: center;
  align-items: center;
}

/* Bild in der Lightbox */
.lightbox img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 6px;
}

/* Sichtbar machen mit der Klasse "show" */
.lightbox.show {
  display: flex;
}

Wir müssen die neue CSS Datei natürlich auch wieder in unserem HTML referenzieren. Darüber hinaus fügen wir kurz vor dem Ende vor dem Endtag </body> in der HTML noch weitere Zeilen hinzu, die sowohl ein neues Script referenziert und auch die HTML Struktur für die Lightbox schafft.

<!-- index.html -->
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Max Mustermann - Fotograf</title>
	<link rel="stylesheet" href="style.css" />
	<link rel="stylesheet" href="lightbox.css" /> <!-- <- Diese Zeile für das Lightbox CSS -->
</head>
<body>
	<!-- [...] -->

	<!-- START CODE BLOCK -->
	<div class="lightbox" id="lightbox">
		<img src="" alt="" />
	</div>
	<script src="script.js" defer></script>
	<!-- ENDE CODE BLOCK -->
</body>

Wir legen eine neue Datei an: script.js. Wie vorher erwähnt können wir mit Javascript Webseiten Interaktivität hinzufügen. Die Kommentare im Script erläutern die einzelnen Schritte.

// script.js

// Das Lightbox-Element (Overlay) aus dem HTML auswählen
const lightbox = document.getElementById('lightbox')
// Das Bild innerhalb der Lightbox auswählen
const lightboxImg = lightbox.querySelector('img')

// Alle Bilder innerhalb der Galerie auswählen
document.querySelectorAll('.gallery-item img').forEach((element) => {
  // Für jedes Bild einen Klick-Listener hinzufügen
  element.addEventListener('click', () => {
    // Wenn man auf ein Bild klickt:

    // 1. Die Bildquelle (src) in das Lightbox-Bild übernehmen
    lightboxImg.src = element.src

    // 2. Auch den Alt-Text übernehmen (für Barrierefreiheit)
    lightboxImg.alt = element.alt

    // 3. Die Lightbox sichtbar machen, indem wir die CSS-Klasse "show" hinzufügen
    lightbox.classList.add('show')
  })
})

// Klick-Event für die Lightbox selbst
// -> Wenn man irgendwo ins Overlay klickt (nicht auf das Bild), wird sie wieder geschlossen
lightbox.addEventListener('click', () => {
  // Die CSS-Klasse "show" entfernen, damit die Lightbox verschwindet
  lightbox.classList.remove('show')
})

Unser finale Code sollte dann so aussehen: Edit 01_02: Praxis Ende

Wireframe auf Papier

Skizzieren Sie 2-3 Layout-Ideen für Ihre Portfolio-Startseite.

Wireframe Lofi Bild Quelle

Hausaufgabe

Content sammeln