Web / UI
Wochenberichte
Wöchentliche Reflexionen und vertiefung in fachliche Themen
Während meiner Zeit im Basislehrjahr habe ich wöchentlich Wochenberichte verfasst. Ziel war es, meine schulischen und betrieblichen Tätigkeiten zu dokumentieren, fachliche Themen zu vertiefen und meine eigene Arbeitsweise regelmässig zu reflektieren.
Jeder Bericht wurde als HTML-Dokument umgesetzt und auf der Indexseite nach Kalenderwochen verlinkt. So konnte ich meinen Lernfortschritt sichtbar machen, selbstständig arbeiten und meine Reflexionsfähigkeit gezielt weiterentwickeln.
Inhalt der Wochenberichte
- Fachartikel zu schulischen oder betrieblichen Themen
- Tagesreflexionen zur eigenen Arbeitsweise und zum Lernfortschritt
- Leistungen und persönliche Ziele für ZLI und Berufsschule
Responsive Webdesign
Fachbericht
Einleitung
Ich schreibe den Fachbericht diese Woche über Responsive Webdesign, weil wir dieses Thema kürzlich im Unterricht behandelt haben und ich nun mehr darüber erfahren möchte. In der heutigen Welt ist Responsive Webdesign nicht mehr eine Option, sondern eine Notwendigkeit. Es gibt fast keine Webseiten, die nicht auf allen Ansichten funktionieren. Es ist wichtig, dass man von überall aus und mit jedem Gerät Zugriff auf eine Webseite haben kann.
Was bedeutet Responsive Webdesign?
Responsive Webdesign ist die automatische Anpassung an die Grösse des Bildschirms und dessen Eigenschaften. Texte, Bilder und Navigation können dabei ihre Anordnung ändern. Die drei typischen Bildschirmgrössen sind Smartphone, Tablet und Desktop.
Responsive Design vs. Adaptives Design
Es gibt mehrere Möglichkeiten, wie man Websites für Geräte bereitstellt. Zwei wichtige Ansätze sind Responsive Design (reaktionsfähig) und Adaptives Design (anpassungsfähig).
| Aspekt | Responsive Design | Adaptives Design |
|---|---|---|
| Vorlagen | eine Vorlage, flexibel | mehrere feste Vorlagen |
| Anpassung | skaliert mit Raster/Layouts | liefert passende Version je Gerät |
| Vorteil | eine URL, weniger Aufwand | sehr gezielte Optimierung |
| Nachteil | manchmal Kompromisse bei Spezialfällen | mehr Pflege, mehr Aufwand |
Warum wird Responsive Design immer wichtiger?
Responsive Design wird immer wichtiger, weil sich Bildschirmgrössen und Auflösungen von mobilen Endgeräten ständig weiterentwickeln. Das heisst, es wird auch in Zukunft immer mehr Formate geben, an die sich Webseiten anpassen müssen.
Vorteile von Responsive Webdesign
Eine Version für alle Geräte reduziert den Aufwand bei Updates und Änderungen.
Alle Geräte nutzen die gleiche URL, was auch fürs Teilen und SEO gut ist.
Schnellere Ladezeiten und bessere Bedienbarkeit wirken professioneller.
Google bevorzugt responsive Websites in den Suchergebnissen.
Wie wird Responsive Webdesign umgesetzt?
Nun kommt ein sehr wichtiger Teil: wie eine Website umgesetzt wird. Es gibt verschiedene Ansätze. Ich beschreibe hier den Weg, den wir im Unterricht gelernt haben.
Meta-Viewport Tag
Der Meta-Viewport Tag ist ein HTML-Element im <head> und steuert, wie
Inhalte
auf
verschiedenen Geräten skaliert und dargestellt werden. Die wichtigsten Bestandteile sind
width=device-width und initial-scale=1.0.
<meta name="viewport" content="width=device-width, initial-scale=1.0">Breakpoints
Breakpoints sind festgelegte Bildschirmbreiten, an denen man das Layout anpassen kann. Dabei können Elemente umstrukturiert werden, um Lesbarkeit und Bedienbarkeit zu verbessern.
Media Queries
Media Queries sind das grundlegende Werkzeug im Responsive Webdesign. Sie erlauben es, dass CSS nur dann angewendet wird, wenn bestimmte Bedingungen erfüllt sind (z.B. Mindestbreite).
min-width bedeutet „ab dieser Breite“ – praktisch
für
Mobile First.
@media (min-width: 768px) {
.header { text-align: center; }
.main { width: 75%; }
.footer { display: flex; }
}Container Queries
Container Queries ermöglichen es, das Verhalten von Elementen abhängig von der Breite eines bestimmten Bereichs anzupassen. Ein grosser Vorteil ist, dass eine Card Komponente in jeder Ansicht optimal aussieht.
@container (min-width: 700px) {
.card h2 { font-size: 2em; }
}Mobile First Ansatz
Ich habe zuerst das Mockup für das Smartphone gemacht, weil ich finde, hier ist es am schwierigsten eine gute Lesbarkeit und Bedienbarkeit zu schaffen. Wenn das in dieser Ansicht gelungen ist, ist es einfacher, das auch auf Tablet und Desktop umzusetzen.
Checkliste: Responsive Website testen
- ✔️ Viewport Tag gesetzt
- ✔️ Bilder sind flexibel (max-width: 100%)
- ✔️ Navigation ist auf Mobile bedienbar
- ✔️ Sinnvolle Breakpoints definiert
- ✔️ Layout mit Flexbox/Grid umgesetzt
- ✔️ Relative Einheiten genutzt (%, rem, em)
- ✔️ Test auf Mobile, Tablet, Desktop + mindestens 2 Browser
Fazit
Es ist wichtig, Webseiten responsive umsetzen zu können, weil immer mehr Nutzer mobil unterwegs sind und weil responsive Seiten bei Google oft besser platziert werden. Um eine gute responsive Webseite zu erstellen, sollte man den Meta-Viewport korrekt setzen, sinnvolle Breakpoints definieren und Media sowie Container Queries nutzen.
Quelle
Input: Webdesign und Webentwicklung
Low-Key Fotografie
Fachbericht
Einleitung
In diesem Fachbericht geht es um die Low-Key-Fotografie. Ich habe dieses Thema gewählt, weil ich diesen Begriff schon oft gehört habe, aber lange nicht genau wusste, was er wirklich bedeutet.
Ich möchte mein Fachwissen in diesem Bereich erweitern und mich genauer mit dieser speziellen Art der Fotografie auseinandersetzen. Deshalb denke ich, dass Low-Key ein sehr passendes Thema für diesen Fachbericht ist.
Was ist Low-Key Fotografie?
Low-Key ist eine Fototechnik, bei der mit wenig Licht gearbeitet wird. Dunkle Töne dominieren das Bild und es entsteht ein starker Kontrast.
Low Key = wenig Licht + dunkle Bildbereiche + starke Kontraste.
Der Begriff Low-Key stammt aus dem Englischen und bedeutet unter anderem „unauffällig“, „unterschwellig“ oder „zurückhaltend“. In der Fotografie erzeugt diese Technik eine dramatische, geheimnisvolle und intensive Stimmung.
Technische Grundlagen
Für die Low-Key-Fotografie eignet sich am besten eine Kamera mit manuellen Einstellungsmöglichkeiten. Wenn man im Automatikmodus fotografiert, wird das Bild meist zu hell.
Der Blitz sollte ebenfalls manuell eingestellt werden, da er sonst zu stark aufhellt und den Low-Key-Effekt zerstört.
ISO
Empfehlung: 100–200
Ein zu hoher ISO-Wert verursacht starkes Bildrauschen, was das Bild unbrauchbar machen kann.
Belichtungszeit
Bei beweglichen Motiven sollte eine kurze Belichtungszeit gewählt werden, damit das Bild nicht unscharf wird.
Bei unbeweglichen Motiven kann die Belichtungszeit länger sein.
Blende
Eine offene Blende mit kleiner Blendenzahl sorgt für geringe Tiefenschärfe, sodass nur ein Teil des Bildes scharf ist.
Eine geschlossene Blende erzeugt eine durchgängige Schärfe.
Stativ & Blitz
Ein Stativ hilft, Verwacklungen bei längeren Belichtungszeiten zu vermeiden.
Falls das Bild zu hell wirkt, sollte der Blitz weiter vom Motiv entfernt werden.
| Setting | Warum? |
|---|---|
| ISO 100–200 | Weniger Bildrauschen |
| Manueller Modus | Automatik hellt zu stark auf |
| Dunkler Hintergrund | Motiv wirkt stärker |
Nachbearbeitung
Low-Key-Bilder wirken besonders stark, wenn Kontrast und Schwarzwerte gut eingestellt sind.
In dunklen Bildern ist Rauschen schneller sichtbar. Deshalb ISO tief halten oder nachträglich reduzieren.
In der Nachbearbeitung kann ein Low-Key-Bild weiter optimiert werden. Kontrast, Tonwertkorrekturen und gegebenenfalls Rauschreduzierung spielen dabei eine wichtige Rolle.
Oft wirkt auch eine Schwarz-Weiss-Umwandlung besonders gut, da sie die Bildaussage zusätzlich verstärken kann.
Tipps für ein gutes Low-Key-Bild
- ✔️ Dunkler bis schwarzer, matter Hintergrund
- ✔️ Umgebung möglichst abdunkeln
- ✔️ Eine oder mehrere gezielte Lichtquellen einsetzen
- ✔️ Markante Schatten an Gesicht oder Körper nutzen
- ✔️ Kontraste bewusst betonen
Low-Key Histogramm
Ein typisches Low-Key-Histogramm zeigt einen starken Ausschlag im dunklen Bereich auf der linken Seite. Im hellen Bereich fällt das Histogramm fast gegen Null ab.
Die sehr dunklen Bereiche sollten sich dabei eher im Hintergrund befinden und nicht im eigentlichen Motiv.
Fazit
Die Low-Key-Fotografie sorgt für eine düstere und intensive Stimmung. Licht wird dabei nur sehr sparsam eingesetzt, während dunkle Bildbereiche dominieren.
Die Herausforderung liegt darin, das Motiv trotz wenig Licht klar erkennbar zu halten. Probeaufnahmen helfen dabei, die passende Belichtung und Blitzstärke zu finden.
Quellen
Visuelle Wahrnehmung & Farbenlehre
Fachbericht
Einleitung
In diesem Fachbericht geht es um die visuelle Wahrnehmung und die Farbenlehre. Ich erkläre, wie Menschen Farben und Formen wahrnehmen und welchen Einfluss sie auf den Wiedererkennungswert eines Designs haben.
Visuelle Wahrnehmung im Design ist wichtig, weil sie ermöglicht, Informationen schnell und effektiv zu vermitteln. Farben, Formen und Kontraste wecken Emotionen, erleichtern die Orientierung und lenken die Aufmerksamkeit.
Was ist visuelle Wahrnehmung?
Die visuelle Wahrnehmung beschreibt den Prozess, bei dem das Auge elektromagnetische Wellen im sichtbaren Bereich aufnimmt. Das Licht wird auf der Netzhaut in elektrische Signale umgewandelt und über den Sehnerv ans Gehirn weitergeleitet, wo daraus Bilder entstehen.
Die visuelle Wahrnehmung kann zum Beispiel durch Puzzle, Malen, Kneten oder Bausteine gefördert werden. Sie ist ein Zusammenspiel von Auge und Gehirn und beeinflusst, wie schnell und gut wir Formen, Farben und Muster erkennen.
Grundlagen der Farbenlehre
Additive Farbmischung (RGB): Diese entsteht durch die Mischung von Lichtfarben. Die Grundfarben sind Rot, Grün und Blau. Mischt man alle drei, entsteht Weiss.
Subtraktive Farbmischung (CMYK): Hier geht es um Pigmente – also Druckfarben. Sie absorbieren Licht. Die Grundfarben sind Cyan, Magenta und Yellow, ergänzt durch Schwarz (Key). Je mehr Pigmente man mischt, desto dunkler wird die Farbe.
Der Farbkreis nach Itten besteht aus 12 Farben:
- 3 Primärfarben: Gelb, Rot, Blau
- 3 Sekundärfarben: Orange, Grün, Violett
- 6 Tertiärfarben
Farbkontraste beschreiben Unterschiede zwischen Farben (z. B. hell–dunkel, warm–kalt, Komplementärkontrast) und beeinflussen die Lesbarkeit und Wirkung. Farbwirkung beschreibt die psychologische und emotionale Reaktion auf Farben.
Beispielhafte Grundfarben und typische Assoziationen in der Farbpsychologie.
Farbpsychologie
Rot kann Leidenschaft, Liebe oder Wut signalisieren, Blau steht oft für Ruhe und Vertrauen, Grün für Natur und Wachstum. Gelb wird mit Freude und Optimismus verbunden, Orange mit Begeisterung und Wärme.
Violett kann für Luxus oder Kreativität stehen, Schwarz für Eleganz und Trauer und Weiss für Reinheit und Frieden.
Marken und Unternehmen setzen Farben gezielt ein, indem sie die Farbpsychologie nutzen, um ihre Markenpersönlichkeit zu vermitteln, Emotionen zu wecken und einen hohen Wiedererkennungswert zu schaffen.
Fazit
Ich habe gelernt, dass Farben nicht nur schön aussehen, sondern gezielt eingesetzt werden, um Emotionen zu wecken und Aufmerksamkeit zu lenken. Durch die Auseinandersetzung mit der Farbenlehre verstehe ich besser, wie Designentscheidungen entstehen und wie wichtig ein harmonisches Farbkonzept für den Gesamteindruck ist.
Kleines Quiz zur Farbenlehre
Teste dein Wissen – klicke auf eine Frage, um die Lösung zu sehen.
1. Welche Grundfarben gehören zur additiven Farbmischung (RGB)?
Lösung: Rot, Grün und Blau. Sie werden mit Licht gemischt, z. B. auf Bildschirmen.
2. Wofür stehen die Buchstaben CMYK?
Lösung: Cyan, Magenta, Yellow und Key (Schwarz). Das ist das Farbsystem für den Druck.
3. Welche Farbe wird häufig mit Vertrauen und Seriosität verbunden?
Lösung: Blau – es wirkt ruhig, seriös und vertrauenswürdig.
4. Was beschreibt ein Farbkontrast?
Lösung: Den Unterschied zwischen Farben, z. B. hell–dunkel, warm–kalt oder Komplementärfarben.
Deepfakes
Fachbericht
Einleitung
Diese Woche haben wir im neuen Modul 213 die Rahmenbedingungen für unser neues Projekt erhalten. Das Modul heisst Teamverhalten entwickeln. Die Note wird unter anderem aus einem Projekt bestehen, bei dem wir über Deepfakes schreiben müssen.
Wir haben dieses Thema gewählt, weil wir nicht so viel Ahnung darüber haben und weil es ein aktuelles Thema ist. Ehrlich gesagt habe ich am Anfang gar nicht viel Ahnung gehabt, was Deepfakes überhaupt sind. Deshalb schreibe ich diesen Fachbericht, damit ich mich aktiv damit befasse und recherchiere.
Was sind Deepfakes?
Deepfakes bedeuten wortwörtlich manipulierte Videos, Bilder oder Audioaufnahmen. Dieses Thema wird heute in sozialen Medien weit verbreitet und wird durch Techniken der künstlichen Intelligenz unterstützt.
Sind Deepfakes illegal?
Deepfakes sind nicht grundsätzlich illegal. Wenn sie aber Persönlichkeitsrechte verletzen oder für böswillige bzw. kriminelle Zwecke genutzt werden, kann das rechtliche Folgen haben.
Wie funktionieren Deepfakes?
Mithilfe eines grossen Datensatzes mit vielen Beispielfotos, Videos oder Audioaufnahmen werden neuronale Netze trainiert. Die KI lernt dabei, echte und gefälschte Inhalte zu unterscheiden.
Face Swapping
Dabei wird eine computergenerierte Version des Gesichts verwendet. Die KI kann Mimik und Bewegungen nachahmen und lernt mit jedem neuen Video dazu.
Voice Cloning
Je mehr Audioaufnahmen es gibt, desto besser kann die KI eine Stimme imitieren.
Was ist der Zweck von Deepfakes?
Deepfakes werden sowohl in echten als auch in fiktiven Situationen eingesetzt. Sie können Unterhaltung sein, aber auch für Manipulation oder Betrug missbraucht werden.
| Harmlos | Kritisch |
|---|---|
| Film / Effekte | Fake News |
| Parodien | Betrug / Scam |
| Synchronisation | Rufschädigung |
Wie erkenne ich einen Deepfake?
- Quelle prüfen: Kommt es von einer glaubwürdigen Quelle?
- Details checken: Unnatürliche Augen, Lippenbewegungen, Licht, Schatten, Ton?
- Reverse Image Search: Ist das Bild schon älter oder in anderem Kontext?
- Vergleichen: Gibt es mehrere seriöse Quellen, die das bestätigen?
Fazit
Ich habe gelernt, dass Deepfakes immer aktueller werden und dass man sehr aufmerksam damit umgehen sollte. Ausserdem habe ich verstanden, wie Deepfakes funktionieren und was Face Swapping ist.
Auch wenn es schwierig ist, Deepfakes zu erkennen, sollte man Quellen prüfen und bei Unsicherheit Tools wie eine Reverse Image Search verwenden. Meiner Meinung nach sollte man zudem vorsichtig sein, der KI immer mehr Daten zu geben, weil sie dadurch immer besser und mächtiger wird.
Ich sollte Inhalte nicht sofort glauben, sondern zuerst die Quelle prüfen und bei Unsicherheit nachrecherchieren.
Responsive Webdesign
Umsetzung einer responsiven Website für die fiktive Marke PowerUp.
Ziel des Projekts war die Umsetzung einer responsiven Website für einen Online-Shop. Ich entwickelte den Shop für meine fiktive Marke PowerUp, die Sport- und Energieprodukte anbietet.
Der gesamte Prozess umfasste die Entwicklung eines einheitlichen Designkonzepts sowie die Gestaltung von Mockups für Mobile, Tablet und Desktop.
Die technische Umsetzung erfolgte nach dem Mobile-First-Prinzip. Dadurch konnte ich zuerst die mobile Version klar strukturieren und anschliessend die Layouts für Tablet und Desktop gezielt erweitern.
Dabei arbeitete ich mit relativen Masseinheiten, Flexbox, CSS Grid und Media Queries, um ein flexibles und sauberes Layout für alle Gerätegrössen sicherzustellen.
Website ansehen
Interaktionskonzepte
Das Interaktionskonzept legt fest, wie Nutzer durch die Website geführt werden und ihr Ziel schnell erreichen.
Projektziel
Ziel war es, einen vollständigen Demo-Bestellvorgang von der Startseite bis zur Bestellbestätigung zu erstellen. Die Interaktion sollte logisch, einfach und selbsterklärend funktionieren.
Wichtige Anforderungen
- Individuelle Pizza zusammenstellen
- Mengenangaben und Grössen wählen
- Scharf-Optionen auswählen
- Schrittweise Navigation mit Zurück-Funktion
- Fehlermeldungen (Error Handling)
- Sichtbare Zustandsänderungen (Hover, Auswahl)
Vorgehen
- Analyse bestehender Online-Shops
- Skizzen und Wireframes erstellen
- Mockup entwickeln
- Klickbaren Prototyp umsetzen
- Testen und reflektieren
Prototyp
Der klickbare Prototyp zeigt den vollständigen Bestellprozess von der Startseite bis zur Bestellbestätigung.