The GUI itself is a systematic illusion.

Jay David Bolter und Diane Gromala, 2005

V O R T R A G

How Facebook’s News Feed Changed the Internet

* Jacob Hurwitz-Goodman

Durch Design werden Beziehungen verdinglicht, sie gerinnen zur gesellschaftlichen Ordnung, zur Bedingung für den Alltag. Design ermöglicht – oder erschwert – menschliches Zusammenleben.

Friedrich von Borries (Architektur- und Designtheoretiker), 2016

T H E O R I E

Projekt

Jede:r Studierende wird eine eigene kleine Portfolio-Website konzipieren und bis zum Semesterende (26.01.2024) fertigstellen.

🏠 Start
- Navigation (Start, Über mich)
- Headline (einleitender Satz, Zitat, …)
- Projektübersicht (mindestens 2 Projekte)
- - Titel
  - Thumbnail
🔮 Projekt
- Navigation (Start, Über mich)
- Titel
- Beschreibungstext (200–500 Zeichen)
- Medien (3–8 Bilder und/oder Videos)
🐛 Über mich
- Navigation (Start, Über mich)
- Text zur euch (200–500 Zeichen)
- Kontaktdetails und/oder Socials

Bewertung

Das abgeschlossene Projekt muss bis zum Semesterende (26.01.2024) als ein verpackter Ordner inklusive aller relevanten Dateien (HTML, CSS, Medien, Fonts, …) per DM abgegeben werden.

Gesamtnote dieser Lehrveranstaltung
- Mitarbeit und Übungen (40%), Projekt (60%)
Entscheidende Faktoren
- Vollständigkeit (alle Übungen und Projekt abgegeben)
- Code-Sauberkeit (Einrückungen, Groß-Kleinschreibung, ID- und Klassennamen, …)
- Responsiveness, Accessibility, Dateinamen und -größen, …
- Gestalterische Qualitäten

Die visuelle Gestaltung der kompletten Website ist euch freigestellt.

Zur Selbstkontrolle und Orientierung gibt es aber einen vorbereiteten Entwurf der alle grundlegenden Elemente beinhaltet. Dieser Entwurf kann auch als Abgabe der Projektarbeit angestrebt werden, soll aber klar um gestalterische Entscheidungen – Schriften, Farben, Abstände, … – erweitert werden.

Show

Die fertigen Übungs-Websites können beim letzten Termin in der Gruppe präsentiert werden.

Elle Woods using her orange Apple iBook in class

P R A X I S

Übung anlegen

Ordner „html-4“ kopieren, in „html-5“ umbenennen und in VS Code öffnen
Datei „vorname.html“ im Chrome-Browser öffnen

Flex

Das Layout von einfachen Elementen (als Gruppe) gestalten.

…
  <section class="image-grid">
    <img src="media/beispiel-grafik.png">
    <img src="media/beispiel-grafik.png">
  <section>
…

HTML

.image-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: start;
  gap: 20px 20px;
}

.image-grid img {
  width: 40%;
}

CSS

Das Layout von mehrteiligen Elementen (als Gruppe) gestalten.

…
  <section id="projects">
    <div class="thumbnail">
      <img src="media/beispiel-grafik.png">
      <h3>Projekt Titel</h3>
    </div>

    <div class="thumbnail">
      <img src="media/beispiel-grafik.png">
      <h3>Anderer Projekt Titel</h3>
    </div>
  <section>
…

HTML

#projects {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: left;
  align-items: start;
  gap: 40px 20px;
}

#projects .thumbnail {
  width: 30%;
}

#projects .thumbnail * {
  width: 100%;
}

CSS

Hover

Elemente beim Hover mit dem Cursor verändern.

…
  <article>
    <h1>Meine Überschrift</h1>
    <p>Dazu noch ein kurzer Paragraph.</p>
    <p>Kurzer Absatz mit einem <a href="https://www.wormsmagazine.com">Link</a>.</p>
  </article>
…

HTML

a {
  …
  color: #ff00ff;
}

a:hover {
  color: green;
}

CSS

Animation

Die Veränderung von Elementen beim Hover mit dem Cursor animieren.

…
  <article>
    <h1>Meine Überschrift</h1>
    <p>Dazu noch ein kurzer Paragraph.</p>
    <p>Kurzer Absatz mit einem <a href="https://www.wormsmagazine.com">Link</a>.</p>
  </article>
…

HTML

a {
  …
  color: #ff00ff;
  transition: all 1.5s;
}

a:hover {
  color: green;
}

CSS

Webfonts

Die Schriftfamilie mit Fonts von Online-Plattformen definieren.

<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Meine erste Website</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
    <link href="styles/vorname.css" rel="stylesheet">
  </head>
  <body>
    …
  </body>
</html>

HTML

h1 {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 700;
}

p {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 400;
}

CSS

Verschiedene Schriftschnitte oder -familien für mehrere Elemente definieren.

…
  <article>
    <h1>Meine Überschrift</h1>
    <p>Dazu noch ein kurzer Paragraph.</p>
    <p>Kurzer Absatz mit einem <a href="https://www.wormsmagazine.com">Link</a>.</p>
  </article>
…

HTML

@font-face {
  font-family: "ABC Maxi Regular";
  src: url("../fonts/ABCMaxiRound-Regular-Trial.woff2") format("woff2");
}

@font-face {
  font-family: "ABC Maxi Bold";
  src: url("../fonts/ABCMaxiRound-Bold-Trial.woff2") format("woff2");
}

h1 {
  font-family: "ABC Maxi Bold";
}
  
p {
  font-family: "ABC Maxi Regular";
}

CSS

Eine Variable-Font als Schrift definieren.

…
  <article>
    <h1 class="amazing">Meine Überschrift</h1>
    <p>Dazu noch ein kurzer Paragraph.</p>
    <p>Kurzer Absatz mit einem <a href="https://www.wormsmagazine.com">Link</a>.</p>
  </article>
…

HTML

@font-face {
  font-family: "ABC Ginto Variable";
  src: url("../fonts/ABCGintoVariable-Trial.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 100% 200%;
  font-style: normal;
}

.amazing {
  font-family: "ABC Ginto Variable";
  font-weight: 567;
  font-stretch: 150%;
  transition: all 0.6s;
}

.amazing:hover {
  font-weight: 850;
  font-stretch: 177%;
}

CSS

Übung abschließen

Übung so gut wie möglich fertig machen (vollständig und sauber) und bis zum nächsten Termin per DM abgeben.

📂 → 🗜️ → 🎁 → 💬 → ✅