Archiv der Kategorie: Icons & Symbole

Icons, Icon, Symbol, Icon Design, Symbole, Navigation

Testsiegel Design

Jeden Tag prasseln auf uns unzählige Testsiegel in nahezu unendlich sich variierendem Erscheinungsbild. Es wird höchste Zeit sich das Design dieser kleinen Vertrauensmacher genauer anzuschauen.

Beispiel Bankentest-Siegel für Girokonto der DKB Bank Weiterlesen

Icons

Wie schwierig manche Piktogramme zu verstehen sind, zeigt dieses Beispiel von zeit.de. Während die meisten Icons schnell und leicht zu erfassen sind (Partnersuche, Reisen, Finanzen) sind andere wiederum ohne den erklärenden Text hoffnungslos verloren. Besonders schwierig zu „lesen“ sind die Icons von Literatur und Studium. Sind vielleicht auch schwer zu differenzieren, aber es gibt auch Beispiele in der Praxis, die mehr gelungen sind. Als ein besonderes Highlight würde ich das Icon für Kunst & Kultur bezeichnen: also dieser hochspringender Mann ist einfach obskur 🙂

Icons

Fazit: Es gibt nur eine handvoll an Icons, bzw. Piktogrammen, die eindeutig ohne einer textlichen Erklärung zu verstehen sind, wie zum Beispiel international verbreitete Zeichen an Flughäfen. Um Missverständnisse zu vermeiden sollte man im Webdesign mindestens bei einem Mouseover eine Erklärung einblenden oder permanent anzeigen.

E-Commerce Icons bei jellyfish.com

Es gibt unzählige Icons in den unzähligen Online Shops dieser Welt. Eine ganz passable und angenehm unaufdringliche, weil endlich mal monochrome Sammlung für die Shop Kategorien sieht man auf jellyfish.com – einem Shopvergleich-Portal, das von Microsoft gekauft wurde. Man könnte meinen, es sieht sehr klassisch aus, aber andererseits ist es wirklich erleichternd, keine Bonbon-bunten Icons des sogenannten Web 2.0 Looks mehr ansehen zu müssen.

jellyfish.com Icons Online Shop Kategorien

Lustige Piktogramme Frau – Mann

Jeder kennt die klassischen Zeichen an den Türen der Toiletten: den kleinen, pinkelnden Jungen und das kleine, nun ja, natürlich sitzendes Mädchen auf dem Topf. Das bietet eine sehr breite Angriffsfläche für jeden Designer. Nach den äußerst reduzierten Piktogrammen, bekannt wohl von jedem typischen Flughafen und Bahnhof (und stark verbreitet seit den Olympischen Spielen 1972 in München von Otl Aicher), kam anscheinend langsam, aber sicher die Abneigung gegenüber den sehr schlichten und auf die Dauer wohl etwas langweiligen Wegweiser zum Topf. Die Ideenfindung ist bunt und hier ist eine nette Auswahl an ein paar lustigen Symbolen und Zeichen:

Piktogramm Toilette

Weiterlesen

Spiegelung der Grafik (oder Logos)

Die schicke Spiegelung der Grafik für das Logo oder einer Überschrift in einer Webseite oder einem Blog zu machen bedarf es nicht unbedingt einer Bearbeitung im Photoshop. Den fast schon zum Web 2.0 Standard Effekt kann man auch mit ein bisschen AJAX genau so schön hinbekommen.

Spiegelung Grafik Logo

Man bindet den javascript Code einmal in die Seite ein und ruft dann Bedarf für die zu spiegelnde Grafik sehr einfach auf: class=“reflect“ alt=“reflection.js“

Das schafft auch jeder Designer ohne allzu große Programmierkenntnisse!

AJAX Code für die Spiegelung der Grafik gibt es bei AjaxDaddy kostenlos zum Download »

Dieser AJAX Code funktioniert in allen wichtigen Browsern: ab Internet Explorer 5.5, ab Mozilla Firefox 1.5, ab Opera 9 und im Safari. Der Script ist so geschrieben, dass in den älteren Browsern die Spiegelung der Grafik einfach nicht auftaucht (keine Fehlermeldungen oder broken images). Der Code ist sehr schlank und braucht nicht einmal 5 KB.

Neue Icons für Adobe Creative Suite 3

Die Icons des neuen Softwarepaketes von Adobe ist gerade aus der grafischen Sicht wirklich sehr enttäuschend. Als ich das blaue Icon für Adobe Photoshop 3 Beta zum ersten Mal gesehen habe (schlichter Farbverlauf) und zwei große weiße Buchstaben Ps, war ich felsenfest davon überzeugt, dass dieses Icon eben NUR für die Betaversion gedacht wäre. Und die regulären Programme die modernen und angemessenen Icons vor der Release erhalten würden. Von wegen! Es gab dann doch eine sehr große Überraschung in der fertigen Creative Suite 3 die Programme Icons in diesem „zu“ schlichten Design zu sehen. Alle mit einem einfachen Farbverlauf und den zwei Buchstaben stellvertretend für die Programmnamen (Photoshop, Indesign, Illustrator usw.). Die Problematik allerdings schon klar: durch den Kauf von Macromedia bietet Adobe ein sehr umfrangreiches Programme Set an und die Unterscheidbarkeit zwischen 8 oder 10 Icons rein durch das grafische Erscheinungsbild ist schwer zu garantieren. Das rechtfertig den Einsatz von typografischen Mitteln vollkommen, doch etwas mehr liebevolleres Design kann man von einem „Design“ Software Anbieter doch erwarten!

Adobe CS3 Icons

Das kam anscheinend bei vielen anderen Gestaltern und Designern so ähnlich an – und deswegen hat koregraphik.com ein neues Icons Set für Adobe Creative Suite 3 kostenlos zum Download angeboten!

Icons & Symbole Design – Star Flashes

Nicht unbedingt die allerneueste Erfindung im Design, doch ein unverzichtbares Mittel um etwas hervorzuheben sind sogenannte „Star Flashes“. Eine einfache und effektive Möglichkeit auf etwas Neues oder Besonderes im Angebot der Website hinzuweisen. Das einzig Neue im sogenannten Web 2.0 Design ist die „scheinende“ Oberfläche der Symbole im Aqua-Look und die frischen Farben.

Symbole Icons

Icons für die multiple Seitendarstellung

Man begegnet nahezu auf jeder Website, die mehrere Seiten als Suchergebnis anzeigt oder eingesetzt als einfache Navigationshilfe zwischen vielen Seiten der selben Kategorie wie zum Beispiel Pics gallery. Einige dieser kleiner Grafiken sind gelungen, andere weniger, aber man sieht: für das gleiche Problem gibt es viele Lösungen. Oder denkt man das nur im ersten Augenblick und dahinter steckt ein inzwischen traditionelles System?

Eine sehr schöne, rein typografische Lösung der nachtagenten, man sieht viele Informationen auf engstem Raum: Anzahl der angezeigten Fotos auf einer Seite, Zahl der Fotos insgesamt, Auf welcher Seite befinde ich mich und Navigation zur nächsten Seite:
Anzeige vor zurück

Der Klassiker, der schon sehr altmodisch aussieht bei ebay. Vielleicht ist die Angabe „Seite 1 von 3“ hilfreicher, jedoch stört die überflüssige, deaktivierte Taste „Zurück“ – sie sollte lieber nur dann auftauchen, wenn sie benötigt wird:

ebay Seitenanzeiger

Sehr praktisch bei sehr vielen Seiten und gut für die Usability:
ebay Seitensprung

Amazon besticht mit einer sehr einfachen und übersichtlichen Lösung, die Anzahl der Websites und die Anzahl der dargestellten Produkte sieht man auf einen Blick:
Icons mehrere Seiten amazon

Bei Otto scheint die Seitenangabe viel zu unruhig und überlastet zu sein:Icons mehrere Seiten Otto

Bei Neckermann hingegen sehen die Tasten für nächste und vorhergehende Seite unlogisch aus – es müssten ein einfache s > oder < dafür stehen:
Icons mehrere Seiten Neckermann

Auf den Seiten von Quelle weiss man nicht so genau wie viele Seiten einen noch erwarten:
Seitennavigation Quelle
Ungünstig weit entfernt von der Navigation findet man die ausführliche, aber auch sehr platzraubende Gesamtseitenangabe:
Anzahl der Seiten bei Quelle

Icons Übersicht:

Icon Seitenanzahl Übersicht