# LF 10a: Benutzerschnittstellen gestalten und entwickeln
> **3. Ausbildungsjahr** | Zeitrichtwert: **80 Stunden**
## Kernkompetenz
Die Schülerinnen und Schüler verfügen über die Kompetenz, Benutzeroberflächen für softwarebasierte Arbeitsabläufe und Geschäftsprozesse zu gestalten und zu entwickeln.
---
## Lernziele
Nach diesem Lernfeld kannst du:
- [ ] Geschäftsprozesse analysieren und modellieren
- [ ] Benutzeroberflächen ergonomisch gestalten
- [ ] UI/UX-Prinzipien anwenden
- [ ] Responsive Design umsetzen
- [ ] Agile Entwicklungsmethoden anwenden
- [ ] Datenschutz und Benutzerfreundlichkeit prüfen
---
## UI/UX-Grundlagen
### UI (User Interface)
```
Gestaltungselemente:
├── Layout
│ ├── Struktur
│ ├── Hierarchie
│ └── Weißraum
├── Typografie
│ ├── Schriftart
│ ├── Schriftgröße
│ └── Lesbarkeit
├── Farben
│ ├── Farbschema
│ ├── Kontrast
│ └── Bedeutung
└── Komponenten
├── Buttons
├── Formulare
└── Navigation
```
### UX (User Experience)
```
UX-Prinzipien:
├── Benutzerzentrierung
├── Konsistenz
├── Feedback
├── Fehlertoleranz
├── Übersichtlichkeit
└── Erwartungskonformität
```
---
## Web-Entwicklung
### HTML5
```html
Beispielseite
Willkommen
Dies ist eine Beispielseite.
```
### CSS3
```css
/* Responsive Design */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 1rem;
}
/* Mobile First */
@media (min-width: 768px) {
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* Flexbox Navigation */
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
```
### JavaScript
```javascript
// DOM Manipulation
document.addEventListener('DOMContentLoaded', () => {
const button = document.getElementById('submit-btn');
button.addEventListener('click', async (event) => {
event.preventDefault();
const formData = new FormData(document.querySelector('form'));
const data = Object.fromEntries(formData);
try {
const response = await fetch('/api/submit', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data)
});
if (response.ok) {
alert('Erfolgreich gesendet!');
}
} catch (error) {
console.error('Fehler:', error);
}
});
});
```
---
## Geschäftsprozess-Modellierung
### BPMN (Business Process Model and Notation)
```
BPMN-Elemente:
├── Start/End Event
├── Task (Aufgabe)
├── Gateway (Verzweigung)
│ ├── XOR (entweder-oder)
│ ├── AND (parallel)
│ └── OR (möglicherweise)
├── Sequence Flow (Sequenzfluss)
└── Message Flow (Nachrichtenfluss)
```
### EPK (Ereignisgesteuerte Prozesskette)
```
Komponenten:
├── Funktionen (Aktivitäten)
├── Ereignisse (Auslöser)
├── Kanten (Verknüpfungen)
└── Operatoren (UND, ODER, XOR)
```
---
## Agile Methoden
### Scrum
```
Scrum-Rollen:
├── Product Owner
├── Scrum Master
└── Development Team
Scrum-Events:
├── Sprint Planning
├── Daily Standup
├── Sprint Review
└── Sprint Retrospective
Scrum-Artefakte:
├── Product Backlog
├── Sprint Backlog
└── Increment
```
### Kanban
```
Kanban-Prinzipien:
├── Visualisierung
├── Limit Work in Progress
├── Flow-Management
└── Kontinuierliche Verbesserung
```
---
## Prüfungsrelevanz
- Wichtig für LF 12a (Abschlussprojekt)
- UI-Design wird in Teil 2 geprüft
---
## Querverweise
- [[2-Ausbildungsjahr/LF9-Netzwerke-Dienste|Vorher: LF 9]]
- [[3-Ausbildungsjahr/LF11a-Funktionalität-realisiren|Nachher: LF 11a]]
---
*Stand: 2024 | Quelle: KMK Rahmenlehrplan 13.12.2019*