Design | t3n News News, Infos, Tipps und aktuelle Artikel zu Design 2014-12-18T10:24:18Z t3n Redaktion http://t3n.de/tag/design UI-Kits, Frameworks, Tools und mehr: So legt ihr mit Googles Material Design los http://t3n.de/news/material-design-ui-kits-frameworks-icons-585564/ 2014-12-18T10:24:18Z
Von UI-Kits über Icons bis hin zu Frameworks und Tools: Wir liefern euch alle Ressourcen, die ihr braucht, um eigene Apps in Googles neuer Designsprache Material Design zu erstellen.

Von UI-Kits über Icons bis hin zu Frameworks und Tools: Wir liefern euch alle Ressourcen, die ihr braucht, um eigene Apps in Googles neuer Designsprache Material Design zu erstellen.

Google hatte Material Design im Rahmen der firmeneigenen I/O-Entwicklerkonferenz 2014 vorgestellt. Die Designsprache setzt vor allem auf kontrastreiche Farben, großflächige Elemente sowie auf Icons und Typografie als bestimmende Designelemente. Das Unternehmen setzt beispielsweise in der eigenen Inbox-App auf Material Design. Aber auch andere Entwickler werden dazu angehalten, Apps in diesem Look für Android oder das Web zu erstellen. Um euch den Einstieg so einfach wie möglich zu gestalten, wollen wir euch im Folgenden UI-Kits, Frameworks, Icons-Sets, Tools und weitere Ressourcen vorstellen, die euch bei der Gestaltung von Apps im Material-Design-Look helfen können.

Material Design: UI-Kits für eure nächste App

Material Design: Euch stehen verschiedene kostenlose und kostenplfichtige UI-Kits zur Verfügung. (Grafik: UI8)
Material Design: Euch stehen verschiedene kostenlose und kostenplfichtige UI-Kits zur Verfügung. (Grafik: UI8)

Glücklicherweise gibt es bereits einige hochwertige UI-Kits. Die besten haben wir euch an dieser Stelle herausgesucht.

Icons für eure App im Material-Design-Look

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

Google selbst hat 750 Icons für den Einsatz in Material-Design-Apps unter der freien Creative-Commons-Lizenz veröffentlicht. Aber auch andere Designer haben sich an der Erstellung passender Icons versucht.

Material Design: Web-Apps anhand dieser Frameworks erstellen

Material Design: Neben Bootstrap-Templates gibt es auch schon verschiedene CSS-Frameworks im Material-Design-Look. (Screenshot: Materialize)
Material Design: Neben Bootstrap-Templates gibt es auch schon verschiedene CSS-Frameworks im Material-Design-Look. (Screenshot: Materialize)

Auch kostenlose CSS-Frameworks beziehungsweise Templates für bestehende Frameworks wie Bootstrap gibt es im Material-Design-Look. Welches euch am besten zusagt, müsst ihr allerdings selbst entscheiden.

Tool: Die passende Farbpalette für eure Material-Design-App generieren

Material Design: Mit Material Palette erstellt ihr schnell passende Farbpaletten. (Screenshot: Material Palette)
Material Design: Mit Material Palette erstellt ihr schnell passende Farbpaletten. (Screenshot: Material Palette)

Mit Material Palette gibt es eine praktische Web-App, mit der ihr euch ganz einfach eine passende Farbpalette für eure App generieren lassen könnt. Ihr müsst lediglich zwei Farben auswählen und das Tool erledigt den Rest. Die Palette könnt ihr euch anschließend in den Formaten CSS, SASS, SVG, XML, oder PNG herunterladen. Das Tool stammt von Matt Aussaguel, der auf seinem Blog Material Up auch schicke Beispiele für den Einsatz der Designsprache sammelt.

Wer mit den hier aufgelisteten Ressourcen sofort loslegen möchte, der sollte vorher noch einen Blick auf unseren Artikel „Leitfaden für Material Design: Google veröffentlicht Style-Guide für Android-Apps“ werfen.

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Kim Rixecker
App-Design: Wie ihr eure Nutzer vom ersten Moment an überzeugt http://t3n.de/news/app-design-holt-neue-nutzer-583684/ 2014-12-14T08:45:01Z
Eine Bedienungsanleitung ist das Eingeständnis eines Design-Fehlers. Doch wie schafft man Apps, die vom allerersten Moment überzeugen? Andrew Coyle hat sich ein paar perfekte Beispiele angeguckt.

Eine Bedienungsanleitung ist das Eingeständnis eines Design-Fehlers. Doch wie schafft man Apps, die vom allerersten Moment überzeugen? Andrew Coyle hat sich ein paar perfekte Beispiele angeguckt.

Zites Guided Tour arbeitet mit Coach-Marks, die auf einem halbstransparenten Layer platziert sind.
Zites Guided Tour arbeitet mit Coach-Marks, die auf einem halbstransparenten Layer platziert sind. (Screenshots: Zite)

First time use (abgekürzt FTU) ist die Bezeichnung für die erste Begegnung eines Nutzers mit einer neuen App oder einem neuen Feature. Der Moment der ersten Verwendung gehört zu den Dingen, die entscheiden, ob eine App erfolgreich sein wird oder scheitert.

Wie man eine gute FTU erstellt

Die erste Interaktion in einer App sollte so einfach wie möglich sein. Viele Apps fordern als erste Interaktion die Eingabe der Daten für das Login. Das kann die Nutzerakzeptanz enorm vermindern. Benutzer wollen zuerst wissen, welche Vorteile die App ihnen bringt, bevor sie Namen, E-Mail-Adresse und so weiter preisgeben. Zite, der personalisierbare Medienaggregator, umgeht diese Hürde, indem er den Nutzer zuerst die für ihn interessanten Themen auszuwählen lässt, bevor er nach den Anmeldedaten fragt. Diese einfache Interaktion schafft eine erste Bindung und mindert den Widerwillen vor der Eingabe von persönlichen Daten.

ftu_zite2
Um Benutzer nicht gleich als erstes mit der Abfrage von persönlichen Daten zu belästigen, lässt die App sie zuerst ihre bevorzugten Interessengebiete auswählen. (Screenshots: Zite)

Ein gutes Erstverwendungserlebnis ist eintscheidend für unbezahlte native Anwendungen. Die aktive Verwendung ist ein wichtiger Maßstab für diese Art Apps, weil sie zuverlässig voraussagt, wie hoch die Einkünfte aus einer späteren Nutzung sein können. Sie ist niedrig, wenn die App dem Nutzer keinen Anlass gibt, sie oft zu verwenden.

Der Nutzer sollte Vorteile des Produktes erkennen und einen Wert daraus schöpfen, bevor die App später einen Gegenwert des Nutzers erhält, nämlich Daten, in-App-Käufe, kostenpflichtige Abonnements etc.

In Apples App-Store erzielen alle umsatzstarken Apps ihre Einkünfte durch In-App-Käufe. Kein Wunder, das auf der Erstverwendung so viel Augenmerk liegt.

Eine Bedienungsanleitung ist das Eingeständnis eines Design-Fehlers

Es ist üblich, ein Produkt auf die Grundfunktionen zu reduzieren, die es ausmachen. Ziel des Designers sollte sein, die Applikation so einfach wie möglich und von Anfang an nutzbar und nützlich zu machen. Die Notwendigkeit, die App zu erklären, sollte auf ein Minimum zu reduziert werden. Aber natürlich können nicht alle digitalen Produkte schon an sich intuitiv sein.

ftu_mailchimp
In Mailchimps Einführungstour werden wichtige Features der Anwendung mit Hinweisfenstern auf einem halbtransparenten Overlay erklärt. (Screenshot: Mailchimp.com)

Das Einbauen einer Guided Tour in eine App hilft dem Benutzer, die Features und Funkionen zu verstehen. So eine Einführung wird üblicherweise bei der ersten Benutzung angezeigt, und kann später auch im Kontext der Screens entdeckt werden. Sie zeigt dem Nutzer, wie er die App verwendet, in dem sie einen Überblick über die wichtigsten Funktionen gibt. Dieser Überblick wird normalerweise in der Form von Overlays oder durch hinweisende Markierungen angezeigt. Beim Overlay wird auf eine halbtransparente Ebene ein Dialogfenster mit den Informationen gesetzt. Hinweisende Markierungen können temporär direkt neben den Features erscheinen und zeigen bei Klicken oder Tippen ihre Nachricht.

Gestaltung einer Guided Tour

Es kann nerven, mit offensichtlichen oder obskuren Features belehrt zu werden. Eine Einführung sollte kurz und einfach zu überspringen sein. Der Benutzer möchte so schnell wie möglich den Nutzwert der App genießen – in Form einer guten User Experience. Das sollte man nicht aufs Spiel setzen, in dem man die App erst lang und breit erklärt.

ftu_slack
Slack verwendet schwebende Markierungen, die beim Klick Bedienhinweise für die darunterliegenden Elemente geben. (Screenshot: Slack)

Die Tour sollte zwischen 3 und 6 Schritten lang sein. Wenn man mehr als sechs Screens benötigt, sollte der Designer darüber nachdenken, die Erklärung in kontextbezogenen hinweisenden Markierungen unterzubringen. Slack, die Team-Messaging-App, macht das, in dem sie schwebende Hinweise über Bereichen der App verteilt. Werden sie geklickt, erklären sie das Element darunter.

Die Guided Tour ist am ehesten zu vergleichen mit einem Verkäufer, der dem Nutzer die Vorzüge, Features und Funktionen einer App erklärt. Der Text sollte in klaren, kurzgefassten Worten den Nutzen der App aufzeigen. Es ist wichtig, dass darin auch kritische Fragen angesprochen werden. Wenn beispielsweise eine App sich zu einem Social-Media-Benutzeraccount verbinden will, sollte man erklären, dass sie dort nichts ohne die Einwilligung veröffentlicht, oder warum sie es tut.

Das erste Nutzererlebnis sollte dem Nutzer ein Erfolgsgefühl vermitteln. Egal ob er nach Neuigkeiten, Verbindung, Unterhaltung oder nach der Lösung für ein Problem sucht – er meldet sich an, weil er mit seiner aktuellen Situation nicht zufrieden ist. Die App sollte einen Wert bieten, damit er Grund hat, wiederzukommen.

Dieser Artikel erschien zuerst auf medium.com.

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Andrew Coyle
Fotolia: Adobe kauft Stockfotografie-Primus für 800 Millionen Dollar http://t3n.de/news/adobe-fotolia-584672/ 2014-12-12T06:30:08Z
Für 800 Millionen US-Dollar kauft Adobe den bekannten Anbieter für Stockfotografie Fotolia. Dessen Angebot soll künftig vor allem Nutzern von Adobes Creative-Cloud-Umgebung zur Verfügung stehen.

Für 800 Millionen US-Dollar kauft Adobe den bekannten Anbieter für Stockfotografie Fotolia. Dessen Angebot soll künftig vor allem Nutzern von Adobes Creative-Cloud-Umgebung zur Verfügung stehen.

Einer der weltweit größten Marktplätze für kommerzielle Stockfotografie hat einen neuen Besitzer: Fotolia gehört ab sofort zu Adobe. Wie der amerikanische Photoshop-Konzern mitteilt, liegt der Kaufpreis bei rund 800 Millionen US-Dollar.

Fotolia soll in Creative Cloud einziehen

Creative Cloud: Hier soll Fotolia künftig einziehen. (Foto: Adobe)
Creative Cloud: Hier soll Fotolia künftig einziehen. (Foto: Adobe)

Mit dem Kauf will Adobe das mit über 34 Millionen Bildern und Videos bestückte Fotolia-Archiv stärker in seine Creative-Cloud-Lösung einbinden. „Die Übernahme von Fotolia wird die Rolle von Creative Cloud als führende Umgebung für Kreative stärken“, teilte ein Sprecher des Unternehmens aus dem Hauptquartier in San José mit. Creative Cloud hat derzeit 3,4 Millionen aktive Mitglieder und werde mithilfe von Fotolia zum wichtigsten Marktplatz für Kreative, die etwa auf Fotos, Videos und Schriftarten zugreifen wollen.

Adobe verspricht autonome Fotolia-Nutzung

Wie genau Mitglieder an das kostenpflichtige Fotolia-Archiv herankommen, kommuniziert Adobe nicht. Laut Informationen von TechCrunch plane der Konzern allerdings spezielle Abonnement-Modelle, zu deren Features unter anderem ein Zugriff auf Fotolia gehören soll. Zudem soll Fotolia auch Teil des Sozialen Netzwerks Behance werden, um Mitgliedern neue Möglichkeiten zur Monetarisierung ihrer Arbeiten zu eröffnen.

Befürchtungen, Fotolia könnte ab sofort nur noch für Adobe-Kunden zugänglich sein, erteilt das Unternehmen eine Absage. Demnach werde Fotolia für jeden Nutzer als alleinstehender Marktplatz für Stockfotografie erhalten bleiben.

via techcrunch.com

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Daniel Hüfner
OS X Yosemite: Kostenloses UI-Kit für eure nächste Mac-App http://t3n.de/news/os-yosemite-kostenloses-ui-kit-583726/ 2014-12-08T13:30:14Z
Mit Yosemite hat Apple den von iOS bekannten Flat-Design-Look auf sein Desktop-Betriebssystem übertragen. Ein UI-Kit für Sketch soll Designern jetzt dabei helfen, passende Mac-Apps zu gestalten.

Mit Yosemite hat Apple den von iOS bekannten Flat-Design-Look auf sein Desktop-Betriebssystem übertragen. Ein UI-Kit für Sketch soll Designern jetzt dabei helfen, passende Mac-Apps zu gestalten.

OS X Yosemite: UI-Kit für moderne Mac-Apps

Flacher und moderner: Für Yosemite hat Apple die Oberfläche seines Desktop-Betriebssystems OS X deutlich überarbeitet. Das hat nicht jedem Nutzer unbedingt gefallen, wie auch dieser Kommentar unseres Kollegen Mario Janschitz über das UI-Design von OS X zeigt. Dennoch tun App-Entwickler vermutlich gut daran, ihre Anwendungen entsprechend anzupassen, um sie nicht wie anachronistische Fremdkörper wirken zu lassen.

Dabei helfen soll ein UI-Kit des britischen Designers Keir Ansell. In dem Paket finden sich unterschiedliche UI-Elemente, die ihr für eure nächste Mac-App verwenden könnt. Auch die Nutzung in kommerziellen Projekten erlaubt Ansell, ohne ihn namentlich erwähnen zu müssen. Wie viel ihr für das Design-Kit bezahlen wollt, steht euch frei: So sind der Download und die Nutzung auch ohne jedwede Bezahlung möglich, allerdings würde sich der Designer über eine kleine Entlohnung freuen.

OS X Yosemite: Wie viel ihr für das UI-Kit bezahlt, bleibt euch überlassen. (Screenshot: yosemiteui.com)
OS X Yosemite: Wie viel ihr für das UI-Kit bezahlt, bleibt euch überlassen. (Screenshot: yosemiteui.com)

OS X Yosemite: UI-Kit soll demnächst ein Update bekommen

Das UI-Kit für Yosemite-Apps liegt in derzeit in Version 1.0 vor. Demnächst soll eine überarbeitete Version 1.1 erscheinen. Wer sich dafür interessiert, kann sich auf der Website des Yosemite-Kits für einen Newsletter eintragen und wird dann zu gegebener Zeit über das entsprechende Update informiert. Die UI-Elemente liegen im Sketch-Format vor.

Windows-Aficionados oder Mac-Nutzer, die das kostenlose Update auf Yosemite noch nicht durchgeführt haben, finden in diesem Artikel alles Wissenswerte über die aktuelle OS-X-Version. Designer von Smartphone-Apps sollten außerdem einen Blick auf unseren Artikel „Kostenloses UI-Kit für iOS 8: Über 90 Design-Elemente für Photoshop und Sketch“ werfen.

via www.producthunt.com

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Kim Rixecker
Parallax Scrolling: 30 schicke Beispiele des Webdesign-Trends http://t3n.de/news/parallax-scrolling-beispiele-423046/ 2014-12-08T08:37:57Z
Parallax Scrolling ist einer der großen Webdesign-Trends dieses Jahres. Vor allem Geschichten lassen sich mithilfe des Scrolling-Effektes auf beeindruckende Art und Weise ins Web übertragen.

Parallax Scrolling ist einer der großen Webdesign-Trends dieses Jahres. Vor allem Geschichten lassen sich mithilfe des Scrolling-Effektes auf beeindruckende Art und Weise ins Web übertragen. Um euch einen Überblick zu geben, haben wir 30 schicke Beispiele des Scrolling-Effektes herausgesucht.

Wenn sich einzelne Ebenen einer Website unterschiedlich schnell bewegen, entsteht beim Betrachter der Eindruck von Tiefe. Wir kennen den Effekt aus der physischen Welt, wenn wir etwa beim Zugfahren aus dem Fenster schauen. Nahe Objekte wie Menschen oder Häuser scheinen sich dann deutlich schneller zu bewegen als weit entfernte Objekte wie ganze Wälder oder Berge. Überträgt man diesen Effekt in die virtuelle Welt des , nennt man das Parallax Scrolling.

Parallax Scrolling: Die Entwicklung eines Webdesign-Trends

Parallax Scrolling ist in der digitalen Welt schon seit vielen Jahren im Einsatz. Vor allem Videospiele setzen auf den Effekt der Bewegungsparallaxe, schreibt unter anderem Liechtenecker. Populärer Vorreiter und Mitverursacher des Webdesign-Trends war Nike. Das US-Unternehmen veröffentlichte Anfang letzten Jahres die Website Nike Better World, die den Effekt des Parallax Scrolling zum Zeitpunkt der Veröffentlichung einsetzte.

Auch die zunehmende Verbreitung von HTML5 und CSS3 begünstigten den Einsatz des Parallax Scrolling. Die Verwendung der Webdesign-Techniken ist nicht zwingend notwendig, um den Effekt umzusetzen, erleichtert aber die Entwicklung damit einhergehender Details – beispielsweise Animationen und Übergänge. Unterstützend wirkte sich auch das Interesse am Storytelling aus, das in den vergangenen Jahren vor allem im Marketing Einzug hielt.

Parallax Scrolling: 30 schicke Beispiele des Webdesign-Trends

Wie Parallax Scrolling heutzutage eingesetzt wird, zeigen die folgenden dreißig Beispiele. Solltet ihr weitere Websites kennen, die den Effekt einsetzen, schreibt uns eure Links in die Kommentare. Wir würden uns freuen, diese Liste mit eurer Hilfe zu erweitern.

Dangers of Fracking

Wie clever Parallax Scrolling eingesetzt werden kann, um Zusammenhänge darzustellen, zeigt die Website Dangers of Fracking. (Screenshot: t3n)

ala

Die Website des Schweizer Design-Studios ala nutzt Parallax Scrolling um eigene Projekte vorzustellen. (Screenshot: t3n)

Ben the Bodyguard

Die Website der iOS-App erzählt die Geschichte des Bodyguards Ben – mithilfe von Parallax Scrolling. (Screenshot: t3n)

Spotify

Auch Spotify geizt nicht mit „parallaxen“ Effekten.
Auch Spotify geizt nicht mit „parallaxen“ Effekten. (Screenshot: t3n)

Billy's Diner

Billy's Diner: Ein kleines Unternehmen mit großartiger Website setzt auf Parallax Scrolling. (Screenshot: t3n)

Cantilever Fish & Chips

„Traditionelle Fish and Chips der besten Qualität“, verspricht Cantilever. Qualitativ hochwertig ist auch deren Website. (Screenshot: t3n)

Appmiral

Die Geschichte der App Appmiral erzählt einer kleiner Krebs, der den Besucher auf der Website begleitet. (Screenshot: t3n)

Aktion Mensch

Aktion Mensch erklärt auf dieser Website das Prinzip einer UN-Konvention und setzt dabei auf Parallax Scrolling.
Aktion Mensch erklärt auf dieser Website das Prinzip einer UN-Konvention und setzt dabei auf Parallax Scrolling. (Screenshot: t3n)

One57

Ein Skyscraper im digitalen Portrait: One57.
Ein Skyscraper im digitalen Portrait: One57. (Screenshot: t3n)

La Moulade

Eine weitere Agenturseite, die mit aufwändigen Effekten die Aufmerksamkeit der Besucher zu halten versucht.
Eine weitere Agenturseite, die mit aufwändigen Effekten die Aufmerksamkeit der Besucher zu halten versucht. (Screenshot: t3n)

Interaktive Infografik von expresssolicitors.com

Eine interaktive Infografik der besonderen Art.
Eine interaktive Infografik der besonderen Art. (Screenshot: t3n)

Unfold

Die norwegische Agentur Unfold präsentiert sich der Außenwelt mit dieser modern gestalteten Website.
Die norwegische Agentur Unfold präsentiert sich der Außenwelt mit dieser modern gestalteten Website. (Screenshot: t3n)

Savings Challenge

„Savings Challenge“: Ein großartiges Beispiel für den Einsatz von Parallax Scrolling.
„Savings Challenge“: Ein großartiges Beispiel für den Einsatz von Parallax Scrolling. (Screenshot: t3n)

Cyclemon

Was Fahrräder über ihre Fahrer aussagen, erklärt Cyclemon auf dieser Website.
Was Fahrräder über ihre Fahrer aussagen, erklärt Cyclemon auf dieser Website. (Screenshot: t3n)

5emegauche

Eine weitere Agentur-Website dieser Sammlung.
Eine weitere Agentur-Website dieser Sammlung. (Screenshot: t3n)

Broken Twill

Das Berliner Designstudio „Broken Twill“ setzt ebenfalls auf Parallax Scrolling.
Das Berliner Designstudio „Broken Twill“ setzt ebenfalls auf Parallax Scrolling. (Screenshot: t3n)

Scytale

Die portugiesische Digitalagentur Scytale verwendet online Parallax Scrolling.
Die portugiesische Digitalagentur Scytale verwendet online Parallax Scrolling. (Screenshot: t3n)

Srgint

Parallax Scrolling: Srgint präsentiert auf dieser Website die eigenen Produkte und Visionen.
Parallax Scrolling: Srgint präsentiert auf dieser Website die eigenen Produkte und Visionen. (Screenshot: t3n)

l’unita

Das italienische Restaurant aus Toronto präsentiert sich mittels Parallax Scrolling.
Das italienische Restaurant aus Toronto präsentiert sich mittels Parallax Scrolling. (Screenshot: t3n)

Serve Seattle

Parallax Scrolling eignet sich zum Geschichten erzählen.
Parallax Scrolling eignet sich zum Geschichten erzählen. (Screenshot: t3n)

Royal British Legion

Royal British Legion
Die Royal British Legion demonstriert mit einer Parallax-Scrolling Webseite, wie und wofür die Spendengelder für die RBL verwendet werden. (Screenshot: t3n)

25. Jubiläum des Gameboy

Parallax Gameboy
Eine kleine Kampagne von Ihatetomatoes.com nutzte das fünfundzwanzigste Jubiläum des Gameboys, um eine Parallax-Scrolling-Seite im Zusammenhang mit einem zum selben Thema angebotenen Kurs in Verbindung zu bringen. (Screenshot: t3n)

Sony - Be Moved

Sony – Be Moved
Für Sonys „Be Moved“-Kampagne in den USA wurde diese beeindruckende Parallax-Scrolling-Webseite geschaffen. (Screenshot: t3n)

Jacksonville Downtown Art Walk

Jacksonville Art Walk
Das Jacksonville Downtown Art Walk Festival präsentiert sich mit einer Parallax-Scrolling-Webseite. (Screenshot: t3n)

Make Your Money Matter

Make Your Money Matter
Finanzielle Themen können ganz schön langweilig sein. Make Your Money Matter erzählt mit Parallax Scrolling aber dennoch eine spannende Geschichte. (Screenshot: t3n)

Flat Design vs. Realism

Flat vs. Realism
Die interaktive Webseite Flat Design vs. Realism erklärt uns den Unterschied zwischen flat und skeumorphistisch – mit Parallax Scrolling. (Screenshot: t3n)

The Walking Dead Zombified

Walking Dead - Zombified
Alle, die schon immer mal wissen wollten, was es bedeutet ein Zombie bei Walking Dead zu sein, erfahren dies auf dieser Parallax-Scrolling-Webseite. (Screenshot: t3n)

Madwell

Madwell
Madwell ist eine New Yorker Agentur, die ihre Dienstleistungen mit schicken Parallax-Scrolling-Animationen präsentiert. (Screenshot: t3n)

Oakley

Oakley Airbreak
Oakley präsentiert die Airbrake-MX-Brille auf einer Parallax-Scrolling-Kampagnenseite. (Screenshot: t3n)

 Dieser Artikel ist eine Überarbeitung eines Artikels aus dem Jahr 2013. Autor des Originalartikels ist Lars Budde.

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Ilja Zaglov
Discover Design: Neues Mobile-Browser-Game vermittelt Designer-Wissen http://t3n.de/news/discover-design-mobile-browser-game-583137/ 2014-12-06T08:55:09Z
Wie gut steht es um dein Designer-Wissen? Mit dem Learning-Game „Discover Design“ kannst du es in deinem mobilen Browser auf die Probe stellen.

Wie gut steht es um dein Designer-Wissen? Mit dem Learning-Game „Discover Design“ kannst du es in deinem mobilen Browser auf die Probe stellen.

An diesem Quiz-Game dürften Design-Interessierte sich besonders erfreuen: „Discover Design“ vermittelt nämlich spielerisch Lerninhalte aus vielen verschiedenen Disziplinen wie dem Material-Design, der Iconography oder dem interaktiven Storytelling. Der Nutzer bekommt zuerst einige Basics vermittelt und kann sich dann durch einen bunten Fragenkatalog klicken – und per Multiple-Choice antworten. Das erste Level beginnt thematisch mit der Kategorie „Card-based Interfaces“. Zudem können Spieler sich durch einige Best-Practices und kuratierte Artikel zum jeweiligen Thema klicken, die einen besonderen Mehrwert bieten.

„Discover Design“ vermittelt nämlich spielerisch Lerninhalte aus vielen verschiedenen Disziplinen. (Screenshot: playosh.com)
„Discover Design“ vermittelt nämlich spielerisch Lerninhalte aus vielen verschiedenen Disziplinen. (Screenshot: playosh.com)

Um das Spiel zu starten braucht es nur ein Sign-up mittels E-Mail-Adresse auf der „Discover Design“-Webseite. Interessierte bekommen dann einen Link geschickt, den sie in ihrem mobilen Browser öffnen müssen. Dort kann das Spiel gestartet werden. Eine Applikation muss man sich nicht auf das Smartphone ziehen.

„Discover Design“-Spiel ist nur eines unter vielen Learning-Games

„Discover Design“-Spiel ist nur eines unter vielen Learning-Games. (Screenshot: playosh.com)
„Discover Design“-Spiel ist nur eines unter vielen Learning-Games. (Screenshot: playosh.com)

Dahinter steckt das Osh-Projekt, das neben „Discover Design“ auch für einige weitere spannende Spiele verantwortlich ist. Startup-Menschen kommen beispielsweise in der „Startup Challenge“ auf ihre Kosten. Dort warten Fragen wie: „The better strategy is... ? – Spielende können dann wählen zwischen: a) „to start competing in a larger market“ oder b) „to start with a monopoly over a small market“.

Was glaubt ihr? (Die Lösung gibt’s hier)

via www.producthunt.com

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Andreas Weck
Kostenloses UI-Kit für iOS 8: Über 90 Design-Elemente für Photoshop und Sketch http://t3n.de/news/kostenloses-ui-kit-fuer-ios-8-583200/ 2014-12-05T10:11:46Z
Um für das eigene Design-Tool zu werben, verschenkt UXPin ein umfangreiches UI-Kit für iOS 8. Die mehr als 90 Design-Elemente wurden für das iPhone 5, das iPhone 6 und das iPhone 6 Plus angepasst …

Um für das eigene Design-Tool zu werben, verschenkt UXPin ein umfangreiches UI-Kit für iOS 8. Die mehr als 90 Design-Elemente wurden für das iPhone 5, das iPhone 6 und das iPhone 6 Plus angepasst und können direkt in Photoshop oder Sketch genutzt werden.

UI-Elemente für iOS 8: UXPin veröffentlicht kostenloses Design-Kit

Um Nutzer auf das eigene Prototyping-Tool aufmerksam zu machen, hat UXPin ein kostenloses Design-Kit mit UI-Elementen für iOS 8 veröffentlicht. Alle Elemente lassen sich direkt in Photoshop oder Sketch verwenden. Dankenswerterweise liegen alle Elemente außerdem in den entsprechenden Größen für das iPhone 5, das iPhone 6 und das iPhone 6 Plus vor.

In dem Kit stecken UI-Vorlagen für Benachrichtigungen, verschiedenste Buttons und andere Steuerungselemente, Tabs oder Navigationsleisten. Aber auch speziellere Interface-Elemente für Kontakte, E-Mail- oder Messaging-Clients haben die UXPin-Designer für euch vorbereitet. Ein Blick auf das kostenlose Set lohnt sich daher.

Kostenlose UI-Elemente für iOS-8-Apps: UXPin liefert euch Vorlagen in passenden größen für iPhone 5, 6 und 6 Plus. (Screenshot: UXPin)
Kostenlose UI-Elemente für iOS-8-Apps: UXPin liefert euch Vorlagen in passenden größen für iPhone 5, 6 und 6 Plus. (Screenshot: UXPin)

iOS 8: UI-Elemente für eure App

Das UI-Kit für iOS 8 von UXPin könnt ihr euch kostenlos über die Website des Anbieters herunterladen. Dazu ist lediglich die Angabe eures Namens und eurer E-Mail-Adresse notwendig. Wer sich eingehender mit der Gestaltung von iOS-8-Apps befassen möchte, der sollte auch einen Blick auf unseren Artikel „iOS: Umfangreiche Übersicht liefert alle wichtigen Informationen zum App-Design“ werfen.

Weitere Vorlagen für euer Interface-Design findet ihr außerdem in unserem Artikel „Flat Design: 15 User-Interface-Kits zum Download“. Passende Icon-Sets haben wir euch in diesem Artikel herausgesucht.

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Kim Rixecker
Umfangreiches Webdesign-Tool statt einfacher Baukasten: Mit rukzuk baust du Responsive-Websites ohne Coding [Sponsored Post] http://t3n.de/news/responsive-webdesign-rukzuk-582303/ 2014-12-04T09:30:25Z
Das Responsive-Webdesign-Tool rukzuk richtet sich gezielt an professionelle Anwender wie Webdesigner, Freelancer, Agenturen und Unternehmen. Durch ein eigenes CMS und eine große Bandbreite an …

Das Responsive-Webdesign-Tool rukzuk richtet sich gezielt an professionelle Anwender wie , Freelancer, Agenturen und Unternehmen. Durch ein eigenes und eine große Bandbreite an Features kann man mit rukzuk ganz und gar codeless auch professionelle Webseiten gestalten.

Während die meisten Homepage-Baukästen vor allem auf simple Bedienbarkeit und überschaubare Funktionen setzen – zum Beispiel für Blogger – braucht es im professionellen Bereich schon ein sehr viel umfangreicheres Repertoire an Möglichkeiten. Für diese Zwecke hat ein junges Entwickler-Team aus Konstanz ein Webdesign-Tool auf den Markt gebracht, das in Umfang, Funktionalität, Flexibilität, Individualität und Erweiterbarkeit genau für diesen Zweck konzipiert ist. Mit rukzuk lässt sich so auch eine aufwendige Unternehmensseite ohne Code-Kenntnisse gestalten, verwalten und publizieren.

responsive webdesign 1

Maßgeschneidert und individuell

Das Besondere an der neuen Lösung ist die Kombination aus innovativem Design-Editor und einem neu entwickelten CMS. Der Design-Editor ist dabei das Herzstück: Ähnlich zu Photoshop gibt es hier viele Werkzeuge und Einstellungsmöglichkeiten. Ist man mit der Bedienung von rukzuk vertraut, kann man Websites sehr schnell und ohne Programmierkenntnisse entwickeln. Websites werden visuell im Browser gestaltet, Schriftrendering, Abstände und Funktionen wie Slider oder Animationen können dabei direkt im Editor getestet werden.

Der klassische Transformationsschritt von einer PSD-Datei in HTML/CSS/JS entfällt ganz – das spart Zeit und Geld.

Visual Responsive-Webdesign

Mit rukzuk werden zudem „echte“ Responsive-Websites erstellt. Die Website wird nicht nur, wie bei vielen klassischen Homepage-Baukästen, automatisch in eine mobile Version übersetzt. Mittels definierbarer Breakpoints wird das Verhalten der Website für jede beliebige Auflösung individuell angepasst.

resposive webdesign 2

Mit sogenannten Modulen wird per Drag & Drop ein Layout angelegt, das die Grundlage für die Seiten einer Website bildet. Derzeit stehen über 50 Module und Styles zu Verfügung. Vom Grid, das meistens als Grundlage eines Layouts dient, bis hin zur dynamischen Navigation, Slider, Lightbox, iFrame, dynamische Listen, SVG-Grafiken und vielen weiteren. Jedes Modul kann wiederum mit Styles pixelgenau gestaltet werden, hier stehen zum Beispiel Rahmen, Schatten, Animationen, Hintergründe, Google Fonts zur Verfügung. Es gibt Module für jeden erdenklichen Designwunsch und es kommen stetig neue hinzu. Derzeit arbeitet das Team unter anderem an einem Shop-Modul und einem Parallax-Modul.

Auch selbst entwickelte Module und Styles lassen sich in rukzuk integrieren. Die API-Dokumentation und Beispielmodule hat das Team auf developers.rukzuk.com und GitHub veröffentlicht.

Integriertes Content Management & Webhosting

Neben dem Design-Editor ist das selbst entwickelte CMS ein Kernbestandteil des Tools. Hier geht es vor allem darum, Websites effizient zu entwickeln und zu verwalten und dem Kunden eine einfache Pflege der Seiteninhalte zu ermöglichen. Dafür können vom Designer Bearbeitungsrechte für jedes einzelne Element einer Seite vergeben werden.

Der Vorteil für den Kunden: der Webdesigner gestaltet mit Modulen und Styles individuelle „Page Blocks“, welche CMS-Bausteine darstellen, die der Kunde auf seinen Seiten einfügen und bearbeiten kann. So wird sichergestellt, dass die Inhaltsseiten immer gestaltungskonform bleiben.

resposive webdesign 3

Mit wenigen Klicks kann die Website auf den rukzuk-Servern kostenlos veröffentlicht werden. Wer möchte, kann seine komplette Website aber auch herunterladen oder per FTP/SFTP-Upload auf externen Servern hosten. Diesen Service findet man in der Form bei keinem anderen Anbieter. Auch die Verbindung zur eignen Domain ist kein Problem.

SaaS Lösung mit individuellen Paketen

Rukzuk ist eine SaaS Lösung und wird im Abo-Modell angeboten. Zur Auswahl stehen verschiedene Pakete, vom Einzelpaket bis zur Agenturlösung mit 50 und mehr Websites. Man kann rukzuk völlig kostenlos testen. Erst wenn man Websites veröffentlichen möchte, muss man sich für ein kostenpflichtiges Paket entscheiden.

Ab dem Freelancer-Paket ist auch ein Transfer der Website direkt zum Kunden und auf dessen Rechnung möglich.

Das Tool kann kostenlos ohne zeitliche Beschränkung getestet werden.

Jetzt kostenlos testen

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
t3n Redaktion
Die 7 goldenen Regeln des UI-Designs http://t3n.de/news/7-goldene-regeln-ui-design-582053/ 2014-12-03T07:30:30Z
Erik Kennedy ist UX-Designer – doch er hat schnell gemerkt, dass das beste User-Experience-Design ohne eine gute Bedienoberfläche wertlos ist. Also hat er sich daran gemacht, die goldenen Regeln …

Erik Kennedy ist UX-Designer – doch er hat schnell gemerkt, dass das beste User-Experience-Design ohne eine gute Bedienoberfläche wertlos ist. Also hat er sich daran gemacht, die goldenen Regeln des UI-Designs zu meistern. Seine Erfahrungen teilt er in diesem Gastartikel.

Dieser Artikel von Erik Kennedy ist zuerst auf Medium erschienen (Teil 1, Teil 2). Übersetzung: Anja Braun.

UI-Design: Digitale Ästhetik für Einsteiger

Okay, das Wichtigste zuerst: Diese Anleitung ist nicht für jeden gedacht, sondern richtet sich vor allem an:

  • Entwickler, die in der Lage sein wollen, notfalls ihr eigenes gutaussehendes zu entwerfen.
  • UX-Designer, die wollen, dass ihr Portfolio besser aussieht als eine Pentagon-Powerpoint-Präsentation. Oder UX-Designer, die wissen, dass sie ein großartiges UX mit einer schönen Bedienoberfläche (UI) besser verkaufen können.

Wenn du zur Kunsthochschule gegangen bist oder dich selbst als Designer von Bedienoberflächen verstehst, wirst du diese Einführung vermutlich als eine Kombination aus a) langweilig, b) falsch und c) irritierend empfinden. Das ist in Ordnung. All deine Kritikpunkte sind berechtigt. Schließ den Tab und surf weiter.

Lass mich kurz erklären, was du in dieser Einführung findest. Anfangs war ich ein UX-Designer mit keinerlei Kenntnissen von Bedienoberflächen, aber ich habe schnell kapiert, dass es gute Gründe gibt, zu lernen, wie man eine Oberfläche schön gestaltet:

  • Mein Portfolio sah grauenhaft aus und spiegelte nur sehr dürftig meine Arbeiten und Denkprozesse wider.
  • Meine UX-Beratungs-Kunden würden lieber jemanden bezahlen, dessen Kompetenzen mehr umfassen, als nur Kästchen und Pfeile zu zeichnen.
  • Ich will niemals bei einem jungen Startup arbeiten – lieber werde ich Straßenkehrer!

Ich hatte viele Entschuldigungen. Ich habe keine Ahnung von Ästhetik. Ich habe einen technischen Abschluss gemacht – da ist es fast Ehrensache, eine hässliche Oberfläche zu gestalten.

„Dieser Artikel ist keine Theorie. Er ist reine Verwertung.“

Schlussendlich lernte ich die Ästhetik von Apps auf die gleiche Art, wie ich jede andere kreative Sache gelernt habe: durch kühle, knallharte Analyse. Und schamloses Kopieren von allem, was funktioniert. Ich habe zehn Stunden an einer Bedienoberfläche gearbeitet und eine in Rechnung gestellt. Die anderen neun gingen für wildes Herumprobieren drauf, verzweifelt Google und Pinterest nach etwas Verwertbarem durchsuchend. Diese „Regeln“ sind die Lehren dieser Stunden.

Ein Wort an die Nerds: Wenn ich jetzt nur halbwegs gut beim Gestalten von Bedienoberflächen bin, dann nur, weil ich die Dinge analysiert habe – nicht, weil ich mit einem intuitiven Gespür für Schönheit und Balance geboren bin.

Dieser Artikel ist keine Theorie. Er ist reine Verwertung. Du lernst hier nichts über den Goldenen Schnitt. Ich erwähne noch nicht mal die Farblehre. Nur das, was ich durch gewissenhaftes Üben gelernt habe.

Sieh es mal so: Judo hat sich aus Jahrhunderten japanischer Kampfkunst und philosophischen Traditionen entwickelt. Du nimmst Judo-Stunden, und neben den Kampftechniken erfährst du einiges über Energiefluss und Harmonie. Solche Sachen eben.

Krav Maga andererseits wurde von zähen Juden erfunden, die in den 1930er-Jahren in den Straßen der Tschechoslowakei gegen die Nazis kämpften. Es hat keinen künstlerischen Anspruch. In Krav-Maga-Stunden lernst du, wie du jemandem den Bleistift ins Auge stichst und abhaust.

Dies ist das Krav Maga der Bildschirme.

UI-Design: Die 7 goldenen Regeln

Hier sind sie:

  1. Licht kommt vom Himmel
  2. Schwarz-Weiß zuerst
  3. Verdopple deinen Weißraum
  4. Lerne, wie man Text auf Bilder legt
  5. Lass Text auf- und ab-poppen
  6. Verwende gute Schriftarten
  7. Alles nur geklaut

Also lass uns loslegen.

Regel 1: Licht kommt vom Himmel

Schatten geben dem menschlichen Gehirn unersetzliche Hinweise darauf, auf welche Interface-Elemente wir schauen.

Das ist vielleicht die wichtigste, nicht-offensichtliche Gesetzmäßigkeit, die man über UI-Design lernen kann: Licht kommt vom Himmel. Licht kommt so regelmäßig und beständig vom Himmel, dass es wirklich seltsam aussieht, wenn es mal von unten kommt.

UI_Design_Licht_kommt_vom_Himmel
Hui-Buuuuuhhh!

Wenn Licht vom Himmel kommt, dann beleuchtet es die Oberseite der Dinge und wirft Schatten darunter. Die Oberseiten der Elemente sind heller, die Unterseiten dunkler.

Das untere Augenlid des Menschen sieht eigentlich nicht schattig aus, aber leuchte mal mit der Taschenlampe drauf, dann siehst du auf einmal Gespenster.

Das gleiche gilt für die Bedienoberfläche. Genauso wie es Schatten auf allen Unterseiten unserer Gesichtszüge gibt, so findet man sie auch auf den Unterseiten aller UI-Elemente, die es gibt. Unsere Bildschirme sind flach, aber wir haben eine Menge Mühe darauf verwendet, alles darauf dreidimensional wirken zu lassen.

Meine Lieblingsstelle auf dieser Abbildung ist der Anstups-Finger unten rechts. (Grafik: Erik D. Kennedy)
Meine Lieblingsstelle auf dieser Abbildung ist der Anstups-Finger unten rechts. (Grafik: Erik D. Kennedy)

Zum Beispiel Schaltflächen. Sogar bei diesen relativ „flachen“ Buttons findet man noch eine Handvoll lichtbezogene Details:

  1. Die nicht gedrückte Schaltfäche (oben) hat eine dunkle untere Ecke. Die Sonne scheint hier nicht hin.
  2. Die nicht gedrückte Schaltfläche ist oben ein wenig heller als unten. Das kommt daher, dass hier eine leicht gewölbte Oberfläche imitiert wird. Genauso wie du einen Spiegel, den du vor dir hältst, ankippen musst, um die Sonne darin zu sehen, reflektieren Oberflächen, die nach oben geneigt sind, ein bisschen mehr Sonnenlicht.
  3. Die nicht gedrückte Schaltfläche wirft einen leichten Schatten – vielleicht besser zu erkennen in der Vergrößerung.
  4. Die gedrückte Schaltfläche, die immer noch unten dunkler als oben ist, ist insgesamt dunkler – das kommt daher, dass sie sich auf einer Ebene mit dem Bildschirm befindet und die Sonne sie nicht so leicht treffen kann. Man könnte darüber streiten, ob alle gedrückten Knöpfe in der realen Welt auch dunkler sind, weil unsere Hände das Licht verdecken.

Das war nur eine Schaltfläche, und dennoch sind dort vier kleine Lichteffekte zu sehen. Das ist meine Lektion. Wir übertragen das jetzt auf alles andere.

iOS6 ist ein bisschen aus der Mode gekommen, aber es ist ein gutes Studienobjekt in Sachen Licht. (Grafik: Erik D. Kennedy)
iOS6 ist ein bisschen aus der Mode gekommen, aber es ist ein gutes Studienobjekt in Sachen Licht. (Grafik: Erik D. Kennedy)

Hier sieht man ein paar iOS-Einstellungen - „Nicht stören“ und „Benachrichtigungen“. Keine große Sache, oder? Aber sieh mal, wie viele Lichteffekte es drumherum gibt.

  • Der obere Rand des eingebauten Kontrollfeldes wirft einen leichten Schatten.
  • Die Slider-Schiene ist ein bisschen vertieft.
  • Die Slider-Schiene ist konkav und der Boden reflektiert mehr Licht
  • Die Icons sind ein wenig erhaben. Siehst du den hellen Rand am oberen Ende? Er repräsentiert eine Oberfläche, die rechtwinklig zur Lichtquelle ist, und daher eine Menge Licht in deine Augen abstrahlt.
  • Die Trennlinie ist schattiert, wo sie von der Sonne abgewendet ist, und umgekehrt.
Eine Vergrößerung der Trennlinie. Aus einem alten Hubster-Konzept von mir. (Grafik: Erik D. Kennedy)
Eine Vergrößerung der Trennlinie. Aus einem alten Hubster-Konzept von mir. (Grafik: Erik D. Kennedy)

Elemente, die immer vertieft sind:

  • Texteingabefelder
  • gedrückte Schaltflächen
  • Slider-Schienen
  • Radio-Buttons (nicht ausgewählt)
  • Checkboxen

Elemente, die immer erhaben sind:

  • Schaltflächen (ungedrückt)
  • Slider-Knöpfe
  • Dropdown-Schaltfächen
  • Karten
  • Der Knopf eines ausgewählten Radio-Buttons
  • Popups

Jetzt, da du das weißt, wird es dir überall auffallen. Gern geschehen.

Warte mal, was ist mit Flat Design?

iOS7 verursachte mit seinem „Flat Design“ große Aufregung in der Entwickler-Community. Flat bedeutet hier, dass es buchstäblich flach ist. Es gibt keine vorgetäuschten Wölbungen oder Vertiefungen – nur Linien, Formen und Farbflächen.

Das Interface im Flat-Design hat keinerlei 3D-Anmutungen – nur Linien, Formen und Farbflächen. (Grafik: Erik D. Kennedy)
Das Interface im Flat-Design hat keinerlei 3D-Anmutungen – nur Linien, Formen und Farbflächen. (Grafik: Erik D. Kennedy)

Wie wir alle mag ich es clean und simpel, aber ich glaube nicht, dass das ein langanhaltender Trend ist. Die subtile 3D-Simulation in unseren Bedienelementen wirkt zu natürlich, als dass man sie völlig aufgeben sollte.

Wahrscheinlicher ist es, dass wir in Zukunft semi-flache Bedienoberflächen haben werden (ich rate dir, dich im nach diesem Prinzip fit zu machen). Ich werde mal vorausgehen und es „Flatty Design“ nennen. Immer noch clean, immer noch simpel, aber es wird ein paar Schatten und Hinweise darauf geben, wo man tippen/schieben oder klicken kann.

OS X Yosemite – Flatty, nicht Flat. (Screenshot: Erik D. Kennedy)
OS X Yosemite – Flatty, nicht Flat. (Screenshot: Erik D. Kennedy)

Während ich das hier schreibe, verpasst Google seinen Produkten gerade eine „Material Design“-Sprache. Es ist eine einheitliche visuelle Sprache, die – in ihrem Grundanspruch – versucht, die reale Welt zu imitieren.

Googles Material-Design-Guide illustriert für jedes Element, wie sich mit wenig Aufwand räumiche Tiefe vortäuschen lässt. (Grafik: <a title="Google Material Design Guide" href="http://www.google.com/design/spec/what-is-material/objects-in-3d-space.html#objects-in-3d-space-elevation" target="_blank">Google</a>)
Googles Material-Design-Guide illustriert für jedes Element, wie sich mit wenig Aufwand räumliche Tiefe vortäuschen lässt. (Grafik: Google)

Eine Illustration aus dem Material-Design-Guide zeigt, wie man verschiedene Tiefen mit verschiedenen Schattierungen erzeugt. Das ist der Trend, den ich kommen sehe: subtile Reale-Welt-Andeutungen zur Übermittlung von Informationen. Stichwort: Subtil.

Natürlich imitiert es die reale Welt, aber es ist auch nicht das Web von 2006. Es gibt keine Texturen, keine Verläufe, keine Reflexe. Flatty ist meiner Meinung nach die Zukunft. Flat? Pfft, das war gestern.

Dieses Flat-Design sieht aus heutiger Sicht echt heiß aus! (Screenshot: Erik D. Kennedy)
Dieses Flat-Design sieht aus heutiger Sicht echt heiß aus! (Screenshot: Erik D. Kennedy)

Regel 2: Schwarz-Weiß zuerst

In Graustufen zu gestalten, bevor man Farben hinzufügt, vereinfacht die komplexesten Teile des Visual Designs – und zwingt dich dazu, dich auf das Verteilen und Layouten der Elemente zu konzentrieren.

UX-Designer sind heutzutage voll auf der „Mobile-First“-Schiene. Das heißt, man macht sich Gedanken darüber, wie Seiten und Interaktionen auf dem Handy funktionieren, bevor man sie sich auf einem Zillionen-Pixel-Retina-Bildschirm vorstellt.

Diese Art Einschränkung ist gut. Sie reinigt das Denken. Man fängt mit dem schwierigeren Problem an (benutzbare App auf einem winzig kleinen Bildschirm), dann überträgt man diese Lösung auf das kleinere Problem (benutzbare App auf einem großen Bildschirm).

Hier kommt nun eine andere, ähnliche Beschränkung: Gestalte zuerst in Schwarz und Weiß. Fang mit der schwierigen Aufgabe an, die App schön und rundum benutzbar zu machen, aber ohne die Hilfe von Farbe. Füge Farben erst am Ende hinzu, und auch dann nur zweckgebunden.

Harald Thorleifssons Graustufen-Wireframes sehen so gut aus wie fertige Seiten gewöhnlicher Designer.  (Screenshot: www.ueno.co)
Harald Thorleifssons Graustufen-Wireframes sehen so gut aus wie fertige Seiten gewöhnlicher Designer. (Screenshot: www.ueno.co)

Es ist ein zuverlässiger und einfacher Weg, Apps clean und simpel zu halten. Zu viele Farben zu verwenden, kann leicht dazu führen, solch ein Design zu vermasseln. Schwarz-Weiß zwingt dich dazu, dich zuerst auf Dinge wie Abstände, Größen und Layout zu konzentrieren. Und das ist die Hauptsache bei cleanem und simplem Design.

Edle Graustufen bei Uber und Squarespace. (Screenshots: Uber und Squarespace)
Edle Graustufen bei Uber und Squarespace. (Screenshots: Uber und Squarespace)

Es gibt ein paar Fälle, in denen Schwarzweiß nicht so sinnvoll ist. Designs, die eine starke, spezifische Haltung haben – sportlich, schrill, comicartig etc. – brauchen einen Designer, der sehr gut mit Farben umgehen kann. Aber die meisten Apps haben keine spezielle Haltung außer clean und simpel. Diejenigen, die eine haben, sind zugegebenermaßen sehr viel schwieriger zu gestalten.

Schrille und lebhafte Designs von Julien Renvoye (links) und Cosmin Capitanu (rechts). Schwieriger als es aussieht.
Schrille und lebhafte Designs von Julien Renvoye (links) und Cosmin Capitanu (rechts). Schwieriger als es aussieht. (Screenshots: Julien Renvoye und Cosmin Capitanu)

Allen anderen bleibt Schwarz-Weiß.

Wie man Farbe hinzufügt

Am einfachsten ist es, nur eine Farbe hinzuzufügen.

Die Website von Uber verwendet auf der Startseite neben Schwarz-Weiß nur einen Farbe, (Screenshot: Uber)
Feines UI-Design: Die Website von Uber verwendet auf der Startseite neben Schwarz-Weiß nur einen Farbe.

Das zieht den Blick einfach und sehr effektiv an. Du kannst auch einen Schritt weitergehen: Graustufen + zwei Farben oder Graustufen + viele Farben eines Farbtons.

Farbcodes im Einsatz – halt, stopp: Was ist ein Farbton?

Das Web spricht über Farben im Großen und Ganzen in RGB Hex-Zahlen. Ich empfehle, das zu ignorieren. RGB ist kein gutes Framework, um Designs einzufärben. Viel besser geeignet ist HSB (was fast identisch mit HSV oder HSL ist).

HSB ist besser als RGB, weil es zu unserer natürlichen Auffassung von Farben passt, und man kann voraussagen, wie eine Änderung der HSB-Werte sich auf die Farbe, die man gerade sieht, auswirken wird. Wenn das Neuland für dich ist – hier gibt es eine gute HSB-Farbfibel.

Mono-Farbton-Gold-Schema von Smashing Magazine (Grafik: Smashing Magazine)
Mono-Farbton-Gold-Schema von Smashing Magazine (Grafik: Smashing Magazine)
Mono-Farbton-Blau-Schema von Smashing Magazine (Grafik: Smashing Magazine)
Mono-Farbton-Blau-Schema von Smashing Magazine (Grafik: Smashing Magazine)

Wenn man die Sättigung und Helligkeit eines einzelnen Farbtons verändert, lassen sich viele Farben generieren – Tiefen, Höhen, Hintergründe, Akzente, Eye-Catcher – aber es wird nicht zu anstrengend fürs Auge. Farbvarianten von einem oder zwei Grund-Farbtönen zu verwenden, ist der zuverlässigste Weg, um Elemente hervorzuheben oder zu neutralisieren, ohne das Design zu versauen.

Countdown-Timer von Kerem Suer (Screenshot: Kerem Suer)
Countdown-Timer von Kerem Suer (Foto: Kerem Suer)

Noch ein paar Anmerkungen zu Farben

Farben sind der komplizierteste Bereich des Visual Designs. Und obwohl eine Menge Zeug über Farben stumpfsinnig und nicht zielführend für die Vollendung des Designs, an dem du sitzt, ist, habe ich ein paar gute Sachen dazu gefunden:

Eine kleine Werkzeugkiste:

  • Never Use Black (Ian Storm Taylor). Er spricht darüber, dass völlig graue Flächen in der realen Welt nie vorkommen, und wie das Sättigen deiner grauen Schattierungen – besonders der dunklen Schattierungen – deinen Designs einen visuellen Reichtum verleiht. Außerdem imitieren gesättigte Grautöne eher die reale Welt.
  • Adobe Color CC: Ein tolles Werkzeug zum Finden, Bearbeiten und Erstellen von Farbschemata.
  • Dribbble search-by-color. Noch ein toller Weg, um herauszufinden, was zu einer bestimmten Farbe passt. Wenn du dich bereits für eine Farbe entschieden hast, kannst du hier sehen, was die weltbesten Designer damit machen oder womit sie sie kombinieren.

Regel 3: Verdopple deinen Weißraum

Um eine Bedienoberfläche designermäßig aussehen zu lassen, gib ihr viel Luft zum Atmen.

In Regel zwei habe ich gesagt, dass Schwarzweiß Designer dazu zwingt, über Abstände und Layout nachzudenken, bevor sie Farbe ins Spiel bringen, und warum das wichtig ist. Nun, jetzt ist es Zeit, über Abstände und Layout zu sprechen.

Wenn du HTML von Grund auf programmierst, dann weißt du vielleicht, wie HTML per Default auf der Seite ausgegeben wird:

Nacktes HTML sieht unter ästhetischen Gesichtspunkten furchtbar aus. (Screenshot: Erik D. Kennedy)
Nacktes HTML sieht unter ästhetischen Gesichtspunkten furchtbar aus. (Screenshot: Erik D. Kennedy)

Im Grunde quetscht sich alles gegen den oberen Teil der Seite. Die Schrift ist klein, es gibt überhaupt keinen Abstand zwischen den Zeilen. Ein klein wenig Platz gibt es zwischen den Absätzen, aber nicht viel. Die Absätze strecken sich über die ganze Breite, egal ob das 100 oder 10.000 Pixel sind.

Unter ästhetischen Gesichtspunkten ist das furchtbar. Wenn du ein UI gestalten willst, das designt aussieht, musst du viel Luft zum Atmen hinzufügen. Manchmal absurd viel.

Weißraum, HTML und CSS

Wenn du wie ich daran gewöhnt bist, mit CSS zu formatieren, wo null Weißraum voreingestellt ist, wird es Zeit, diese schlechte Angewohnheit loszuwerden. Fang an, Weißraum als den Ausgangszustand zu sehen – alles beginnt mit einer weißen Fläche, bis du mit einem ersten Seitenelement reinplatzt.

Klingt nach Zen? Ich denke, das gehört zu den Gründen, warum Leute immer noch Skizzen von so etwas machen. Mit einer leeren Seite zu starten heißt mit nichts als Weißraum. Gleich am Anfang denkt man über Ränder und Abstände nach. Alles, was man zeichnet, ist eine bewusste Entscheidung für die Entfernung von Weißraum.

Mit ein paar Zeilen ungestyltem HTML zu beginnen heißt, dass man mit dem Inhalt anfängt. Zwischenräume sind zweitrangig. Das muss man sich klar machen.

In Piotr Kwiatkowskis Studie für einen Music-Player gibt es viel Luft zum Atmen. (Screenshot: Piotr Kwiatkowski)
In Piotr Kwiatkowskis Studie für einen Music-Player gibt es viel Luft zum Atmen. (Screenshot: Piotr Kwiatkowski)
Die linke Sidebar.
Die linke Sidebar.

Hier zur Veranschaulichung ein Music-Player von Piotr Kwiatkowski. Achte mal auf die Navigationsleiste auf der linken Seite.

Der vertikale Abstand zwischen den Navigationselementen ist doppelt so hoch wie der Text an sich. Du siehst hier eine 12-Pixel-Font mit genau der gleichen Menge Abstand darüber und darunter.

Oder schau dir die Listenüberschriften an. Da sind 15 Pixel Abstand zwischen dem Wort „PLAYLISTS“ und dem dazugehörigen Unterstrich. Das ist mehr als die Versalhöhe der eigentlichen Schrift! Und wir reden hier noch gar nicht von den 25 Pixeln Abstand zwischen den Listen.

 

7rules_musicplayer-rechts
Die rechte Sidebar und Top-Navigation.

Die rechte Sidebar lässt viel Platz zwischen den Textzeilen und dem Rest. Noch mehr Platz befindet sich in der Top-Navigation. Der Text „Search all music“ hat 20 Prozent der Höhe der Leiste. Die Icons sind ähnlich proportioniert.

Piotr hat hier bewusst zusätzlichen Abstand eingefügt, und das zahlt sich aus. Obwohl das hier nur ein Konzept ist, das er (meines Wissens nach) aus Spaß zusammengebastelt hat, ist es schön genug, um es mit den besten Musikplayer-Oberflächen aufzunehmen.

Okay, großzügige Abstände können die miesesten Bedienoberflächen einladend und einfach aussehen lassen – wie zum Beispiel Foren.

Foren-Design von Matt Sisto (Screenshot: Matt Sisto)
Foren-Design von Matt Sisto (Screenshot: Matt Sisto)

Oder Wikipedia.

Wikipedia-Desgin-Konzept von Aurélien Salomon. (Screenshot: Aurélien Salomon)
Wikipedia-Desgin-Konzept von Aurélien Salomon. (Screenshot: Aurélien Salomon)

Man findet haufenweise Argumente dafür, dass das Wikipedia-Redesign Grundfunktionen für die Benutzung der Seite weglässt. Aber es ist definitiv gut, um daraus zu lernen!

Lass Abstand zwischen deinen Zeilen.

Lass Abstand zwischen deinen Elementen.

Lass Abstand zwischen deinen Elementgruppen.

Analysiere, was funktioniert.

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Erik D. Kennedy
„I fucked up“: Google+-Chefdesigner schimpft öffentlich über das gescheiterte Netzwerk http://t3n.de/news/fucked-up-google-chefdesigner-582040/ 2014-12-01T05:41:07Z
User Experience-Designer Chris Messina hat das Social Network vor mehr als einem Jahr verlassen. Jetzt beschreibt er in einem ausführlichen Blogpost, warum Google+ nicht funktioniert.

User Experience-Designer Chris Messina hat das vor mehr als einem Jahr verlassen. Jetzt beschreibt er in einem ausführlichen Blogpost, warum nicht funktioniert.

Social-Networking-Ära vorbei

Das Thanksgiving-Wochenende hat Chris Messina zur Selbstreflexion genutzt: Auf Medium erklärt der UX-Designer der Plattform in einer umfangreichen Analyse, wieso Googles Social-Media-Versuch Google+ nicht gelungen ist. Seine einleitenden Worte: „I fucked up“ – „Ich hab's vermasselt“. Mit diesen Worten übt der User-Experience-Verantwortliche Selbstkritik, weil er auf Twitter fälschlicherweise vorwarf, dass Google+ ein Feature entfernt habe.

Dann holt Messina, der 2010 zu Google kam und vor mehr als einem Jahr den Konzern verlassen hat, weit aus und versucht, das Scheitern der Plattform zu erklären. Die goldene Ära des Social Networking sei schon vorbei. Apps, die uns in den nächsten Jahren bewegen, hätten noch nicht einmal die Oberfläche erreicht. Stattdessen haben soziale Medien derzeit mit der Definition von Privatsphäre zu kämpfen.

Google+ eine „Geisterstadt“? (Screenshot: plus.google.com)
Google ist bei seiner Privacy-Strategie verwirrt, kritisiert der ehemalige User-Experience-Chef.(Screenshot: plus.google.com)

Google+ irrelevant

Facebook und Apple arbeiten laut dem ehemaligen Chef-Designer ständig daran, die Privacy-Richtlinien zu verbessern und klarer zu kommunizieren. „Google hingegen wirkt in diesem Bereich uneinig und verwirrt“, kritisiert Messina. Nutzer wüssten nicht, was mit ihren Daten auf Google+ passiert: „Vielleicht ist das absichtlich, aber warum, das verstehe ich nicht.“

Der Suchmaschinenkonzern habe sich bei seiner Strategie an die Social-Networking-Trends der vergangenen Ära gehalten, wirft der User-Experience-Designer seinem Ex-Arbeitgeber vor. „Ich bin enttäuscht, weil ich Besseres von Google erwarte.“ Google+ sei jedoch irrelevant geworden und könne nicht mit Facebook mithalten. Seine Empfehlung: Google sollte das Plus fallen lassen und so tun, als hätte Google+ nie existiert.

via medium.com

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