Webdesign | t3n News News, Infos, Tipps und aktuelle Artikel zu Webdesign 2014-11-26T09:36:09Z t3n Redaktion http://t3n.de/tag/webdesign Flickr-Gemeinschaft im Zwiespalt: Yahoo verkauft Bilder mit Creative-Commons-Lizenz http://t3n.de/news/flickr-yahoo-creativ-commons-lizens-581137/ 2014-11-26T09:36:09Z
Yahoo verkauft neuerdings große Leinwände mit Fotos von Flickr-Nutzern, die unter einer Creative-Commons-Lizens laufen. Creative-Commons bestätigt, dass Yahoo sich im gesetzlichen Rahmen bewegt.

Yahoo verkauft neuerdings große Leinwände mit Fotos von Flickr-Nutzern, die unter einer Creative-Commons-Lizens laufen. Creative-Commons bestätigt, dass Yahoo sich im gesetzlichen Rahmen bewegt. Viele Flickr-Nutzer verurteilen das Vorgehen jedoch.

Etwa zweimal die Woche fragt jemand Liz West, ob er eines der fast 12.000 Fotos verwenden darf, die sie in den vergangenen zehn Jahren auf der Bilderplattform Flickr veröffentlicht hat. Normalerweise hat die Amateurfotografin nichts dagegen. Eine Frau aus England machte aus ihren Blumenbildern Grußkarten und schickte ihr 100 Stück als Dank. Der Ofen- und Kaminhersteller Vermont Castings baute eines ihrer Fotos auf der eigenen Webseite ein und schickte ihr einen kleinen Ofen als Geschenk.

„Jemand anderes verkauft meine Bilder, die ich kostenlos weggebe“

Über eine Sache ist West jedoch gar nicht glücklich. Und das ist, was Yahoo neuerdings macht, der Eigentümer von Flickr. Das Unternehmen produziert jetzt große Leinwände mit Fotos von West und anderen Fotografen, die ihre Werke auf Flickr veröffentlicht haben, und verkauft sie für 49 US-Dollar das Stück, umgerechnet knapp 40 Euro. Den Gewinn behält der Konzern komplett für sich. „Es hat mich schon sehr geärgert, dass jemand anderes meine Bilder verkauft, die ich kostenlos weggebe“, sagt West, eine pensionierte Autorin aus Boxborough, Massachusetts, die auf Flickr unter dem Namen „Muffet“ unterwegs ist.

flickr-yahoo-2
Von Liz West hochgeladene Fotos auf Flickr. Die pensionierte Autorin ist eine der Künstlerinnen, deren Bilder Yahoo verkaufen will. (Foto: Liz West/Flickr)

West gehört zu den Millionen von Menschen, die unter den „Creative Commons“ Bilder einstellen. Dahinter verbirgt sich eine Online-Vorratskammer von Bildern und Texten, die mit Erlaubnis der Urheber geteilt und weiterverwendet werden dürfen. Kostenlos – unter ein paar Voraussetzungen. So können die Künstler zum Beispiel angeben, ob ihre Werke für kommerzielle Zwecke verwendet werden dürfen oder nicht. Und sie können angeben, dass sie in angemessener Weise genannt werden, wenn ein Text oder ein Foto von ihnen anderweitig zum Einsatz kommt.

Mehr als 300 Millionen öffentlich geteilte Flickr-Bilder setzen auf Creative-Commons-Lizenzen. Damit ist die Plattform der größte Inhalte-Partner. Vergangene Woche kündigte Yahoo nun an, Abdrucke von 50 Millionen Bildern verkaufen zu wollen, die auf diese Art und Weise lizenziert sind. Darüber hinaus soll eine ungenannte Nummer von handverlesenen Flickr-Bildern in die Auswahl einfließen. Von diesen Fotos will das Unternehmen 51 Prozent der Erlöse an die Urheber weitergeben. Bei den Creative-Commons-Bildern bleiben jedoch alle Erträge bei Yahoo.

„Es sieht nicht so aus als würde Yahoo etwas falsch machen“

Der Internet-Konzern hat mitgeteilt, dass er sich an die Creative Commons hält und nur Fotos verkauft, bei denen einer kommerziellen Nutzung zugestimmt wurde. Diese Lizenzen „wurden genau für diesen Anwendungsfall entwickelt“, schreibt Bernardo Hernandez, Vice President von Flickr, in einer E-Mail. Mit jedem Leinwanddruck wird auch ein kleiner Aufkleber verschickt, auf dem der Name des Künstlers steht.

Ein Sprecher von Creative Commons, einer nichtkommerziellen Gruppe, die 2001 gegründet wurde, bestätigte, dass Yahoo nicht gegen die Lizenzen verstößt. Rechtlich „sieht es nicht so aus, als würde Flickr etwas falsch machen“, sagt Corynne McSherry, bei der Electronic Frontier Foundation für geistiges Eigentum verantwortlich. Einige Fotografen, die ihre Bilder auf Flickr zur Verfügung gestellt haben, sind trotzdem enttäuscht. Neben West haben auch andere Künstler ihren Unmut über den jüngsten Schritt geäußert, mit dem Yahoo erneut versucht, Geld mit Flickr-Werken auf Kosten der Fotografen-Gemeinschaft zu verdienen.

Yahoos Plan, die Bilder zu verkaufen, ist „ein wenig kurzsichtig“, sagt Flickr-Mitgründer Stewart Butterfield, der das Unternehmen 2008 verlassen hat. „Es ist nur schwer vorstellbar, dass die Erlöse aus dem Verkauf den Vertrauensverlust aufwiegen, der dadurch entsteht.“

Beim Vorgehen von Yahoo scheiden sich die Geister

Das Wall Street Journal hat 14 Fotografen angeschrieben, die Bilder unter der Creative-Commons-Lizenz auf Flickr anbieten. Acht von ihnen haben gesagt, dass sie nichts gegen den Schritt von Yahoo haben und glücklich darüber seien, dass ihre Arbeit noch auf andere Art und Weise gewürdigt wird. „Jeder Amateurfotograf würde sich darüber freuen, wenn seine Werke an Wänden überall auf der Welt hängen“, schrieb Andreas Overland, ein Flickr-Nutzer aus Oslo in einer E-Mail. Sechs Personen sprachen sich gegen die Verkaufspläne aus.

„Als ich die Creative Commons akzeptiert habe, bin ich davon ausgegangen, dass meine Bilder in Artikeln und anders verwendet werden können, um sie der Öffentlichkeit zu zeigen“, schrieb Nelson Lourenço, ein Fotograf aus Lissabon, in einer E-Mail. Dass Yahoo „meine Arbeit verkauft und alles Geld behält, war eine Überraschung“, erklärte er.

„Yahoos Entscheidung, die Bilder zu verkaufen, ist aus unserer Sicht moralisch verwerflich"

500px ist ein Flickr-Wettbewerber. Die Plattform hilft Fotografen dabei, digitale Kopien ihrer Werke zu verkaufen und bis zu 70 Prozent der Erlöse zu behalten. Lediglich etwa 100.000 der rund 50 Millionen Bilder auf der Seite laufen unter Creative-Commons-Lizenz. Diese werden von 500px nicht verkauft. Jewgeni Tschebotarew, ein Mitgründer der Seite, erklärte, dass Yahoos Entscheidung, die Bilder zu verkaufen, die Interessen der Nutzer verletze. Auch wenn es rechtlich in Ordnung sei, „ist es aus unserer Sicht moralisch verwerflich“, sagte Tschebotarew.

Auf Deviant Art gibt es mehr als 50 Millionen Bilder unter Creative-Commons-Lizenz. Die Künstler bekommen einen Teil der Erlöse durch den Verkauf von Postern ab. Firmenchef Angelo Sotira sagte, dass Yahoos Schritt „einen Mangel an Respekt“ zeige und der Idee einer öffentlichen Verbreitung im Internet einen Bärendienst erweise.

Der Großteil der Bilder auf Facebook und Instagram fällt nicht unter die Creative Commons. Instagram-Eigentümer Facebook hat bislang auch keine Bemühungen unternommen, die Bilder auf der weltweit größten Foto-Sharing-Plattform zu verkaufen.

Fotografin Liz West (Foto: Liz West)
Fotografin Liz West (Foto: Liz West)

Als Antwort auf die Entscheidung von Yahoo, einige der Bilder zu verkaufen, haben West und zwei andere Flickr-Fotografen ihre Creative-Commons-Lizenzen von einigen oder allen ihren Online-Bildern entfernt, damit das Unternehmen sie nicht verkaufen kann. Eine andere Lösung gibt es nicht, erklärte eine Yahoo-Sprecherin.

Yahoo hatte Flickr 2004 für fast 25 Millionen Dollar übernommen. Seit damals gab es immer wieder große Veränderungen an der Plattform, die von den Nutzern zum Teil lautstark kritisiert wurden. Fünf Yahoo-Chefs kamen und gingen in sieben Jahren. Als Marissa Mayer 2012 das Ruder übernahm, stellte ein anonymer Nutzer eine Webseite mit der URL dearmarissamayer.com online und forderte von ihr „Flickr wieder großartig zu machen“.

Die Versuche von Mayer, Flickr wiederzubeleben, haben jedoch einige langjährige Mitglieder verärgert. Als sie 2013 allen Nutzern ein Terabyte an freiem Datenspeicher anbot, wurde der Flickr-Pro-Account für 25 Dollar im Jahr für unbegrenzten Speicherplatz abgeschafft. Dieser erfreute sich jedoch unter eingefleischten Mitgliedern großer Beliebtheit.

„Ich habe so viel in Flickr investiert, ich kann nicht einfach woanders hingehen“

In diesem Jahr begann das Unternehmen dann, Werbung in Fotogalerien anzuzeigen – zumindest bei Besuchern, die nicht eingeloggt waren. Devon Adams, ein Hochschullehrer für Fotografie aus Gilbert, Arizona, nannte die Anzeigen einen „misstönenden“ Eingriff in die Seite. Adams ist einer der Nutzer, die sauer auf Yahoo sind, weil es ihre unter Creative Commons lizenzierten Bilder verkaufen will.

Allerdings hat Adams bereits 58.000 Fotos auf Flickr hochgeladen. Darum ist er gewissermaßen gefangen. „Ich habe so viel in Flickr investiert, ich kann nicht einfach woanders hingehen“, sagt er.

Von Douglas MacMillan

Ursprünglich publiziert bei wsj.de.

Mehr Technologie-News auf wsj.de

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
WSJ Redaktion
Die 10 beliebtesten Artikel der Woche: Visitenkarten-Vorlagen, PayPal deaktiviert SSL 3.0 und Basics des Responsive Webdesign http://t3n.de/news/10-beliebtesten-artikel-woche-54-580448/ 2014-11-22T09:00:19Z
In unserem wöchentlichem Best-of der t3n-Artikel präsentieren wir euch einen bunten Mix aus häufig geklickten und nutzwertigen Beiträgen.

In unserem wöchentlichem Best-of der t3n-Artikel präsentieren wir euch einen bunten Mix aus häufig geklickten und nutzwertigen Beiträgen.

1. Die Basics des Responsive Webdesign in 9 schicken GIFs

Wir zeigen euch die wichtigsten Prinzipien des Responsive Webdesign – in neun schicken GIFs aus der Feder des Designers Sandijs Ruluks von Froont.

Unser Artikel: Die Basics des Responsive Webdesign in 9 schicken GIFs

2. 20 wunderschöne Visitenkarten-Vorlagen für Photoshop

Visitenkarten haben auch und vielleicht gerade im Zeitalter der Sozialen Netzwerke noch ihren Platz. Ganz besonders, wenn es sich um solche Kunstwerke handelt, wie die PSD-Templates, die wir euch in diesem Artikel vorstellen.

Unser Artikel: 20 wunderschöne Visitenkarten-Vorlagen für Photoshop

3. Digitaler Fußabdruck: 6 Links, die zeigen wie Google dich sieht

Nicht nur Google-Nutzer hinterlassen einige Daten im Netz – um die soll es hier aber gehen: Wir kuratieren sechs Links, die euren digitalen Fußabdruck aufzeigen.

Unser Artikel: Digitaler Fußabdruck: 6 Links, die zeigen wie Google dich sieht

4. Smarte Kladde für Designer: Moleskine macht aus Papierskizzen fertige Vektorgrafiken

Mit einer Kladde, die aus analogen Papierskizzen digitale Vektorgrafiken macht, will der italienische Notizbuchanbieter Moleskine die Designer-Herzen höher schlagen lassen. Was sie kann, was sie kostet und ob's sie noch rechtzeitig vor Weihnachten gibt, erfahrt im Artikel.

Unser Artikel: Smarte Kladde für Designer: Moleskine macht aus Papierskizzen fertige Vektorgrafiken

5. PayPal deaktiviert SSL 3.0: Diese Shopsysteme müssen jetzt aktualisiert werden [Update]

PayPal im Einsatz? Dann sind vielleicht Updates nötig, um den Dienst auch nach dem 3. Dezember anbieten zu können. Definitiv betroffen sind Oxid, xt:Commerce und Prestashop. Alle Information und die notwendigen Maßnahmen in der Übersicht.

Unser Artikel: PayPal deaktiviert SSL 3.0: Diese Shopsysteme müssen jetzt aktualisiert werden [Update]

6. Startup Edition: Gesammeltes Wissen von Gründern, Hackern und Designern in einem kostenlosen E-Book

Die Macher von Startup Edition – einem wöchentlichen Newsletter mit hilfreichen Artikeln für Gründer – haben ein kostenloses E-Book veröffentlicht. Mit dem Buch wollen sie eine umfangreiche Wissenssammlung für die Startup-Szene abliefern.

Unser Artikel: Startup Edition: Gesammeltes Wissen von Gründern, Hackern und Designern in einem kostenlosen E-Book

7. Goodbye Google: Firefox integriert Yahoo als neue Standard-Suchmaschine

Trennung nach zehn Jahren: Anstatt die Partnerschaft mit dem Suchmaschinenriesen zu verlängern, schließt der Browser-Anbieter in den USA einen Fünf-Jahresvertrag mit Yahoo ab. In anderen Ländern bleibt Google noch erhalten.

Unser Artikel: Goodbye Google: Firefox integriert Yahoo als neue Standard-Suchmaschine

8. Google-Suche zeigt ab sofort an, ob eine Seite für Mobile optimiert ist

Google zeigt ab sofort in den Suchergebnissen an, ob eine Website für mobile Nutzer optimiert ist. In Zukunft könnte die „Mobile Friendliness“ sogar zum Ranking-Faktor avancieren.

Unser Artikel: Google-Suche zeigt ab sofort an, ob eine Seite für Mobile optimiert ist

9. Comeback mit dem Nokia N1 – Highend-Tablet für 249 Dollar vorgestellt [#slush14]

Was kommt nach dem Smartphone? Diese Frage hat Nokia auf dem Slush-Festival in Helsinki beantwortet und das neueste Produkt des finnischen Konzerns präsentiert.

Unser Artikel: Comeback mit dem Nokia N1 – Highend-Tablet für 249 Dollar vorgestellt [#slush14]

10. Silicon-Valley-Führungsfigur: Elon Musk ist der wahre Nachfolger von Steve Jobs

Seit Steve Jobs verstorben ist, fragen sich viele Menschen, wer aus dem großen Schatten des iBoss heraustritt und zur symbolischen Führungsfigur des Silicon Valleys wird. Unser US-Korrespondent Andreas Weck hat da einen klaren Favoriten: Elon Musk.

Unser Artikel: Silicon-Valley-Führungsfigur: Elon Musk ist der wahre Nachfolger von Steve Jobs

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Andreas Weck
Die Basics des Responsive Webdesign in 9 schicken GIFs http://t3n.de/news/basics-responsive-webdesign-9-578560/ 2014-11-15T07:50:06Z
Wir zeigen euch die wichtigsten Prinzipien des Responsive Webdesign – in neun schicken GIFs aus der Feder des Designers Sandijs Ruluks von Froont.

Wir zeigen euch die wichtigsten Prinzipien des Responsive Webdesign – in neun schicken GIFs aus der Feder des Designers Sandijs Ruluks von Froont.

Responsive Webdesign: Früher war alles leichter

Früher war alles einfacher: Webdesigner konnten sich an festen Größen und Standards orientieren und ihre Projekte entweder auf die Desktop-Ansicht oder das mobile Internet ausrichten. Diese Zeit ist vorbei – wer möchte, dass Nutzer egal an welchem Ort und egal, welches Endgerät sie nutzen, sorgenfrei die eigenen Inhalte konsumieren können, muss sich mit Responsive Webdesign auseinandersetzen. Und das ist manchmal gar nicht so einfach.

Sandijs Ruluks von Froont. (Bild: Twitter)
Sandijs Ruluks von Froont. (Bild: Twitter)

Sandijs Ruluks kennt das: Der Grafikdesigner aus Riga bezeichnet sich selbst als „Designer, der aus der Print-Welt in die Welt des Webs gekommen ist.“ Auch er hat sich die neuen Denk- und Gestaltungsmuster zunächst hart erarbeiten müssen. Zusammen mit Freunden hat er vor Kurzem Froont gegründet, eine Design-Plattform, auf der Webdesigner direkt im Browser arbeiten und mit anderen Designern kollaborieren können. Auf dem Froont-Blog findet sich auch das gemeinsam verfasste „Open Web Design Manifesto“.

Für alle, die ebenfalls manchmal Schwierigkeiten damit haben, das Responsive-Design-Konzept zu verstehen, hat Ruluks neun GIFs erstellt, die die wesentlichen Prinzipien einfach und schnell veranschaulichen. Freundlicherweise hat er sie uns zur Verfügung gestellt.

1. „Responsive Webdesign“ versus „Adaptive Webdesign“

Responsive und Adaptive Design sind ähnlich, aber eben doch nicht gleich. „Die beiden Ansätze ergänzen sich, daher gibt es hier kein ‚richtig oder falsch‘“, schreibt Ruluks. Die Unterschiede verdeutlicht das erste GIF:

 

responsive_webdesign_adaptive_webdesign

2. Der Flow

Je schmaler der Bildschirm des Endgerätes ist, auf dem der Content ausgespielt wird, desto mehr Elemente werden untereinander statt nebeneinander angeordnet. Alle späteren Inhalte rutschen entsprechend noch weiter nach unten. Das nennt man den Flow.

 

04_flow-vs-static-2

 

3. Relative Einheiten

Wenn die Größe des Bildschirms, auf der Inhalte angezeigt werden können, variiert, ist auch die Pixeldichte der angezeigten Fläche nicht mehr in Stein gemeißelt. Für Webdesigner macht es also Sinn, von festen Pixelvorgaben abzurücken und stattdessen relative Größeneinheiten zu definieren – wie etwa „50 Prozent des Screens“ oder „100 Prozent des Screens“. Diese passen sich dann an das jeweils genutzte Ausgabeformat an, wie das nächste GIF zeigt:

 

 

responsive_webdesign_prinzip_relative_einheiten

4. Breakpoints

Breakpoints definieren, an welchen Stellen das Layout einer Seite umbrechen darf. Auf diese Weise können Webdesigner sicherstellen, dass ein Umbruch im Design, etwa wenn sich die Seite verschmälert, nicht zu einem inhaltlichen Bruch führt. „Aber nutzt Breakpoints mit Umsicht“, warnt Ruluks, „wenn es schwierig ist zu verstehen, welche Inhaltselemente voneinander abhängen, können Breakpoints schnell für Chaos sorgen“.

 

03_with-breakpoints-vs-without-breakpoints-1

 

5. Maximal- und Mindestwerte

Dieses Prinzip verhindert, dass Inhalte auf dem Smartphone oder dem Tablet zu klein dargestellt werden – oder auf größeren Bildschirmen zu sehr in die Breite gehen. Einfach einen Pixelwert für die maximale Breite definieren und der Verzerrungs-Effekt bleibt aus.

 

07_max-width-vx-no-max-width-1

 

6. Verschachtelte Objekte

Hier werden mehrere inhaltliche Elemente innerhalb eines Containers gruppiert und können somit gemeinsam bewegt werden. Dies macht die Arbeit für Webdesigner oftmals einfacher, da sie nicht so viele Elemente einzeln bearbeiten müssen. Das folgende GIF veranschaulicht das Container-Prinzip:

 

05_nested-vs-not-nested-1

 

7. „Mobile First“ und „Desktop First“

Diese beiden Leitprinzipien des Responsive Webdesign geben an, welcher Startpunkt für das Design einer Webseite gesetzt wird: Beginne ich auf dem kleinen Screen und passe das Design für größere Auflösungen an – oder starte ich mit der Desktop-Version und arbeite mich zu den kleineren Smartphone-Größen vor? „Technisch gesehen gibt es keine großen Unterschiede. Leg los und schau, welcher Ansatz besser für dich funktioniert“, so Ruluks.

 

08_desktop-first-vs-mobile-first-3

8. Webfonts und Systemschriften

Die Wahl der eingebetteten Schriften kann einen Einfluss auf die Ladezeiten der Webseite haben. Während es Webfonts zwar in viel mehr Varianten gibt und sie eine Seite sehr schön individualisieren können, werden die in den Betriebssystemen der Nutzer vorinstallierten „System Fonts“, so Ruluks, „schnell wie der Blitz“ angezeigt – sofern die gewählte Systemschrift auch im Geräte-Setup des Nutzers angelegt ist.

 

06_system-fonts-vs-webfonts-1

 

9. Bitmaps und Vektoren

Wenn Logos und Grafiken eine kleine Dateigröße haben und dennoch gut skalieren sollen, ist es ratsam, auf Vektoren, zum Beispiel SVG-Dateien oder Icon Fonts, zurückzugreifen. Bilder im JPG-, PNG- oder GIF-Format müssen in der Regel optimiert werden und sind wesentlich größer. Doch können sie Details oder Effekte besser abbilden als Vektoren und nicht alle Browser unterstützen SVG-Formate. „Wählt also mit Bedacht“, so das Resümee von Sandijs Ruluks.

 

09_vectors-vs-images-1

Hier geht's zum Original-Beitrag „Nine Basic Principles of Responsive Webdesign“ von Sandijs Ruluk auf dem Froont-Blog. Hilfreich für euch ist vielleicht auch unsere Artikelreihe zum Einstieg in flexible Projekte mit Responsive Webdesign.

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Lea Weitekamp
Firefox Developer Edition: Entwickelt für Entwickler http://t3n.de/news/firefox-developer-edition-577878/ 2014-11-11T09:05:05Z
Mozilla hat eine beachtliche Entwickler-Suite für Webdesigner und Webentwickler zusammen gestellt: Firefox Developer Edition.  Neben neuen Features findet ihr auch altbewährte Tools.

hat eine beachtliche Entwickler-Suite für und Webentwickler zusammen gestellt: Developer Edition.  Neben neuen Features findet ihr auch altbewährte Tools. Wir blicken kurz auf die neue Version.

firefox-developer
Firefox Developer Edition: Mehr Power für Entwickler. (Screenshot: Mozilla)

Die Firefox Developer Edition besteht aus insgesamt neun Komponenten: WebIDE, Responsive Design View, Valence, Web Audio Editor, Page Inspector, Web Console, JavaScript Debugger, Network Monitor und dem Style Editor.

Firefox Developer Edition: Responsive Design View

Hier ist der „Responsive Design View“ wohl das spannendste Feature. Dabei handelt es sich um ein losgelöstes Fenster innerhalb des Browsers, das darüber hinaus auf die Viewport-Größen der wichtigsten Geräte optimiert wurde.

Firefox Developer Edition: WebIDE

Die WebIDE soll euch die App-Entwicklung erleichtern. Dabei könnt ihr die App während der „pausieren“ live darin experimentieren – mit Hilfe des Inspectors – und die Änderungen dann in die App übernehmen.

Firefox Developer Edition: Valence

Mit Valence könnt ihr euch mit anderen Geräten verbinden. Somit wird das Entwickeln über verschiedene Geräte hinweg enorm vereinfacht. Besonders weil die WebIDE dann remote auch beispielsweise am Smartphone ausgeführt wird. Somit könnt ihr Elemente im DOM in der WebIDE am Computer markieren und gleichzeitig seht ihr das entsprechende DOM markiert auf dem Smartphone. Derzeit funktioniert diese Funktion aber nur mit iOS- oder Android-Geräten.

Fazit zu Firefox Developer Edition

Mozilla wirft hier einige sehr spannende Features auf den Markt, die das Entwicklerleben wirklich vereinfachen können. Die „Fixes“ die es vorher gab, wie zum Beispiel Lesezeichen, die Websites in bestimmten Viewportgrößen öffneten, gehören wohl der Vergangenheit an. Wir haben bereits über Firefox Developer Edition berichtet, und sind vom Ergebnis angetan. Ihr könnt euch selbst davon überzeugen, wenn ihr euch die neue Version des Firefox für Developer hier herunterladen.

Diese Version dürfte wohl auch , die sonst mit Chrome arbeiten, davon überzeugen zu Mozilla zu wechseln – oder?

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Mario Janschitz
So schön ist Webdesign: Schmackhafte UI-Schmankerl zum Nachmachen (Teil 1) http://t3n.de/news/ux-ui-schmankerl-teil-1-564905/ 2014-11-09T13:00:57Z
Das Web besteht selbstredend aus Webseiten. Einige davon sind allerdings besonders schön oder bieten UI-Kniffe, die sonst keiner hat. In unserer neuen Reihe präsentieren wir euch ab sofort …

Das Web besteht selbstredend aus Webseiten. Einige davon sind allerdings besonders schön oder bieten UI-Kniffe, die sonst keiner hat. In unserer neuen Reihe präsentieren wir euch ab sofort inspirierende UX/UI-Schmankerl, von denen ihr euch etwas abschauen könnt.

Kennt ihr das auch? Einige Websites fühlen sich irgendwie besser an als andere – hier ein Autocomplete und dort wird ein Klick gespart. In unserer neuen Serie zeigen wir euch geniale Lösungen für gängige UI-Probleme, die ihr so noch nicht gesehen habt. Denn: Gutes UI-Design sieht man nicht.

Unsere liebsten UI-Schmankerl

instapaper
Neue Ordner anlegen bei Instapaper: Fast so einfach wie Tagging. (Screenshot: t3n)

Instapaper lässt euch ziemlich raffiniert neue Ordner anlegen. Beim Klick auf „Add Folder“ verwandelt sich der Button in ein Eingabefeld samt Input-Fokus, was euch ein schnelles Anlegen von Ordnern – fast so schnell wie beim „Tagging,“ – ermöglicht.

trello
Unauffälliger Ladeindikator bei Trello. (Screenshot: t3n)

Trello nutzt das eigene Logo als subtilen Lade-Indikator, wenn zwischen den Boards hin- und hergewechselt wird. Obwohl kein eigener Ladeindikator existiert, wird der Benutzer auf eine Statusänderung des Systems aufmerksam gemacht.

Bildschirmfoto 2014-08-29 um 11.15.10
Nie wieder nervige Sounds. Chrome zeigt wie es geht. (Screenshot: t3n)

Ihr habt 20 Browser-Tabs offen – und von irgendwoher ertönt auf einmal fahrstuhlartige Musik. Nervig, oder? Chrome zeigt euch an, ob Töne in einem Tab abgespielt werden. Ein Feature, das ich mir für jeden Browser wünsche.

... und diese UI-Schmankerl haben wir auch gefunden

Bildschirmfoto 2014-09-01 um 09.42.31
Amazon zeigt die Symbiose von Menü-Leiste und Dropdown. (Screenshot: t3n)

Amazon zeigt das Dropdown-Menü statisch als vertikale Navigationsleiste an, vorausgesetzt, dass die Breite des Browserfensters eine vollständige Anzeige zulässt. Sollte sich der Viewport verkleinern, wird die feststehende Navigationsleiste zum Dropdown-Menü umgewandelt.

Bildschirmfoto 2014-09-01 um 09.45.46 2
Übersichtliche Zusatzinformation. (Screenshot: t3n)

Facebook zeigt euch die Geburtstage eurer Freunde auch im Chat an: Neben dem Namen erscheint eine kleine Torte.

Bildschirmfoto 2014-09-01 um 10.10.48
Sublime Text zeigt dir den Pfad an, falls mehrere Dateien den gleichen Namen besitzen. (Screenshot: t3n)

In Sublime Text werden Dateien mit dem identischen Dateinamen samt Pfad angezeigt, um eine Identifizierung der jeweiligen Datei zu vereinfachen.

Bildschirmfoto 2014-09-01 um 09.52.27
Ja, Statuscode 404 hat sogar Filme geprägt. (Screenshot: t3n)

Tippfehler. Aber du wirst erstaunt sein, dass IMDB einige Filmzitate zum Statuscode 404 auffährt, und sie passen sogar.

ui-schmankerl
Der Schlagschatten wird mit steigendem Kontrastverlust stärker. ((Screenshot: t3n)

Für Texte vor einem Hintergrund mit besonders drastischer Kontrastveränderung blendet das iPhone automatisch einen relativ dominanten Schlagschatten unter den Text, um dem Nutzer das Lesen zu erleichtern.

tumblr_n452z9dXO21qea4hso1_1280
Niemand möchte Passwörter tippen. (Screenshot: t3n)

Wenn ihr bei Slack euer Passwort auf einem mobilen Gerät zurücksetzt, werdet ihr nach dem Klick auf den Aktivierungslink direkt zur Anwendung weitergeleitet. Slack öffnet sich also bereits im eingeloggten Zustand – und ihr spart euch die Eingabe von ellenlangen Passwörtern auf mobilen Geräten.

google-maps
Hätte man diese Darstellung besser lösen können? (Screenshot: t3n)

Bei Google Maps hat man Drag-&-Drop mit Skeuomorphismus vereint. Wenn ihr das Street-View-Männchen auf die Karte zieht, wackelt es in eurem imaginären Griff, als würdet ihr eine Puppe hin- und her bewegen.

Wo habt ihr euch das letzte mal gedacht: „Hm, so hätte ich das auch lösen können.“? Oder welche Finesse habt ihr entdeckt?

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Mario Janschitz
„Offline First“: Mein Highlight der beyond tellerrand http://t3n.de/news/offline-first-john-allsopp-576928/ 2014-11-06T13:19:53Z
John Allsopp, der „Großvater des Responsive Webdesign“, war eines der Highlights der „beyond tellerrand“ in Berlin. In seinem unterhaltsamen Vortrag erklärte er den Zuschauern, warum sie …

John Allsopp, der „Großvater des Responsive Webdesign“, war eines der Highlights der „beyond tellerrand“ in Berlin. In seinem unterhaltsamen Vortrag erklärte er den Zuschauern, warum sie sich mit dem Design-Prinzip „Offline First“ beschäftigen sollten, und welche Optionen es gibt.

„The Web's future is offline“

Wer heute Software konzipiert, muss sich darüber im Klaren sein, dass Nutzer nicht immer eine Stromversorgung haben – oder durchgehenden Internetempfang. Mit seinem Vortrag „The Web's future is offline“ auf der beyond-tellerrand-Konferenz hat John Allsopp, der „Großvater des Responsive Webdesign“, gezeigt, wie Entwickler diese Hürde umgehen und ihren Nutzern dennoch ein nahtloses Surf-Erlebnis bieten. Auf praktische Art und Weise erklärte er den Zuschauern die Idee des Offline-First-Prinzips sowie die Umsetzung mit HTML5 und JavaScript.

Wir leben in einer batteriebetriebenen Welt ohne ständige Internetverbindung, aber die Technologie und die darauf laufende Software sind Überbleibsel aus einer ständig vernetzten und stromversorgten Vergangenheit. Die Geräte von Nutzern werden nicht durchgehend mit Strom oder Internet versorgt. Das heißt, die Daten müssen zwischengespeichert werden, damit die Apps trotz Ausfall von Strom- oder Internetverbindung benutzbar bleiben. Die Antwort: Zwischenspeichern mit HTML5 und „Offline First“.

beyond-tellerrand
Offline-First war auch dieses Mal ein Thema bei der beyond tellerrand.

Offline First: Die Zukunft verlangt nach gutem Zwischenspeicher

Zugegeben, die praktische Umsetzung, gerade wenn es um localStorage beziehungsweise „webstorage“ und „Application Cache“ geht, ist sehr trocken zu präsentieren.

„Don't listen to naysayers.“

Trotzdem konnte John Allsopp neue Einblicke in Technologien geben, die zwar bekannt sind, aber noch nicht flächendeckend eingesetzt werden. Sein Rat: „Don't listen to naysayers“. Recht hat er. Und das hat er in seinem Vortrag auch bewiesen, indem er die Zuschauer durch die einzelnen Möglichkeiten, aber auch – und was viel wichtiger war – durch die verschiedenen Tücken der eingesetzten Technologien geführt hat.

Spätestens nach dem humorvollen Exkurs zum A-List-Apart-Artikel von Jake Archibalds mit dem bezeichnenden Titel: „Application Cache is a Douchebag“, hat John Allsopp glaubhaft klar gemacht, dass der Application Cache maximal ein Idiot ist – und sicher kein „Douchebag“ – und dass jede der genannten Technologien für „Offline first“ eingesetzt werden kann.

Fazit

John Allsopp hat Motivation, Nutzwert und Zukunftsvision eines Prinzips der Webentwicklung in einem Vortag vereint – im Gegensatz zu anderen Vorträgen auf der Konferenz, die mich nicht uneingeschränkt überzeugt haben. Er hat die hohen Erwartungen, die ich in ihn gesetzt habe, ganz klar erfüllt – mein Highlight der „beyond tellerrand // BERLIN“.

Wer sich weiter über das Prinzip „Offline First“ informieren möchte, kann dies auf der Website der Offline-First-Initiative tun.

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Mario Janschitz
beyond tellerrand: Fail again, fail better – gelebt in CSS http://t3n.de/news/beyond-tellerrand-fail-better-576668/ 2014-11-05T15:15:18Z
Zoe Mickley Gillenwater ist UX-Designerin und Buchautorin rund um Responsive Webdesign und CSS3. Auf der „beyond tellerrand // BERLIN“ hat sie darüber gesprochen, wie sie scheitert und aus …

Zoe Mickley Gillenwater ist UX-Designerin und Buchautorin rund um und . Auf der „beyond tellerrand // BERLIN“ hat sie darüber gesprochen, wie sie scheitert und aus Fehlern lernt.

Kreative Menschen sind nicht anders als unkreative, sie experimentieren einfach mehr und sind dadurch erfolgreich, allerdings machen sie dabei auch mehr Fehler aus denen sie lernen könnenZoe Mickley Gillenwater

Learning by doing. Zoe hat auf der „beyond tellerrand // BERLIN“ ihre Erfahrungen geteilt – darüber wie sie mit dem Scheitern umgeht, anhand der Flexbox in . Dabei gab sie Schritt-für-Schritt Einblicke und half den Zuschauern jeden einzelnen Gedanken anhand von Code-Zeilen zu verstehen. Aber allen voran: Sie zeigte, wie Entwickler CSS schreiben, aber nicht sollten.

beyond-gillenwater
beyond Tellerrand // BERLIN: Gillenwater über Scheitern und Code.

Gillenwater bringt es auf den Punkt: Entwickler müssen verstehen welche Befehle sie nutzen und wie die eingesetzten Properties funktionieren. Code-Zeilen zu kopieren, ohne zu verstehen, was sie bedeuten: „Das ist keine Schande, denn nur so lernt man“, sagt Zoe.

Zoe Mickley Gillenwater lebt die amerikanische „Kultur des Scheiterns“ als Entwickler vor und gibt offen zu, dass sie in ihren Projekten „mal schnell“ von Demos und Tutorials zusammenkopierten Code verwendet. Dass diese an sich falsche Vorgehensweise trotzdem zum Lernprozess beiträgt, verdankt sie ihrer Kreativität und Bereitschaft Neues auszuprobieren. Dabei ist sie dankbar, dass sie Fehler macht, denn „hätte der Code gleich beim ersten Mal funktioniert, hätte ich Flexbox nie verstanden“.

Ein „dünner Vortrag“ mit erstaunlichen Erkenntnissen

Der Vortrag, der in Berlin stattfindenden beyond tellerrand, „fühlte“ sich für mich etwas dünn an. Letztendlich hat jeder einmal so angefangen: Code kopieren, verstehen und verbessern. Ich war erstaunt, dass eine versierte Entwicklern wie Zoe Mickley Gillenwater immer noch nach diesem „Quick-n'-Dirty-Prinzip“ arbeitet und erst beim Auftreten eines Problems versucht, die jeweilige Property zu verstehen. Genau das machte sie nämlich anhand eines realen Beispiels rund um die perspective-Property klar.

Persönlich war ich von ihrem Vortrag enttäuscht. Die Kernaussage: „Versteht den Code, den ihr schreibt“, hätte sie auch kürzer fassen können.

Ich hätte mir gewünscht, dass sie mehr darauf eingegangen wäre, wo Entwickler gute Ressourcen beziehen können, um nicht die Dokumentation lesen zu müssen. Klar, ich wusste durch die Beschreibung des Vortrags was mich erwartet – und trotzdem: Auf einer Konferenz wie der und von einer Entwicklerin dieses Kalibers, habe ich mir deutlich mehr Nutzwert erwartet. Die einzige Erkenntnis bleibt: „Ich habe Code kopiert, das hat nicht funktioniert. Ich habe ihn gelesen und verstanden, jetzt funktioniert der Code.“ Na ja, und „ihr seid alle super, weil ihr Fehler macht“.

Der Vortrag fühlte sich wie streckenweise langatmiges Infotainment an: Viel Emotion und Motivation, wenig Nutzwert. Dass Entwickler verstehen müssen, was Code macht, bevor sie ihn verwenden, wird schließlich schon seit Jahren gepredigt.

Lest ihr vor dem Anwenden einer CSS-Eigenschaft die dazugehörige Dokumentation?

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Mario Janschitz
Die 10 beliebtesten Artikel der Woche: Parallax-Scrolling, schräges Marketing und Kassensturz bei WhatsApp http://t3n.de/news/10-beliebtesten-artikel-woche-52-575773/ 2014-11-01T09:59:56Z
Die vergangene Artikel-Woche stand ganz im Zeichen von Webdesign: Neben Beispielen für Parallax-Scrolling haben euch auch kostenlose Fonts und die wirkliche Bedeutung von Logos bekannter Tech-Marken …

Die vergangene Artikel-Woche stand ganz im Zeichen von Webdesign: Neben Beispielen für Parallax-Scrolling haben euch auch kostenlose Fonts und die wirkliche Bedeutung von Logos bekannter Tech-Marken beeindruckt. Die weiteren Gewinner gibt's hier in der Übersicht.

1. Parallax-Scrolling: 20 beeindruckende WordPress-Themes mit Tiefgang

Parallax Theme: Montreal
Parallax Theme: Montreal

Parallax-Scrolling macht beeindruckende Effekte und vollkommen neuartige Erfahrungen auf Webseiten möglich. Wir haben zwanzig schicke Parallax-Scrolling-Themes für WordPress zur Inspiration und zum Download zusammengestellt.

Unser Artikel: Parallax-Scrolling: 20 beeindruckende WordPress-Themes mit Tiefgang

2. Recherche, Analyse, Schreiben: Mit diesen 15 Tools arbeiten die t3n-Redakteure [Teil 1]

Blogger ToolsJeder Webworker hat so seine Tools, die für ihn unerlässlich sind. Oft muss man einige Programme testen, bis man den persönlichen Helfer gefunden hat, manchmal ist es aber auch Liebe auf den ersten Klick. Das sind die Favoriten der t3n-Redakteure.

Unser Artikel: Recherche, Analyse, Schreiben: Mit diesen 15 Tools arbeiten die t3n-Redakteure [Teil 1] 

3. 25 kostenlose Fonts für Grafikdesigner

kostenlose_fonts_schriftWir haben euch 25 schicke Fonts herausgesucht, die ihr in eurem nächsten Projekt verwenden könnt. Natürlich stehen euch alle Schriftarten zur kostenfreien Verwendung zur Verfügung.

Unser Artikel: 25 kostenlose Fonts für Grafikdesigner

4. Mehr als nur hübsch: Was die Logos bekannter Tech-Marken wirklich bedeuten

tech-logos-bedeutungWir sind täglich mit den Logos verschiedener Technologieunternehmen und Produkte konfrontiert. Aber was bedeuten sie eigentlich? Wir erklären euch 10 bekannte Tech-Logos.

Unser Artikel: Mehr als nur hübsch: Was die Logos bekannter Tech-Marken wirklich bedeuten

5. Google aktualisiert Richtlinien: Warum du deine robots.txt prüfen solltest

googleGoogle hat am gestrigen Montag eine Änderung der „Webmaster Guidelines“ angekündigt. Demnach sollten Seitenbetreiber ab sofort sicherstellen, dass die robots.txt-Datei ihrer Website den Abruf von CSS- und Javascript-Dateien erlaubt – andernfalls drohen schlechtere Rankings.

Unser Artikel: Google aktualisiert Richtlinien: Warum du deine robots.txt prüfen solltest

6. IKEA stellt Standing Desk vor: 7 gute Gründe für das Arbeiten im Stehen

standing desk bekant ikeaWir sitzen heute so viel wie noch nie – vor dem Bildschirm, den ganzen Tag lang. Der menschliche Körper ist aber nicht fürs Rumsitzen gemacht, auf Dauer kann es uns daher krank machen. Spätestens, seit IKEA vor wenigen Tagen einen eigenen Standing Desk vorgestellt hat, ist das Arbeiten im Stehen in aller Munde.

Unser Artikel: IKEA stellt Standing Desk vor: 7 gute Gründe für das Arbeiten im Stehen

7. Guerilla-Marketing: 40 kreative Beispiele für etwas andere Werbung

guerilla-marketing-zooWerbung ist zum integralen Bestandteil unser aller Leben geworden, was unser Gehirn schlauerweise mit Reizfiltern beantwortet. Guerilla-Marketing heißt das Zauberwort für die Werber, um dennoch in das Bewusstsein der Menschen vorzudringen. Wir zeigen euch 40 der besten Beispiele der letzten Jahre.

Unser Artikel: Guerilla-Marketing: 40 kreative Beispiele für etwas andere Werbung

8. WhatsApp: Das verdient der Wunder-Messenger

WhatsappKassensturz beim beliebtesten Messenger der Welt, erstmals hat Facebook auch Geschäftszahlen seiner WhatsApp-Tochter veröffentlicht. Ergebnis: Wenig Umsatz, viel Verlust.

Unser Artikel: WhatsApp: Das verdient der Wunder-Messenger

9. Zeitreise in die Vergangenheit des Web: Das war 1996 mit HTML 3.2 „State of the Art“

html-1996-featuredDie Zeit im Web vergeht rasend schnell. Technologien und Techniken, die heute noch als großer Wurf behandelt werden, können in nur wenigen Jahren an den Rand verdrängt werden oder ganz verschwinden. Doch wie sieht es mit den Veränderungen bei HTML, der „Ur-Technologie“ des Web, aus? Eine kleine Zeitreise.

Unser Artikel: Zeitreise in die Vergangenheit des Web: Das war 1996 mit HTML 3.2 „State of the Art“

10. Schüchtern und still am Arbeitsplatz: Karrieretipps für Introvertierte [Infografik]

introvertiert_introvertierte_bei-der-arbeit_karriere_teaserIntrovertierte Menschen haben es im Berufsalltag oft nicht einfach. Wir haben eine schicke Infografik gefunden, die introvertierten Personen mit hilfreichen Karrieretipps zur Seite steht.

Unser Artikel: Schüchtern und still am Arbeitsplatz: Karrieretipps für Introvertierte [Infografik]

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Daniel Hüfner
WieWoWas? t3n-Leser fragten nach: Hootsuite-Alternativen, MRM-Tools, Responsive Webdesign, HTML5 und Google Analytics http://t3n.de/news/wiewowas-t3n-leser-fragten-nach-574816/ 2014-10-28T13:24:17Z
Für alle Fragen rund um die digitale Welt findet ihr auf t3n.de den Fragen-Bereich. Dort könnt ihr nach Lust und Laune alles aufs Tapet bringen, was euch ein Rätsel ist. Jeden Dienstag erscheinen …

Für alle Fragen rund um die digitale Welt findet ihr auf t3n.de den Fragen-Bereich. Dort könnt ihr nach Lust und Laune alles aufs Tapet bringen, was euch ein Rätsel ist. Jeden Dienstag erscheinen dann die interessantesten und brisantesten Fragen und Antworten der t3n-Community zusammengefasst in einem Artikel.In den Fragen dieser Woche geht es um Hootsuite- und Wunderlist-Alternativen, Responsive Webdesign, HTML5, Google Analytics und mehr.

1. Social-Media-Management-Tools

Hootsuite ist eines der beliebtesten Social-Media-Management-Tools. Gibt es auch gute Alternativen? Welche nutzt ihr und warum?

Zur Frage: Was ist die beste Hootsuite Alternative?

2. Bezahlbares MRM-Tool

Wir befinden uns gerade in der Gründungsphase eines E-Commerce-Projektes und arbeiten bereits mit einigen Tools. Was uns fehlt: Ein (bezahlbares) Marketing-Resource-Management-Tool, das uns eine zentrale Planung (Timetables, etc.) und Evaluierung (über KPIs, etc.) unserer Marketingaktivitäten ermöglicht. Gerne auch aus dem Bereich SaaS.

Was empfehlt ihr?

Zur Frage: Gibt es ein (bezahlbares) MRM-Tool für Start-ups? 

3. Responsive Webdesign-Einstieg

Ich habe mich in den letzten Tagen etwas näher mit Responsive Webdesign auseinandergesetzt und bin immer wieder über den Ansatz „Mobile First” gestolpert. Was würdet ihr empfehlen? Mit der Version für mobile Geräte zu beginnen und sich hochzuarbeiten oder andersrum anfangen?

Zur Frage: Responsive Webdesign-Einstieg: "Mobile First" oder "Desktop First"?

4. HTML5-Tags

HTML5 ist ja noch kein verabschiedeter Standard, sondern noch in der Entwicklung. Kann man die Tags trotzdem schon bedenkenlos einsetzen?

Zur Frage: Kann/sollte man HTML5-Tags schon heute einsetzen?

5. Google Analytics in WordPress integrieren

Ich habe eine WordPress-Installation und würde da gerne Google Analytics einbinden. Als Theme nutze ich Twenty Thirteen. Wie mache ich das am besten?

Zur Frage: Wie kann ich Google Analytics in WordPress integrieren?

6. Wunderlist-Alternative

Welche alternativen ToDo-Listen nutzt ihr? Setzt ihr auf kostenpflichtige oder kennt ihr gute Freeware?

Zur Frage: Was ist die beste Wunderlist-Alternative?

 

Tausch dich mit der Community aus: Stell deine Frage, oder lass die Anderen von deinem Wissen profitieren – auf t3n.de/fragen

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Melanie Petersen
Grafikpower für dein Projekt: Die 15 besten Seiten für kostenlose Icons und Icon-Fonts http://t3n.de/news/kostenlose-icons-finder-font-generatoren-574542/ 2014-10-28T09:19:20Z
Für Webdesigner sind Icons das sprichwörtliche Salz in der Suppe – sie machen ein Web-Projekt erst richtig individuell. Wer auf der Suche nach frischen, kostenlosen Icons ist, kommt an diesen …

Für sind das sprichwörtliche Salz in der Suppe – sie machen ein Web-Projekt erst richtig individuell. Wer auf der Suche nach frischen, kostenlosen Icons ist, kommt an diesen Icon-Findern und Font-Generatoren auf keinen Fall vorbei.

Icons sind im Web allgegenwärtig – es wimmelt geradezu vor Icon-Sammlungen für jeden Anlass und Geschmack. Hier bei t3n haben wir euch schon kostenlose Icons wie die Iconmelon-Sammlung oder  Googles kostenfreie SVG-Icons vorgestellt.

Die Zeit, die Designer in die Auswahl geeigneter Symbole investieren, zahlt sich in der Regel aus – in Form von aussagekräftigen, persönlichen Webseiten mit dem gewissen Etwas. Doch nicht immer muss man die Tiefen des Netzes durchforsten, um den perfekten Satz Web-Icons für sein nächstes Projekt zu finden. Wir stellen euch die wichtigsten Icon-Finder, die massenweise Icon-Sets für euch aggregieren, sowie die populärsten Generatoren für Icon-Fonts vor.

1. Kostenlose Web-Icons finden mit GlyphSearch

GlyphSearch vereint populäre Icon-Sets in einer Suchmaske. (Screenshot: GlyphSearch)
GlyphSearch vereint populäre Icon-Sets in einer Suchmaske. (Screenshot: GlyphSearch)

Die Icon-Suchmaschine GlyphSearch lässt Nutzer nach Symbolen aus den Sammlungen Font Awesome, Glyphicons, IcoMoon, Ionicons und Foundation suchen – auch GitHubs Octicons sind mit von der Partie. Insgesamt kommen auf diese Weise über 1.000 Web-Icons zusammen, die man per Klick kopieren und in sein eigenes Webprojekt einfügen kann.

2. Flaticon – Der Klassiker unter den Icon-Findern

Bei Flaticons gibt es eine Fülle an kostenlosen Icons. Nett: Nutzer können sich die populärsten Icons der letzten Stunden anzeigen lassen. (Screenshot: Flaticons)
Bei Flaticons gibt es eine Fülle an kostenlosen Icons. Nett: Nutzer können sich die populärsten Icons der letzten Stunden anzeigen lassen. (Screenshot: Flaticons)

Den Icon-Finder Flaticon haben wir bei t3n schon mal im Detail vorgestellt. Nicht nur bietet der Dienst Zugriff auf mittlerweile fast 60.000 Icons, er ermöglicht es auch, über ein eigenes Photoshop-Plugin ohne den Umweg über die Flaticon-Website auf die gesamte Symbolsammlung zuzugreifen.

3. Iconfinder: Stattliche Anzahl frei verfügbarer Icons

Nicht nur, aber auch kostenlose Icons finden sich auf iconfinder.com. (Screenshot: Iconfinder)
Nicht nur, aber auch kostenlose Icons finden sich auf iconfinder.com. (Screenshot: Iconfinder)

Iconfinder behauptet von sich selbst, die größte Anzahl an Premium-Icons zur Verfügung zu stellen – über 340.000 hat der Anbieter mittlerweile in seiner Sammlung angehäuft. Der Dienst hat es trotzdem in unsere Sammlung geschafft, denn die Suchergebnisse lassen sich leicht nach „Free Icons“ filtern – und zurück bleibt immer noch eine beachtliche Anzahl verfügbarer Icons.

4. Icons Made in Germany: Iconmonstr

Iconmonstr ist ein Projekt des Münsteraner Entwicklers Alexander Kahlkopf. (Screenshot: Iconmonstr)
Iconmonstr ist ein Projekt des Münsteraner Entwicklers Alexander Kahlkopf. (Screenshot: Iconmonstr)

Bei Iconmonstr handelt es sich um ein Projekt des Münsteraner Entwicklers Alexander Kahlkopf. Bis heute haben sich auf der Plattform 2.630 in Schwarz-Weiß gehaltene Icons angesammelt, die allesamt kostenlos für private und kommerzielle Zwecke genutzt werden können.

5. Der erste Icon-Font-Generator überhaupt: IcoMoon

Der Klassiker unter den Icon-Font-Generatoren: IcoMoon.
Der Klassiker unter den Icon-Font-Generatoren: IcoMoon.

Bei IcoMoon handelt es sich um eine Web-App, mit der Nutzer eine Vielzahl an Icon-Sammlungen durchsuchen und eine beliebige Auswahl an Symbolen zu einem eigenen Icon-Font zusammenstellen können. Der Vorteil bei solchen Font-Generatoren: Webdesigner müssen nicht komplette Icon-Sets herunterladen beziehungsweise in ihr Web-Projekt integrieren, sondern können aus verschiedenen Sets genau die Symbole wählen, die sie verwenden wollen. Auf seiner Website gibt IcoMoon an, der erste Anbieter eines solchen Font-Generators überhaupt gewesen zu sein. Auch bei IcoMoon gibt es nicht nur kostenlose Icons – insgesamt finden sich laut den Angaben der Macher aber über 4.000 kostenlose und Open-Source-Icons in der Bibliothek.

6. Icon-Fonts generieren mit Fontastic

Fontastic will das Leben von Webdesignern nicht nur durch kostenlose Icons, sondern auch durch schnellere Workflows erleichtern. (Screenshot: Fontastic)
Fontastic will das Leben von Webdesignern nicht nur durch kostenlose Icons, sondern auch durch schnellere Workflows erleichtern. (Screenshot: Fontastic)

Auch Fontastic zählt zu den Icon-Font-Generatoren und eignet sich besonders gut für Designer, die sich noch mit dem Konzept vertraut machen wollen. Hier können sie aus einer Auswahl von über 9.000 Icons wählen – darunter GitHubs Octicons, Font Awesome, Streamline Icons oder die JustVector Social Icons –, oder auch eigene Icons importieren. In den nächsten Schritten werden die gewählten Icons gebündelt, bearbeitet und als eigene Font ausgegeben. Einzelne Icons lassen sich später mittels CSS anpassen, so dass nicht jedes Mal das ganze Set überarbeitet beziehungsweise neu herunter geladen werden muss. Einen ganz ähnlichen Dienst, das Tool Glyphter, haben wir euch übrigens an anderer Stelle schon vorgestellt.

7. Über 5.000 kostenlose Icons im DryIcons-Archiv

Bei DryIcons gibt es über 6.000 kostenlose Icons und Vektoren. (Screenshot: DryIcons)
Bei DryIcons gibt es über 6.000 kostenlose Icons und Vektoren. (Screenshot: DryIcons)

Bei DryIcons können Nutzer auf die über 5.000 kostenlosen Icons und mehr als 1.700 Vektorgrafiken zugreifen, die die Designer des DryIcons-Projektes aus Mazedonien seit 2007 kreiert haben. Die Sammlung enthält sowohl minimalistische Icons als auch Hochglanz- und saisonale Icon-Sets, die unter einer freien Lizenz bei Namensnennung der Urheber genutzt werden können.

8. FontCustom: Ein Font-Generator auf Ruby-Basis

Icon-Font-Generator auf Ruby-Basis. (Screenshot: FontCustom)
Icon-Font-Generator auf Ruby-Basis. (Screenshot: FontCustom)

Wer komplett unabhängig von vorgefertigten Icon-Sets sein will, sollte sich FontCustom anschauen: Das Ruby-basierte Web-Projekt lässt Nutzer aus ihren SVG-Dateien eigene Icon-Fonts erstellen – und das direkt über die Kommandozeile. Eine genaue Beschreibung des Workflows findet ihr in diesem Blogbeitrag.

9. Open-Source-Depot mit Usability-Schwächen: IconsPedia

Nicht immer gut fürs Auge: Die Plattform IconsPedia versammelt eine Vielzahl kostenloser Icons. (Screenshot: IconsPedia)
Nicht immer gut fürs Auge: Die Plattform IconsPedia versammelt eine Vielzahl kostenloser Icons. (Screenshot: IconsPedia)

Auch bei Iconspedia finden sich kostenlose Icons in Hülle und Fülle, die Seite selbst ist in Sachen Usability allerdings weniger empfehlenswert. Wer sich hier auf die Suche machen will, muss sich auf buntes 90er-Jahre-Design und verwirrend viele Werbebanner einstellen – zudem empfiehlt es sich, genau nach Lizenzen zu filtern, denn hier gibt es zum Teil auch Icon-Sets, die nur für private oder zumindest nicht-kommerzielle Zwecke freigegeben sind.

10. Font-Generator mit SVG-Import: Fontello

Fontello ähnelt anderen Icon-Font-Generatoren wie IcoMoon oder Fontastic. (Screenshot: Fontello)
Fontello ähnelt anderen Icon-Font-Generatoren wie IcoMoon oder Fontastic. (Screenshot: Fontello)

Bei Fontello handelt es sich um einen einfach zu bedienenden Icon-Font-Generator. Ähnlich wie bei IcoMoon oder Fontastic können Nutzer zwischen in einer großen Auswahl an frei verfügbaren Icon-Sets stöbern. Mit dabei: Font Awesome, Typicons, Modern Pictograms oder das Fontello-eigene Icon-Set Fontelico. Die Icons, die Nutzer wirklich verwenden wollen, können sie zu einem eigenen Package zusammenstellen. Bei Fontello bietet sich allerdings zusätzlich die Möglichkeit, eigene Icons beziehungsweise SVG-Dateien hochzuladen.

11. Freepik crawlt das Netz nach kostenlosen Icons und Grafiken

Kostenlose Design-Ressourcen spürt der Icon-Finder Freepik auf. (Screenshot: Freepik)
Kostenlose Design-Ressourcen spürt der Icon-Finder Freepik auf. (Screenshot: Freepik)

Freepik ist ein Icon-Finder im klassischen Sinne: Der Dienst durchsucht das Netz automatisiert nach kostenlosen Grafiken, Icons, Fotos und Vektoren für Webdesigner und gibt diese nach Kategorien geordnet für seine Nutzer aus. Parallel dazu erstellen aber auch einige Designer exklusive Dateien, die sich ebenfalls umsonst bei Freepik finden. Insgesamt kommen so laut Freepik über eine Million kostenfreie Grafik-Ressourcen zusammen.

12. Kostenlose Icons im IconArchive

Open-Source-Icons finden sich im IconArchive. (Screenshot: IconArchive)
Open-Source-Icons finden sich im IconArchive. (Screenshot: IconArchive)

Eine Menge kostenlose Icons finden sich bei IconArchive – Webdesigner sollten allerdings darauf achten, dass das gewählte Icon-Set auch tatsächlich zur kommerziellen Nutzung freigegeben ist. Entsprechende Suchfilter sind vorhanden. Zudem kann bei IconArchive in über 40 verschiedenen Kategorien von Business bis Vintage gesucht oder nach den neuesten oder beliebtesten Icons gefiltert werden.

13. Pictonic: Ein Font-Generator mit kostenlosen und kostenpflichtigen Icons

Nicht annähernd so viele kostenlose Icons wie Fontello oder IconFont: Der Font-Generator Pictonic. (Screenshot: Pictonic)
Nicht annähernd so viele kostenlose Icons wie Fontello oder IconFont: Der Font-Generator Pictonic. (Screenshot: Pictonic)

Bei Pictonic handelt es sich um einen weiteren Icon-Font-Generator im Stile von Fontello oder Fontastic. Wermutstropfen bei diesem Dienst: Nur 362 der verfügbaren Icons sind kostenlos, alle weiteren kosten 59 Cent. Größe, Farbe und Schattierung der Icons können sehr einfach angepasst und auch später noch verändert werden. In einer eigenen Showcase-Sektion kann man sich zudem durch Beispiele anderer Pictonic-Nutzer inspirieren lassen.

14. Font-Generator mit Herz: We Love Icon Fonts

We Love Icon Fonts ähnelt Diensten wie Fontello, Fontastic oder IcoMoon. (Screenshot: We Love Icon Fonts)
We Love Icon Fonts ähnelt Diensten wie Fontello, Fontastic oder IcoMoon. (Screenshot: We Love Icon Fonts)

Der Dienst We Love Icon Fonts beschreibt sich selbst als Google Web Fonts, nur speziell für Icon-Fonts. Hier sind verschiedenste Open-Source-Icon-Sets gebündelt, aus denen Nutzer ihre Favoriten in eine eigene Font exportieren können. Die Auswahl der verfügbaren Packages ist denen der anderen Icon-Font-Generatoren sehr ähnlich. Die personalisierte Icon Font wird per Embed-Code ausgegeben und kann dann via CSS angepasst werden.

15. Anspruchsvolles Icon-Font-Tool: Iconvault

Mit Iconvault lassen sich SVG-Sammlungen in Icon-Fonts umwandeln. (Screenshot: Iconvault)
Mit Iconvault lassen sich SVG-Sammlungen in Icon-Fonts umwandeln. (Screenshot: Iconvault)

Ähnlich wie FontCustom lässt auch der Dienst Iconvault seine Nutzer SVG-Dateien in personalisierte Icon-Fonts umwandeln. Iconvault erarbeitet Sammlungen von SVG-Dateien vollkommen automatisch in verschiedene Font-Formate und liefert sie zusammen mit einer Anleitung und Beispieldatei an den Nutzer zurück. Eine ausführliche Vorstellung von Iconvault findet ihr in diesem Artikel.

Wo sucht ihr am liebsten nach Icons für eure Projekte? Welchen Dienst haben wir vergessen? Wir freuen uns auf eure Kommentare!

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Lea Weitekamp