Design | t3n News News, Infos, Tipps und aktuelle Artikel zu Design 2014-10-29T15:44:15Z t3n Redaktion http://t3n.de/tag/design AllTheFreeStock: Stockfotos kostenlos und lizenzfrei http://t3n.de/news/allthefreestock-stockfotos-574818/ 2014-10-29T15:44:15Z
Allthefreestock aggregiert dutzende Quellen für Stockfotos aus dem Web und bietet somit eine Anlaufstelle für tausende kostenlose und lizenzfreie Bilder, die auch für die kommerzielle Nutzung …

Allthefreestock aggregiert dutzende Quellen für Stockfotos aus dem Web und bietet somit eine Anlaufstelle für tausende kostenlose und lizenzfreie Bilder, die auch für die kommerzielle Nutzung geeignet sind. Wir haben uns auf der Website umgeschaut.Allthefreestock leistet genau das, was die pragmatische Namensgebung vermuten lässt: Die Website ist eine wahre Fundgrube für kostenlose und gleichzeitig lizenzfreie Stockfotografie, die dank Creative Commons Zero (CC0 1.0) auch kommerziell verwendbar ist. Gelistet werden 29 mehr oder weniger bekannte Anlaufstellen, die sich einzeln auswählen und nach Bildern durchforsten lassen.

Hochwertige Stockfotos seitenübergreifend durchstöbern

Beim Klick auf einen der Anbieter öffnet Allthefreestock die entsprechende Website mittels Einbindung per iFrame im Body der eigenen Seite. Gefällige Bilder können von hier direkt ausgewählt und heruntergeladen werden. Einige wenige der anbietenden Websites verlangen dazu, dass ein kostenloser Account angelegt wird, beim Großteil der Seiten funktioniert der Download aber ganz ohne Umschweife.

Die Qualität der Bilder, die die Zusammenstellung der Websites durch Allthefreestock bietet, ist grandios. Natürlich könnte man die Fotos der einzelnen Anbieter auch auf eigene Faust, durch den Besuch der individuellen Websites, durchstöbern. Gerade die Tatsache, dass viele der gelisteten Seiten auf Klasse anstatt auf Masse setzen und somit vielleicht nur eine handvoll Fotos zum Download bereitstellen, macht eine kuratorisch tätige Instanz wie Allthefreestock sehr wertvoll.

Allthefreestock als Aggregator für Stockfotos: Hier am Beispiel von Bildern der Website gratisography.com (Screenshot: allthefreestock.com)
Allthefreestock als Aggregator für Stockfotos: Hier am Beispiel von Bildern der Website gratisography.com (Screenshot: allthefreestock.com).

Mehr als nur Stockfotos: Kostenlose Videos und Icons

Allthefreestock macht bei Stockfotos nicht Halt. Neben dem feinen Angebot an kostenlosen und lizenzfreien Bildern versucht sich die Website auch daran, gleichen Service für Videos und Icons zur Verfügung zu stellen. Die Auswahl ist hier deutlich kleiner, aber auch einen Blick wert. Bei Videos wie bei Icons sollte allerdings darauf geachtet werden, dass die Inhalte zwar kostenlos zur Verfügung gestellt werden. Allerdings kann es vorkommen, dass hier, je nach anbietender Website, unterschiedliche Lizenzen beachtet werden müssen.

Neben Stockfotos listet Allthefreestock auch Videos, hier von lifeofvids.com (Screenshot: allthefreestock.com).
Neben Stockfotos listet Allthefreestock auch Videos, hier von lifeofvids.com (Screenshot: allthefreestock.com).

Allthefreestock zusammengefasst

Die Sammlung freier und kostenloser Stockfotos, vom Macher Saijo George auf der Website Allthefreestock zusammengetragen, ist ein hilfreicher Beitrag für jeden Webworker, der auf der Suche nach qualitativ hochwertigen Bildern ist. Zeitraubendes Suchen und Abklappern diverser verschiedener Websites bleibt aus - alle Inhalte werden an einem Ort angezeigt und können dort durchstöbert werden. Das Budget wird nicht angetastet und gleichzeitig können die Fundstücke kommerziell genutzt werden.

Eine Alternative zu Allthefreestock bildet der ähnlich funktionierende Dienst „The Stocks“, über den wir in folgendem Artikel berichtet haben: „The Stocks: 11 Websites für lizenzfreie Stockfotos an einem Ort“. Zahlreiche empfehlenswerte alleinstehende Anlaufstellen für Stockfotos haben wir euch im Artikel „Hochglanz und für lau: 10 Seiten, die langweiligen Stockfotos den Kampf ansagen“ zusammengestellt.

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Marcel Seer
Leitfaden für Material Design: Google veröffentlicht Style-Guide für Android-Apps http://t3n.de/news/leitfaden-fuer-material-design-575047/ 2014-10-29T10:59:17Z
Die eigenen Apps hat Google schon weitestgehend an das neue Material Design angepasst. Damit App-Entwickler ihre Apps künftig anpassen können, hat Google einen Leitfaden erstellt.

Die eigenen Apps hat Google schon weitestgehend an das neue Material Design angepasst. Damit App-Entwickler ihre Apps künftig anpassen können, hat Google einen Leitfaden erstellt. Dem Nutzer soll damit eine einheitliche Oberfläche geboten werden. 

Material Design
Das Material Design gibt es in hell und dunkel (Screenshot: Android)

Natürlich ist das neue Material Design nicht bindend, sondern vielmehr eine Empfehlung. Im Material Design sollen die Apps mehr Tiefe bekommen, dabei wird mit verschiedenen Flächen,Ebenen und Schatten gearbeitet. Bei den einzelnen Elementen soll mit mehr Animation und Bewegung gearbeitet werden, aber nur in dem Umfang, der den User nicht verwirrt. Um die App-Entwickler dazu zu ermutigen ihr Design anzupassen, hat Google es ihnen leicht gemacht und einen Design-Leitfaden für das interaktive Design veröffentlicht.

Der Leitfaden zeigt, wie Entwickler im Material-Design folgende Elementen erstellen und anpassen können:

Abwärtskompatibel bleiben, integrieren, kreieren...

In dem Leitfaden wird zum einen erklärt, wie du  Material Design-Merkmale in deine App integrieren kannst und sie dennoch abwärtskompatibel bleibt. Zudem hilft er dabei, bestehende Layouts nach den Material-Design-Richtlinien zu aktualisieren, Tiefe, Touch-Feedback und Animationen einzugliedern. Für Entwickler, die eine neue App mit dem Material-Design schaffen, bieten die Material-Design-Richtlinien ein zusammenhängendes Design-Framework.

Den kompletten Leitfaden findest du hier.

Alle t3n-Artikel zum Material Design findest du hier.

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Melanie Petersen
Apple Watch: So sieht das schicke Interface auf einem iPhone aus http://t3n.de/news/demo-app-sieht-schicke-575008/ 2014-10-29T06:00:25Z
Der Entwickler Lucas Menge hat eine Demo-App programmiert, mit der die schicke Oberfläche der Apple Watch auf dem iPhone dargestellt werden kann. Der Quellcode steht zum Download bereit.

Der Entwickler Lucas Menge hat eine Demo-App programmiert, mit der die schicke Oberfläche der Apple Watch auf dem iPhone dargestellt werden kann. Der Quellcode steht zum Download bereit.

Bedienoberfläche: Konzept der Apple Watch auf dem iPhone (Screenshot: YouTube/Lucas Menge)
Bedienoberfläche: Konzept der Apple Watch auf dem iPhone (Screenshot: YouTube/Lucas Menge)

Vor knapp zwei Monaten hat Apple-Chef Tim Cook die konzerneigene Smartwatch Apple Watch vorgestellt. Eine der Besonderheiten ist die schicke Oberfläche, die sich nicht nur über den Touchscreen, sondern auch über ein kleines Rädchen an der Seite steuern lässt. Dabei sind die App-Icons rund und nicht in Reihen angeordnet.

Demo-App erweckt Apple-Watch-Oberfläche auf dem iPhone

Von einem Artikel der Kollegen von 9to5Mac, denen die schicke Bedienoberfläche der Apple Watch offenbar gefallen hat und die das Konzept auf das iPhone übertragen haben, hat sich der Entwickler Lucas Menge inspirieren lassen. Menge programmierte eine Demo-App namens „Watch Springboard Prototype”, in der er das User Interface der Apple Watch auf dem iPhone zum Leben erweckte.

Wie im Video zu sehen ist, beinhaltet das Design-Konzept statt der unter- und nebeneinander angeordneten, abgerundeten App-Icons runde Symbole, die sich eher im Kreis und in unterschiedlichen Größen um das Icon in der Mitte anordnen. Damit würde es auch nicht mehr mehrere Seiten geben, über die sich die Icons erstrecken. Es ließe sich hinein- und hinauszoomen. Das Öffnen einer App geschieht nach Menges Vorstellung auch mit einem netten Effekt.

Die App befinde sich natürlich noch in einem frühen Entwicklungsstadium und weise Ecken und Kanten auf, wie Menge betont. Wenn ihr euch den Quellcode für die Demo-App herunterladen wollt, könnt ihr das auf Github tun.

via techcrunch.com

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Jörn Brien
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 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 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
Mehr als nur hübsch: Was die Logos bekannter Tech-Marken wirklich bedeuten http://t3n.de/news/10-tech-logos-bedeutung-574485/ 2014-10-27T10:33:39Z
Wir sind täglich mit den Logos verschiedener Technologieunternehmen und Produkte konfrontiert. Aber was bedeuten sie eigentlich? Wir erklären euch 10 bekannte Tech-Logos.

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

Wir sind tagtäglich von unzähligen Firmenlogos umgeben. Doch nur selten machen wir uns die Mühe zu entziffern, was sich die Designer des jeweiligen Logos eigentlich dabei gedacht haben. Dabei stecken dahinter in vielen Fällen einige sehr interessante Ideen, die von Morsezeichen bis hin zu einem Verweis auf einen Konkurrenten reichen, den das Unternehmen aus dem Geschäft drängen will. Im Folgenden zeigen wir euch daher die Bedeutung von 10 bekannten Produkt- und Firmenlogos.

10 bekannte Tech-Logos und ihre Bedeutung

Amazon

Von A bis Z: Das Amazon-Logo weist auf die große Auswahl an Produkten hin. (Logo: Amazon)
Von A bis Z: Das Amazon-Logo weist auf die große Auswahl an Produkten hin. (Logo: Amazon)

Das Amazon-Logo dürfte wirklich jeder kennen. Während viele Menschen den Pfeil unter dem Namen des Unternehmens für eine Art Smiley halten, steckt dahinter etwas völlig anderes. Der Pfeil zeigt von A bis Z und soll das umfangreiche Produktsortiment des Handelsriesen verdeutlichen.

XNA

XNA enthält den Begriff auch in Form von Morsezeichen. (Logo: Microsoft)
XNA enthält den Begriff auch in Form von Morsezeichen. (Logo: Microsoft)

Die Entwicklung an Microsofts Videospiel-Runtime XNA wurde 2013 eingestellt. Trotzdem handelt es sich um ein sehr interessantes Logo. In dem X wurde der Morsecode für XNA versteckt. „– .. –“ bedeutet X, „– .“ steht für N und „. –“ wiederum steht im internationalen Morsealphabet für A.

Facebook Places

Facebook Places: Das Logo verrät bereits, auf welchen Konkurrenten  es Facebook mit dem Produkt abgesehen hatte. (Logo: Facebook)
Facebook Places: Das Logo verrät bereits, auf welchen Konkurrenten es Facebook mit dem Produkt abgesehen hatte. (Logo: Facebook)

Mit Places wollte Facebook einen Konkurrenten für Foursquare auf die Beine stellen. Aus dieser Absicht hat der Social-Media-Gigant schon beim Logo keinen Hehl gemacht. Der rote Pfeil deutet direkt auf eine Vier (auf Englisch: four), die sich auf einem Rechteck (Englisch: square) befindet – also genau auf dem direkten Gegner.

Cisco

Cisco: Name und Logo sind ein Hinweis auf San Francisco. (Logo: Cisco)
Cisco: Name und Logo sind ein Hinweis auf San Francisco. (Logo: Cisco)

Der Name Cisco leitete sich aus San Francisco ab und in dem Firmenlogo steckt mit der Golden Gate Bridge das wohl berühmteste Wahrzeichen der Stadt.

VAIO

Analog und digital: Das VAIO-Logo. (Logo: VAIO)
Analog und digital: Das VAIO-Logo. (Logo: VAIO)

VAIO war eine ehemalige Sony-Marke, die im März 2014 an Japan industrial Partners verkauft wurde. Der PC-Hersteller war bekannt für das innovative und vergleichsweise schicke Design seiner Rechner. Das V und das A im Logo repräsentieren eine analoge Wellenform, während das IO für einen Binärcode steht.

Ubuntu

Tech-Logos: Ubuntu steht für das Miteinander. (Logo: Ubuntu)
Tech-Logos: Ubuntu steht für das Miteinander. (Logo: Ubuntu)

Der Begriff Ubuntu stammt aus dem südafrikanischen Sprachraum und bedeutet in etwa „menschliche Güte“. In Südafrika wird der Begriff als Lebensphilosophie verstanden. Passend dazu, zeigt das Logo der gleichnamigen Linux-Distribution drei Menschen, die sich an den Händen halten und ihren Blick gen Himmel richten.

Picasa

Logos: Picasa kombiniert Kameramechanik mit einem Haus. (Logo: Google)
Logos: Picasa kombiniert Kameramechanik mit einem Haus. (Logo: Google)

Picasa ist Googles Antwort auf die Frage, wie Bilder organisiert, geteilt und bearbeitet werden könnten. Das Logo zeigt den Blendenverschluss einer Kamera, in dem sich ein Haus befindet. „Casa“ ist das spanische Wort für Haus, während „Pic“ eine Kurzform für das englische Wort für Bild („picture“) ist.

Beats

Beats: Schon das Logo zeigt einen Menschen der einen Kopfhörer trägt. (Logo: Beats)
Beats: Schon das Logo zeigt einen Menschen der einen Kopfhörer trägt. (Logo: Beats)

Beats Electronics wurde im Mail 2014 von Apple übernommen. Das Unternehmen ist primär als Hersteller von Kopfhörern bekannt. Dieser Umstand spiegelt sich auch im Logo wieder. Der rote Kreis symbolisiert einen Kopf, während das B einen Kopfhörer darstellt.

Sun Microsystems

Egal wie man es dreht und wendet, Sun könnt ihr eigentlich immer aus dem Logo ablesen. (Logo: Sun / Oracle)
Egal wie man es dreht und wendet, Sun könnt ihr eigentlich immer aus dem Logo ablesen. (Logo: Sun / Oracle)

Das Sun-Logo wird seit der Übernahme des Unternehmens durch Oracle nicht mehr verwendet. Es handelte sich um ein Ambigramm, also einen symmetrischen Schriftzug, der aus verschiedenen Perspektiven immer wieder das Wort Sun ergibt.

Nintendo Gamecube

Gamecube: Ein cleveres Konsolen-Logo aus vergangenen Zeiten. (Logo: Nintendo)
Gamecube: Ein cleveres Konsolen-Logo aus vergangenen Zeiten. (Logo: Nintendo)

Das Würfeldesign der Spielkonsole spiegelt sich auch im Logo wieder. Die zwei ineinander verwobenen Würfel bilden außerdem die Buchstaben G und C für Gamecube.

via www.adweek.com

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Kim Rixecker
Design-Plattform Dribbble integriert Shopping-Funktion http://t3n.de/news/verkaufen-dribbble-574386/ 2014-10-27T09:11:29Z
Wie die Macher von Dribbble bekannt gegeben haben, können die Mitglieder der bekannten Design-Community ab sofort auch Produkte über ihr Dribbble-Profil verkaufen.

Wie die Macher von Dribbble bekannt gegeben haben, können die Mitglieder der bekannten Design-Community ab sofort auch Produkte über ihr Dribbble-Profil verkaufen.

Dribbble: „Show, tell and sell for designers“

Unter dem Motto „Show and tell for designers“ bietet die Online-Plattform Dribbble Webdesignern ein Zuhause für ihre Projekte und Kreationen. Ab sofort könnte sich die beliebte Community allerdings auch das Motto „Show, tell and sell“ auf die Fahnen schreiben. Denn wie die Macher hinter Dribbble angekündigt haben, wollen sie den Nutzern das Verkaufen ihrer Arbeiten durch ein neues Feature erleichtern.

Integration der Shop-Verlinkung im Nutzerprofil. (Screenshot: Dribbble)
Integration der Shop-Verlinkung im Nutzerprofil. (Screenshot: Dribbble)

Hierbei handelt es sich zwar nicht um eine eigene Shop-Struktur. Mitglieder können aber ab sofort Links auf ihren Profilseiten platzieren, die den Betrachter direkt zu dem Webshop bringen, in dem er die dargestellten Werke kaufen kann. Der Hinweis auf den jeweiligen Shop soll dezent in der Seitenleiste neben den dargestellten Produkten platziert sein. Auf dem Dribbble-Blog werden etwa Kunstdrucke, Icon-Sets, Kleidung oder Website-Templates als geeignete Anwendungsfälle genannt.

Zusätzlich können Dribbble-Mitglieder eine neue Übersichtsseite anlegen, auf der sie ihre die käuflich erwerbbaren Werke bündeln. Das neue Feature ist allerdings nur für Nutzer mit einer Pro-Mitgliedschaft verfügbar – wer von der Integration der Shopping-Links profitieren will, muss also 20 US-Dollar im Jahr für die Premium-Mitgliedschaft berappen.

Dribbble: Shopping-Funktion entspricht den bestehenden Nutzungsgewohnheiten

Wie Dribbble-Mitgründer Dan Cederholm in dem Blogbeitrag betont, handelt es sich hierbei nicht um einen Richtungswechsel bei Dribbble selbst, sondern vielmehr um eine Anpassung der Plattform an Nutzungsgewohnheiten, die sich ohnehin schon unter den Usern etabliert haben. Er selbst, so Cederholm, besitze zahlreiche Drucke, T-Shirts, Apps oder Photoshop-Tools, auf die er via Dribbble gestoßen sei, und habe auch schon diverse Kickstarter-Projekte von Community-Mitgliedern unterstützt. Der Schritt, den Nutzern die Monetarisierung ihrer Arbeit auch über Dribbble ein wenig einfacher zu machen, sei also nur logisch gewesen.

Dribbble hat sich zum Start des neuen Features mit einigen großen Plattformen zusammen getan, über die Webdesigner ihre Werke bereits häufig vertreiben, darunter etwa CreativeMarket oder fonts.com. Verlinkt ein Nutzer auf die entsprechende Plattform, wird der Link in seinem Profil inklusive Logo und Name der Plattform angezeigt. Wie Dribbble betont, können Designer aber auf jeder URL verweisen, unter der es ihre Werke zu kaufen gibt.

Die Partner-Plattformen der neuen Shopping-Funktionalität. (Screenshot: Dribbble)
Die Partner-Plattformen der neuen Shopping-Funktionalität. (Screenshot: Dribbble)

Für Webdesigner, die Dribbble aktiv nutzen, um ihr Portfolio bekannter zu machen und neue Aufträge zu generieren, dürfte die Ankündigung eine sehr willkommene Nachricht sein. Und auch für diejenigen, die Dribbble regelmäßig nach neuen Designs durchstöbern, ist die Plattform mit der Integration der Shopping-Links noch ein wenig nützlicher geworden.

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Lea Weitekamp
25 kostenlose Fonts für Grafikdesigner http://t3n.de/news/15-kostenlose-fonts-fuer-511856/ 2014-10-27T08:43:08Z
Wir 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.

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

25 kostenlose Fonts: Von Baron bis Facunda

Von den Anfängen der modernen Typografie durch Pioniere wie Nicholas Jenson (1420 – 1480) bis zum heutigen Tag hat sich viel getan. Von Print bis hin zu verschiedensten Web- und Multimedia-Projekten ist der Bedarf an Fonts höher als je zuvor. Um euch die Suche nach der passenden Schrift für euer nächstes Projekt ein wenig zu vereinfachen, haben wir euch 25 kostenlose Fonts herausgesucht.

Ein Klick auf die Bilder bringt euch zu den entsprechenden Download-Links.

Arca Majora

Der Font stammt von dem Designer Alfredo Marco Pradil aus Dubai. Achtung: Arca Majora bietet ausschließlich Großbuchstaben, aber dafür werden auch Umlaute unterstützt. (Grafik: Behance)
Der Font stammt von dem Designer Alfredo Marco Pradil aus Dubai. Achtung: Arca Majora bietet ausschließlich Großbuchstaben, aber dafür werden auch Umlaute unterstützt. (Grafik: Behance)

Intro Condensed Free

Intro Condensed Free ist ein schicker kostenloser Font, der sich vor allem für Headlines gut eignet. (Grafik Fontfabric)
Intro Condensed Free ist ein schicker kostenloser Font, der sich vor allem für Headlines gut eignet. (Grafik Fontfabric)

Paranoid

Die Macher von Paranoid sagen, dass es sich dabei um einen zu 100 Prozent kostenfreien Font handelt. Sie bitten allerdings um eine vorherige Kontaktaufnahme per E-Mail, wenn der Font in einem kommerziellen Projekt eingesetzt werden soll. (Grafik: Behance)
Die Macher von Paranoid sagen, dass es sich dabei um einen zu 100 Prozent kostenfreien Font handelt. Sie bitten allerdings um eine vorherige Kontaktaufnahme per E-Mail, wenn der Font in einem kommerziellen Projekt eingesetzt werden soll. (Grafik: Behance)

Uni Sans Free

Zur Uni-Sans-Familie gehören eigentlich Fonts in sieben Variationen, aber zwei davon könnt ihr auch umsonst herunterladen und nutzen. (Grafik: Fontfabric)
Zur Uni-Sans-Familie gehören eigentlich Fonts in sieben Variationen, aber zwei davon könnt ihr auch umsonst herunterladen und nutzen. (Grafik: Fontfabric)

Baron

Baron stammt von dem Holländer Frank Hemmekam und kann für private wie auch kommerzielle Projekte kostenfrei genutzt werden. Auf seiner Behance-Seite, bittet er lediglich, dass man ihm auch ein Beispiel von der Nutzung seines Fonts per Mail zuschickt. (Bild: Behance)
Baron stammt von dem Holländer Frank Hemmekam und kann für private wie auch kommerzielle Projekte kostenfrei genutzt werden. Auf seiner Behance-Seite, bittet er lediglich darum, dass man ihm auch ein Beispiel von der Nutzung seines Fonts per Mail zuschickt. (Bild: Behance)

Modeka

Wie alle anderen Fonts auf dieser Liste könnt ihr auch Modeka kostenfrei in euren Projekten nutzen. Der Autor bittet aber darum, dass ihr ihm einen Link zu dem mit seiner Schriftart erstellen Arbeit zukommen lasst. (Grafik: Behance)
Wie alle anderen Fonts auf dieser Liste könnt ihr auch Modeka kostenfrei in euren Projekten nutzen. Der Autor bittet aber darum, dass ihr ihm einen Link zu dem mit seiner Schriftart erstellen Arbeit zukommen lasst. (Grafik: Behance)

London

London stammt von dem Brasilianer Antonio Rodrigues Jr und kann wie alle anderen Fonts auf dieser Liste kostenfrei verwendet werden. (Bild: Behance)
London stammt von dem Brasilianer Antonio Rodrigues Jr und kann wie alle anderen Fonts auf dieser Liste kostenfrei verwendet werden. (Bild: Behance)

HIGH TIDE

Der portugiesische Designer Filipe Rolim hat den Font entwickelt, um ihn für eigene Projekte zu verwenden, stellt ihn aber allen interessierten zur freien Nutzung zur Verfügung. (Bild: Behance)
Kostenlose Fonts: Der portugiesische Designer Filipe Rolim hat den Font entwickelt, um ihn für eigene Projekte zu verwenden, stellt ihn aber allen Interessierten zur freien Nutzung zur Verfügung. (Bild: Behance)

Knewave

Knewave stammt von dem Designer Tyler Finck und findet sich auf GitHub. (Bild: Tyler Finck)
Knewave stammt von dem Designer Tyler Finck und findet sich auf GitHub. (Bild: Tyler Finck)

Sequi

Sequi ist ein persönliches Projekt des Portugiesen João Andrade bei dem er mit verschiedenen Formen und Versionen bestehender Schriftarten experimentiert hat. Den Download müsst ihr mit einem Beitrag auf Facebook oder Twitter bezahlen. (Bild: Behance)
Sequi ist ein persönliches Projekt des Portugiesen João Andrade bei dem er mit verschiedenen Formen und Versionen bestehender Schriftarten experimentiert hat. Den Download müsst ihr mit einem Beitrag auf Facebook oder Twitter bezahlen. (Bild: Behance)

Bob

Der verspielte Font stammt von einem Designer aus Rangun und steht unter einer Creative-Commons-Lizenz. (Bild: Behance)
Der verspielte Font stammt von einem Designer aus Rangun und steht unter einer Creative-Commons-Lizenz. (Bild: Behance)

Deco Neue

Deco Neue stammt von dem Brasilianer Jonatan Xavier. Den kostenlosen Font findet ihr auf Behance. (Bild: Behance)
Deco Neue stammt von dem Brasilianer Jonatan Xavier. Kostenlose Fonts findet ihr auf Behance. (Bild: Behance)

Typometry

Der Font wurde von dem Slowenen Emil Kozole erstellt. Neben der kostenfreien Version gibt es auch eine kostenpflichtige Pro-Version. (Bild: Behance)
Der Font wurde von dem Slowenen Emil Kozole erstellt. Neben der kostenfreien Version gibt es auch eine kostenpflichtige Pro-Version. (Bild: Behance)

Hello Denver

Die Schriftart wurde 2012 von dem Design-Studio Good Apples erstellt und kann jetzt kostenfrei in privaten wie auch kommerziellen Projekten eingesetzt werden. (Bild: Good Apples)
Die Schriftart wurde 2012 von dem Design-Studio Good Apples erstellt und kann jetzt kostenfrei in privaten wie auch kommerziellen Projekten eingesetzt werden. (Bild: Good Apples)

Knubi

Knubi besteht aus 380 Glyphen und unterstützt 80 Sprachen. Erstellt wurde Knubi von dem Designer Matt Vergotis. (Bild: verg.com.au)
Knubi besteht aus 380 Glyphen und unterstützt 80 Sprachen. Erstellt wurde Knubi von dem Designer Matt Vergotis. (Bild: verg.com.au)

Multicolore

Multicolore stammt von dem Bulgaren Ivan Filipov und steht als OTF-, EPS- und AI-Datei zur Verfügung. (Bild: Fontfabric)
Multicolore stammt von dem Bulgaren Ivan Filipov und steht als OTF-, EPS- und AI-Datei zur Verfügung. (Bild: Fontfabric)

Chomp

Chomp stammt von dem 22-jährigen englischen Designstudenten William Bayley Suckling. (Bild: Behance)
Chomp stammt von dem 22-jährigen englischen Designstudenten William Bayley Suckling. (Bild: Behance)

Tracks Type

Dem Indonesier Gumpita Rahayu haben wir Tracks Type zu verdanken. (Bild: Behance)
Dem Indonesier Gumpita Rahayu haben wir Tracks Type zu verdanken. (Bild: Behance)

47

47 wurde 2012 von dem Franzosen Hendrick Rolandez erstellt. (Bild: Behance)
47 wurde 2012 von dem Franzosen Hendrick Rolandez erstellt. (Bild: Behance)

Facunda

Facunda dürft ihr umsonst herunterladen und nutzen, der Ersteller würde sich aber über eine Spende freuen. (Bild: bybu.es)
Facunda dürft ihr umsonst herunterladen und nutzen, der Ersteller würde sich aber über eine Spende freuen. (Bild: bybu.es)

Drebeden

Laut seinem Designer Serge Shi ist Drebeden ein lustiger Font für lustige Menschen. Na dann! (Grafik: Behance)
Laut seinem Designer Serge Shi ist Drebeden ein lustiger Font für lustige Menschen. Na dann! (Grafik: Behance)

Zodiaclaw

Der kostenlose Font Zodiaclaw stammt von dem Designer Zaher Al Majed. Seine Inspiration sollen die Krallen eines Löwens gewesen sein. (Grafik: Zaher Al Majed)
Der kostenlose Font Zodiaclaw stammt von dem Designer Zaher Al Majed. Seine Inspiration sollen die Krallen eines Löwens gewesen sein. (Grafik: Zaher Al Majed)

LeParisien

Dieser Handschrift-Font des türkischen Design-Studenten Idil Keysan existiert in zwei Varianten und kann kostenfrei genutzt werden. (Grafik: Dribbble)
Dieser Handschrift-Font des türkischen Design-Studenten Idil Keysan existiert in zwei Varianten und kann kostenfrei genutzt werden. (Grafik: Dribbble)

Genji

Für diesen kostenlosen Font hat sich der japanische Schüler und selbsternannte Nerd Harry Wakamatsu von seiner eigenen Handschrift inspirieren lassen. (Grafik: Harry Wakamatsu)
Für diesen kostenlosen Font hat sich der japanische Schüler und selbsternannte Nerd Harry Wakamatsu von seiner eigenen Handschrift inspirieren lassen. (Grafik: Harry Wakamatsu)

Pixel Reto

Kantenglättung? Pah, nicht mit Pixel Reto. Der Font erinnert an eine Zeit, als man noch jeden Pixel auf dem Bildschirm per Hand ablesen konnte. (Grafik: MyFonts)
Kantenglättung? Pah, nicht mit Pixel Reto. Der Font erinnert an eine Zeit, als man noch jeden Pixel auf dem Bildschirm per Hand ablesen konnte. (Grafik: MyFonts)

Weitere kostenlose Fonts findet ihr hier.

Dieser Artikel aus dem Jahr 2013 wurde 2014 überarbeitet.

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Kim Rixecker
Joomla: 15 schicke Templates für deine Webseite http://t3n.de/news/joomla-10-schicke-templates-511239/ 2014-10-27T08:25:41Z
Mit Templates kannst du das Aussehen von Joomla steuern. Wir stellen dir 15 kostenlose und kostenpflichtige responsive Templates für den Einsatz mit Joomla zur Inspiration vor.

Mit Templates kannst du das Aussehen von Joomla steuern. Wir stellen dir 15 kostenlose und kostenpflichtige responsive Templates für den Einsatz mit Joomla zur Inspiration vor.

Kostenlose Joomla-Templates

Joomla ist eine der beliebtesten Content-Management-Lösungen und bietet neben den Standardmöglichkeiten eines Content-Management-Systems eine integrierte Suchmaschinenoptimierung, „Cashing“, Multilingualität und Anbindung an LDAP- oder OpenID-Server. Die Optik von Joomla lässt sich wie bei vielen Content-Management-Systemen durch sogenannte Themes steuern.

Heute stellen wir dir 15 ganz besonders schicke Themes vor, um deiner Joomla-Installation ein erstes Gesicht verpassen zu können.

Music

Music Joomla Template. Screenshot: Gavickpro
Music Joomla Template. (Screenshot: Gavickpro)

„Music“ ist ein kostenloses Joomla-Template von GavickPro. Das Template liefert einen schicken und responsiven Output im Pinterest-Style und zieht durch das minimalistische Design und die schicken Animationen die Aufmerksamkeit deiner Besucher auf sich.

Demo: Music-Joomla-Template

Download: Music-Joomla-Template

ST King

St King Joomla Template
St King Joomla Temaplate. (Screenshot: bautiful-templates.com)

„ST King“ ist ein responsives Portfolio-Template auf HTML5-Basis. Das Template ist sowohl für Joomla 2.5 als auch für Joomla 3.5 verfügbar und lässt sich für Business- als auch für sehr kreative Webprojekte einsetzen.

Demo: ST-King-Template

Download: ST-King-Template

Elastica

Joomla Elastica Template
Joomla Elastica Template. (Screenshot: Joomlart)

Manchmal kann ein Theme nur schick oder responsive sein. Elastica kann beides. Das responsive Theme bedient alle Bildschirmgrößen und unterstützt zudem extragroße Bildschirme. Elastica basiert auf dem JAT3-Framework und benutzt das jQuery-Masonry-Skript, um ein dynamisches Design zu realisieren.

Demo: Elastica-Template

Download: Elastica-Template

Puresite

Puresite Joomla Template
Puresite Joomla Template. (Screenshot: Joomlart)

„Puresite“ ist, wie der Name vermuten lässt, ein sehr minimalistisches Design. Nichtsdestotrotz bietet das Template einen sehr schicken Output für die in Joomla hinterlegten Inhalte. „Puresite“ ist responsive und passt sich jeder Bildschirmgröße automatisch an.

Demo: Puresite-Template

Download: Puresite-Template

Leo Restro

Leo Resto Joomla Template
Leo Resto Joomla Template. (Screenshot: Leotheme)

„Leo Restro“ kommt mit drei verschiedenen Farb-Paletten und bietet zahlreiche weitere Anpassungsmöglichkeiten. Das Theme basiert auf dem Leo-Framework und ist dank Responsive Webdesign für den Multi-Device-Einsatz geeignet.

Demo: Leo-Resto-Template

Download: Leo-Resto-Template

Stylish Photography

Stylish Photography Joomla Template
Stylish Photography Joomla Template. (Screenshot: t3n)

Stylish Photography ist ein kostenloses Joomla-Template von XSWebdesign und eignet sich sowohl für den persönlichen als auch den geschäftlichen Einsatz.

Demo: Stylish-Photography-Template

Download: Stylish-Photography-Template

LT Business

LT Business Joomla Template
LT Business Joomla Template. (Grafik: LT Theme)

LT Business ist ein dezentes und kostenloses Theme für professionell wirkende Geschäftsauftritte auf Joomla-Basis. Das Template ist 100 Prozent responsive und basiert auf einem Onepage-Webseiten-Ansatz. Zusammen mit dem Theme werden sechs verschiedene Farbvarianten ausgeliefert, die zusätzlich angepasst werden können, sodass eine individuelle Optik erreicht werden kann.

Demo: LT-Business-Theme

Download: LT-Business-Theme

LT Blue Service

LT Blue Service Joomla Template
LT Blue Service Joomla Template. (Grafik: LT Theme)

LT Blue Service ist ein kostenloses und responsives Joomla-Template, das speziell für Webseiten von Service-Anbietern geschaffen wurde. Das Template wird zusammen mit sechs verschiedenen Farbschemata ausgeliefert, kann aber zusätzlich an die eigenen Vorstellungen angepasst werden.

Demo: LT-Blue-Service-Theme

Download: LT-Blue-Service-Theme

Travel Kit

Travel Kit Joomla Template
Travel Kit Joomla Template. (Screenshot: t3n)

Travel-kit eignet sich für Joomla-Webseiten rund um das Thema Tourismus und Reisen. Es kann beispielsweise für Hotels, Events oder Reisebüros eingesetzt werden und liefert viele Komponenten, mit denen eine stylische Reise-Seite realisiert werden kann.

Demo: Travel-Kit-Theme

Download: Travel-Kit-Theme

Kostenpflichtige Joomla-Templates

Profile

Joomla Profile Template
Joomla Profile Template. (Screenshot: Joomlabamboo)

„Profile“ ist ein schickes One-Pager-Template für Joomla, das perfekt als Visitenkarte für Kreative genutzt werden kann. „Profile“ ist responsive und bietet neben allgemeinen Kontaktinformationen eine Anfahrtskarte, ein Portfolio und ein Kontaktformular. Profile ist zusammen mit anderen Joomla-Templates ab 45 US-Dollar erhältlich.

Demo: Profile-Template

Download_ Profile und andere Joomla-Templates

Nebula

Nebula Joomla Template
Nebula Joomla Template. (Screenshot: Joomlabamboo)

„Nebula“ arbeitet mit weichen pastellfarbenen Verläufen im Header-Bereich und geht zu einem aufgeräumten neutralen Interface im unteren Bereich der Webseite über. Das Template ist responsive und eignet sich sowohl für private als auch für gewerbliche Websites. Nebula ist zusammen mit anderen Joomla-Templates ab 45 US-Dollar erhältlich.

Demo: Nebula-Joomla-Template

Download: Nebula und andere Joomla-Templates

Onyx

Onyx Joomla Template
Onyx Joomla Template. (Screenshot: Joomlabamboo)

„Onyx“ ist ein modernes und stylisches One-Pager-Template für Joomla. Es ist responsive und für den Einsatz auf Tablets und anderen mobilen Geräten optimiert. „Onyx“ ist für den geschäftlichen Einsatz konzipiert und bietet neben zahlreichen Präsentationselementen eine Portfolio-Funktion. Onyx ist für 40 US-Dollar bei Themeforest erhältlich.

Demo: Onyx-Template

Download: Onyx-Template

(M)Social

(M)Social Joomla Template
(M)Social Joomla Template. (Screenshot: gavickpro)

„(M)Social“ wurde sowohl für den Privat- als auch für den kommerziellen Einsatz entwickelt. Das responsive Theme basiert auf der beliebten JomSocial-Komponente und ist optisch an das Kachel-Design-Konzept von Windows 8 angelehnt. „(M)Social“ ist zusammen mit anderen Themes ab 40 Euro erhältlich.

Demo: (M)Social-Template 

Download: (M)Social-Template

Appspro Tech

Appstech Pro Joomla Template
AppPro Tech Joomla Template. (Screenshot: gavickpro)

„Appspro Tech“ ist ein schickes und responsives Joomla-Template, das speziell für die Präsentation von Apps entwickelt wurde. Durch die starken Farben und die Symbolik wirkt „Appspro Tech“ sehr klar und aufgeräumt. „Appspro Tech“ ist zusammen mit anderen Templates ab 40 Euro erhältlich.

Demo: Appspro-Tech

Download: Appspro Tech und andere Joomla-Templates

Dreame

Dreame Joomla Template
Dreame Joomla Template. (Grafik: Themeforest/Templaza)

Wenn du eine Portfolio- oder News- oder Fotografie-Seite aufziehen willst, könnte Dreame das Theme für dich sein. Das Joomla-Template kombiniert Responsive Webdesign mit Mega-Menüs mit einer automatisch angeordneten Timeline-Ansicht sowie vielen weiteren Vorlagen, um bildlastige Inhalte in Szene zu setzen. Dreame ist für 48 US-Dollar bei Theme Forest erhältlich.

Demo: Dreame-Template

Download: Dreame-Template

Dieser Beitrag wurde zuletzt am 26. Oktober 2014 aktualisiert und erweitert.

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Ilja Zaglov
„CSS Counter Styles Level 3“ soll mehr Freiheiten beim Stylen von HTML-Listen ermöglichen http://t3n.de/news/eigene-listenpunkte-definieren-css-spezifikation-573889/ 2014-10-26T13:01:59Z
Die Möglichkeit, Listenpunkte von HTML-Listen individuell zu stylen, sind aktuell ziemlich begrenzt. Die CSS-Working-Group des W3C arbeitet unter dem Namen „CSS Counter Styles Level 3“ jedoch …

Die Möglichkeit, Listenpunkte von HTML-Listen individuell zu stylen, sind aktuell ziemlich begrenzt. Die CSS-Working-Group des W3C arbeitet unter dem Namen „CSS Counter Styles Level 3“ jedoch schon an einer Lösung für dieses Problem – und wir stellen sie euch kurz vor.

Listenpunkte von HTML-Listen stylen, wie ihr wollt

Wir haben momentan nur relativ begrenzte Möglichkeiten, Listenpunkte zu stylen. Wir haben ein paar Werte wie decimal, circle und als letzte Möglichkeit zur Einzigartigkeit die Eigenschaft list-style-image, der wir ein Bild als Aufzählungspunkt übergeben können. Alles nicht optimal, wenn wir bedenken, was für Möglichkeiten es inzwischen im typografischen Bereich gibt.

Zuerst sei gesagt, dass sich die Spezifikation zu den Listenpunkten von HTML-Listen, die wir euch hier vorstellen, noch im Status eines „Last Call Working Draft“ befindet. Das bedeutet, wie es das W3C in dem Dokument beschreibt:

„Dies ist ein Entwurf und dieser kann zu jeder Zeit aktualisiert, ersetzt oder durch ein anderes Dokument obsolet werden.“

Trotz dieser Unsicherheit werden wir euch die Spezifikation hier kurz vorstellen. Ziel ist es, dass die Nutzer die Listenpunkte ziemlich problemlos individuell gestalten können – und zwar auch alle unterschiedlich.

Vorhandene Regeln erweitern

Beginnen wir mit der Möglichkeit, vorhandene Regeln zu erweitern. Eine Liste mit folgenden Aufzählungszeichen wäre mit den aktuellen Methoden beispielsweise nicht oder jedenfalls nicht einfach umzusetzen:

1) Hier ein Listeneintrag
2) Noch einer
3) ein dritter

Mit der neuen Spezifikation könnten wir einfach den Wert decimal von der Eigenschaft list-style-type erweitern beziehungsweise das Suffix, nämlich den Punkt, gegen eine Klammer austauschen. Und das sähe dann so aus:

@counter-style decimal-paren {
system: extends decimal;
suffix: ") ";
}

Jetzt können wir durch die Angabe von list-style-type: decimal-paren einfach eine Aufzählung mit dem oben gezeigten Muster realisieren. Neu mit dieser Spezifikation eingeführt werden soll also die @counter-style-Regel.

HTML-Listen mit komplett individuellen Aufzählungszeichen

Wie das Erweitern von Bestehendem ist es auch möglich, komplett eigene Regeln für Aufzählungszeichen zu definieren. Beispielsweise könnte eine Liste mit Dreiecken als Aufzählungszeichen realisiert werden, die so aussieht:

‣  One
‣  Two
‣  Three

Möglich macht das dieser CSS-Code:

@counter-style triangle {
system: cyclic;
symbols: ‣;
suffix: " ";
}

Wir beginnen auch hier wieder mit dem neuen @counter-style und vergeben zuerst einen Bezeichner triangle. Anschließend geben wir der Eigenschaft system den Wert cyclic. Das bedeutet, dass der Stil einfach immer wiederholt wird. Andere Werte sind hier natürlich auch möglich – eine detaillierte Beschreibung findet ihr in dem W3C-Dokument. Als Suffix geben wir einfach ein Leerzeichen an. Jetzt kann eine Liste mit dreieckigen Aufzählungszeichen erstellt werden.

Wie schon angesprochen könnt ihr auch den einzelnen Aufzählungspunkten verschiedene Aufzählungszeichen geben, etwa so:

@counter-style footnote {
system: symbolic;
symbols: '*' ⁑ † ‡;
suffix: " ";
}

Statt cyclic übergeben wir an system den Wert symbolic und als Symbole '*' ⁑ † ‡ (bei dem Wert symbolic muss der Wert der Eigenschaft symbols mindestens ein sogenanntes „counter symbol“, einen String, enthalten. Deshalb steht das einzelne Sternchen in Hochkommata). Die Ausgabe dieses Codes sieht so aus:

*   One
⁑   Two
†   Three
‡   Four
**  Five
⁑⁑  Six
††  Seven

Die Zeichen werden also, wenn ein Durchlauf geschafft ist, immer um eins erhöht. Beim dritten Durchlauf würden drei Sternchen erscheinen und so weiter. Neben den hier vorgestellten Möglichkeiten gibt es noch einige weitere, die ihr in der Spezifikation einsehen könnt.

CSS-Counter-Styles Level 3: Tolle Möglichkeit, um Listen besser und einfacher dem Design anzupassen

Wenn die Spezifikation den nächsten Schritt schafft und zu einer „Candidate Recommendation“ wird, dann können wir uns auf größere Freiheiten beim Stylen von Listenpunkten freuen. Das Dokument ist, wie schon geschrieben, aktuell ein „Last Call Working Draft“ – die Deadline für Kommentare zur Spezifikation war der 23. September 2014.

Was sagt ihr zu den Möglichkeiten, die dieser Working Draft ermöglichen könnte?

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Florian Brinkmann
Themify Builder: WordPress-Themes per Drag & Drop erstellen http://t3n.de/news/themify-builder-wordpress-themes-574190/ 2014-10-26T07:03:25Z
Der Themify Builder ist ein Framework, das die Erstellung von WordPress-Themes ganz ohne Code-Kenntnisse möglich macht. Die Bearbeitung neuer Designs erfolgt im Frontend per Drag & Drop.

Der Themify Builder ist ein Framework, das die Erstellung von WordPress-Themes ganz ohne Code-Kenntnisse möglich macht. Die Bearbeitung neuer Designs erfolgt im Frontend per Drag & Drop. Eine Live-Vorschau macht Änderungen direkt sichtbar. Wir haben uns das Tool angeschaut.

WordPress-Themes mit flexiblen Content-Module gestalten

Das Werkzeug schafft durch die Verbindung der Drag-&-Drop-Funktionalität und der direkten Implementierung von Änderungen im Frontend ein effektiv zu bedienendes Framework nach dem WYSIWYG-Prinzip („What you see is what you get“). Dabei entstehen Designs, die nicht nur auf dem Desktop funktionieren, sondern sich auch auf Tablets und Smartphones anpassen. Themify bietet diverse Anpassungsmöglichkeiten, mit denen sich die eigenen Vorstellungen eines WordPress-Themes auch ohne Code relativ präzise umsetzen lassen. Es besteht einerseits die Möglichkeit, aus einer großen Auswahl stimmiger, vorgefertigter Layouts auszuwählen, die dann weiter bearbeitet werden können. Etwas kreativer und interessanter ist es sicher, ein Design von Beginn an komplett neu aufzubauen, was sich im Themify Builder durch Module realisieren lässt.

Es gibt sowohl statische Module wie Texte, Bilder oder Videos, als auch solche mit dynamischem Inhalt wie Posts. Auch Shortcodes von Themify selbst wie von Drittanbietern kann das Tool verarbeiten. Alle Module werden als Widgets angeboten, die einfach mit der Maus in das Layout hineingezogen werden – sie bilden das Grundgerüst des Designs. Dabei verhalten sich einmal integrierte Widgets keineswegs starr. Die einzelnen Bausteine können variabel auf dem Layout verschoben werden, hinter dem ein imaginäres Gitternetz liegt. Grundsätzlich wird jedes neu in das Layout zu integrierende Modul zunächst in eine neue Zeile gezogen. Themify bietet hier die Möglichkeit, die Zeile an sich zu bearbeiten, also beispielsweise Höhe und Breite, das Scrollverhalten, Hintergrundfarben oder -bilder sowie Animationen festzulegen.

Themify Builder WordPress-Theme Framework
WordPress-Themes im Frontend bauen: Der Themify Builder macht schnelles Prototyping wie sorgfältiges Aufbauen eines WordPress Blogs per Drag & Drop möglich. (Bild: themify.me/docs/builder).

Parallel dazu können auch schon platzierte Module bearbeitet werden. Ein Doppelklick auf das Modul öffnet eine Lightbox, mit der Eigenschaften des spezifischen Moduls festgelegt werden können. Je nach Art des Moduls führt dieser Dialog zur Auswahl eines Bildes, einer Schriftart und -größe und zu anderen Styling-Optionen. Auch die Breite eines Moduls – beispielsweise halbseitig, viertelseitig oder volle Seitenbreite – kann hier eingestellt werden. So können verschiedenste Module übersichtlich unter- und nebeneinander angeordnet werden. Einmal integrierte Module lassen sich natürlich im Layout an einen anderen Platz verschieben. So können die gewünschten Inhalte in beliebiger Anordnung arrangiert werden.

Einen guten Einblick in die Funktionsweise und die Möglichkeiten des Themify Builder liefert folgendes Einführungsvideo des Herstellers:

Optionen und Preisgestaltung: Layouts inklusive Builder oder Standalone WordPress-Plugin

Themifys Builder ist standardmäßig in allen Themes enthalten, die von Themify angeboten werden. Darüber hinaus funktioniert Themify aber auch als unabhängiges Plugin mit jeglichen WordPress-Themes anderer Herkunft.

Beim Erwerb von Themify Layouts – hier ist der Builder integriert – nimmt das Unternehmen eine Preisstaffelung vor. Einzelne Themes kosten inklusive Support und Updates 49 US-Dollar, der Zugriff auf alle verfügbaren Themes bei gleichem Service ist preislich bei 79 US-Dollar angesetzt. Der Themify Builder als WordPress-Plugin rangiert bei 39 US-Dollar.

Übrigens: Wenn Ihr euer WordPress-Theme lieber komplett selbst entwickeln wollt, schaut euch doch unsere großen „t3n-Guide zum eigenen WordPress-Theme“ an.

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