Kategorien
(Kostenlose) Services Essentials Icons & Fonts

The Noun Project: Icons für jeden Zweck als globale Wikipedia für Piktogramme

The Noun Project, zu deutsch: das Hauptwort-Projekt, entstand Ende 2010 als erfolgreiches Kickstarter-Venture. Ziel des Projekts ist die Erschaffung einer visuellen Sprache, die international verstanden wird und nicht auf zusätzliche Erklärungen in Wortform angewiesen ist. Lässt man den ganzen teil-ideologischen Overhead beiseite, handelt es sich schlicht um eine große Sammlung von Icons zu jedem erdenklichen Thema. Diese Sammlung kann kostenfrei von jedermann genutzt werden.

The Noun Project: Schnell wachsendes Icon-Verzeichnis mit vielen, stark unterschiedlichen Symbolen

Wer möchte, betrachtet The Noun Project, wie eben bereits vorgeschlagen, schlicht als große Sammlung freier Icons und Icon-Sets. Damit liegt man nicht verkehrt. Alle Icons stehen als einzelne SVG-Dateien zum Download bereit. So können Sie mit entsprechender Vektor-Software bearbeitet, insbesondere frei skaliert werden, was für moderne Retina-Displays wichtige Voraussetzung ist.

Icons in The Noun Project stehen unter einer von drei möglichen Lizenzen. Etwa die Hälfte aller verfügbaren Symbole steht unter Public Domain Lizenz, kann also völlig frei, ohne jede Quellenangabe verwendet werden. Die andere Hälfte teilt sich zwischen zwei CC-Lizenzen auf.

Die eine, die CC0 entspricht inhaltlich der Public Domain Lizenz, ist dabei aber angelegt, dessen Schwächen, insbesondere in Bezug auf die international unterschiedlichen Rechtslagen, auszugleichen. Die CC-BY Lizenz erlaubt ebenfalls den kostenfreien Einsatz zu privaten und kommerziellen Zwecken, verlangt dabei jedoch die Attribution, also die Nennung der Herkunft und des Erstellers im Wege eines textlichen Zusatzes in Printprodukten und im Wege eines Links bei Online-Publikationen. Die jeweils zu verwendende Attribution ist an jedem so zu verwendenden Icon direkt platziert und kopierbar.

Wer Icons verwenden möchte, die unter CC-BY lizenziert sind, jedoch die Attribution nicht vornehmen möchte oder kann, der hat seit kurzem die Option, das entsprechende Icon kaufen. Der Einheitspreis scheint bei 1,99 Dollar zu liegen. Zumindest ist mir kein anderer Preis untergekommen. Nach Zahlung dieser Lizenzgebühr ist der Verwender berechtigt, den Link zum eigentlichen Urheber bzw. die textliche Nennung zu unterlassen.

Wer glaubt, dass eine korrekte Benennung der Ersteller aller etwa verwendeten Icons schwierig sein könnte, der hat nur dann Recht, wenn es sich um die Verwendung einer Vielzahl von Icons unterschiedlichster Ersteller etwa auf einem einseitigen Poster, einem Flyer oder einer Visitenkarte handelt. Dort wird es in der Tat rein faktisch schwierig, überhaupt den erforderlichen Platz zu finden.

In größeren Projekten, etwa Websites, Büchern oder Zeitschriften kann die Linksetzung, respektive textliche Nennung auf Unterseiten, wie einer Seite mit Credits oder einer About-Page oder dem Impressum gesammelt erfolgen. Eine entsprechende Informationsseite im Noun Project informiert dezidiert über die Erfordernisse und Möglichkeiten.

Das Besondere an den Inhalten des Noun Projects ist, dass es sich nicht auf Mainstream-Icons fokussiert, wie das 99% aller sonst üblichen Icon-Verzeichnisse tun. Stattdessen werden, nicht zuletzt im Rahmen sogenannter Iconathons, spezielle Themengebiete konzentriert bearbeitet und mit visuellen Elementen erschlossen. Die Ergebnisse der Iconathons stehen stets als Public Domain frei zur Verfügung. Im Blog des Noun Project informieren die Organisatoren über anstehende und vergangene Iconathons und deren Zielsetzung. Illustre Gastgeber, meist aus dem öffentlichen Bereich oder aus der Wohlfahrt, wie zum Beispiel das Rote Kreuz, stellen den jeweiligen Rahmen bereit.

Neben dieser populären Methode, den Fundus der Kollektion zu erhöhen, kann über ein simples Upload-Formular jeder selbst zum Wachstum der Seite beitragen. Besonders interessant finde ich, dass man am jeweiligen Icon die Möglichkeit hat, eine eigene Alternative anzubieten. So kann eine gezielte Verbesserung der Qualität des Verzeichnisses in Angriff genommen werden.

Mittlerweile stehen deutlich mehr als 3.000 Symbole zum Download bereit, Tendenz stark steigend. Icons findet man über ein Suchfeld oder indem man durch den Bestand blättert, der nach verschiedenen Kriterien sortiert werden kann.

The Noun Project will eine visuelle Sprache für die ganze Welt etablieren

So, damit ist der objektive Teil des Dienstes hinreichend erklärt. Kommen wir zurück zur Zielsetzung des Noun Project. Das folgende Video, gehostet auf Vimeo, vermittelt einen Eindruck:

The Noun Project tritt demnach zu nichts geringerem an, als eine global verständliche Bildersprache zu erschaffen. Es geht mithin auf seinem Gebiet den Wikipedia-Weg, will dabei jedoch Sprachbarrieren elegant zu Fall bringen. Nach der Theorie, dass ein Bild mehr sagt als tausend Worte, soll The Noun Project weltweit für die Völkerverständigung sorgen.

Das ist eine zweifellos interessante Idee. Sicherlich ist es in multikulturellen Gesellschaften nützlich, wenn man Piktogramme zur Verfügung hat, die unabhängig von Sprachen funktionieren. Dass das weltweit funktionieren kann, darf indes durchaus bezweifelt werden. Denn immerhin gibt es sogar in der Symbolik mindestens kulturelle Unterschiede. Viele Piktogramme werden zudem in manchen Teilen der Welt gar nicht benötigt und schon aus diesem Grunde im Auftretensfalle auch nicht verstanden.

So bereiteten mir als wenig exotischem West-Europäer etliche Symbole, etwa zur Beschilderung rumänischer Wälder oder der Rikshas aus Bangladesh spontane Verständnisprobleme, die nur durch Nachlesen der Intentionen zu beheben waren. Auch das Cheburashka-Icon ruft in mir keinen Aha-Effekt hervor…


Cheburashka: Na, wer das nicht versteht…

Insofern will ich den Machern den ideologischen Overhead gern lassen. Es fühlt sich vielleicht besser an, so ein Schild vor sich herzutragen; irgendwie historisch, von der Bedeutung her. Allerdings sollte man selbst, als Endanwender, mit gestutzten Erwartungen an das Verzeichnis gehen. Eine tolle Icon-Ressource ist es in jedem Falle…

Links zum Beitrag:

Screenshots im Überblick:

Kategorien
Essentials Icons & Fonts

Pixelglyph: 200 freie PNG-Icons für die Entwicklung mobiler Websites und Apps

Wer sich mit der Entwicklung mobiler Websites oder Apps für iOS und Android oder andere mobile Geräte beschäftigt, kommt um die Verwendung von Icons nicht herum. Der Bedarf an guten Icons steigt deshalb stetig. Wie in vielen Bereichen, ist es auch hier schwer, die Spreu vom Weizen zu trennen. Zudem sind viele ansehnliche Packs mit stattlichen Preisen versehen. Ein ganz frisches Pack namens Pixelglyph versucht es mit einem Freemium-Modell. Wir haben es uns angesehen…

Filesquare, Oursky und kostenlose Icons

Bringen wir mal ein bisschen Ordnung in die Sache. Das Icon-Set, um das es hier geht, wird unter dem Namen Pixelglyph von Filesquare angeboten. Filesquare ist dabei lediglich ein Produkt. Es handelt sich um eine Web-App, mit dessen Hilfe man erweiterte Mockups mit Durchklick-Funktionalität und direkten Feedback-Kanal erstellen kann. Von der Sorte gibt es einige, Filesquare reiht sich hier ein.

Hersteller von Filesquare und dementsprechend auch Pixelglyph ist die Firma Oursky mit Sitz in Hongkong. Oursky hat sich nach eigenen Angaben auf die Erstellung von Apps mit Fokus auf mobile Geräte spezialisiert. Icons benötigt man also schon für den Eigenbedarf.

Pixelglyph soll sicherlich zum einen den Bekanntheitsgrad der Mockup-Lösung Filesquare steigern, zum anderen verspricht man sich wohl den ein oder anderen Kaufumsatz durch die Bezahlversion des Iconsets.

Pixelglyph: 200 x 2 einfarbige Icons in 16 und 48 Pixeln zum Quadrat

Pixelglyph kommt in zwei Varianten, die beide kommerziell unter der CC-Lizenz genutzt werden können, wenn auf den Urheber des Iconsets verwiesen wird. Die kostenlose Variante beinhaltet 200 einfarbige Icons im PNG-Format. Diese liegen in 16 x 16 und 48 x 48 Pixeln Größe vor.


E-Mail-Adresse reicht, auch Wegwerf-Dienste funktionieren

Um das rund 4,2 MB große Zip mit den 400 Einzeldateien herunterladen zu können, ist es erforderlich, auf der eigens eingerichteten Website eine E-Mail-Adresse zu hinterlassen, an die dann der Download-Link gesendet wird. Da die Versendung unmittelbar erfolgt, funktioniert auch eine zeitlich begrenzte Wegwerf-Adresse. In der Mail findet sich ein Link, der ohne Umschweife über den Standardbrowser den Download initiiert. Weitere Daten werden nicht erhoben.

Wer sich für die Bezahlvariante entscheidet, erhält für 25 Dollar nicht nur den Umfang des kostenlosen Pakets. Zusätzlich werden die Quelldateien im Adobe Illustrator- und EPS-Format mitgeliefert, so dass eine flexible Skalierung der Icons auf die persönlich benötigten Maße erfolgen kann.


Alle 200 Icons im Überblick

Das Download-Paket ist sauber organisiert. Die Icons sind sinnvoll benannt und tragen ihre Maße direkt im Dateinamen. Für jede der beiden Größen gibt es einen eigenen Ordner. Das gefällt nicht nur dem Bürokraten in mir.

Von mir gibt es daher ein klares „Daumen hoch“ für die 200 frischen Icons aus Hongkong…

Links zum Beitrag:

  • 200 icons designed for your mobile apps – Pixelglyph
  • Filesquares Blog zur mobilen Web- und App-Entwicklung – Filesquare.Blog
  • Mockups zum Durchklicken mit Filesquare – Filesq.com
  • Die Köpfe hinter Filesquare und Pixelglyph – Oursky aus Hongkong
Kategorien
Essentials Icons & Fonts

Angebissen: 5 Iconsets für echte Apple-Fans

Heute stellen wir Ihnen ganz spezielle Icons vor, nämlich solche für wahre Apple-Fans. Wenn wir die Verkaufszahlen etwa des iPhone 5 als aussagekräftig definieren, dann können wir wohl als sicher annehmen: Wahre Apple-Fans gibt es ganz schön viele. Falls Sie sich angesprochen fühlen, wird Sie der folgende Beitrag besonders freuen. Wir stellen Ihnen nämlich fünf Iconsets in Apple-Optik vor. Alle sind völlig kostenfrei, aber nicht alle zu jedem Zweck verwendbar! Egal, schön sind sie alle. Und darauf kommt es bei echten Fans schließlich an!

appicns

Appicns ist ein Projekt, geführt von Kara und Andrew McCarthy. Die Icons erhalten Sie gegen eine ungewöhnliche Bezahlung. Sie müssen einen Tweet darüber versenden. Nachdem der Tweet abgeschickt ist, können alle Icons als Zip-Datei runtergeladen werden.


Einige Apple-Icons von appicns.com


So sieht der Download aus: Pay with a Tweet

Polestack

Das Polestack Icon-Set wurde von Delta Nine, einem User der deviantArt-Plattform, entwickelt. Im Paket sind drei Symbolsätze enthalten. Im ersten Set sind alle Icons in Schwarz dargestellt. Der zweite Satz beinhaltet Icons, welche im Stil einer Schultafel kreiert sind. Der dritte enthält Icons, welche wie ein Holzaufdruck aussehen. Jeder Satz enthält die Icons im ICNS-, PSD- und PNG-Format, alle sind in einer Zip-Datei verpackt. Die Größe der Icons in jedem Set beträgt 512×512 px. Der Download ist kostenlos, genutzt werden dürfen diese allerdings nur privat. Ich fand dieses Set dennoch sehr hübsch und als Inspirationsquelle gut geeignet.


Polestack-Set: ein Überblick


Black Stack: ein Beispiel


Schultafel-Style: ein Beispiel


Holz-Style: ein Beispiel

Holz-Laufwerke

Dieses Icon-Set enthält Symbole in der Optik hölzerner Laufwerke. Diese originelle Idee und ihre Umsetzung stammt von Thrasos Varnava, ebenfalls ein User von deviantArt. Die Icons sind im ICNS- und PNG-Format enthalten und in einer Zip-Datei verpackt. Die Größe aller Icons ist 512×512 px. Sie stehen unter der Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Lizenz.


Wooden-Slick-Drives-Set: ein Überblick


Wooden-Slick-Drive Icon: Movies

Mac USB Icons

Die Icons dieses Sets sehen aus wie USB-Stecker für den Mac. Meiner Meinung nach eine ebenfalls coole Idee. Der Designer des Set ist Ömer Cetin, ein Illustrator aus der Türkei. Die Icons sind im ICN- und PNG-Format enthalten und wiederum in einer zip-Datei verpackt. Die Größen der Icons im PNG-Format betragen 256×256 px, 128×128 px, 64×64px und 32×32 px. Icons im ICN-Format sind nur in der Größe von 256×256 px vorhanden. Das Set steht unter der Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Lizenz.


Mac USB Icon

Totem Pole Icons

Diese Icons sind von Talos Tsui kreiert. Allerdings dürfen Sie diese ausschliesslich zu privaten Zwecken verwenden. Die Icons liegen im dmg-Format in einer Zip-Datei verpackt vor und sind für die Betriebssysteme Mac und Windows verfügbar.


Totem Pole Icon Set

(dpe)

Kategorien
Design Essentials HTML/CSS Icons & Fonts

Weder Grafik, noch Font: Icons aus reinem CSS3 mit One-Div.com

Icons werden auf vielen Websites eingesetzt – machen sie doch gerade bei Links ohne (viel) Text schnell deutlich, was gemeint ist. In Zeiten hochauflösender Displays werden pixelbasierte Icons mehr und mehr durch Vektor-Icons abgelöst. Denn gerade die filigran gestalteten Icons wirken auf kleinen Displays entweder zu klein oder (bei Vergrößerung) sehr schwammig. Neben dem Einsatz von Icon-Webfonts gibt es Icons aber auch als reine CSS3-Inkarnation.


Icongalerie von one-dev.com

Auf der Seite one-div.com gibt es eine Galerie, die Icons ausstellt, die allesamt ausschließlich mit CSS3 realisiert sind. Es handelt sich dabei um teils typische Icons für Bedienelemente, soziale Netzwerke und zur Visualisierung unterschiedlicher Medien. Die Icons sind – auch bedingt durch CSS3 – schlicht gehalten und einfarbig.

Icons mit Quelltext und Hinweisen

Jedes Icon ist mit drei Buttons ausgestattet, über den der HTML- und CSS-Quelltext angezeigt und automatisch in die Zwischenablage kopiert wird. Außerdem gibt es die Möglichkeit, eine fertige HTML- und CSS-Datei mit dem Icon als ZIP-Datei herunterzuladen.

Darüber hinaus wird für jedes Icon ein Hinweis eingeblendet, der Auskunft darüber erteilt, welcher Browser das CSS3-Icon problemlos darstellen kann, wo es Probleme gibt und wo es gar nicht klappt. Der Hinweis wird für Chrome, Firefox, Safari, Opera und den Internet Explorer eingeblendet. Die Betreiber sind bestrebt, die Icons zumindest für Chrome, Safari und Firefox kompatibel zu machen.

Derzeit befinden sich gut 80 CSS3-Icons in der Galerie. Zusätzlich kann jeder selbst Icons einreichen, sodass die Anzahl bei entsprechendem Interesse an dem Projekt sicher noch steigen wird.

Animierte Icons möglich

Der große Vorteil von CSS3-Icons im Vergleich zu Webfont- oder SVG-Icons ist der, dass sie animierbar gemacht werden können – entweder als Hover-Effekt mit der „transition“-Eigenschaft oder als durchgängige Keyframe-Animation per „animation“-Eigenschaft.

Einige wenige bewegte Icons sind in der Galerie enthalten. Bewegung lässt sich aber auch selbst in die Icons bringen. Wer sich mit den Pseudoelementen „before“ und „after“ sowie den CSS3-Transitions auskennt, wird schnell aus einem statischen Icon ein animiertes erstellen können.

Fazit: One-dev.com bietet einige nützliche Icons und viele Anregungen, um selbst Icons per CSS3 gestalten und bei Bedarf animieren zu können.

(dpe)

Kategorien
Essentials Freebies, Tools und Templates Icons & Fonts

Design Kindle: Neue Sammlung kostenloser Ressourcen für Webdesigner mit Icons, Templates, Texturen und noch mehr

Immer wieder ist man als Webdesigner auf der Suche nach Icons, Texturen oder Ideen für Websites. Im Idealfall sind diese dann noch kostenlos und dürfen ohne Einschränkungen für eigene Projekte verwendet werden. Design Kindle bietet genau das. Und obwohl alles kostenlos ist, sind die Ressourcen von durchaus guter Qualität und auch in professionellen Projekten zu gebrauchen.


Startseite von Design Kindle

Große Auswahl, vieles bearbeitbar

Die Auswahl von Design Kindle reicht von unterschiedlichen Icon- und UI-Sets, über Templates für Websites bis hin zu Texturen. Die Texturen sind zudem in hoher Auflösung vorhanden, sodass sie für Printprojekte taugen. Um den Überblick zu gewährleisten, ist alles in Kategorien sortiert.


Beispiel für eine Grafik: iUnits

Neben der obligatorischen Vorschau der Layouts verrät eine Infobox auch die Dateitypen und -größen. Während Texturen in der Regel als JPEG vorzufinden sind, sind Templates und Grafiken als Photoshop-Dateien erhältlich. Diese sind voll bearbeitbar und können den eigenen Bedürfnissen angepasst werden. Bei den Web-Templates sind neben der Photoshop-Datei mit dem zusammengebauten Layout auch HTML- und CSS-Dateien vorhanden – also alles, was nötig ist, um ordentlich damit arbeiten zu können.

Keine Anmeldung, keine Einschränkungen

Die Macher von Design Kindle haben eine sehr schöne Einstellung zum Thema Transparenz und persönliche Daten. Anders als bei vielen anderen Portalen ist hier keine Anmeldung für den Zugriff auf das Angebot erforderlich. Nicht einmal eine E-Mail-Adresse wird verlangt.


Web-Template: in Photoshop vollständig bearbeitbar

Auf einer Infoseite kann man sich zudem über die Designer, die – wie sie selbst über sich schreiben – aus Liebe zur Web-Design-Community die Seite betreiben und ihre Designs kostenlos zur Verfügung stellen, informieren.

Fazit: Tolle Seite mit sehr benutzerfreundlichem Ansatz und anspruchsvollen Grafiken und Layouts, die quantitativ noch Potenzial für Erweiterungen bietet.

(dpe)

Kategorien
(Kostenlose) Services Essentials Icons & Fonts

EndlessIcons und Iconmonstr – Stetig wachsende Angebote kostenloser PNG-Icons

Icon-Sonntag bei Dr. Web. Heute stellen wir Ihnen das recht neue Angebot EndlessIcons des kalifornischen Webdevelopers Min Kim aus Orange County, sowie das schon etwas etabliertere Projekt iconmonstr des Münsteraners Alexander Kahlkopf vor. Beide Angebote verstehen sich als kontinuierlich wachsende Ressourcen für den Download kostenloser Icons. Während iconmonstr schon fast 900 Bildzeichen führt, sind auf Endless Icons erst knappe 100 Symbole zu finden.

EndlessIcons: neues Angebot aus dem sonnigen Orange County

Mit bislang 96 Icons, die alle paar Tage um einige weitere ergänzt werden, liegt ein vielschichtiger Symbolsatz für die unterschiedlichsten Einsatzzwecke vor. Die Bildzeichen sind durchgängig in Schwarz-Weiß gehalten und können einzeln als PNG-Dateien heruntergeladen werden.

Die auf EndlessIcons angebotenen Symbolzeichen sind sowohl für die private, wie auch die kommerzielle Nutzung frei einsetzbar. Es gibt keinerlei Beschränkungen, wenn man einmal von der Selbstverständlichkeit absieht, die Icons nicht für ungesetzliche Zwecke, etwa auf rassistischen Websites und ähnliches, einsetzen zu dürfen. Ebenso ist es nicht gestattet, die Symbole als solche zu verkaufen oder zum Download anzubieten. Backlinks werden nicht gefordert.

Allen EndlessIcons gemein ist, dass sie in Schwarz-Weiß gehalten sind, Hintergrundtransparenz aufweisen und im PNG-Format bereit gestellt werden. Ebenso liegen alle Bildzeichen in der Auflösung 614 x 614 Pixeln vor, was sie trotz Pixelbasierung für nahezu jeden Einsatzzweck tauglich macht.

Damit enden indes die Gemeinsamkeiten. Denn von der Gestaltung im Übrigen her sind die EndlessIcons sehr verschieden. Mir persönlich gefallen die im Scribble-Look hinskizzierten Symbole am besten, wie sie etwa für die Kategorie Charts erstellt wurden. Andere Bildzeichen basieren eher auf einfachen Flächenkombinationen, was bisweilen etwas plump wirkt. Sind Sie auf der Suche nach Icons der Kategorie Sport, hat Endless Icons besonders viel zu bieten.

iconmonstr: 876 Bildzeichen in einheitlichem Design

Anders als Endless Icons, das iconmonstr in Optik und Aufmachung verblüffend stark ähnelt, bietet der Dienst aus Deutschland alle Bildzeichen nicht nur im PNG-Format, sondern auch im Vektorformat SVG. So sind die Grafiken nicht nur mit entsprechender Software, etwa Adobe Illustrator oder dem kostenlosen Inkscape, voll bearbeitbar, sondern in HTML5-Websites mit allen Vorteilen direkt einsetzbar. Die PNG-Symbole sollten sinnvollerweise zuvor auf die jeweilige Zielauflösung skaliert werden.

Auch die Icons auf iconmonstr sind durchgängig in Schwarz-Weiß gehalten, können anders als diejenigen auf Endless Icons jedoch durch eine mehr oder weniger einheitliche Designsprache überzeugen. So können alle Symbole untereinander kompatibel auf beliebigen Websites verwendet werden. Das Angebot auf Endless Icons ist stets nur teilkompatibel zueinander. Iconmonstrs Bildzeichen liegen in der gängigeren Auflösung von 512 mal 512 Pixeln vor und sind ebenfalls mit Hintergrundtransparenz ausgestattet.

Hinsichtlich der Nutzungsbedingungen unterscheiden sich die beiden Angebote nur marginal. Auch die Icons auf iconmonstr können kostenlos zu kommerziellen und privaten Zwecken genutzt werden. Ein Backlink wird nicht gefordert, aber stets gern gesehen. Auch hier dürfen die Symbole nicht als solche verkauft oder zum Download angeboten werden.

Fazit: Designer sollten Endless Icons und iconmonstr auf jeden Fall in ihren Werkzeugkasten integrieren. Durch das recht dynamische Wachstum beider Dienste lohnt sich ein regelmäßiger Besuch. Hier kann Endless Icons durch einen RSS-Feed punkten, der es erleichtert, auf dem aktuellen Stand des Angebotsumfangs zu bleiben. Iconmonstr bietet diese Möglichkeit nicht, ein häufiger Besuch muss also durch eigene Wiedervorlage-Techniken gewährleistet werden.

Links zum Beitrag: