Design | t3n News News, Infos, Tipps und aktuelle Artikel zu Design 2015-07-06T08:27:28Z t3n Redaktion http://t3n.de/tag/design Das perfekte Online-Portfolio: Mit diesen Tipps angelst du dir Kunden oder Arbeitgeber http://t3n.de/news/perfekte-online-portfolio-diesen-620654/ 2015-07-06T08:27:28Z
Besonders Kreative haben heute viel mehr Möglichkeiten, ihre Arbeiten in einem Online-Portfolio zu präsentieren. Davon profitiert nicht nur die Bewerbung auf eine Festanstellung, sondern bei …

Besonders Kreative haben heute viel mehr Möglichkeiten, ihre Arbeiten in einem Online-Portfolio zu präsentieren. Davon profitiert nicht nur die Bewerbung auf eine Festanstellung, sondern bei Freiberuflern auch die Akquise neuer Kunden. Mit den richtigen Tipps lässt sich der Erfolg deines Online-Portfolios maximieren.

Wer als Designer, Fotograf, Grafiker oder in einem anderen kreativen Beruf tätig ist, sollte zumindest einige seiner Arbeiten in einem Online-Portfolio zur Schau stellen, um potenzielle Auftraggeber oder Arbeitgeber auf sich aufmerksam zu machen.

Ein Online-Portfolio sollte dem Besucher auf den ersten Blick zeigen, was ihn erwartet. (Foto: janne.me)
Ein Online-Portfolio sollte dem Besucher auf den ersten Blick zeigen, was ihn erwartet. (Screenshot: janne.me)

Es versteht sich von selbst, dass man in einem solchen Portfolio seine besten Werke präsentieren sollte – und zwar so professionell, wie irgend möglich. Auch wenn das viel Zeit und Aufwand in Anspruch nimmt, zahlen sich die Mühen fast immer aus. Du solltest beim Erstellen deines Online-Portfolios allerdings einige Aspekte berücksichtigen, damit deine Arbeiten auch wirklich den bestmöglichen Eindruck bei Besuchern hinterlassen.

Ziele für Online-Portfolio definieren

Wie bei jedem anderen Projekt auch, hilft es für das Online-Portfolio, Ziele zu definieren, bevor du loslegst. Sobald du dir darüber klar geworden bist, was genau du mit deiner Portfolio-Seite erreichen willst, wird dieses Ziel jede der folgenden Entscheidungen beeinflussen. Ein Portfolio, mit dessen Hilfe man eine Festanstellung anstrebt, wird ganz andere Anforderungen haben, als ein Portfolio, mit dem man Aufträge akquirieren möchte.

Die Gründe, ein Online-Portfolio aufzusetzen, können ganz unterschiedlich sein. Du solltest dir über die Zielsetzung bewusst werden. (Foto: Anton Pawlik)
Die Gründe, ein Online-Portfolio aufzusetzen, können ganz unterschiedlich sein. Du solltest dir über die Zielsetzung bewusst werden. (Screenshot: Anton Pawlik)

Portfolios können sich darüber hinaus beispielsweise dafür eignen, sich selbst als Marke zu etablieren und die Reputation zu verbessern, oder aber um zu netzwerken. Aus diesem Grund kann es auch sinnvoll sein, gleich mehr als ein Portfolio anzulegen – mehr dazu am Ende des Artikels.

Selbst aufsetzen oder Online-Dienste nutzen?

Wer die nötigen Fähigkeiten mitbringt, kann sein Portfolio natürlich selbst aufsetzen. Immerhin zeigt man mit einem eigenen Design, beziehungsweise einer selbst aufgesetzten Seite, schon wichtige Skills. Selbst nicht so versierte Nutzer sollten zumindest versuchen, ihr Portfolio selbst aufzusetzen – das wirkt einfach individueller und weniger willkürlich. Ein mögliches Vorgehen könnte sich wie folgt gestalten. Sicher dir eine aussagekräftige Domain, nimm etwas Geld für das Hosting in die Hand und versuch dich am Aufsetzen einer eigenen WordPress-Seite.

Dienste für dein Online-Portfolio gibt es viele. Für Plattformen wie Squarespace stehen diverse Templates zur Verfügung. (Foto: Squarespace)
Dienste für dein Online-Portfolio gibt es viele. Für Plattformen wie Squarespace stehen diverse Templates zur Verfügung. (Foto: Squarespace)

Fehlen Programmier- und Webdesign-Kenntnisse, kannst du alternativ auf einen der zahlreichen Online-Dienste zurück greifen. Hier solltest du beim Vergleich der Dienste darauf achten, was die unterschiedlichen Pakete kosten. Darüber hinaus besteht bei vielen vermeidlich kostenlosen Diensten die Gefahr, dass die kostenfreie Nutzung nur unter Einschränkungen oder zeitlich begrenzt angeboten wird. Es lohnt sich in jedem Fall, auch das Kleingedruckte zu lesen.

Für welchen Online-Dienst du dich letztendlich entscheidest hängt von unterschiedlichen Faktoren ab, deren Erörterung den Rahmen dieses Artikels sprengen würde. Zu den wohl bekanntesten Design-Portfolio-Plattformen gehören Behance, CarbonMade, Krop, Portfolio-Lounge, Dropr, Format, Coroflot, Folio HD, Dribble und Shown’d. Einige dieser Dienste fungieren darüber hinaus als Art soziales Netzwerk, in dem man sich mit Gleichgesinnten austauschen und sogar Auftraggeber akquirieren kann.

Fotografen können zwar auf Plattformen wie flickr oder 500px zurück greifen, ein dediziertes Online-Portfolio ist aber ratsam. (Foto: flickr / est0al)
Fotografen können zwar auf Plattformen wie flickr oder 500px zurück greifen, ein dediziertes Online-Portfolio ist aber ratsam. (Foto: flickr / est0al)

Fotografen können sich selbstverständlich auch Plattformen wie flickr, Model Mayhem oder 500px bedienen. Selbst für Entwickler gibt es diverse Angebote. So lässt sich mit Stockroom mit einem Klick ein Online-Portfolio aus einem GitHub-Account erstellen.

Einfach halten

Der erste Eindruck zählt. Ein Besucher sollte beim Aufrufen deines Online-Portfolios sofort hineingesogen werden. Komplexität in Design und Navigation sind da kontraproduktiv. Vielmehr sollte dein Portfolio möglichst elegant und übersichtlich gestaltet sein. Nur so kannst du gewährleisten, dass die Aufmerksamkeit deinen Arbeiten gilt. Auch die Navigation sollte selbsterklärend und simpel aufgebaut sein. Es tut nicht weh, sich auf die Klassiker zu beschränken: Home, Portfolio, aktuelle Arbeiten, Neuigkeiten, About- und Kontaktseite.

xxx
Eine möglichst einfach gehaltene Navigation erhöht die Usability der Portfolio-Seite und lenkt nicht von deinen Arbeiten ab. (Screenshot: Evan Eckard)

Darüber hinaus muss der Besucher sofort erkennen können, worum es in deinem Portfolio geht und Antworten auf die folgenden Fragen möglichst problemlos finden können:

  • Wessen Portfolio ist das?
  • Finde ich aktuelle Arbeiten von der Person?
  • Welche Projekte wurden in der Vergangenheit abgeschlossen?
  • Für welche Auftraggeber wurden Projekte abgeschlossen?
  • Wie kann ich in Kontakt treten?

Viele dieser Fragen lassen sich beispielsweise direkt mit einer kurzen Einführung beantworten, in der du dich und deine Arbeit kurz vorstellst – weiter ausholen kann man dann auf der About-Page.

]]>
Sébastien Bonset
Kostenlose PSD-Vorlagen: 15 Button-Templates für deine Projekte http://t3n.de/news/kostenlose-psd-vorlagen-15-592253/ 2015-07-05T12:19:22Z
Buttons können das Erscheinungsbild einer Website entscheidend mit prägen, im guten wie im schlechten Sinne. Eine kleine Auswahl optisch besonders gut gelungener Exemplare in Form von kostenlosen …

Buttons können das Erscheinungsbild einer Website entscheidend mit prägen, im guten wie im schlechten Sinne. Eine kleine Auswahl optisch besonders gut gelungener Exemplare in Form von kostenlosen PSD-Vorlagen stellen wir euch in diesem Artikel vor.

Egal, ob als Verweis zu Social-Media-Anwendungen, zum Starten einer Suchanfrage oder Absenden eines Kommentars – kaum eine Website, kaum ein Blog, Webshop oder Content-Management-System kommt ohne Buttons aus. Das ist mitunter ganz gut so.

HTML5 und CSS3 bieten heute von Haus aus schon diverse Möglichkeiten, mit Rundungen, Schatten, Transparenzen und anderen Spielereien gelungene Schaltflächen zu gestalten. Mit Anwendungen wie Photoshop sind der Kreativität keine Grenzen gesetzt und für grau-triste, uninspirierte Buttons gibt es eigentlich keine Entschuldigung mehr.

Ausgewählte Button-Designs im PSD-Format

Wir haben uns für euch nach sehenswerten Beispielen auf die Suche gemacht und tragen euch hier eine kleine, aber feine Auswahl von Buttons vor. Die gezeigten Vorlagen liegen alle im PSD-Format vor, sodass sie direkt übernommen oder bearbeitet werden oder auch als Inspiration dienen können.

Links zu den Websites, auf denen die PSD-Dateien zum Download bereitstehen, befinden sich in den Bildunterschriften sowie in den Beschreibungen in der Bildergalerie. Die ausgewählten PSD-Files sind allesamt sorgsam gegliedert und akkurat beschriftet, was die Wiederverwendung und das Editieren vereinfacht.

E-Commerce-Button-Set

Hier steht ein text
Set aus Social Media und Download-Buttons sowie Call-to-Action Slogans: http://sixrevisions.com.

Diese Zusammenstellung von Buttons aus dem E-Commerce-Kontext besticht durch harmonische Farbverläufe, Schattierungen, Beleuchtungseffekte und kraftvolle Farben. Das Set beinhaltet neben den hier im Bild dargestellten Buttons noch als Handschriften animierte Call-to-Action Slogans, die sich mit den Buttons kombinieren lassen.

UI-Komplettpaket White&Blue

Hier ein anderer Text
User Interface Komplettpaket in blau und grau:  http://www.psdchest.com.

Das farblich in modernem Blau-Grau gehaltene Set an UI-Elementen beinhaltet neben klassischen Buttons noch diverse weitere Elemente wie Lautstärkeregler, Checkboxen oder Toggle-Buttons. Somit bietet diese Zusammenstellung für jeden Anwendungsfall eine sorgfältig gearbeitete Lösung, die sich auch als Komplettpaket verwenden lässt.

Farbenfrohe Buttons für unterschiedliche Anwendungen

ebenso text
Sechs kostenlose PSD-Vorlagen für Buttons für verschiedene Zwecke: http://tempees.com.

Dieses kleine, aber feine Set beinhaltet nur sechs Buttons, die dafür aber umso gelungener gestaltet sind. Die Darstellung der Icons ist sehr präzise und und die gewählten Symbole aussagekräftig. Die Schattierungen der Schaltflächen hinterlassen ebenso wie die Beleuchtungseffekte einen sehr hochklassigen Eindruck.

Sticker-Button-Set

test
Verschiedenste Buttons im zweidimensionalen Sticker-Stil: http://xoo.me.

Ohne den Einsatz von Schlagschatten wirken die Buttons zweidimensional wie Sticker. Die Gestaltung der Icons ist teils sehr minimalistisch, bei den Buttons, die zum Dateidownload anregen, wiederum sehr präzise und detailliert.

Toggle-Buttons für soziale Netzwerke

text
Toggle-Buttons für neun Social Media Sites: http://xoo.me.

Die hier dargestellte Sammlung besteht aus 18 Toggle-Buttons von neun verschiedenen Social-Media-Sites. Zu jedem Button wird jeweils der aktivierte und der deaktivierte Status dargestellt. Die Icons sind präzise gestaltet und erwecken durch die Schattierungen die Illusion von Dreidimensionalität.

Noch mehr kostenlose PSD-Vorlagen

Weitere sehenswerte für die Bearbeitung in Photoshop erstellte Vorlagen findet ihr zum Beispiel in unseren Artikeln „Diese 15 Web-Templates musst du gesehen haben“ oder „10 kostenlose Logo-Vorlagen, die das Designerherz höher schlagen lassen“.

]]>
Marcel Seer
Die Qual der Wahl: Typecase unterstützt Designer bei der Suche nach dem passenden Font http://t3n.de/news/font-auswahl-schrift-typecase-620595/ 2015-07-04T09:33:59Z
Typecase ist ein Tool für Mac OS, das das Vergleichen von Fonts einfacher machen und so die Entscheidung für Designer erleichtern soll. Wir haben uns den kleinen Helfer angeguckt.

Typecase ist ein Tool für Mac OS, das das Vergleichen von Fonts einfacher machen und so die Entscheidung für Designer erleichtern soll. Wir haben uns den kleinen Helfer angeguckt.

Den richtige Font-Auswahl mit Typecase treffen

Für ein richtig gutes Design ist die Font-Auswahl ausschlaggebend. Den Auswahlprozess der richtigen Schrift zu erleichtern, hat sich Typecase auf die Fahne geschrieben. Die Mac-App bietet verschiedene Ansichten zum Vergleich unterschiedlicher Schriftarten.

Per Drag & Drop lassen sich Ordner mit Schriften in Typecase ziehen. Die können dann in verschiedenen Ansichten verglichen werden. Die App unterstützt dabei alle gängigen Font-Formate und ermöglicht durch die Anpassungsmöglichkeit des Beispieltexts gute Vergleichbarkeit. Auch Schriftgröße und -farbe können festgelegt werden.

Export-Funktion erleichtert die Team-Arbeit bei der Font-Auswahl

Die Schriftgröße und -farbe können angepasst werden, um bei der Font-Auswahl besser vergleichen zu können. (Screenshot: Typecase)
Der Text, die Schriftgröße und -farbe können angepasst werden, um bei der Font-Auswahl besser vergleichen zu können. (Screenshot: Typecase)

Nutzer können den einzelnen Fonts verschiedene Labels zuweisen, um sie beispielsweise in die engere Auswahl einzubeziehen oder schon nach bestimmten Positionen wie Überschriften, Zitaten und ähnlichem zu gliedern. Um sich im Team abzustimmen, hat Typecase eine Export-Funktion, die eine PDF-Datei mit den ausgewählten Schriften generiert.

Die Sidebar auf der linken Seite ermöglicht neben der Auswahl der Schriften für den Vergleich auch die Installation der Schriftarten über einen gewünschten Font-Manager. Typecase ist für 4,99 Euro im App-Store erhältlich.

Type Case
Download @
Mac App Store
Entwickler: Moople
Preis: 4,99 €

via www.webdesignernews.com

]]>
Johannes Schuba
Kollaboration: Frame.io bringt eure Final-Cut-Videos in die Cloud http://t3n.de/news/frame-io-final-cut-pro-cloud-620792/ 2015-07-03T14:02:27Z
Frame.io soll es deutlich einfacher machen, im Team an einem Filmprojekt mit Final Cut Pro zu arbeiten. Wir verraten euch, wie das Cloud-Tool funktioniert.

Frame.io soll es deutlich einfacher machen, im Team an einem Filmprojekt mit Final Cut Pro zu arbeiten. Wir verraten euch, wie das Cloud-Tool funktioniert.

Filmproduktion: Der Cloud-Dienst Frame.io bietet jetzt auch eine direkte Final-Cut-Pro-Integration. (Screenshot: Frame.io)
Filmproduktion: Der Cloud-Dienst Frame.io bietet jetzt auch eine direkte Final-Cut-Pro-Integration. (Screenshot: Frame.io)

Frame.io: Gemeinsam an Final-Cut-Projekten arbeiten

Gemeinsam an einem Videoprojekt zu arbeiten, ist nicht so einfach. Einzelne Clips, das gesamte Projekt oder einen Teil der Timeline mit anderen Teammitgliedern zu teilen, ist oft aufwendig und damit zeitraubend. Genau hier soll Frame.io ansetzen.

Das Tool fungiert als Erweiterung für Apples Videoschnittprogramm Final Cut Pro. Wollt ihr mehrere Clips teilen, markiert ihr sie einfach in dem Videoschnittprogramm und schon kümmert sich Frame.io um den Rest. Eure Teammitglieder oder Kunden bekommen die Clips dann entweder in voller Auflösung oder im H.264-Format. Außerdem könnt ihr auf die Art und Weise auch gezielt nur bestimmte Abschnitte eurer Timeline teilen. Beispielsweise um Feedback zu einer bestimmten Szene einzuholen.

Frame.io: Ihr könnt Dateien auch von eurem Desktop aus teilen

Neben der Final-Cut-Integration bietet Frame.io euch aber auch die Möglichkeit, Medieninhalte von eurem Desktop aus mit euren Teamkollegen zu teilen. Aber egal wie eure Clips auf Frame.io kommen, ihr könnt sie anschließend immer über das Web-Interface anschauen und gemeinsam im Team auch direkt kommentieren. Natürlich könnt ihr die Videos darüber auch herunterladen.

Frame.io ist vor allem durch die Integration in Final Cut Pro ein sehr interessanter Cloud-Dienstleister für alle, die regelmäßig Videos mit dem Schnittprogramm bearbeiten. Die Preise von Frame.io beginnen bei 15 US-Dollar im Monat. Professionelle Nutzer dürften aber vermutlich eher zu einem der größeren Pakete greifen. Für 50 US-Dollar im Monat bekommt ihr beispielsweise 100 Gigabyte Cloud-Speicher und könnt mit bis zu 50 Personen an einem Projekt arbeiten.

via www.producthunt.com

]]>
Kim Rixecker
Sorry, IKEA, dieser Roboterarm druckt Möbel in 3D in jedem Design http://t3n.de/news/roboterarm-moebel-3d-design-620284/ 2015-07-02T09:50:28Z
Ein ausgedienter Roboterarm aus der Autoindustrie hat einen neuen Job: Galatéa druckt Möbel in 3D – und zwar ganz in dem vom Nutzer gewünschten Design.

Ein ausgedienter Roboterarm aus der Autoindustrie hat einen neuen Job: Galatéa druckt Möbel in 3D – und zwar ganz in dem vom Nutzer gewünschten Design.

3D: Roboterarm druckt Möbel

Das französische Startup Drawn hat sich ein interessantes Geschäftsmodell ausgedacht: den 3D-Druck von Möbeln im Wunschdesign. Dafür sucht Drawn aktuell nach finanzieller Unterstützung auf der Crowdfunding-Plattform Kickstarter. Drawn-Gründer und Entwickler Sylvain Charpiot hat aus einem ehemaligen Roboterarm den überdimensionalen und flexiblen 3D-Drucker Galatéa gebaut, der recycelbare Möbel in den unterschiedlichsten Formen und Farben drucken kann.

Roboterarm Galatéa arbeitet als flexibler 3D-Drucker. (Foto: Drawn)
Roboterarm Galatéa arbeitet als flexibler 3D-Drucker. (Foto: Drawn)

Dem Startup geht es dabei nicht um den Verkauf von 3D-Druckern, auch wenn mit der Kickstarter-Kampagne der Bau eines kleineren Ausstellungsmodells für Messen finanziert werden soll. Vielmehr soll das 3D-Drucken mit Drawn zum Event werden. Besitzer von Restaurants oder Ausstellungshallen können sich dank Galatéa für ihre Veranstaltungen eine einzigartige Innenausstattung drucken lassen, die sie danach wieder recyceln lassen können. Designer oder Künstler könnten mit dem Möbel-3D-Drucker ihre Ideen umsetzen.

Denn es gibt nur wenig Beschränkungen, was die Formen und Farben angeht. Galatéa nutzt für den 3D-Druck Plastik, wie es etwa für Lego-Steine benutzt wird. Die Möbelstücke können derzeit einen Umfang von bis zu zwei Metern Länge und 1,20 Metern Höhe erreichen. Einfache Möbel, etwa einen Stuhl, druckt der umgebaute Roboterarm innerhalb von zwei Stunden.

Die Kickstarter-Kampagne ist bereits ein Erfolg. Das Ziel von 15.000 Euro ist bereits erreicht – und noch sind rund drei Wochen Zeit, um sich eins der angebotenen Produkte zu sichern. Für 35 Euro kann man etwa 3D-gedruckte Kleiderbügel in verschiedenen Farben und mit dem eigenen Namen darauf bestellen. Zum Preis von 120 Euro gibt es ein von Designer Samuel Javelle entworfenes Sitzmöbel.

via gizmodo.com

]]>
Jörn Brien
Sommer, Sonne, schicke Schriften: 10 kostenlose Fonts zum sofortigen Download http://t3n.de/news/kostenlose-fonts-2015-619920/ 2015-06-30T15:56:52Z
Auch 2015 haben Designer wieder einige schicke und kostenlose Fonts kreiert. Wir zeigen euch zehn besonders gelungene Beispiele aus der ersten Jahreshälfte.

Auch 2015 haben Designer wieder einige schicke und kostenlose kreiert. Wir zeigen euch zehn besonders gelungene Beispiele aus der ersten Jahreshälfte.

Kostenlose Fonts aus der ersten Jahreshälfte 2015

Jedes Jahr entstehen unzählige schicke neue Schriftarten. Auch 2015 ist da keine Ausnahme. Um euch die Auswahl ein wenig zu erleichtern, haben wir zehn der besten kostenlosen Fonts des ersten halben Jahres herausgesucht. Ein Klick auf den Namen führt euch die Seite des jeweiligen Machers. Dort könnt ihr die Schriftarten dann auch kostenlos herunterladen.

Kostenlose Fonts 2015: Das sind unsere bisherigen Highlights

Geom

Kostenloser Font: Geom. (Grafik: Danilo Gusmão Silveira)
Kostenloser Font: Geom. (Grafik: Danilo Gusmão Silveira)

Etna

Kostenlose Fonts 2015: Etna. (Grafik: RIT Creative)
Kostenlose Fonts 2015: Etna. (Grafik: RIT Creative)

Pier Sans

Kostenlose Font: Pier Sans. (Grafik: Mathieu Desjardins)
Kostenlose Font: Pier Sans. (Grafik: Mathieu Desjardins)

Ailerons

Kostenloser Font: Ailerons. (Grafik: Adilson Gonzales de Oliveira Junior)
Kostenloser Font: Ailerons. (Grafik: Adilson Gonzales de Oliveira Junior)

Qontra

Kostenlose Font: Qontra. (Grafik: Tomaz Hrastar)
Kostenlose Font: Qontra. (Grafik: Tomaz Hrastar)

Gidole

Kostenloser Font: Gidole. (Grafik: Gidole)
Kostenloser Font: Gidole. (Grafik: Gidole)

Phelix Boomgartner

Kostenloser Font: Phelix Boomgartner. (Grafik: Michal Slovák)
Kostenloser Font: Phelix Boomgartner. (Grafik: Michal Slovák)

Sensei

Kostenloser Font: Sensei. (Grafik: Ezeqviel Ergo)
Kostenloser Font: Sensei. (Grafik: Ezeqviel Ergo)

Archivo Narrow

Kostenloser Font: Archivo Narrow. (Grafik: Omnibus-Type)
Kostenloser Font: Archivo Narrow. (Grafik: Omnibus-Type)

Yeah Papa

Kostenlose Fonts: Yeah Papa. (Grafik: Rafa Miguel)
Kostenlose Fonts: Yeah Papa. (Grafik: Rafa Miguel)

Weitere Schriften findet ihr beispielsweise in unserem Artikel „25 kostenlose Fonts für Grafikdesigner“.

]]>
Kim Rixecker
Asteroids für Designer: Warum Typoroids euch ziemlich lange von der Arbeit abhalten könnte http://t3n.de/news/typoroids-arcade-game-designer-619645/ 2015-06-30T08:13:54Z
Wer den Klassiker Asteroids gerne gespielt hat, wir Typoroids lieben – vor allem, wenn er Typografie liebt. Wir stellen euch das packende Browser-Game vor.

Wer den Klassiker Asteroids gerne gespielt hat, wir Typoroids lieben – vor allem, wenn er Typografie liebt. Wir stellen euch das packende Browser-Game vor.

Typoroids: Hommage an einen Arcade-Games-Klassiker

Typoroids: Das kleine Dreieck ist euer Raumschiff – all die Buchstaben und Zeichen sind eure Gegner. (Screenshot: hipopotamstudio.pl)
Typoroids: Das kleine Dreieck ist euer Raumschiff – all die Buchstaben und Zeichen sind eure Gegner. (Screenshot: hipopotamstudio.pl)

Die polnischen Designer des Hipopotam Studio haben eine Schwäche für Arcade- und Retro-Games. Kein Wunder, dass sie mit Defender schon eine Hommage an Missile Command und mit Squares eine Hommage an Tetris entwickelt haben.

Doch Aleksandra Mizielínska und Daniel Mizielínski, die die Designschmiede in Warschau gemeinsam betreiben, sind auch echte Typografie-Liebhaber. Folgerichtig haben sie jetzt das erste Browser-Game entwickelt, das diese beiden Leidenschaften verbindet: Typoroids.

Mit jedem Typoroids-Level werden die „Gegner“ mehr

Wie der Name schon vermuten lässt, ist Typoroids an den 1979 erschienenen Games-Klassiker Asteroids angelehnt. Bei diesem Spiel geht es darum, ein kleines Raumschiff zu steuern und umherfliegenden Asteroiden auszuweichen. Eine simple Idee, die aber so fesselnd und wegweisend war, dass das Museum of Modern Art sie am 28. Juni 2013 in seine Dauerausstellung aufgenommen hat.

Typoroids ist ähnlich aufgebaut und ebenfalls ein 2D-Game, nur müsst ihr das Raumschiff durch umherfliegende Buchstaben und Zeichen steuern und diese zerstören. Was einfach klingt, wird nach und nach zu einer ganz schön heiklen Mission, denn jeder „Gegner“, den ihr abschießt, zerplatzt in neue, kleinere Einzelteile. Gerade Designern und Typo-Liebhabern dürfte der Kampf gegen die Buchstaben durchaus Spaß machen. Denn auch im Alltag muss man sich ja nicht selten mit Fonts herumschlagen. Doch wir warnen euch ausdrücklich: Für Risiken und Nebenwirkungen dieses packenden Browser-Games seid ihr ganz alleine verantwortlich.

]]>
Florian Blaschke
UX-Design: Warum uns „Intuition“ keine besseren Interfaces machen lässt [Kommentar] http://t3n.de/news/ux-design-intuition-616740/ 2015-06-29T06:30:09Z
Wir sind keine besseren UX/UI-Designer, weil wir „intuitiv“ gestalten. Warum diese Aussage nicht unrichtig ist, erfahrt ihr im Kommentar über Intuition in einer digitalen Welt, warum …

Wir sind keine besseren UX/UI-Designer, weil wir „intuitiv“ gestalten. Warum diese Aussage nicht unrichtig ist, erfahrt ihr im Kommentar über Intuition in einer digitalen Welt, warum „intuitiv“ einfach das falsche Wort ist, und dass eine Schere komplizierter ist als angenommen.

„Und dann legst du das Bild einfach im Ordner ab.“ Diese Aussage hat mein Opa bis zum Schluss nicht verstanden. Sprachlos starrt er auf den Monitor, dreht sich zu mir und fragt: „Warum? Das mach ich im echten Leben ja auch nicht.“ – mein Opa im Jahre 2005. Sich über Ordnerstrukturen Gedanken machen zu müssen, war völlig neu für ihn – er wollte doch nur die Fotos von seiner Digicam ansehen. Für mich war das damals natürlich alles sonnenklar „Opa, das ist total intuitiv! Stell dir einfach einen Archiv-Schrank vor, in dem du die Bilder ablegst.“ Im selben Moment dämmerte es mir – so intuitiv war das alles gar nicht. Wer hat schließlich schon nen Aktenschrank mit seinen Urlaubsfotos im Wohnzimmer – oder?

„Für mich war Windows XP total intuitiv.“

Ich wusste bereits viel über virtuelle Oberflächen und dieses sogenannte „Anwendererlebnis“. Für mich war Windows XP total intuitiv: Ordner da, Fotos rein, Doppelklick hier – für meinen Opa nicht. Er sah den Laptop als einen klobigen Bilderrahmen, mit dem man irgendwas tun konnte. Irgendwas – so genau wusste er das nicht, weil er sich „virtuelle Welten“ nicht vorstellen konnte. Obwohl es sich bei Bedienkonzepten um Abstraktionen aus der realen Welt handelt – Dateien in Ordner abzulegen, darin sah er keinen Sinn.

Aber bin ich, bist du anders als mein Opa? Nein. Wir alle mussten lernen, dass man Apple-Touchscreens ohne Handschuhe und ohne Fingernägel, dafür aber mit trockenen Fingerspitzen berühren muss. Und davor mussten wir lernen, dass wir jetzt mit einer Maus über eine virtuelle Oberfläche schweben – intuitiv war daran aber nichts. Das war ein Verhalten, das erlernt werden musste, um die Abstraktion nutzen zu können. Skeuomorphismus kann da zwar helfen, kann aber auch unnötige verkomplizieren.

Intuition: Nichts ist intuitiv

Und selbst wenn sich die Nutzung eines Interfaces intuitiv anfühlt, dann handelt es sich um ein rein subjektives Gefühl – ein Gefühl, dass wir bereits Erlerntes noch einmal anwenden können. Doch weder das noch die Tatsache, dass man sich auch an suboptimale Prozesse gewöhnen kann – Stichwort: Anti- und Dark-Pattern – zeigt vor allem eins: „Intuition“ ist einfach das falsche Wort in diesem Kontext.

schere
Intuition intuitiv falsch: Handhabung von Scheren. (Foto: © EC Photos – Fotolia.com)

Obwohl wir „intuitiv“ nutzen als wäre es eine messbare Größe, ist sie es nicht. Selbst alltägliche Dinge wie Scheren sind nicht intuitiv zu bedienen. Wusstet ihr, dass ihr mit dem Mittelfinger schneidet, und nicht mit dem Zeigefinger? Dadurch können bessere Schnitte gemacht werden, da sich die Hand weiter öffnen lässt. Bam!

Aber jeder, der eine Schere sieht, glaubt automatisch, sie „bedienen“ zu können. Das hier einfach ein falsch erlerntes Muster angewendet, und die Schere somit nicht einmal mit ihrem vollen Potential genutzt wird – das fällt gar nicht auf.

Digital Natives – vielleicht im nächsten Evolutionsschritt

„Intuition ist die Summe aller Erfahrungen.“

Da ein Großteil der Bevölkerung mit dem #neuland vertraut ist, fällt es uns nur leichter, digitale Vorgänge schneller nachzuvollziehen. Praktisch gesehen ist nicht Software intuitiver geworden, sondern wir können Prozesse jetzt schneller verstehen. Aber warum? Weil wir auf unsere empirischen Erfahrungen zurück greifen können – oder anders gesagt: Wir probieren so lange aus, bis wir das Ziel erreicht haben. Wenn wir das nicht in der von uns erwarteten Zeitspanne schaffen, fällen wir das Urteil: „Das ist nicht intuitiv!“. Ist das Herausdrehen einer Schraube intuitiv, wenn man nur den Kopf sieht und noch nie einen Schraubenzieher benutzt hat? Kurzum: Intuition ist die Summe an Erfahrungen auf die wir zurückgreifen können.

Bildschirmfoto 2015-06-22 um 14.39.18
Unsere Perspektive: „Intuitiv“ weil man ein Glas schon mal angehoben hat.

Es gibt kein angeborenes Verhalten, wie man die Schraube herausbekommt. Es gibt nur die Erfahrung (beziehungsweise die Heuristik). Durch ausprobieren gelangt man bei einer 50-Prozent-Chance zur Erkentniss: „Aha – Links mit L wie Lose“. Wenn wir also das nächste mal auf eine ähnliche Situation treffen wie zum Beispiel bei Flaschen oder Türen von öffentlichen Toiletten, dann werden wir dieses Muster „Links mit L wie Lose“ anwenden.

Und da wir auch kein angeborenes Verständnis für die digitale Welt haben, trifft natürlich auch zu, wenn am mobilen Gerät diverse OS-Funktionen an- und ausgestellt werden. Oder wir auf unseren neuen mobilen Geräten sofort versuchen iOS- und Android-Gesten durchzuführen – hat geklappt? Und plötzlich: Wird aus Plastik mit Glasscheibe ein intuitives Interface.

„Intuitive“ Erfahrungen schaffen: So geht's einfach

... Not. Als UI- und UX-Designers liegt es also an uns, Interfaces zu gestalten, die für die Zielgruppe optimierter sind als die generischen und „intuitiven“ Oberflächen für Otto Normalverbraucher . Und das ist absolut nicht einfach. Das mag vielleicht frustrierend klingen, aber aufgrund der Anzahl der Geräte die wir in unserem Leben benutzt haben, und die Interfaces die wir bereits kennen, definieren ob wir etwas als „intuitiv“ wahrnehmen oder nicht. Wir müssen also bestehende Interfaces und Workflows verbessern, anstatt das gefühlt hunderste „intuitive“ Interface zu designen, dass blind von einem „Styleguide“ übernommen wurde.

Die einzige Regel, von der man im Usability-Kontext und „Intuition“ ausgehen kann, sind die Gestaltungsgesetze: Die Gesetze der Nähe, Ähnlichkeit, Geschlossenheit, Prägnanz, des gemeinsamen Schicksals und das der Figur funktionieren bei allen Menschen – der Rest ist erlerntes Verhalten. Erlerntes Verhalten, dass geändert und optimiert werden kann, und diese Interfaces zu gestalten ist die Aufgabe, die es zu meistern gilt – denn: Einfach nur schön reicht schon lange nicht mehr.

Das ist wahrscheinlich der Grund dafür, warum mein Opa vom Desktop so angetan war, denn es gab nur fünf in sich geschlossene und eindeutig unterscheidbare Icons die durch gebührenden Abstand voneinander getrennt waren – sind es nicht diese Momente die das Designer-Herz höher schlagen lassen?

]]>
Mario Janschitz
So hat Apple die Navigationsleiste optimiert http://t3n.de/news/apple-618823/ 2015-06-28T10:00:35Z
In diesem Artikel zeigen wir euch, wie Apple seine Navigation über die Jahre optimiert hat – von 2000 bis 2015, vom Software-Fokus auf Hardware, Apple hat vor allem rund um iTunes und iPod optimiert.

In diesem Artikel zeigen wir euch, wie Apple seine Navigation über die Jahre optimiert hat – von 2000 bis 2015, vom Software-Fokus auf Hardware, Apple hat vor allem rund um iTunes und iPod optimiert.

Apple-Tab
Apple setzt auf zeitloses Design. (Screenshot: http://jamesdempsey.net)

Am auffälligsten ist die Entwicklung des User-Interfaces. Die Tabs haben sich von Nadelstreif-Optik, über glossy Tabs des Aqua Interfaces zu einer minimalistischen und zeitlosen grauen Navigationsleiste entwickelt.

Innerhalb der ersten sieben Jahre hat sich die Navigationsleiste vorwiegend auf die Software (QuickTime, Mac OS X und iTunes) konzentiert – sowie auf einige Online-Dienste wie (iReview, iCards und iTools was zu.Mac wurde). Das erste Hardware-Produkt, das einen eigenen Navigationspunkt bekam war das iPhone – im Jahr 2007. Zuvor war das erste Hardware-Produkt in der Navigationsleiste der iPod. Allerdings musste er sich zwischen 2003 und 2007 einen Navigationspunkt mit iTunes teilen.

Apple-Tabs: Hardwareprodukte dominieren die Navigation

Insgesamt hatte die Website von Apple rund zwölf Jahre lang iTunes und iPod als getrennte Navigationspunkte. Das erste mal tauchte der Navigationspunkt „iTunes“ im September 2003 auf. Ein Monat später wurde der Menüpunkt iPod und iTunes zu einem Navigationspunkt zusammengezogen. Mit der Einführung des Apple „Music Services“ nutze Apple einen Navigationspunkt: „Music“ – was aber schnell wieder verworfen wurde und in weiter Folge zuerst durch iTunes und dann durch „iPod + iTunes“ ersetzt wurde.

Nach relativ wenigen Iterationen pro Designänderung dominierten danach die Hardware-Produkte die Navigation von Apple: Mac, iPhone, Watch, iPad, iPod.

Heute ist die Situation ausgeglichen: iTunes und iPod wurden wieder unter „Music“ zusammen gefasst. Unter „Mac“ wird das gesamte Portfolio zwischen Standrechner und Laptops zusammen gefasst, nur „iPad“, „iPhone“ und „Watch“ werden mit eigenen Navigationspunkten gewürdigt.

via jamesdempsey.net

]]>
Mario Janschitz
Windows 10: Microsoft hat sich für den Hintergrund „Hero“ nicht lumpen lassen http://t3n.de/news/windows-10-standart-hintergrund-618976/ 2015-06-26T08:33:17Z
Für einen Hintergrund von Windows 10 hat Microsoft einen ganz schönen Aufwand betrieben. „Hero“ soll vermutlich der neue Standard-Hintergrund werden. Mit Licht, Laser und Nebel wurde das …

Für einen Hintergrund von Windows 10 hat Microsoft einen ganz schönen Aufwand betrieben. „Hero“ soll vermutlich der neue Standard-Hintergrund werden. Mit Licht, Laser und Nebel wurde das klassische Fenster in Szene gesetzt. Im Video seht ihr den Entstehungsprozess.

Windows 10 bekommt aufwändigen Standard-Hintergrund

windows 10 standard hintergrund
Ein aufwändiges Shooting für einen Hintergrund. Microsoft lässt sich nicht lumpen für „Hero“. (Screenshot: Microsoft)

Für viele Nutzer gehört das Personalisieren des Desktops vermutlich zum Einrichten des Computers dazu. Heißt: Der Standard-Hintergrund eines Betriebssystems bleibt wohl bei den Wenigsten auf Dauer. Dennoch ist er das Gesicht eines Betriebssystems. Microsoft hat sich für den Hintergrund „Hero“, der vermutlich der neue Standard-Hintergrund von Windows 10 werden wird, deswegen auch nicht lumpen lassen und einigen Aufwand betrieben. Denn das Bild ist diesmal keineswegs am Schreibtisch entstanden, sondern in einem aufwändigen Shooting.

Für das Shooting hat Microsoft ein ganzes Team zusammengestellt, das mit Licht, Laser und Nebel das Windows-Logo in Szene gesetzt hat. Passend zum Gesamterscheinungsbild von Windows 10 wurde auch hier mir dunklen Farben gearbeitet. Im Video könnt ihr den Entstehungsprozess sehen.

Das „Hero“ der Standard-Hintergrund für Windows 10 werden soll, hat Microsoft bisher nicht bestätigt. Es scheint aber sehr wahrscheinlich angesichts des großen Aufwands. Mit der Umsetzung war Bradley G. Munkowitz, auch als GMUNK bekannt betraut, der unter anderem Visuals für Eric Prydz und Beck gemacht hat und für Adidas, AdobeSony und viele andere Techfirmen sein Talent eingesetzt hat.

Eine Kollektion seiner Videos findet ihr hier.

Alle News zum neuen Betriebssystem von Microsoft findet ihr auf unserer Themenseite Windows 10

via www.tabtech.de

]]>
Melanie Petersen