Please enable JavaScript.
Coggle requires JavaScript to display documents.
Template Erstellung Regeln (Componenten (untere navigation (zeigt von 3…
Template Erstellung Regeln
Farbe
✅nur zu einander passende Farben beutzen
keine eigenen Farben bestimmen (Farb Variablen)
Farb Gruppen gesetzt
Content ✅
COSYS Rot Richtung für Elemente
Standard Text
mögliche Überlegung
Farben für Themen Bereich vergeben
MDM
Service
Hardware
Software
Branche
Webseite
Warnung
Warn gelb
Farblicher Bereich in Gelb Ton passend zum Warngelb
Schriftart
Fehler- Warnschrift
Fehler
Warn rot
Farblicher Bereich in Rot Ton passend zum Warn rot
Farb Info Übersicht !Versions Info!
Text
✅zweite Farbe für wichtige texte
zweite farbe für aktionen
Content
Content Art als Vorlage
❌nur Text ersetzen und keine zusätzliche Arbeit bei der Darstellung (jeder sollte die Möglichkeit haben mit dem Template zu arbeiten, egal für was) ✅Man benötigt Vorgaben sonst wird die Seite zugefüllt
SEM
Keywords sollen Richtig verwendet werden
Titel Tags, Meta Beschreibungen, Content und Url sollen nach AIDA Prinzip ausgerichtet sein und SEO Richtig einbezogen werden (über die Strucktur die natürliche Suche stärken)
leicht und selbst erklärende Style´s
Dokumentation was man machen wollte (Sinn Prüfung) !Versions Info!
✅muss mobile fähig sein
Styles, Script´s und Bilder müssen die best mögliche Größe besitzen (es sollte für jeden Handy Benutzer schnell laden können)
WAI-ARIA für Content beachten
neue Funktionen beeinflussen kein Template
bei der Namensgebung achten vor doppelten oder ähnliche Begriffe !Versions Info verwendete Begriffe!
neuere Versionen ändern sich nicht von den Grundpfeilern
dürfen nicht Performance kosten
Info Browser Kompatibilität nach Themen Gebiet und Bausteine !Versions Info!
Themen Gebiete
nach dem Richtigen Schema benutzen
https://www.massiveart.com/blog/bessere-suchergebnisse-dank-html5-microdata
http://schema.org/docs/schemas.html
sollen nicht verwechselt werden
Schnittstellen sollen richtig angewendet werden
Adwords und Analytics Integration richtig eingebettet werden
Social Media Optionen sollten auch in Betracht genommen werden z.B. wie Twitter Cards
Infos Richtig weiter geben (Formular Infos, Analytische Infos über den Webseiten Besuch )
Facebook
https://de.ryte.com/magazine/open-graph-optimierung-diese-tipps-sollte-jede-website-beruecksichtigen
Vary Site Caching
https://developers.google.com/search/mobile-sites/mobile-seo/dynamic-serving?hl=de
keine Einschränkungen
für Blinde ein Screenreader
https://wiki.selfhtml.org/wiki/WAI-ARIA
❌ AMP benutzen um Performance zu verbessern
https://www.ampproject.org/about/benefits/
✅ Kein wirklichen Vorteil da nur style gespart wird. Was nicht die Ladezeit enorm verbessert
Abstände
❌nur im Ausnahme Zustand sollte man den Abstand selber bestimmen
style Zuweisung
sollen nach vollziehbar sein bei Benennung
dürfen nicht doppelt sein
sollen dem aktuellen Format entsprechen
dürfen ohne Grund nicht geändert werden
Einteilung vom Template
Fertige optimiert für Performance (Webseiten)
komplette zum entwickeln?
speziell angepasste oder nach Bereichen (zum verbessern eines vorhandenen Style)
erweiterte Darstellung
minimal Darstellung
Bereich mit weniger Rechten für ein eigenen Style (ausgerichtet um Fehler zu vermeiden)
Animation
große zwischen 300-400ms
kleine 150-200ms
natürliche Bewegungen
Animationen müssen Aufmerksamkeit erregen
sollen schnell sein
sollen nicht verwirren
transition sollen alle gleich sein in der app
sollen den nächsten weg zeigen
lange Wege sollen lang animiert werden, kurze kurz
Benutzer belohnen mit animierten Illustrationen
https://cssanimation.rocks/principles/
material icons
heller hitergrund
Active + focused
87%
Active + unfocused
54%
Inactive
38%
dunkler hintergrund
Active + focused
100%
Active + unfocused
70%
Inactive
50%
keine schatten
nicht zu viele layer
sollen nicht abgeschnitten sein
sollen im Zentrum sein
simple Hintergrund gestaltung
nicht abgerundet
mach es nicht 3d
dürfen nicht kompliziert sein
icons sollen auf den Pixel genau platziert werden
bilder
sollen keine stock photos sein
für bestimmte sachen bestimmte bilder, keine stockphotos
bilder ein klaren fokus geben
sollen eine story haben
sollen context haben
dürfen nicht pixelig sein
pixel dichte
https://screenshots.firefox.com/7FJLHsbUYGdiscQ4/material.io
Breakpoint
https://screenshots.firefox.com/btAbJ5tvtA6RGv3E/material.io
Componenten
untere navigation
zeigt von 3 bis 5 ziele
weniger als zwei sollen lieber tabs sein
sollen fixiert sein
primäre farbe benutzen beim focus
keine unterschiedlichen farben
schwarze oder weiße Farbe für Icons wenn diese ein bunten Hintergrund hat
benutze kurze Bezeichnungen
abgeschnittene Texte vermeiden. kleiner gemachte Texte vermeiden
Transition active inactive mit fade
active inactive Transition Bewegungen vermeiden
Auflistungen Action
raus gehen mit X schließen und ´nicht mit einem Pfeil
Container muss nur den Inhalt anzeigen
Liste darf nicht die Navigation überlappen
Bei zu viel Inhalt muss man scrollen
Buttons
Floating Action Button
nur in den Bereichen wo es nötig ist
für eine primäre Action
nur ein floating Action Button
Beispiele
https://screenshots.firefox.com/AnKGX0xSa30sHaVj/material.io
sind nur rund
sind nicht 3d
nur passende in Action toolbars
Optionen sollen nur in bestimmten Positionen sein
Raised Button
sollen mehr hervorstehen
Beispiel
https://screenshots.firefox.com/MM5AhJkQCXrQcTx5/material.io
Nicht in ein button bereich ein beziehen
Flat Button
Ohne Schatten Box
Beispiel
https://screenshots.firefox.com/nUxKi6TzSTHE60FA/material.io
Richtige Auswahl
https://screenshots.firefox.com/gMopShumbbkSr53r/material.io
2dp corner radius.
Dropdown buttons
Beispiel
https://screenshots.firefox.com/pqh96oXJh0nJC1v9/material.io
Toggle buttons
Beispiel
https://screenshots.firefox.com/ibpVdm7CcS7ccpUc/material.io
Icon toggles
Beispiel
https://screenshots.firefox.com/oVopzTs4k2VMW2iN/material.io
Card
Haben runde ecken
haben mehrere actionen
cards nicht zu listen machen
keine Bildergalerien machen
Bereiche wo man es ein setzen könnte
Dashboard
feeds (blog)
Notizen
Kurzinfo
können erweiterbar sein
leitet meistens weiter
Chips
Benutzung
photo, short title, and brief information
Typen
Text
Icon
Auswahl kann man entfernen
Tabellen
Header sortierbar
header Info
inline Menus
range
unterseiten
extra Header (Action)
Dialoge
Typen
Alerts
Action danach als Action auflisten
genau sein
Simple menus
simple dialogs
kein cancel button
Confirmation dialogs
getrennte confirmation und cancel buttons
Full-screen dialogs
kein close benutzen
Nachricht anzeigen wenn Änderungen gemacht wurden und man schließen will
Trennungen
nach gruppen
nach jedem element
nicht zu viel benutzen
grid list
zwei Aktionen
primäre
sekundäre
können durch Objekte abgetrennt sein
sollen weiter scrollbar sein (Aussehen)
Listen
sollen geordnet sein
alphabetisch macht es einfacher
Einzelende listen
mit Icons
Avatare
zweizeilige listen
dreiteilige listen
primäre Action am Anfang
sekundäre am ende
Actionen
Checkboxen
schalter
anordnen
expandieren / minimieren
Leave behinds (verschieben)
Menü
scrollbar wenn zu groß
cascadierend nur desktop
Disabled action buttons
kann über all auftauchen
ist immer über allem
sollte nicht doppelte Optionen haben
bei actionen immer über dem Element
Picker
typen
Date
time
Prograss activity Bar / kreis
Typen
Determinante
Indeterminate
Buffer
Query Determinante und Indeterminate
kann action nochmal veranschaulichen
Selection
Checkbox
https://screenshots.firefox.com/Jv1qVJdJ5OvFwtWg/material.io
Radio button
https://screenshots.firefox.com/U0xIM6BIGMZeMaNk/material.io
Switch
https://screenshots.firefox.com/tQcsJ28juS6i3lTG/material.io
Sliders
typen
Continuous slider
https://screenshots.firefox.com/Swa63auO8YXaguj5/material.io
Discrete slider
https://screenshots.firefox.com/uu601B1bVNDH5Q4B/material.io
components 2
Snackbars & toasts
Snackbars
bezieht sich auf die Operation
Toasts Android
system Nachrichten
kurz
nur eine aktion
aktionen sollen nicht blockiert werden
Steppers
Schritt für Schritt Anleitung
nur ein stepper
Editable steps
Non-editable steps
Mobile steps
Optional steps
typen
Horizontal steppers
Vertical steppers
Linear steppers
Non-linear steppers
Alternative labels
können Warnungen Meldungen beinhalten
Tabs
zum organisieren von Content
nur in einer reihe
hat eine Hierarchie
entweder nur Icons oder Text
sollen alle gleich groß sein
typen
fixiert
scrollbar
Text fields
Field types
Single-line
Multi-line
Text area
Input types
Formatted inputs
Nested menus & pickers
https://screenshots.firefox.com/wv6Nsfi0kVdvmFsQ/material.io
https://screenshots.firefox.com/Hghlm2VOGCBK7CNO/material.io
Toolbars
ist nie getrennt
Tooltips
mit Icons
haben kein Dreieck
sollen informieren
Muster
bestätigen
bestätigen
informieren
Daten Formate
Date and time
https://screenshots.firefox.com/HiEbsXOsD9fmhtcL/material.io
Time and date ranges
https://screenshots.firefox.com/mK94i9ntdzcBbJeq/material.io
Time zones
https://screenshots.firefox.com/RDY8pE4gwHqSpi9U/material.io
Date and time modifications by context
https://screenshots.firefox.com/F1X3a69kbtY0SLz7/material.io
Abbreviations
https://screenshots.firefox.com/LqmewQdLDBFu8HIH/material.io
Data redaction and truncation
https://screenshots.firefox.com/WWaPDzIJq5gOcjfo/material.io
leer
https://screenshots.firefox.com/s5yd7zAK1rC4ulU1/material.io
verhindern
Vorschläge (Best Match)
Educational content
Emphelungen
Error
User input errors
Farbe
Hilfe
Counter
nicht kompatible
Gesten
Touch
https://screenshots.firefox.com/D6lbElRLQe1E8JO9/material.io
Bilder laden
https://screenshots.firefox.com/KZVQ9oBwEofCqtwP/material.io
über qualifizierte styles vermeiden
❌ ein basis template, benutzen wenn etwas neu gemacht wird (Basis wo alles gleich funktioniert für jeden Browser) ✅ zwei Stylesheets Modular und personell
pro Seite nur ein call to action
Modular
https://en.bem.info/methodology/