Design | t3n News News, Infos, Tipps und aktuelle Artikel zu Design 2014-10-25T05:57:29Z t3n Redaktion http://t3n.de/tag/design Parallax-Scrolling: 20 beeindruckende WordPress-Themes mit Tiefgang http://t3n.de/news/wordpress-paralax-498573/ 2014-10-25T05:57:29Z
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 …

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.

Parallax-Scrolling ist eine Technik für Webseiten, bei der sich durch verschiedene übereinander gelegte und beim Scrollen unterschiedlich schnell bewegte Ebenen tolle Effekte und eine zusätzliche Tiefe für die Webseite erzielen lassen. Wir haben euch zwölf schicke WordPress-Themes mit dem Parallax-Effekt zusammen gestellt.

Live

Paralaxx Theme: Live
Parallax-Theme: Live. (Screenshot: t3n)

Live ist ein kreatives und interaktives Parallax-Theme mit unbegrenzten Vordergrund- und Hintergrund-Schichten. Das Theme wurde mit dem Bootstrap-Framework in Version 2.3 erstellt und ist komplett responsive. Die Parallax-Schichten können sowohl in der Vertikalen als auch in der Horizontalen unbegrenzt sein, was dir sehr variable und schöne Scroll-Effekte ermöglicht.

Live-Theme-Demo | Live-Theme-Download 

Ego

Parallax Theme: Ego
Parallax-Theme: Ego. (Screenshot: t3n)

Ego ist ein Onepage-Design für freiberufliche Grafiker oder kleinere Agenturen, die ihre Referenzen oder ihr Portfolio präsentieren wollen. Das responsive WordPress-Theme verfügt über einen Fullscreen-Slider, ein AJAX-Portfolio und sehr viele verschiedene Funktionen, die es dir ermöglichen, das Theme ganz nach deinen Wünschen zu gestalten.

Ego-Theme-Demo | Ego-Theme-Download

Amaze

Parallax Theme: Amaze
Parallax-Theme: Amaze. (Screenshot: t3n)

Das responsive WordPress-Theme Amaze wurde mit dem Bootstrap-Framework in Version 2.3 erstellt und basiert auf der Skrollr-Parallax-JavaScript-Libary. Um das Theme deinen eigenen Wünschen anpassen zu können, benötigst du keinerlei Kenntnisse in JavaScript. Durch eine unbegrenzte Anzahl an Parallax-Schichten lassen sich ansprechende und kreative Layouts umsetzen.

Amaze-Theme-Demo | Amaze-Theme-Download

Status

Parallax Theme: Status
Parallax-Theme: Status. (Screenshot: t3n)

Das Status-Theme bringt neben der Parallax-Scroll-Funktion, die man auch deaktivieren kann, weitere Features mit sich mit. Das Theme besitzt einen eigenen Shortcode-Generator, mit dem du mit wenigen Klicks eigene Shortcodes genieren kannst. Dank Google-Webfonts, verschiedenen Seiten- und Artikeltemplates erstellst du mit diesem Theme spielend leicht individuelle Webseiten.

Status-Theme-Demo | Status-Theme-Download

Montreal

Parallax Theme: Montreal
Parallax-Theme: Montreal. (Screenshot: t3n)

Das Paralax-Theme Montreal besitzt für jeden Abschnitt der Webseite einen einzigartigen wechselnden Hintergrund. Zur Ausstattung des WordPress-Themes gehören eine Fullscreen-Diashow, sechs verschiedene Darstellungen für das Portfolio und ein eigenständiges Blog-Design. Dank der responsiven Gestaltung des WordPress-Themes funktioniert es auch auf mobilen Geräten.

Montreal-Theme-Demo | Montreal-Theme-Download

Impress

Parallax Theme: Impress
Parallax-Theme: Impress. (Screenshot: t3n)

Das responsive WordPress-Theme Impress bietet neben den Parallax-Effekten viele weitere Vorteile. Neben vielen Shortcodes ist das Theme in nur wenigen Klicks anpassbar und greift auch auf die Google-Webfonts zu, wodurch du auch typografisch viele Möglichkeiten hast, deine Webseite zu gestalten. Das Theme ist Translation-ready und kann bei Bedarf in verschiedene Bereiche unterteilen, wodurch gezielte Analysen mit Tools wie Google-Analytics möglich werden.

Impress-Theme-Demo | Impress-Theme-Download

Eleven

Parallax Theme: Eleven
Parallax-Theme: Eleven. (Screenshot: t3n)

Eleven ist ein Onepager-WordPress-Template mit Parallax-Effekt. Der Parallax-Effekt kann hierbei gut genutzt werden, um die Webseite optisch in verschiedene Kategorien einzuteilen. Neben einem Fullscreen-Slider und einem Kachel-Portfolio ist das Template individuell anpassbar und bietet für dein einfachen Einstieg sogar Video-Support in Form von nützlichen Video-Tutorials.

Eleven-Theme-Demo | Eleven-Theme-Download 

Parallaxr

Parallax Theme: Paralaxxr
Parallax-Theme: Paralaxxr. (Screenhot: t3n)

Parallaxr führt dich in der Theme-Demo durch ein Aquarium. Da ein Aquarium nicht besonders tief ist, fällt hier sofort auf, dass du nicht wie gewohnt vertikal scrollst, sondern horizontal von links nach rechts. Das horizontale Scrollen wird durch den Parallax-Effekt unterstützt, wodurch sich tolle Animationen ergeben können. Natürlich kann man das responsive WordPress-Theme individuell anpassen und muss seine eigene Seite nicht im Stil eines Aquariums halten.

Paralaxxr-Theme-Demo | Paralaxxr-Theme-Download

The Road

Parallax Theme: The Road
Parallax-Theme: The Road. (Screenhot: t3n)

Das WordPress-Theme The Road lässt sich mit Hilfe diverser Einstellungsmöglichkeiten sehr leicht anpassen. Dank Responsive Design ist das Theme auch auf mobilen Geräten schön anzuschauen und bietet einen Parallax-Effekt, der die Seite in verschiedene Sinnabschnitte unterteilen kann.

The-Road-Theme-Demo | The-Road-Theme-Download 

Pulsar

Parallax Theme: Pulsar
Parallax-Theme: Pulsar. (Screenshot: t3n)

Pulsar ist ein responsives WordPress-Theme mit Parallax-Effekt. Das Onepager-Theme bietet die Möglichkeit, ohne JavaScript-Kenntnisse oder anderen Änderungen am Quellcode aus fünf verschiedenen Parallax-Effekten zu wählen.

Pulsar-Theme-Demo | Pulsar-Theme-Download

Dreamer

Parallax Theme: Dreamer
Parallax-Theme: Dreamer. (Screenshot: t3n)

Das WordPress-Theme Dreamer mit Parallax-Effekt macht auch bei großen Bildschirmen mit hoher Auflösung dank bildschirmfüllenden Bildern im Hintergrund einen sehr guten Eindruck. Statt Hintergrundbildern können auch Videos eingebunden werden. Zahlreiche andere Features wie zum Beispiel ein filterbares Portfolio, mehr als 1.000 Web-Icons und verschiedene Sektionen zur Unterteilung der Webseite runden das Parallax-Theme ab.

Dreamer-Theme-Demo | Dreamer-Theme-Download

Encore

Parallax Theme: Encore
Parallax-Theme: Encore. (Screenshot: t3n)

Encore bietet dir mehr als 200 Einstellungen. Das WordPress-Theme hat neben dem Parallax-Effekt eine eigene Newsletter-Funktion sowie Lightboxen und gibt dir sämtliche Kontrolle über das Design des Themes. Dank dem responsiven Layout funktioniert das Theme nicht nur auf dem Desktop-PC, sondern auch auf dem Tablet und Smartphone.

Encore-Theme-Demo | Encore-Theme-Download

Parallax by Themify

Parallax WordPress Theme
Parallax-WordPress-Theme. (Screenshot: t3n)

Das Parallax-WordPress-Theme kombiniert Parallax-Scrolling und Onepage-Design in einem Theme. Es ist besonders für Fotografen und Designer interessant und voll responsive.

Parallax-by-Themify-Demo | Parallax-by-Themify-Download

Port

Port, Parallax WordPress Theme
Port, ein Parallax-WordPress-Theme. (Screenshot: t3n)

Port setzt auf der Startseite einen dezenten Parallax-Effekt um, während auf den Unterseiten vollkommen auf Effekte verzichtet wird. Das Theme ist insgesamt sehr clean, gut lesbar und responsive.

Port-Demo | Port-Download

Zoo

Zoo: Parallax WordPress Theme.
Zoo: Parallax-WordPress-Theme. (Screenshot: t3n)

Zoo verfolgt einen One-Page-Designansatz und unterteilt die Webseite in verschiedene Sektionen, die mit auf separaten Ebenen scrollenden Bildern voneinander abgetrennt werden. Auch dieses Theme ist voll responsive und für den Einsatz auf mobilen Geräten geeignet.

Zoo-Demo | Zoo-Download 

Eight Degree

Eight Degree Parallax WordPress Theme
Eight Degree. (Screenshot: t3n)

Eight Degree ist ein responsives WordPress-Theme, das in vier verschiedenen Ausführungen erhältlich ist. Eine davon bietet einen angenehmen Parallax-Scrolling-Effekt. Hierbei verfolgt das Theme einen Onepage-Designansatz.

Eight-Degree-Demo | Eight-Degree-Download

 Baylie

Baylie: Parallax WordPress Theme
Das Parallax-WordPress-Theme Baylie. (Screenshot: t3n)

Baylie ist ein responsives WordPress-Theme mit Parallax-Scrolling-Effekt. Der Effekt wird bei dem Theme besonders auf der bildschirmfüllenden Startseite sichtbar. Zur Trennung verschiedener Content-Bereiche werden außerdem weitere Trennbilder mit Parallax-Scrolling-Effekt eingesetzt. Zusätzlich bietet das Theme eine spezielle Portfolio- und Blog-Sektion.

Baylie-Demo Baylie-Download

Story

Story: Parallax WordPress Theme.
Story. (Screenshot: t3n)

Story ist ein sehr schickes WordPress-Theme, das in zwei Varianten zur Verfügung steht. Im ersten Stil setzt das Theme auf vollflächige Bilder, die jeweils die komplette Bildschirmfläche einnehmen. Eine alternative Version, die die volle Bildschirmbreite einnimmt, arbeitet mit einem Parallax-Scrolling-Effekt, der bei Trennbildern eingesetzt wird.

Story-Theme-Demo | Story-Theme-Download

Szia

Sznia: Parallax WordPress Theme
Sznia. (Screenshot: t3n)

Szia nutzt einen Parallax-Scrolling-Effekt, um die Inhalte der Webseite über wechselnde Hintergrundbilder hinweg scrollen zu lassen. Der Onepager ist – das richtige Bildmaterial vorausgesetzt – optisch sehr ansprechend und bietet neben der Startseite mit den Hauptinhalten einen Blog-Bereich in dem ebenfalls ein Parallax-Effekt zum Tragen kommt.

Szia-Theme-Demo | Szia-Theme-Download

Brooklyn

Brooklyn: Parallax WordPress Theme.
Brooklyn: Parallax WordPress Theme. (Screenshot:t3n)

Brooklyn präsentiert sich in zurückhaltendem und dunklem Design. Das Theme setzt auf vollflächige Bilder und lässt den Content mit Parallax-Scrolling-Techniken über wechselnde Motive hinwegscrollen. Brooklyn verfolgt den Onepage-Designansatz und liefert lediglich für den Blog einzelne Unterseiten. Es ist jedoch möglich, weitere statische Unterseiten abseits der Startseite anzulegen.

Brooklyn-Demo | Brooklyn-Download

Und welche Parallax-Themes haben euch in letzter Zeit begeistert? Schreibt uns in den Kommentaren! Alternativ findet ihr auf t3n.de auch eine Übersicht kostenlose WordPress-Themes mit Responsive Webdesign.

Letztes Update des Artikels: 25. Oktober 2014.

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Ilja Zaglov
Google-News-Redesign: Designstudie gibt dem Dienst einen modernen Anstrich http://t3n.de/news/google-news-redesign-574083/ 2014-10-24T05:15:29Z
Der russische Grafiker George Kvasnikov hat sich über ein mögliches Google-News-Redesign seine eigenen Gedanken gemacht. Hier seht ihr, was dabei rausgekommen ist.

Der russische Grafiker George Kvasnikov hat sich über ein mögliches Google-News-Redesign seine eigenen Gedanken gemacht. Hier seht ihr, was dabei rausgekommen ist.

Google News ist ein sehr beliebter Dienst, der tagtäglich von vielen Besuchern genutzt wird – dabei sind die Funktionen veraltet, der Algorithmus dahinter bisweilen fehlerhaft und auch die Benutzeroberfläche kann keinesfalls als schick betitel werden. Der russische Grafiker George Kvasnikov hat sich in diesem Sinne folgende Frage gestellt: Wenn Google News wenig intuitiv und zudem auch noch hässlich ist, was sollte die vielen Nutzer dann an den Dienst binden, sobald es jemand in naher oder ferner Zukunft besser macht?

Google-News-Redesign: Konzept antwortet auf die „Was wäre wenn?“-Frage

Die Frage ist natürlich rein hypothetisch gestellt, denn wie oben beschrieben: Aktuell gibt es für Google keinen Grund etwas am Dienst zu verändern – die Nutzer sind eben da, die Konkurrenz nicht. Aber Kvasnikov wollte dennoch ein wenig träumen und hat ein Konzept erstellt, dass Google News einen modernen Anstrich und eine intuitivere Benutzeroberfläche verschafft.

In seiner kreativen Antwort auf eine mögliche Umgestaltung hat er sich auch an der neuen Designsprache des IT-Konzerns orientiert und das sogenannte „Material Design“ verarbeitet. Der Beobachter bekommt flüssige Animationen und eine natürliche Beziehung zwischen modernen und natürlichen Elementen zu sehen. Das Konzept ist einfach und bunt. Dem Designer war es wichtig, dass die Typografie und Bildsprache sich gut zusammensetzen und garantieren, dass auch noch nach der Umgestaltung der Inhalt im Vordergrund steht. Funktional können Nutzer zudem eigene News kuratieren.

Google-News-Redesign: So stellt George Kvasnikov sich die Homepage vor. (Bild: googlenews.gkvasnikov.com)
Google-News-Redesign: So stellt George Kvasnikov sich die Homepage vor. (Bild: googlenews.gkvasnikov.com)

Wir haben ein Video von Kvasnikovs Konzept eingebettet. Wer darüber hinaus mehr über die einzelnen Bereiche und Funktionen wissen möchte, findet auf seiner Projektseite ausführlichere Erklärungen. Über Geschmack lässt zwar nicht streiten. Aber dennoch möchten wir wissen: Würdet ihr Google News verwenden, wenn es so aussähe? In der unteren Umfrage könnt ihr abstimmen und in den Kommentaren eure Meinung abgeben. Wir sind gespannt, ob der russische Grafiker euch überzeugt hat.

via www.behance.net

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Andreas Weck
Bootstrap für Designer: Bootsnipp liefert Design-Bausteine http://t3n.de/news/bootstrap-bootsnipp-573810/ 2014-10-23T08:56:23Z
„Lass uns noch schnell ein Drei-Level-Dropdown einbauen!“ Sätze wie diesen haben viele von uns schon mal gehört – gerade beim Prototyping. Bootsnipp könnte dieses Problem lösen, denn dort …

„Lass uns noch schnell ein Drei-Level-Dropdown einbauen!“ Sätze wie diesen haben viele von uns schon mal gehört – gerade beim Prototyping. Bootsnipp könnte dieses Problem lösen, denn dort findet ihr schnell einzelne Design-Bausteine für eure Bootstrap-Projekte oder eure Prototypen.

Bootsnipp könnt ihr euch als Baukasten für Bootstrap vorstellen, der euch eine Auswahl an unzähligen einzelnen „Modulen“ anbietet, die alle auf Bootstrap basieren. Das bedeutet, dass ihr diese einzelnen „Module“ relativ einfach in eure Website einbauen könnt – ohne zu viel schlechten Code zu übernehmen.

Die einzelnen Snippets haben teilweise sogar unterschiedliche Themes, aus denen ihr auswählen könnt. Somit ist es möglich, selbst mit rudimentären HTML-Kenntnissen eine Website mit Bootstrap zu gestalten.

bootstrap-bootsnip
Bootsnipp lässt euch schnell ein Bootstrap-Projekt bauen. (Screenshot: t3n)

Bootsnipp ist nicht unbedingt „overstyled“

Für Entwickler ist es störend, wenn Code-Strukturen schon über ein CSS-Styling verfügen, denn das macht es schwer, den spezifizierten Code-Block wieder generisch zu machen, damit er wiederverwendet werden kann. Das Problem fällt hier weg, denn durch die gemeinsame Bootstrap-Codebasis kann der CSS-Code des Themes vollständig gelöscht werden, ohne die Funktionalität zu verlieren, denn sie wird vom Bootstrap-Framework sichergestellt.

Bootsnipp präsentiert sich dabei sehr übersichtlich und stellt die einzelnen Snippets in einer Galerie dar. Die einzelnen „Module“ können dann live getestet werden, was sehr praktisch ist. Genauso ist es möglich, sich den Code im vorhinein anzusehen, ohne das „Modul“ zuerst runterladen und dann einbauen zu müssen.

Fazit: Bootsnipp für Bootstrap

Bootsnipp ist sinnvoll, vor allem beim Prototyping, weil ihr schnell fertige Code-Module runterladen und testen könnt – vor allem, wenn ihr keine Entwickler seid. Wer sich mit Bootstrap und Entwicklung auskennt, ist mit Emmet trotzdem noch schneller, hat dabei aber natürlich kein fertiges CSS-Styling. Allerdings ist nicht davon auszugehen, dass sich die rudimentären Bootsnipp-Themes in ein bestehendes Layout beziehungsweise Design ad hoc einbauen lassen.

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Mario Janschitz
Aerial Bold: Designer wollen Schriftart aus Satellitenbildern basteln http://t3n.de/news/aerial-bold-designer-wollen-573759/ 2014-10-22T14:28:23Z
Zwei Designer wollen eine Schriftart aus Satellitenbildern erschaffen. Das Kickstarter-Projekt will anschließend den fertigen Font im OpenType-Format veröffentlichen – mit den zugrundeliegenden …

Zwei Designer wollen eine Schriftart aus Satellitenbildern erschaffen. Das Kickstarter-Projekt will anschließend den fertigen Font im OpenType-Format veröffentlichen – mit den zugrundeliegenden Datensätzen und dem genutzten Algorithmus.

Aerial Bold: Ein Kickstarter-Projekt will eine Schriftart aus Satellitenbildern erstellen. (Grafik: Benedikt Groß & Joey Lee / Kickstarter)
Aerial Bold: Ein Kickstarter-Projekt will eine Schriftart aus Satellitenbildern erstellen. (Grafik: Benedikt Groß & Joey Lee / Kickstarter)

Aerial Bold: Projekt will Buchstaben aus der Vogelperspektive entdecken

Schriftarten werden üblicherweise in mühevoller Arbeit von Designern geplant und gestaltet. Der Deutsche Benedikt Groß und sein amerikanischer Kollege Joey Lee wollen für Aerial Bold allerdings einen ganz anderen Weg beschreiten: Die beiden Designer wollen die Buchstaben nicht gestalten, sondern finden – und zwar auf Satellitenbildern.

Egal ob Häuser, Straßen, Wälder, Seen oder Flüsse: Aus der Vogelperspektive betrachtet finden sich überall auf der Welt Buchstaben. Die wollen Groß und Lee mit einem entsprechenden Algorithmus in Bildern aufspüren und in einer Datenbank öffentlich zugänglich machen. Außerdem wollen sie daraus einen Font im OpenType- beziehungsweise TrueType-Format generieren.

Aerial Bold: Die verborgene Typografie der Welt

Die wirkliche Arbeit bei dem Projekt steckt letztlich nicht in der Erstellung einer Schriftart, sondern in dem Algorithmus, der aus Satellitenbildern die gesuchten Muster erkennen kann. Um ihr Projekt zu realisieren, haben sie sich an Kickstarter gewandt. Über die Crowd-Funding-Seite wollen sie mindestens 10.000 US-Dollar einnehmen um die Schriftart, die Karten und die Meta-Daten ihres Alphabets im Web öffentlich zugänglich zu machen. Die Kickstarter-Kampagne für Aerial Bold hat schon mehr als 8.000 US-Dollar eingenommen und soll noch bis zum 13. November 2014 laufen.

Die Macher haben auf manuellem Weg bereits ein vollständiges Alphabet aus Satellitenbildern erstellt. Ob sie es schaffen eine umfangreiche Datenbank der verborgenen Typografie der Welt zu erstellen, hängt jetzt von der Unterstützung der Kickstarter-Gemeinde ab. Als Belohnung für die finanzielle Hilfe könnt ihr je nach Höhe des Betrags übrigens frühzeitig einen Blick auf die Datenbank werfen oder sogar Zugriff auf die Software-Tools und Algorithmen der Macher bekommen.

Wer sich für ungewöhnliche Projekte aus der Welt der Typografie interessiert, der sollte einen Blick auf unseren Artikel „Homeless Fonts: Dieses Projekt bringt Schriftarten von Obdachlosen ins Netz“ werfen.

via www.fastcodesign.com

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Kim Rixecker
Apple Yosemite als Perle des UI-Designs? Nie und nimmer! [Kommentar] http://t3n.de/news/schoenes-dock-macht-noch-keine-573658/ 2014-10-22T14:06:34Z
Es ist da: Apple OS X Yosemite, das neue Update von Apples Betriebssystem. Doch ist das neue UI-Design nur Schnickschnack? Ich sage ja, und hier lest ihr, warum.

Es ist da: , das neue Update von Apples Betriebssystem. Doch ist das neue UI-Design nur Schnickschnack? Ich sage ja, und hier lest ihr, warum.

Apple_Mac_OS_X_10_10_Yosemite_07
Ich finde Yosemite jetzt nicht so toll, Craig. (Screenshot: Apple)

Seit dem 16. Oktober 2014 könnt ihr Mac OS X Yosemite nutzen. Ich konnte durch einen Entwickleraccount schon früher auf neue Version von Apples OS zugreifen und es dementsprechend testen. Kurz gesagt: Ich finde Yosemite insgesamt gut, allerdings sind mir beim Testen der Golden-Master bereits Inkonsistenzen im UI-Design aufgefallen. Dementsprechend war ich überrascht, dass die selben Bugs auch in der Version vorhanden waren, die über die Golden-Master hinausging: nämlich dem „Final Release“.

Auch die Kommentare im Appstore sprechen für sich und bestätigen meine Erfahrungen: Die Animationen ruckeln insgesamt und das System fühlt sich etwas langsam an. Soviel zum Ersteindruck.

„Es fühlt sich so an als müsste ich ein Update installieren – da ist aber keines!“

Es gibt kleine, aber feine Verbesserungen, wie die insgesamt schärfere Menüleiste, oder das einheitliche Dock und die etwas großzügigere Sidebar im Finder. Ich finde auch den neuen Login-Screen gelungen, aber die von Craig Federighi angepriesene Verbesserung des User-Interface scheint noch nicht abgeschlossen. Ja, beim flüchtigen Hinsehen wirkt Yosemite aufgeräumt, aber der Darkmode, Safari und das neue Icon-Design haben noch ihre Schwächen. Genauso wie der Schriftwechsel von Lucida Grande auf Helvetica Neue: Gerade auf Non-Retina-Displays ist die Schrift schwammig. Missstände, die ich von Apple nicht gewöhnt bin. Es fühlt sich so an als müsste ich ein Update installieren – da ist aber keines! Verdammt.

Darkmode – wohl eher eine Disco

Da mich das helle und semitransparente Dock nicht überzeugt hat, habe ich auf den Darkmode gewechselt. Zuerst ist es nicht ganz schlüssig, warum Apple diesen Modus überhaupt einführt, sind die UI-Elemente bei iOS doch hell beziehungsweise weiß.

Das dunkle Dock von Yosemite sagt mir mehr zu, allerdings ist das Geschmacksache. Anders ist das bei den andauernd flimmernden Icons in der Menüleiste, die sind ein echtes UI-Problem. Natürlich, nicht jede Applikation hat jetzt schon ein alternatives Icon für die Menüleiste bereitgestellt, allerdings sieht es so aus als würden bei einem Bildschirmwechsel alle Icons komplett neu geladen werden. Was mich jedesmal aus der Konzentration reißt, weil in der rechten oberen Ecke eine Icon-Disko veranstaltet wird.

dcc38
Dieses Verhalten stört. (Animation: t3n)

Auch die Inkonsistenz im „Darkmode“ stößt mir sauer auf. Neben dem Problem mit den Icons in der Menüleiste werden zwar die Programmnamen im Dock dunkel dargestellt, ebenso die Dropdown-Menüs in der Menüleiste, allerdings bleibt das Kontext-Menü oder das Dropdown-Menü der Adresszeile von Safari leider weiß und stört somit das Anwendererlebnis. Für mich wirkt der „Darkmode“ wie ein schlechtes OS-Skin für Windows.

Ein weiteres Manko: Der Farbkontrast weiß auf dunkelgrau ist zu hart. Gerade wenn ich die dunkle Oberfläche von Yosemite mit Adobes Oberflächen in Photoshop vergleiche, finde ich die Farbgestaltung und den Kontrast bei Adobe angenehmer.

Yosemite: Die neuen Icons überzeugen

Das führt mich zu etwas Positiven: Den Programm-Icons. Gott sei Dank sind wir von einem Icon-Desaster verschont geblieben, das es zuletzt mit iOS7 gab. Yosemite kommt mit gänzlich neu gestalteten Icons daher und liefert eine optimierte Icon-Hierachie.

Durch die neu gestalteten Icons präsentiert sich das Dock aufgeräumter, da unter Mavericks die Icons nicht so uniform gestaltet waren wie unter Yosemite. Quadrate beziehungsweise Rechtecke kennzeichnen systemrelevante Applikationen, zum Beispiel den Finder, das Terminal oder die Systemeinstellungen. Dem gegenüber stehen die Kreise, die Applikationen im Allgemeinen darstellen: Safari, App-Store oder iTunes. Zuletzt die perspektivischen „Tiles“, die meistens mit einem 3D-Objekt verziert sind, die mehr Tool als Applikation sind: Du benötigst sie während deines Alltags am laufenden Band. Beispiele hierfür sind: Mail, Kalender und das Adressbuch.

Aber: Was ist mit AirDrop-, GameCenter- und dem FaceTime-Icon passiert? Nur das Icon für den Rechner hat es noch härter getroffen, es ist nur mehr ein Screenshot seiner selbst. Was ich sehr schade finde ist, dass alle Icons an Textur verloren haben – nur das Mail-Icon ist merkwürdigerweise noch detaillierter geworden, als es vorher schon war. Die flachen, generischen Ordner-Icons enttäuschen nicht zuletzt durch ihre grellen Farben. Als ich das erste mal unter Yosemite gestartet habe, dachte ich, dass der Grafikkarten-Treiber im Eimer sei – war er aber nicht.

Yosemite: „Translucent Materials“

Ich weiß, Craig Federighi hat tausend Mal betont, wie schön transparente Materialien im neuen OS X sind. Recht hat er, aber es scheint so als würde dieser Effekt vor allem des Effekts wegen eingesetzt. Bestes Beispiel Safari – wieso wird der Translucent-Effekt selektiv gerade hier so stark eingesetzt?

„Translucent Materials: Ein schickes Gimmick, aber keine UI-Meisterleistung.“

Mir ist durchaus bewusst, dass auch andere Programme wie der Finder oder die Vorschau den selben Effekt nutzen. Allerdings geschieht es hier um einiges subtiler. Das ist auch wichtig, befinden sich doch die Interaktionselemente wie Buttons oder die Suchleiste – beziehungsweise der „Suchleisten-Button“ – am oberen Rand der Applikation. Mir stellt sich allerdings die Frage, ob der Effekt dann überhaupt noch nötig ist – wenn er kaum gesehen werden kann. Der Effekt des „translucent Materials“ ist ein schickes Gimmick, aber keine UI-Meisterleistung. In Safari erscheint er mir stärker als in allen anderen Programmen, warum das so sein muss, erschließt sich mir aber nicht.

Nicht einheitlich: Programmfenster in Yosemite

Mir gefällt – abgesehen davon, dass keine vollständige URI angezeigt wird – Safari. Ich mag, dass die Applikation minimiert worden ist und ich mag die neue Buttonaufteilung. Das Problem an der Sache: Nur Safari ist platzsparender geworden und passt nun in puncto nicht mehr zu den anderen Programmfenstern. Die klassische Titelleiste ist bei Programmen wie Mail noch vorhanden und beißt sich nun mit Safari oder etwa auch dem Taschenrechner. Grund dafür ist, dass sich die „Ampel“ bei Safari circa auf der gleichen Höhe befindet wie der Button, der neue Mails öffnet. Der Rechner-App wiederum fehlt der Rahmen, das so genannte „Chrome“ um das Fenster, und die „Ampel“ befindet sich in der Zahlenanzeige. Das sieht unnatürlich aus – und fügt sich überhaupt nicht in das sonstige Apple-Design ein.

Fazit: Yosemite ist (noch) keine UI-Perle

Alles in allem macht Apple OS X Yosemite bei genauerem Hinsehen einen unfertigen Eindruck und wird den Versprechungen aus der Apple-Keynote in Bezug auf die verbesserte UI nicht gerecht. Es scheint fast so, als würden 80% des Budgets von Yosemite ins Icon-Design geflossen sein und 20% in den Opacity-Regler des „translucent Material“.

Das Betriebssystem hat auf UI-Ebene einige markante Ecken und Kanten, an denen sich der Benutzer blutige Nasen und Schürfwunden holt. Trotzdem bin ich sehr gespannt darauf, welche Richtung Apple mit dem UI von Yosemite letztlich einschlägt – wenn es denn fertig ist.

Ich nutze ein MacBook Pro Retina mit 13 Zoll und dem i5-Prozessor bei acht Gigabyte RAM. Getestet wurden die Versionen 14A388a und 14A398.

Wie fühlt sich das Update für euch an?

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Mario Janschitz
Macht Wired.de das Scrollytelling salonfähig? http://t3n.de/news/macht-wiredde-scrollytelling-573570/ 2014-10-22T12:14:02Z
Sie sind immer noch irgendwie in Mode: Scrollytelling-Websites. In diesem Artikel zeigen wir euch fünf Beispiele – und warum die deutsche Wired der eigentliche Gewinner ist.

Sie sind immer noch irgendwie in Mode: Scrollytelling-Websites. In diesem Artikel zeigen wir euch fünf Beispiele – und warum die deutsche Wired der eigentliche Gewinner ist. Bei allen Nachteilen, die scrolllastige Webprojekte haben, werden sie auch heute noch gerne eingesetzt. Die Folge sind oft Performance-Probleme, „Informations-Overkill“, schlechtes Handling durch stetiges Scrollen, fehlende Footer und Probleme beim Link-Sharing. Darüber hinaus rückt der Inhalt häufig in den Hintergrund, weil die Animationen die ganze Aufmerksamkeit auf sich ziehen.

Wir haben bereits mehrmals über Scrollytelling, aber auch von ScrollMagic berichtet – welches als Framework sicher zu den Besten gehört, um diese Art von Website umsetzen zu können. Wer vom Scrollytelling überzeugt ist, dem möchte ich die folgenden Inspirationen nicht vorenthalten:

Scrollytelling ist tot. Lange lebe Scrollytelling?

Scrollytelling-Websites werden teilweise als Heilmittel für den Journalismus gehandelt, weil Inhalte dadurch spannender und interaktiver vermittelt werden können. Publisher erhoffen sich, dass Leser für „spannenden“ oder „erlebbaren“ Inhalt lieber Geld ausgeben, als für klassische Formate wie ihr sie auch bei uns, oder auf anderen Portalen lesen könnt. Verlage wie beispielsweise die New York Times haben eigene Tools entwickelt, um Scrollytelling für Journalisten zugänglicher zu machen. Trotzdem treten Scrollytelling-Artikel nicht so häufig auf, wie es anfangs prophezeit oder erhofft wurde. Was ich persönlich aufgrund der Nachteile, die mit solchen Artikeln einhergehen, begrüße.

scrollytelling
Scrollytelling wie es sein sollte. (Screenshot: wired.de)

Vielmehr gibt es heute eine neue Entwicklung, nämlich einzelne Elemente des „klassischen“ Scrollytelling subtil anzuwenden. Ein positiver Versuch ist das neue Artikel-Layout der deutschen Wired. Hier wird der Text spaltenartig – allerdings nur mit einer Spalte – und teilweise asymmetrisch präsentiert, Zitate oder Bildergalerien unterstützen den Text, funktionieren aber auch alleinstehend und bekommen den ihnen gebührenden Whitespace. Egal ob Überschrift, Teaser oder einzelne Absätze, die Informationsblöcke sind leicht zu erfassen und machen zugleich auch einzeln etwas her. Das Scrollen selbst passiert eigentlich aus einem Feature heraus: die große Schriftgröße und der Whitespace. Dadurch entsteht zwar eine gewisse „Länge“ der Artikel, der Leser fühlt sich beim Scrollen aber nicht genervt, weil die Website künstlich in die Länge gezogen wird. Darüber hinaus verzichtet Wired.de auf überflüssige Animationen.

Wired.de, ein Vorzeigebeispiel

Sollte das Design der Wired-Artikel aus dem „klassischen“ Scrollytelling inspiriert beziehungsweise hervorgegangen sein, dann begrüße ich sie, denn: Einzeln wirken Stilmittel stärker, als wenn eine Website jeden Effekt wiedergibt, der bis dato entwickelt wurde. Wenn Scrollytelling-artige Websites den Journalismus retten können, dann nur so, wie es die deutsche Wired umzusetzen versucht: Die Vorteile von Scrollytelling nutzen, aber die Inhaltslänge kurz genug halten, um sicherzustellen, dass die Artikel lesbar sind und Performance-Probleme ausbleiben.

Wie denkt ihr über Scrollytelling?

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Mario Janschitz
Material Design: Google veröffentlicht 750 kostenfreie SVG-Icons http://t3n.de/news/google-material-design-icons-573630/ 2014-10-22T09:43:33Z
Google hat 750 SVG-Icons unter einer freien Creative-Commons-Lizenz veröffentlicht. Die Icons sind als Ressourcen für App-Entwickler gedacht, die Anwendungen im „Material Design“ erstellen wollen.

Google hat 750 SVG-Icons unter einer freien Creative-Commons-Lizenz veröffentlicht. Die Icons sind als Ressourcen für App-Entwickler gedacht, die Anwendungen im „Material Design“ erstellen wollen.

Google stellt 750 Icons zur lizenzfreien Nutzung bereit. (Screenshot: Google)
Google stellt 750 Icons zur lizenzfreien Nutzung bereit. (Screenshot: Google)

Google: Schicke Icons zur kostenfreien Verwendung veröffentlicht

Googles neue Designsprache „Material Design“ zeigt sich bereits in Android 5.0 Lollipop. Aber auch Web-Apps sollen, wenn es nach Google geht, auf „Material Design“ setzen. Um App-Entwickler dabei etwas unter die Arme zu greifen, hat der Suchgigant jetzt 750 SVG-Icons unter einer freien Creative-Commons-Lizenz auf GitHub veröffentlicht.

Die Icons decken verschiedene Funktionen ab und sind zum überwiegenden Teil einfarbig gehalten. Ausnahmen bilden vor allem Icons, die Zwischenstände bei der Akkuladung oder der WLAN-Empfangsqualität darstellen sollen. Die Icons könnt ihr euch entweder über die GitHub-Seite von Google herunterladen oder mit den folgenden Befehlen direkt über die Paket-Manager Bower und NPM:

$ bower install material-design-icons
$ npm install material-design-icons

Google: Material Design Icons stehen als SVG- und PNG-Dateien bereit

Die Icons kommen als SVG-Datei jeweils in einer Größe von 24 und 48 Pixeln. Außerdem gibt es SVG- und CSS-Sprites von allen Symbolbildchen. Darüber hinaus gibt es die Icons als PNG-Dateien in verschiedenen Versionen für das Web, iOS oder andere Einsatzgebiete. Wer sich alle Glyphen in Ruhe anschauen möchte, kann dazu die Live-Preview-Seite der Icons nutzen.

Wem die Icons nicht zusagen, der sollte einen Blick auf unsere Artikel „Iconmelon: Hier findet ihr kostenlose SVG-Icons für euer nächstes Projekt“ und „Flaticon: Fast 13.000 kostenlose Vektor-Icons zum Download“ werfen.

via www.producthunt.com

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Kim Rixecker
Schnäppchen-Alarm: Design-Ressourcen im Wert von 1.680 Dollar für nur 39 Dollar http://t3n.de/news/creative-market-big-bundle-design-ressourcen-573471/ 2014-10-21T13:48:53Z
Im Creative Market Big Bundle II gibt es derzeit 105 Design-Ressourcen im Wert von 1.680 US-Dollar für nur 39 US-Dollar. Im Bundle finden sich Website-Templates, WordPress-Themes, Fonts und mehr.

Im Creative Market Big Bundle II gibt es derzeit 105 Design-Ressourcen im Wert von 1.680 US-Dollar für nur 39 US-Dollar. Im Bundle finden sich Website-Templates, , und mehr.

Creative Market Big Bundle II: 97 Prozent Rabatt auf Design-Ressourcen

Egal ob Apps, E-Books oder Comics: Digitale Güter in Form eines Pakets vergünstigt zu verkaufen liegt derzeit im Trend. Creative Market, ein Marktplatz für Design-Ressourcen, bietet im Moment ebenfalls ein solches Paket an. Darin enthalten sind unter anderem Website-Templates, WordPress-Themes, und Photoshop-Ressourcen. Alles in allem stecken 105 Ressourcen in dem Paket, die normalerweise einzeln über die Website verkauft werden.

Insgesamt müssten Käufer für die einzelnen Bestandteile des Creative Market Bundles 1.680 US-Dollar bezahlen. Stattdessen gibt es das Bundle derzeit für 39 US-Dollar. Dabei befinden sich einige sehr ansehnliche , Themes, Fonts und andere Elemente in dem Paket. Allerdings müssen Käufer sich beeilen, da das Angebot Morgen am 22. Oktober 2014 um 10 Uhr ausläuft.

Design-Ressourcen: Im Creative Market Bundle II sind einige interessante Templates, Fonts und Grafiken. (Screenshot: Creative Market)
Design-Ressourcen: Im Creative Market Bundle II sind einige interessante Templates, Fonts und Grafiken. (Screenshot: Creative Market)

Design-Ressource im Paket: Lohnt der Kauf?

Die Frage danach, ob sich der Kauf lohnt, lässt sich wie immer bei solchen Bundles nicht grundsätzlich beurteilen. Das hängt letztlich davon ab, wie viele der im Paket enthaltenen Ressourcen euch auch wirklich interessieren. Da einige im Normalfall aber preislich schon über zehn US-Dollar liegen, kann sich der Kauf durchaus rentieren – ein Interesse an einigen der angebotenen Fonts, Grafiken, Themes und Templates vorausgesetzt.

Wer noch mehr sparen möchte, der sollte einen Blick auf unsere Artikel „40 kostenlose WordPress-Themes für Responsive Design“, „Responsive Design: Zehn kostenlose Webdesign-Templates“ und „15 kostenlose Fonts für Grafikdesigner“ werfen.

via www.producthunt.com

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Kim Rixecker
„404 Error! Wanna play Pacman instead?“ – 50 Beispiele für kreative Fehlerseiten http://t3n.de/news/404-error-in-kreativ-333407/ 2014-10-21T12:55:26Z
Halt, Stopp! Jetzt spricht der 404-Error. Wer im Internet surft, kommt an nervenden Standardfehlerseiten von Webservern kaum vorbei. Die Begegnung kann aber auch Spaß machen, wie folgende Beispiele …

Halt, Stopp! Jetzt spricht der 404-Error. Wer im Internet surft, kommt an nervenden Standardfehlerseiten von Webservern kaum vorbei. Die Begegnung kann aber auch Spaß machen, wie folgende Beispiele zeigen.

Tritt auf einer Webseite ein 404-Error auf, ist der Frust auf Nutzerseite in der Regel groß. „Fehler 404 – Seite nicht gefunden” oder “Die von Ihnen angeforderte Seite wurde nicht gefunden“ kommen praktisch dem Endbahnhof im Nirvana des World Wide Webs gleich. Die Ursachen: Einmal die falsche URL notiert oder eine nicht (mehr) existierende Webseite aufgerufen, schon begrüßt einen die oftmals leere, triste und wenig aussagekräftige Standardfehlerseite. Muss das sein?

404-Error: Wie man Kreativität und Nutzen vereint

So wirbt ein Reiseportal mit einem 404-Error für sich. (Screenshot: t3n)
So wirbt ein Reiseportal mit einem 404-Error für sich. (Screenshot: t3n)

Nicht unbedingt – im Netz gibt es genügend kreative Beispiele, die zeigen, wie man die inzwischen zumeist automatisch generierte Fehlerseite auch optisch und zweckbezogen aufwerten kann. Ob verspielt, amüsant oder skurril – Startups wie MyTaxi, aber auch große bekannte Marken wie Nestlé oder Umbro haben es verstanden, die ungeliebte Fehlerseite positiv für Nutzer und ihr eigenes Produkt zu gestalten. Es gibt allerdings noch eine ganze Reihe anderer Beispiele dafür. Eine Auswahl von insgesamt 50 kreativen Fehlerseiten im Netz:

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Daniel Hüfner
Yosemite-Look für alle Apps: 40 kostenlose Icons für euer Dock http://t3n.de/news/os-x-yosemite-icons-573369/ 2014-10-21T10:12:47Z
Seit Yosemite erstrahlt OS X in einem einheitlichen, neuen Look. Damit auch eure Drittanbieter-Apps nicht wie Fremdkörper im Dock wirken, zeigen wir euch, wo ihr passende Icons im Yosemite-Look …

Seit Yosemite erstrahlt in einem einheitlichen, neuen Look. Damit auch eure Drittanbieter-Apps nicht wie Fremdkörper im Dock wirken, zeigen wir euch, wo ihr passende im Yosemite-Look findet.

Passende Icons für Yosemite: Keine Fremdkörper mehr im Dock

Für OS X Yosemite hat Apple erheblich an der Designsprache des Betriebssystems geschraubt. Das spiegelt sich auch in den Icons der mitgelieferten wieder. Unerhörterweise passen die Icons von Drittanbieter-Apps seit dem Update leider nicht mehr wirklich zu dem neuen OS-X-Look. Wer mit diesen ästhetischen Fremdkörpern im Dock partout nicht leben will, der bekommt jetzt Hilfe von einigen Designern. Sie haben passende Icons für einige bekannte Apps gestaltet. Wir stellen euch drei Icon-Sammlungen für OS X Yosemite vor.

Yosemite-Icons: Von 1Password über Skype bis Writer

Icons für OS X Yosemite: So passen sich auch Drittanbieter-Apps an den neuen Look an. (Grafik: Jeremy Goldberg)
Icons für OS X Yosemite: So passen sich auch Drittanbieter-Apps an den neuen Look an. (Grafik: Jeremy Goldberg)

Der Interface-Designer und Google-Mitarbeiter Jeremy Goldberg hat eine umfangreiche Icon-Sammlung für Yosemite-Nutzer gestaltet. Insgesamt 23 Icons finden sich in dem Paket. Lasst euch von dem Eingabefeld für eure Kreditkartendaten nicht einschüchtern, die Icons könnt ihr völlig kostenfrei herunterladen und zu nichtkommerziellen Zwecken verwenden. Dazu müsst ihr in das Preisfeld lediglich eine 0 eintippen. Dann verschwindet auch das Eingabefeld für eure Kreditkarteninformationen. Eine E-Mail-Adresse müsst ihr zwar angeben, die muss aber nicht notwendigerweise wirklich existieren. Wer die Icons mag, der kann Goldberg aber natürlich auch für seine Arbeit finanziell entlohnen.

Hier eine Liste der verfügbaren Icons für Yosemite:

  • 1Password
  • Adobe After Effects
  • Adobe Dreamweaver
  • Adobe Illustrator
  • Adobe InDesign
  • Adobe Lightroom
  • Adobe Muse
  • Adobe Photoshop
  • Day One
  • Downloads
  • Evernote
  • Github
  • iTranslate
  • Quickbooks
  • Rdio
  • Skype
  • Slack
  • Sonos
  • Spotify
  • Steam
  • Sublime Text
  • Twitter
  • Writer

Muir: Yosemite-Icons für Adobe und mehr

Muir: Ein weiteres Icon-Set für Yosemite-Nutzer. (Grafik: Sebastiaan de With)
Muir: Ein weiteres Icon-Set für Yosemite-Nutzer. (Grafik: Sebastiaan de With)

Auch der ehemalige Apple- und Mozilla-Mitarbeiter Sebastiaan de With hat sich an Yosemite-Icons versucht. Verteilt auf zwei Sets bietet er passende Icons für insgesamt 17 Apps.

Adobe-Icons für Yosemite von Sebastiaan de With:

  • After Effects
  • Illustrator
  • InDesign
  • Lightroom
  • Photoshop
  • Premiere
  • Bridge

Weitere Icons von Sebastiaan de With:

  • Rdio
  • Sketch
  • Slack
  • Sparkle
  • Spotify
  • Steam
  • Sublime Text
  • Tor Browser
  • Browser
  • Twitter

So ändert ihr die Icons unter OS X Yosemite

Um das Icon einer App zu ändern, gibt es verschiedene Wege. Der einfachste Weg wäre es, das gewünschte Icon in der Vorschau-App zu kopieren. Anschließend macht ihr einen Rechtsklick auf die App, deren Icon ihr austauschen wollt, und wählt „Informationen“ aus. Dann klickt ihr oben auf das App-Icon und fügt das Neue über CMD + V ein. Deutlich eleganter geht das allerdings mit der kostenlosen App LiteIcon. Die aktuelle Version der Software (3.5.3) wurde bereits für OS X Yosemite optimiert.

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