Gute Erfahrungen mit Farbabstufen für Material-Design gesucht

  • Antworten:4
3
Tobias S.
  • Forum-Beiträge: 15

31.10.2014, 11:41:40 via Website

Hi ihr,
nach dem ja beim neuen Material-Design-Pattern die Farbgebung eine wichtige Rolle spielt und ich "leider" nur einen Entwickler jedoch keinen Gestalter-Background besitze, wollte ich euch fragen ob ihr schon Best-Practice-Erfahrungen mit der Abstufung der einzelnen Farbattribute habt.

Im Moment bin ich auf der Suche nach einer schönen "grünen" Farbgestaltung. Diese soll jedoch nicht schreiend sein wie z.b. das Grün der egoFM App sondern eher dezent.

Eine Quelle die ich bisher gefunden habe war der Style Guide direkt von Google.

Mein derzeitiges "Anfänger"-Farbsetting:

    <style name="AppTheme" parent="android:Theme.Material.Light">
    <item name="android:colorPrimary">#ff7fab00</item>
    <item name="android:colorPrimaryDark">@android:color/holo_green_dark</item>
    <item name="android:colorAccent">@android:color/darker_gray</item>
    <item name="android:navigationBarColor">@android:color/holo_green_dark</item>
    <item name="android:actionMenuTextColor">@android:color/white</item>
</style>

Habt ihr Ideen oder Tipps? Vielen Dank!

LG, Tobi

— geändert am 31.10.2014, 12:00:17

Antworten
pepperonas 23
pepperonas
  • Forum-Beiträge: 434

31.10.2014, 12:11:21 via Website

Hallo,
habe deine styles gerade mal in meine IDE geklatscht.
Die Schrift würde ich vielleicht einem minimalem Grauanteil kombinieren. zB #eeeeee oder #e0e0e0
Als Akzent fände ich den Grauton als eher "unspektakulär" - kann aber je nach App bzw. Zielgruppe auch Sinn machen , aber ich habe auch nicht so die Ahnung von Form und Gestaltung. ^^

Open Source

Tobias S.

Antworten
12
Georg C.
  • Forum-Beiträge: 235

01.11.2014, 00:25:32 via Website

Hallo Tobi,
weil das Thema Grafik / Layout sich hier relativ oft wiederholte, werde gerne dir / euch ein paar tricks (was Grafik angeht) verraten. Leider erst ab Sonntag habe wieder etwas Zeit.
Poste mir aber (falls interessiert) dein "grün" - nur so grob - es wird sowieso anderes aussehen. (laughing) Und bis Sonntag.

LG
Georg

— geändert am 01.11.2014, 00:27:09

Sorry für Gramatik & Stilistik Fehler.

pepperonas

Antworten
3
Tobias S.
  • Forum-Beiträge: 15

01.11.2014, 10:03:16 via Website

Hi,
klar, schaden kann es ja auf einen Fall. Ich möchte einen sehr 'cleanen', möglichst hellen Look erzeugen. Im Moment bin ich für Laien-Augen sehr zufrieden. Vor allem für die erste Stunde mit Android und Material Design.

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="TSTheme" parent="android:Theme.Material.Light">
        <item name="android:colorPrimary">#7cb342</item>
        <item name="android:colorPrimaryDark">#558b2f</item>
        <item name="android:colorAccent">@android:color/darker_gray</item>
        <item name="android:navigationBarColor">#558b2f</item>
        <item name="android:actionMenuTextColor">#ffeeeeee</item>
        <item name="android:actionBarStyle">@style/TSTheme.ActionBarStyle</item>
    </style>

    <style name="TSTheme.ActionBarStyle" parent="android:Widget.Material.Light.ActionBar">
        <item name="android:titleTextStyle">@style/TSTheme.ActionBar.TitleTextStyle</item>
        <item name="android:background">@android:color/transparent</item>
    </style>

    <style name="TSTheme.ActionBar.TitleTextStyle" parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Title">
        <item name="android:textColor">#558b2f</item>
        <item name="android:textSize">32dp</item>
    </style>

</resources>

So sieht es bisher aus:

image

Antworten
12
Georg C.
  • Forum-Beiträge: 235

02.11.2014, 23:40:54 via Website

Hallo,
... hmmmmm .... als ich deine xml Datei gesehen habe, befürchte ich, dass ich das alles falsch verstanden habe; aber;

klar, schaden kann es ja auf einen Fall.

Also ok. -> schaden kann es auf keinen Fall.
Ich habe deine #7CB342 (dein Grün) Farbe als Anfang (Muster / Vorgabe)
genommen.
Bearbeitungsprozess:
Bild-Link

1)
Deine #7CB342 Farbe befindet sich in der Mitte, die habe ich mit jemals 50% heller, bzw. dunkler gemacht. Daraus sind die #4A8110 bzw. #AEE574 Farbtöne entstanden. Die befinden sich im gleichen Pantone und passen damit zu sich 100%- ig. Weitere Farben, die zu sich passen kann man aus dem Regenbogen entnehmen! Deshalb die Abbildung.
Nach Links (von Grün) haben wir Blau, nach Rechts Gelb. Auch die Farbkombination ist 100%- ig sicher! Also passt zusammen. Das Gelbe streifen soll es bestätigen - es harmonisiert alles.

2)
Hier habe ich einfach paar weitere Grafiken mit einem Farbverlauf zugefügt, wobei oberes einen Farbverlauf aus den entstandenen (-50 - +50 Helligkeit) Farben hat, und unter, habe ich einfach ein Gelb in die hellere Variante (#AEE574) Verlauf genommen. Auch dass harmonisiert alles zusammen. Auf der Linkenseite des Regenbogen (von Grün abgesehen) befindet sich blau. Da machen wir einen Button in der Farbe.
Obwohl es schon etwas besser aussieht .... sieht noch nicht gut aus.
Die Tendenz heutzutage ist das spielen mit der Transparenz!
Damit es klar vorkommt, habe ich dein Grün als Hintergrund genommen und; ....

3)
Das Grünes Hintergrund habe ich mit:
Filter Wolken
Filter Körnung
verfremdet.
Weil es zu dominant wirkte, wurde es mit Weichzeichnen (2,5 px) Filter, etwas in Hintergrund gesetzt.

4)
Hier habe ich dem Hintergrund einen (abgerundeten - heute "modern") Rammen verpasst, wie auch ein paar Linien zugefügt. Oberes Teil soll für die eingaben und den Button einzeige dienen, unten entsteht gewiesene "Leere". Um das Gleichgewicht zu behalten klatsche ich ein paar drahtspiralen herein. Nun die rauben den gesamten Fokus auf sich! - deshalb habe ich die Transparenz der drahtspiralen auf 30% gemaht -> und gut ist es.

5)
Das Hintergrund soll hier fertig sein, die (3) zugefügte Komponente sehen aber etwas "komisch" aus. Machen wir .... spielen wir mit der Transparenz. Allen drei eine 50% Transparenz verpassen.
Das Ergebnis:

Fertig-Bild

Hoffe das ich im Bereich Grafik / Layout etwas weiter helfen könnte.
Fast jede - jetzt Android Components -> läst sich einen Hintergrundbild einfügen - und dass kann bei eigenen "Sachen" genutzt werden.

LG
Georg

— geändert am 02.11.2014, 23:57:06

Sorry für Gramatik & Stilistik Fehler.

Antworten