Icon-Design

[following]

Opencaching.de sah ursprünglich [url=http://opencaching.cz/]so[/url] aus. Später - meines Wissens um 2009 - wurde die Seite einem Redesign unterzogen, wobei im Wesentlichen die heute Optik entstand. Viele Benutzer finden dieses Design inzwischen altbacken, und der Opencaching-Verein hat sich auf die Fahnen geschrieben es zu modernisieren. Solange sich niemand findet, der ein komplettes Redesign der ca. 125 [url=http://wiki.opencaching.de/index.php/Entwicklung/Codedoku#Templates]Templates[/url] und hunderten von Grafiken stemmen kann, geht das nur in kleinen Schritten. 2013 wurde z.B. die Karte komplett erneuert und fast alle übrigen Seiten einem kleinen Facelift unterzogen. Aktuell wird an weiteren optischen Verbesserungen gearbeitet.

Eine Teilaufgabe ist die Modernisierung der Icons; darum soll es hier gehen. Sonstiges zum Thema Design bitte in andere Threads, z.B. [url=http://forum.opencaching-network.org/http://localhost//viewtopic.php?t=1]hier[/url].

Wenn wir dem aktuellen "Metro-Design"-Trend folgen wollen, so wie GC es teilweise getan hat (Beispiel: [img]http://www.geocaching.com/images/logtypes/5.png[/img] [img]http://www.geocaching.com/images/logtypes/68.png[/img] [img]http://www.geocaching.com/images/logtypes/7.png[/img]), müssten wir mit Ausnahme der Attribute so ziemlich alle Icons erneuern. Eine gigantische Aufgabe, die ich weder für realisierbar noch für wünschenswert halte: Die einfarbig-flachen Metro-Icons haben eine geringere "optische Kapazität", es gibt Informationsverlust im Bereich Farbe und Kontrast. Finde ich ergonomisch einen Rückschritt, der sich auch als kurzlebige Mode erweisen kann.

Für realistisch halte ich, alle Icons auf eine nicht ganz so hippe, aber ergonomischere und zeitlosere Optik mit leichten plastischen und Farb-Effekten zu bringen, wobei die Attribute weiterhin flach bleiben. Das heißt:

• Die meisten Icons könnten bleiben wie sie sind.
• Zu pixelige, zu kontrastarke oder zu heftig 3D-gerenderte Icons bräuchten ein Redesign.

Folgende Icons halte ich z.B. für überarbeitungsbedürftig:
Zu pixelig und/oder harte Kontraste oder unprofessioneller Look:    [img]http://www.opencaching.de/resource2/ocstyle/images/log/16x16-active.png[/img] [img]http://www.opencaching.de/resource2/ocstyle/images/log/16x16-disabled.png[/img] [img]http://www.opencaching.de/resource2/ocstyle/images/log/16x16-archived.png[/img] [img]http://www.opencaching.de/resource2/ocstyle/images/misc/16x16-email.png[/img]    [img]http://www.opencaching.de/resource2/ocstyle/images/cacheicon/traditional-s.gif[/img] [img]http://www.opencaching.de/resource2/ocstyle/images/cacheicon/multi-s.gif[/img] usw.

altmodischer 3D-Stil: [img]http://www.opencaching.de/resource2/ocstyle/images/log/16x16-found.png[/img] [img]http://www.opencaching.de/resource2/ocstyle/images/action/16x16-addimage.png[/img] [img]http://www.opencaching.de/resource2/ocstyle/images/profile/32x32-security.png[/img] usw, wobei der Haken schon etwas entschärft wurde, siehe eins drunter

davon abgeleitete Icons wie [img]http://www.opencaching.de/resource2/ocstyle/images/cacheicon/moving-n-found.gif[/img]

pixelige Attribute: [img]http://www.opencaching.de/resource2/ocstyle/images/attributes/submerged.png[/img] [img]http://www.opencaching.de/resource2/ocstyle/images/attributes/flashlight.png[/img] [img]http://www.opencaching.de/resource2/ocstyle/images/attributes/safari.png[/img] (untere Hälfte des Safari-Icons)

mehr verwaschen als nötig: [img]http://www.opencaching.de/resource2/ocstyle/images/difficulty/diff-35.gif[/img] [img]http://www.opencaching.de/resource2/ocstyle/images/difficulty/terr-35.gif[/img] [img]http://www.opencaching.de/resource2/ocstyle/images/cacheicon/16x16-2.gif[/img] [img]http://www.opencaching.de/resource2/ocstyle/images/attributes/car.png[/img] usw.

fette Schatten, haben wir sonst gar nicht: [img]http://www.opencaching.de/resource2/ocstyle/images/misc/wp_parking.png[/img] [img]http://www.opencaching.de/resource2/ocstyle/images/misc/wp_reference.png[/img] [img]http://www.opencaching.de/resource2/ocstyle/images/misc/wp_path.png[/img] usw. Die Aqua-Optik fällt auch aus dem Rahmen, aber irgendwie finde ich sie hübsch.

Wenn auf einer Seite ein paar altbackene Icons auftauchen, hilft das hübschste Design drumherum nichts, es wird von den Icons zerschossen.

Die Symbolik wie die Flaggen und Schatzkisten inkl. Farbgebung halte ich für "Corporate Identitiy" von OC, die erhalten bleiben sollte - nur halt etwas moderner und konsistenter.

Dieser Beitrag ist einersets als Diskussionsgrundlage gedacht - könnt ihr mir soweit folgen; ensprechen diese Vorschläge den Zielen des Verein und den Wünschen der Nutzer? Andererseits ist es ein Aufruf an alle, die Erfahrung mit Icon-Design haben und sich zutrauen, solche Icons in einer professionelleren Qualität zu liefern - ob neu gezeichnet oder überarbeitet oder als überarbeitete Version anderer freier Icons aus Iconbibliotheken.

[Siggiiiiii]

Nur zum Verständnis, ist das so wie unten gemeint oder ganz was anderes hipperes?

[following]

[quote="Siggiiiiii"]
Nur zum Verständnis, ist das so wie unten gemeint oder ganz was anderes hipperes?
[/quote]

Weder noch.

[Siggiiiiii]

Okay, wenn es so kleine 3D Effekte nicht sind, bin ich schon sehr gespannt, wie die Überarbeitung von einem Profi aussieht.

[mic@]

Spricht was dagegen, die Icons von opencaching.pl zu übernehmen (natürlich nur nach Absprache)?
Das wäre dann auch ein erster Schritt in Richtung gemeinsame Codebasis.

[following]

Ich erkenne in dem polnischen Icon-Satz in der Summe keine Verbesserung gegenüber unserem, und mit der Codebasis hat das überhaupt nichts zu tun.

[GR1NDER]

Hallo zusammen,

nachdem ich mich vor kurzem Angeboten habe dem OC-Team in Sachen grafisches Design und Umsetzung zur Hand zu gehen wurde ich auch prompt auf diesen Thread verwiesen.
Ich hatte nun im Vorfeld schon regen E-Mail-Kontakt mit einigen Mitgliedern und um "open" zu bleiben fasse ich noch einmal kurz den aktuellen Stand der Diskussion zusammen.

Zunächst geht es erst einmal darum die Aufgabe genauer zu umreißen/abzustecken.


Mein Vorschlag war das komplette Icon-Set aufzufrischen und das nicht nur in optischer, sondern auch in technischer Hinsicht, nämlich als [url=http://liechtenecker.at/svg-die-zukunft-von-grafiken-auf-webseiten/]SVG-Grafiken[/url]. Die tatsächlichen (evtl. negativen) Auswirkungen dieses Schrittes sind noch nicht ganz klar. Vielleicht hat ja jemand bereits hilfreiche Erfahrungen gemacht, die er mit uns teilen will? Ich selbst nutze einige SVG-Grafiken auf meiner eigenen Website und konnte bis Dato noch keine Probleme feststellen, aber das muss ja nichts heißen.
Da es sich um ein recht großes Unterfangen handelt und ich natürlich nicht hauptberuflich, unentgeltlich arbeiten kann ;-) wird sich das Projekt sicherlich eine ganze Weile ziehen. Deshalb war mein Vorschlag das ReDesign auf kleinere Einheiten runter zu brechen und diese Eine nach der Anderen anzugehen. Auf diese Weise kann jeder den aktuellen Fortschritt beobachten und die tatsächlichen Auswirkungen können getestet werden. Bei bedarf kann dann noch während der weiteren Entwicklung nachgesteuert werden.
Unabhängig von den technischen Aspekten habe ich nicht vor das Rad komplett neu zu erfinden. Die Icons sollen die bestehende Bildsprache weiter verwenden, so dass jeder der sie schon kennt sie auch wieder erkennt, Neulinge sie aber hoffentlich auch intuitiv verstehen können ohne stundenlang eine Legende studieren zu müssen.
Da die minimale Größe der Icons auf 16x16 Pixel festgelegt ist stößt man ganz schnell an die Grenzen der machbaren Komplexität. Aus diesem Grund sehe ich, als Pragmatiker, hier eine klare und wenig verspielte Optik schon fast als ein "Muss" an.


Das war's bis jetzt erst mal. Was haltet Ihr von den Vorschlägen? Habt Ihr Andere, Bessere?


Grüße


Lars Röhm

[mic@]

[quote="GR1NDER"]Was haltet Ihr von den Vorschlägen?[/quote]

Ich antworte mal minimalistisch ==> +1 

[following]

Hallo Lars,

erst mal vielen Dank, dass du Opencaching im Design-Bereich unterstützen möchtest!

Kannst du mal ein paar Beispiel dafür posten, wie du dir die neuen Icons vorstellst?

[quote="GR1NDER"]
Da es sich um ein recht großes Unterfangen handelt und ich natürlich nicht hauptberuflich, unentgeltlich arbeiten kann ;-) wird sich das Projekt sicherlich eine ganze Weile ziehen. Deshalb war mein Vorschlag das ReDesign auf kleinere Einheiten runter zu brechen und diese Eine nach der Anderen anzugehen. Auf diese Weise kann jeder den aktuellen Fortschritt beobachten und die tatsächlichen Auswirkungen können getestet werden. Bei bedarf kann dann noch während der weiteren Entwicklung nachgesteuert werden.
[/quote]

Das könnten wir über unseren internen Testserver machen, auf den du Zugriff bekommst. Die Icons würden schrittweise eingespielt und man kann es sich im Kontext anschauen und mit dem übrigen Seitendesign abstimmen. Wenn's fertig ist, würde es dann auf dem Produktivsystem online gestellt.

- Peter


PS: Was ich am wichtigsten finde: Ein zeitloses Design mit eigenem Charakter zu wählen, das nicht zu sehr der aktuellen Mode entspricht wie man sie auf modernen Websites sieht. Man läuft sonst Gefahr, dass es in fünf Jahren wieder alt aussieht und dann niemand da ist, der das nochmal alles überarbeitet.

[GR1NDER]

Eine konkrete Vorstellung habe ich ehrlich gesagt noch nicht …

Mir war es vorerst mal wichtig den Rahmen abzustecken. Des Weiteren wäre es wirklich äußerst hilfreich wenn ich vielleicht ein Aufstellung der Icons inkl. ihrer jeweiligen Bedeutung bekommen könnte. Vielleicht nur mal für den ersten kleinen Teilbereich (welcher das sein soll ist mir erst mal egal), ich würde mir dann spätestens übers Wochenende ein paar Gedanken machen und die ersten groben Vorschläge hier präsentieren.

Falls Ihr natürlich schon ganz gute Vorstellungen davon habt wohin die Reise gehen soll, dann ruhig her mit den Beispielen 

Grüße

Lars

[mic@]

[quote="GR1NDER"]Des Weiteren wäre es wirklich äußerst hilfreich wenn ich vielleicht ein Aufstellung der Icons inkl. ihrer jeweiligen Bedeutung bekommen könnte.[/quote]

Das gibt es doch online: http://www.opencaching.de/articles.php?page=cacheinfo
HTH, Mic@

[following]

mic@, das ist nur ein Bruchteil der vorhandenen Icons.

[quote="GR1NDER"]
Des Weiteren wäre es wirklich äußerst hilfreich wenn ich vielleicht ein Aufstellung der Icons inkl. ihrer jeweiligen Bedeutung bekommen könnte. Vielleicht nur mal für den ersten kleinen Teilbereich (welcher das sein soll ist mir erst mal egal),
[/quote]

Ich hatte ja oben schon einige Beispiele genannt, die ich für überarbeitungsbedürftig halte. Die Bedeutung dieser Icons ist:

[img]http://www.opencaching.de/resource2/ocstyle/images/log/16x16-active.png[/img] Cache kann gesucht werden
[img]http://www.opencaching.de/resource2/ocstyle/images/log/16x16-disabled.png[/img] Cache ist vorübergehend deaktiviert
[img]http://www.opencaching.de/resource2/ocstyle/images/log/16x16-archived.png[/img] Cache ist / wurde archiviert
[img]http://www.opencaching.de/resource2/ocstyle/images/misc/16x16-email.png[/img]  Email senden

[img]http://www.opencaching.de/resource2/ocstyle/images/cacheicon/traditional-s.gif[/img] [img]http://www.opencaching.de/resource2/ocstyle/images/cacheicon/multi-s.gif[/img]  [img]http://www.opencaching.de/resource2/ocstyle/images/attributes/submerged.png[/img] [img]http://www.opencaching.de/resource2/ocstyle/images/attributes/flashlight.png[/img] [img]http://www.opencaching.de/resource2/ocstyle/images/attributes/safari.png[/img] Siehe der Link von mic@ oben.

[img]http://www.opencaching.de/resource2/ocstyle/images/log/16x16-found.png[/img] Cache wurde gefunden
[img]http://www.opencaching.de/resource2/ocstyle/images/action/16x16-addimage.png[/img] Bild / Bilder
[img]http://www.opencaching.de/resource2/ocstyle/images/profile/32x32-security.png[/img] Datenschutz

[img]http://www.opencaching.de/resource2/ocstyle/images/cacheicon/moving-n-found.gif[/img] gefundener, deaktivierter beweglicher Cache

[img]http://www.opencaching.de/resource2/ocstyle/images/difficulty/diff-35.gif[/img] Schwierigkeit 3,5
[img]http://www.opencaching.de/resource2/ocstyle/images/difficulty/terr-35.gif[/img] Geländewertung 3,5

[img]http://www.opencaching.de/resource2/ocstyle/images/misc/wp_parking.png[/img] Parkplatz
[img]http://www.opencaching.de/resource2/ocstyle/images/misc/wp_reference.png[/img] Station oder Referenzpunkt
[img]http://www.opencaching.de/resource2/ocstyle/images/misc/wp_path.png[/img] Pfad (Zugangsweg)

Weitere verwandte Icons finden sich jeweils im gleichen Verzeichnis. Die URL des [img]http://www.opencaching.de/resource2/ocstyle/images/log/16x16-active.png[/img]-Symbols ist z.B. http://www.opencaching.de/resource2/ocstyle/images/log/16x16-active.png, d.h. die Originaldatei liegt zusammen mit Icons aus dem (hoffentlich) gleichen Bereich hier: https://github.com/OpencachingDeutschla ... images/log.

Einen Komplettüberblick der Icons gibt's bislang nicht; aus den [url=http://wiki.opencaching.de/index.php/Entwicklung/Codedoku#Grafiken]hier[/url] genanntenn Gründen ist es auch nicht trivial, einen zusammenzustellen. Wer's tun mag, möge bitte "hier" rufen und loslegen.

Einen Anforderungkatalog für ein Komplett-Redesign der Icons gibt's auch nicht, weil dieser (durchaus interessante) Vorschlag neu ist. Mir ging's ja eingangs nur darum, die qualitativ schwachen Exemplare an die übrigen Icons anzugleichen.

[GR1NDER]

Danke mic@, Ihr kennt eure Seiten eben doch besser.

Wenn das alles ist, dann sehe ich den Aufwand als nicht allzu groß an.(Hat sich zwischenzeitlich erledigt  )
Der erste Abschnitt, Cacheart, ist wohl der Interessanteste. Die anderen Icons müssen lediglich neu gezeichnet werden da sie auf hochaufgelösten Displays alle verschwommen sind.

Zur Erklärung damals, als die Welt noch in Ordnung war, hatten die Monitore nicht allzu unterschiedliche Auflösungen (Verhältnis von Pixelanzahl(Lochmaske) zu Monitorgröße) und als näherungsweisen Mittelwert hat man eben 72 dpi errechnet was auch unter meinen Kollegen noch heute so in den Köpfen drin ist. Diese Aussage ist heute einfach nicht mehr Zeit gemäß, z. B. das Display vor dem ich gerade sitze hat eine Breite von 59,5 cm und stellt dabei 5120 Pixel dar was eine tatsächliche Auflösung von etwa 219 dpi ergibt. Auf Handys und Tablets kann dieser wert auch noch höher ausfallen. Da bei einer pixelgenauen Darstellung auf solchen Displays alles mikroskopisch klein wäre müssen die Grafiken entsprechend skaliert werden wodurch auf Pixeln basierende Darstellungen matschig wirken.
Deshalb dachte ich, macht es Sinn "alle" Icons neu zu zeichnen und eben das SVG-Format zu verwenden, die angesprochene Problematik stellt sich hier nicht, ein weiterer Vorteil ist die deutlich einfachere Bearbeitung der Icons in der Zukunft.

Ich möchte mich auch keinesfalls Aufdrängen oder gar jemandem auf die Füße treten …

Liebe Grüße

Lars

[dl6hbo]

Angesichts dieser viel versprechenden Aktivität, stellt sich mir die Frage, ob eigentlich unsere Software klaglos statt GIF, TIFF, PNG usw. auch SVG Grafiken anzeigt, oder ob das Re-Design eventuell eine komplette Überarbeitung aller Code-Schnipsel bedeutet, die sich mit der Anzeige dieser Grafiken beschäftigen.

Food for thought. 

[mambofive]

[quote="dl6hbo"]
Angesichts dieser viel versprechenden Aktivität, stellt sich mir die Frage, ob eigentlich unsere Software klaglos statt GIF, TIFF, PNG usw. auch SVG Grafiken anzeigt, oder ob das Re-Design eventuell eine komplette Überarbeitung aller Code-Schnipsel bedeutet, die sich mit der Anzeige dieser Grafiken beschäftigen.
[/quote]

Ich denke, das ist eher ein Problem des Browsers als unserer Software, oder sehe ich das falsch? Aber genau wegen solcher Fragen macht es sicher Sinn, erstmal einen kleinen Teil der Icons zu bearbeiten (z.B. die Cachetypen) und dann auf dem Testsystem zu prüfen, wie die Wirkung (und die Performance...) auf den diversen Browsern etc. ist.

Vielen Dank jedenfalls, dass Du dich diesem Thema annimmst, Gr1nder!