Web- & UI-Design
Skills in der Kategorie Web- & UI-Design.
Theme-Fabrik Theme Factory
Wenden Sie eines von 10 fertigen Farb- und Schriftthemen auf Folien, Dokumente, Berichte oder Landingpages an, oder lassen Sie ein neues Thema erzeugen.
Empfehlung der RedaktionFrontend-Design Frontend Design
Anleitung für eigenständige, bewusst gestaltete Oberflächen statt Standardvorlagen: erst den Entwurf planen, dann bauen.
UI-Zustände-Checkliste (UI States Checklist)
Jeden Zustand erfassen, den ein Bildschirm oder eine Komponente braucht: Laden, leer, Fehler, teilweise, deaktiviert, offline, fehlende Berechtigung und Extremfälle, und festlegen, was Nutzer jeweils sehen und tun können.
Web-Barrierefreiheitsprüfung (WCAG 2.2 AA)
Eine Seite oder Komponente gegen WCAG 2.2 Stufe AA prüfen: Tastatur, Fokus, Kontrast, Namen und Labels, Struktur, Formulare, Dialoge, dynamische Updates, Zoom und Zielgröße, jeder Befund mit Erfolgskriterium.
UI-Internationalisierung (UI Internationalization)
Eine Oberfläche so bauen, dass sie jede Sprache ohne Neugestaltung trägt: Nachrichtenkataloge, ortsgerechte Formate, Layouts, die unterschiedliche Textlängen aushalten, CJK- und Rechts-nach-links-Unterstützung und Sprachwechsel mit sauberen URLs.
UI/UX Pro Max (Design-Wissensbasis)
Durchsuchbare Wissensbasis für Oberflächen: Stile, Farbpaletten, Schriftpaarungen, UX-Richtlinien, Diagramme und Tipps je Tech-Stack, um vor dem Bauen eine visuelle Richtung festzulegen.
Heller und dunkler Modus (Light and Dark Theme)
Hell- und Dunkelmodus bauen, die in beiden Themes stimmen: semantische Farb-Tokens, Systemeinstellung plus manueller Schalter, kein Aufblitzen des falschen Themes beim Laden und Kontrastprüfung in beiden Themes.
Responsives Layout debuggen (Responsive Layout Debugging)
Die wahre Ursache von Layoutfehlern bei bestimmten Bildschirmbreiten finden: seitliches Scrollen, Überlauf, Flex-Elemente, die nicht schrumpfen, Sticky, das nicht haftet, 100vh auf Smartphones und feste Leisten unter der Browseroberfläche.
Design System (Tokens und Folien)
Dreischichtiges Design-Token-System (primitiv, semantisch, Komponente) aufbauen, Komponentenspezifikationen schreiben und tokenkonforme HTML-Foliensätze mit Chart.js erzeugen.