MS Teams

Farben für App

Die spezifische Anwendung von Farben kann je nach dem spezifischen Kontext und den Anforderungen der App variieren.

Allgemeine Leitlinien, wie verschiedene Schlüsselfarben in App-Designs verwendet werden können:

Primärfarben:
App-Header und Navigationsleisten: Primärfarben werden oft für die Hauptelemente wie App-Header, Navigationsleisten und Schaltflächen verwendet, um wichtige Funktionen oder Aktionen hervorzuheben.

Sekundärfarben:
Akzentfarben und Call-to-Action-Elemente: Sekundärfarben können für Akzentuierungen und Call-to-Action-Elemente verwendet werden, um wichtige Interaktionspunkte hervorzuheben. Zum Beispiel für Schaltflächen, Links oder Benachrichtigungen.

Neutralfarben:
Hintergründe und Text: Neutralfarben eignen sich gut für Hintergründe, insbesondere wenn du möchtest, dass Inhalte oder andere Elemente darauf hervorstechen. Sie werden auch häufig für Text verwendet, um die Lesbarkeit zu verbessern.

Tertiärfarben:
Akzentuierung und Variation: Tertiärfarben können dazu verwendet werden, bestimmte Elemente hervorzuheben und Variationen innerhalb der Farbpalette zu schaffen. Dies könnte zum Beispiel für spezielle Grafiken, Icons oder kleine Designakzente sein.

Richtlinien der Material Design 3:

Schlüsselfarben werden aus dem Farbton der Eingabefarbe erstellt, indem Chroma und Ton angepasst werden.

(1) Primär kann Ihre Hauptmarkenfarbe oder die am häufigsten verwendete primäre Akzentfarbe sein.
Die primäre Schlüsselfarbe wird als Quellfarbe verwendet, ähnlich wie die Quellfarbe in der dynamischen Einstellung, und überschreibt alle anderen Schlüsselfarben. Legen Sie diese daher zuerst fest. Das bedeutet, dass keine zusätzlichen Farben hinzugefügt werden müssen

(2) Sekundäre Rollen werden für weniger prominente Komponenten in der Benutzeroberfläche verwendet und erweitern gleichzeitig die Möglichkeiten zur Farbdarstellung.

(3) Neutrale Rollen werden für Oberflächen und Hintergründe sowie für stark hervorgehobene Texte und Symbole verwendet. Ihre Markenfarben werden nun in das Kernfarbschema aufgenommen, das an den M3-Farbraum angepasst ist, vollständig zugänglich ist und als Design im Code exportiert und implementiert werden kann.

(4) Tertiärrollen werden für kontrastierende Akzente verwendet, die dazu dienen können, Primär- und Sekundärfarben auszugleichen oder die Aufmerksamkeit auf ein Element zu lenken.

Pixeldichte

DIP (Density-Independent Pixel) und DPI (Dots Per Inch) sind Begriffe, die in der Grafik- und Bildschirmtechnologie verwendet werden, insbesondere im Kontext von Mobilgeräten. Hier sind die Unterschiede zwischen DIP und DPI:

DIP (Density-Independent Pixel):

1. Definition: DIP ist eine Einheit, die in der Softwareentwicklung verwendet wird, um grafische Elemente unabhängig von der Pixeldichte eines Bildschirms zu beschreiben.
2. Unabhängigkeit von der Pixeldichte: Ein DIP repräsentiert eine Einheit der Größe, die unabhängig von der tatsächlichen Pixeldichte ist. Dies bedeutet, dass ein DIP auf verschiedenen Bildschirmen gleich groß erscheint, unabhängig davon, ob es sich um einen hochauflösenden Bildschirm mit hoher Pixeldichte oder einen Bildschirm mit niedriger Pixeldichte handelt.
3. Verwendung in der Softwareentwicklung: Entwickler verwenden DIPs, um die Größe von Benutzeroberflächenelementen festzulegen, ohne sich um die spezifische Pixeldichte des Geräts kümmern zu müssen. Dies ermöglicht eine konsistente Darstellung auf verschiedenen Geräten.

DPI (Dots Per Inch):

1. Definition: DPI ist eine Maßeinheit, die die Anzahl der Bildpunkte (Pixel) pro Zoll auf einem Bildschirm oder Druckmedium angibt.
2. Pixeldichte: DPI gibt an, wie dicht die Pixel auf einem Bildschirm platziert sind. Ein höherer DPI-Wert bedeutet eine höhere Pixeldichte, was zu einer schärferen Anzeige führt.
3. Verwendung: DPI wird oft im Druckwesen und in der Bildschirmtechnologie verwendet, um die Qualität von Ausdrucken oder die Schärfe von Bildschirmdarstellungen zu beschreiben. In der Regel wird es in Bezug auf die Hardware und die physikalischen Eigenschaften eines Bildschirms verwendet.

Zusammenfassung:

• DIP: Einheiten in der Softwareentwicklung zur Größenangabe von Benutzeroberflächenelementen, unabhängig von der Pixeldichte.
• DPI: Eine Maßeinheit, die die Anzahl der Pixel pro Zoll auf einem Bildschirm oder Druckmedium angibt, und wird oft verwendet, um die Pixeldichte eines Bildschirms zu beschreiben.

In der Praxis sind DIPs und DPI eng miteinander verbunden, da DIPs dazu dienen, eine konsistente Benutzeroberfläche über verschiedene Pixeldichten hinweg zu ermöglichen. Entwickler verwenden DIPs, um die Größe von UI-Elementen zu definieren, und die Plattform passt diese dann entsprechend der Pixeldichte des Geräts an.

adaptiv vs. responsive

Sie können eine adaptive App haben, die nicht responsive ist, oder umgekehrt.
Und natürlich kann eine App beides oder keines von beidem sein.

Adaptives Design:

• Es werden separate Designs für Desktop-Computer, Tablets und Mobilgeräte erstellt
• Media Queries oder andere Techniken, um das Gerät zu identifizieren etc. Mit Media Queries werden Breakpoints gesetzt.
• Bessere Leistung, da nur das Layout für erkanntes Gerät geladen wird

Responsive Design:

• Einheitliches Layout für alle Geräte. Dynamische Anppasung an verschiedenen Bildschirmgrößen
• Flüssige Raster und flexible Elemente. Skalierung proportional zw. UI-Elementen und Bildschirmabmessungen
• Schwerpunkt in Verwendung von Media Queries liegt darauf, dass das Layout dynamisch auf verschiedene Bildschirmgrößen reagiert, ohne spezielle Designs für bestimmte Geräte vorzusehen.

Beide Ansätze haben jedoch gemeinsame Ziele:

• Benutzerfreundlichkeit: eine gute UX, unabhängig vom verwendeten Gerät.
• Optimierung für verschiedene Geräte: die Benutzeroberfläche auf einer Vielzahl von Geräten und Bildschirmgrößen gut dargestellt wird.

Kurze Einführung in Responsive Design (EN) ca. 6 min.: https://www.linkedin.com/learning/mapping-the-modern-web-design-process/responsive-web-design-as-a-process-14881664?u=36053084