Neues Design: Planet

[vlamers]

Hi,

Danke für die schnelle Antwort.

Ich hatte auch auf eine derartige konstelation getippt.

group.widget .actor_container

Das überlagert das ganze nur mit einer Farbe ohne die Rundung zu beachten. klar weil es der container ist

.group.widget .actor{
    background: green;
    border-bottom-left-radius: 1rem;

Das macht die switches in der gewünschten Farbe. (Grün nur zum testen )
aber die überschrift leider auch.
Dachte die kann man evtl. sepparat definieren.

Gruß

[JNK]

Ich Sitz grad nicht am Rechner, aber vielleicht .switch statt .widget?

[vlamers]

Hi Danke für deine Mühe

.group.widget .actor{

ist die überschrift und der switch

.group .switch .actor{

Das ist nur die überschrift. Abeer der 2te Wert überschreibt nicht die des ersten... Nur entweder oder verwendbar.

Ich schlaf mal drüber. Reicht für heut

Danke

Gruß Volker

[makki]

Ein wenig OT:
Nach meinem Exkurs durch tausende von Free-Font Seiten hab ich ein paar fragen zu den Lizenzen... Bin leider kein Anwalt

Ich auch nicht, aber nach Bauchgefühl sollte das passen wenn man den Author und die Lizenz vollständig nennt (kopieren in LICENSE,COPYING,..)
Dann sollte das sauber sein..

Makki

[Chris M.]

Hm, die aktuelle Version des Planet-Design hat wohl ein paar Regresseions. Spontan fällt mir auf:

• Die Buttons sind verschwunden
  • in der navbar
  • im normalen Bereich - und dort sogar auch das Styling!
  
  
• Das image Element ist aus dem Rahmen gefallen
• Die Page-Links sind sehr kontrastarm weiße Schrift auf gelben Hintergrund

Mir ist klar, dass der aktuelle Stand wohl ein Work-in-Progress ist, daher bitte nicht als negatives Mekkern auffassen ("... kaum übergibt er's schon motzt er...") sondern lieber als Ansporn die Version im SVN immer funktionsfähig zu halten.
Basis für die "funktionsfähig" Aussage ist immer die Demo-Config.

[Chris M.]

Ich nehme o.g. zurück und behaupte das Gegenteil (Meine CSS war in einem Zwischenzustand...)

Mit der richtigen sieht's nun aus wie im Anhang, aber leider auch noch mit ein paar Problemen

[vlamers]

Hoi,

Bei mir sehen die switches usw, normal aus. Evtl hängt noch was im cache?

ich werde hoffentlich die tage wieder dazu kommen, zur zeit muss ich für jede freie minute kämpfen.
die pagelinks sind meine Schuld, ich war auf der suche wo die definiert sind. Sry!

ich hab die letzte woche mit der schrift gespielt (von der navbar). So dass sie sich ein wenig heraushebt, oder sollte sie so minimalistisch wie im orginal lcars bleiben (ich find nur so nie den richtigdn raum, lokal behalt ichs so nur wie solls svn werden?)


Gesendet von meinem A500 mit Tapatalk 2

Edit: jede kritik ist eine hilfe! (mekkern wirds erst nach 1-2k posts)

Edit2: das blau ist hart was ist die halb versteckte schrift in der navbar? die hab ich nicht...

Farbwunsche sind sehr willkommen! wie oben schonmal angedeutet sind farben die sich nicht beißen aber trotzdem gut differieren gar nicht so leicht zu finden

[Chris M.]

ich hab die letzte woche mit der schrift gespielt (von der navbar). So dass sie sich ein wenig heraushebt, oder sollte sie so minimalistisch wie im orginal lcars bleiben (ich find nur so nie den richtigdn raum, lokal behalt ichs so nur wie solls svn werden?)

Ich würde das Planet-Design im Rahmen der künstlerischen Freiheit nahe an dem Original lassen - sonst wirkt's wie eine schlechte Kopie wo man wollte aber nicht konnte.

Man kann aber natürlich Ideen daraus in einem anderen Design verwenden, dass sich dann deutlich weiter entfernt, bis hin zu vollkommenen Abkehr. (Man muss auch nicht zwingend CSS missbräuchlich nutzen - statt der per Border generierten Bögen müsste man sicher auch andere Symbole als Bilder einbinden können)

Zur Schrift:
Ich glaube das Original nutzt nur eine - aber dort unterschiedliche Schriftgrößen zur Unterscheidung. Evtl. lässt sich das noch stimmig mit Fett/nicht Fett erweitern.
Aber LCARS lebt nicht davon - das lebt vor Unterscheidung durch (flächige) Farben

Und noch was anderes zur Schrift:
Wenn man sich etwas mit Buch Design / Layout / ... auseinander setzt (ok, ich hatte es bei meiner Diplomarbeit beim LaTeX etwas übertrieben...) lernt am Anfang, dass man keine Schriften mischen sollte. Die bekannte Ausnahme ist den Fließtext mit Serifen zu setzen und in einer dazu passenden serifenlosen Schrift die Überschrifen.

Und noch was zum LCARS Design:
Mir persönlich gefallen die Varianten mit leichtem Farbverlauf am besten. Quasi die moderne Erweiterung. Die sind zwar vermutlich auch nicht 100% original - aber dennoch dazu sehr stimmig. Gibt ein paar nette Seiten im Netz dazu.

[vlamers]

Hallo,

hab wieder ein wenig Zeit gefunden mich mit dem Design zu beschäftigen.
Ich hab mal die Widgets (switch, info...) in verschiedenen Variationen gemacht. Farbverlauf von oben nach unten, oder links nach rechts.

Welche passt den besser?

Bei den Switches hab ich die Schrift bei .value entfernt da es sowieso durch die Farbe angezeigt wird. Fand ich Stimmiger/übersichtlicher

Für Verbesserungsvorschläge/Kritik(wird nicht als gemecker empfunden ) wäre ich sehr Dankbar. So kann ich das bißchen Zeit das ich habe effektiv nutzen

Gruß

[haegar80]

Für Verbesserungsvorschläge/Kritik(wird nicht als gemecker empfunden ) wäre ich sehr Dankbar. So kann ich das bißchen Zeit das ich habe effektiv nutzen

Ich finde den Farbverlauf von Oben nach unten besser.
Was irgendwie gar nicht geht sind die vielen Farben. Da kann man ja schon fast von "Krieg der Farben" sprechen ;-)

Was hältst du denn davon nur 2 Farben in unterschiedlichen Abstufungen zu verwenden? Dann die Farben immer nur Blockweise anwenden. Für Akzente bzw. Hinweise kann dann eine dritte Farbe dienen.

Ansonsten sieht das echt gut aus...

Gruß
Sascha

[vlamers]

Ja ist schon arg bunt... liegt aber auch evtl daran dass meine Config noch wild durcheinander ist (switches Infos Diagramme...)

Ich hätte an Farbverlauf für Stati von links nach rechts gedacht (auch nur ganz leicht) und für Infos, Diagramme, navbar von oben nach unten. Sollte für eine noch bessere Unterscheidung sorgen.

Gruß und Danke fürs Feedback
Farben werden noch entschärft (diagramm_info (derzeit blau), info-widgets...(krasses gelb))

Gruß und Danke fürs feedback

Edit:

Todo: Diagramme_info Radius links und rechts gleich für differenzierung von Widgets

[Chris M.]

Zuerst etwas Kritik - bitte als Informativ und nicht als Autoritativ auffassen, schließlich habe ich das Design ja "abgegeben":
Unter LCARS GuideLine stehen ein paar gute und allgemeine Regeln drinnen.

Zu den Farben ein Zitat daraus:

LCARS Color Usage
One of the most easily committed crime when designing the LCARS interface is the use of color with a vengeance.
You can spot it a mile away, Multi-Color LCARS...
Let me be blunt here, either get your color theory straight or don’t use it at all.
I would rather see a monotone LCARS interface than one that looks like it had just came out from some sort of horrific color vortex.
[...]
Here are the rules of thumb for LCARS color usages:
One Color: You can never go wrong with using just one color though it might look boring and also convey the idea that you are too fearful of the usage of colors.
Try to use different Tints and Shades [5 of it at most, that's the limit] of that single color to get variety.
Two Colors: Same as with the usage of one color, just make sure all the hue and color combinations do not exceed 5.
Three Colors: Good, you can stop right here, maybe two more tint and shade values if you absolutely have to.
Four Colors: OK you're reaching the danger zone; make sure you assign meaning to the four different colors,
example: a color for idle, a color for normal operations, a color for real-time operations & a color for text. No more.
Five Colors: You had better know what you are doing with all those colors and there had better be a good reason why you have another color.
What is the symbolic meaning of the fifth color ? When a button is flashing in that color what does it mean ?
Six Colors: I have not seen any LCARS interface with more than five colors and looked right.
I don't care if it's a shade of a shade of a tint of a shade of etc; use it at your own peril.
I'm not saying you can't; just don't make a fool of yourself if you do.
Color is a very big part of LCARS, go ahead and multi-color your LCARS...after...you've learned your color theory.

=> Am besten eine Haupt-Farbe aussuchen und eine oder zwei nach üblichen Designregeln dazupassende nehmen. (IIRC ist Gelb und Lila so ein passendes Paar...). Den Rest per Helligkeit und Sättigung machen.

Dort zwar nicht direkt gefunden, aber zwischen den Zeilen gelesen: Wenn's LCARS sein soll, dann nicht die Formsprache verhunzen, d.h. die Halbkreise nicht zu zwei Viertelkreisen mit unterschiedlichen Radien...

Bei den Switches hab ich die Schrift bei .value entfernt da es sowieso durch die Farbe angezeigt wird.

Finde ich sehr schwierig!

• Wenn einer keinen Text will, dann kann er das selber per Mapping machen.
• Und so wird nur die Verwendung des Labels weiter propagiert - was aber durch das inzwischen verfügbare 12-Spalten-Design eher als depreciated zu verstehen sein sollte...
• Was ist mit Gästen o.ä. denen die Bedeutung der Farbe nicht gleich klar ist? Oder mit Farbblinden?

Nun aber das gute:

• Die Farbverläufe gefallen mir!
  In der Navbar hätte ich mir eher ein Links-Rechts als ein Hoch-Runter vorgestellt; da ich es nicht ausprobiert habe, weiß ich auch nicht ob's wirklich besser wäre...
• Das mit den vielen Farben ist so eine Sache:
  Der User mag ggf. bewusst ein Rot und Grün haben (-> Status), obwohl es nicht in's Schema passt. Da sollte IMHO das Design ihn auch nicht zur Wahreit zwingen. Lieber die Farben so definieren, dass diese sich zumindest nicht beißen.
• Die Farben außerhalb des Hauptbereiches (also Tob, Navbar und Footer) finde ich harmonisch. Die Entsättigung tut IMHO dem ganzen gut

[vlamers]

ui an rot-grün schwächen hab ich gar nicht gedacht.... dann muss das wieder rein!
evtl könnte man die switches in einer grund farbe machen und den status in einem farbverlauf in richtung grün / rot machen.
Die vielen farben sind eher noch für die praktische beurteilung welche dazu passt oder eher nicht.
die radien seh ich mir dann nochmal an welche ich verhunzt hab (tippe auf die info widgets)

Danke fürs feedback!!

Gruß

[haegar80]

Für Verbesserungsvorschläge/Kritik(wird nicht als gemecker empfunden ) wäre ich sehr Dankbar. So kann ich das bißchen Zeit das ich habe effektiv nutzen

Was hältst du denn davon, die Höhe der Buttons dynamisch zu vergeben, so daß diese die komplette Höhe des Bildschirms gleichmäßig auffüllen?
Die Breite dann genauso wie der vertikale Balken ohne Halbkreis. Zwischen den Navbar Elementen, dann etwas Schwarz als Abstand. Der Text dann rechtsbündig und nach untern oder oben ausgerichtet. Das zuletzt gewählte kann dann eine Akzentfarbe bekommen.

Die Line lässt sich dann ganz gut gebrauchen, um die Abschnitte zu gliedern.
evtl. kann man die Flavours nutzten und den Abschnitten eine Hautfarbe zu geben, die dann abgestuft wird.

So in etwa...

[vlamers]

Hi,

hab die Beispiele auch ergoogelt. Problem hier ist, dass ich die CV auf 10Zoll bzw 7zoll geräten verwende/verwenden möchte.

- Entweder ist der Kasten so groß, so dass die schrift lesbar bleibt, dass er eigentlich zu klobig wirkt und das ganze unübersichtlich macht.
- das ist auch ein problem mit den dynamischen höhen. Auf dem 7Zoll Gerät ist es jetzt schon so dass 12 Links in der navbar so hoch sind dass ich scrollen muss. Wenn die links dann kleiner werden treff ich die mit meinen zierlichen Daumen nicht mehr Bei 10 Zoll würde es gerade noch gehen.
- Das Eckige Design versuche ich bei Gelegenheit mal.
- Das mit den Hautfarben der Navbar ist eine gute Idee. Ich hatte versucht wenigstens die zuletzt gedrückte einzufärben, aber da scheiterts an der Umsetzung. Evtl hat dazu jemand ne Idee...

Bei mir ist zw den Navbar elementen ein dünner schwarzer strich... Bei dir nicht?

Im Anhang hab ich mal versucht die Farben raus zu nehmen und nur mit Abstufungen der selben Farbe zu arbeiten. (rot grün sind für mich hierbei als Statusanzeige ein muss)
links und rechts halbkreis sind diagramm_infos. Nur rechts halbkreis sind switches. Eckig mit mini Radius sind infos. Ganz Eckig Pagelink
(muss anmerken dass ich mit der Farbgebung nicht zufrieden bin. muss jetzt aber in die Arbeit... )

Gruß