Design | t3n News News, Infos, Tipps und aktuelle Artikel zu Design 2015-01-27T10:00:14Z t3n Redaktion http://t3n.de/tag/design Viral-Hit: Das steckt hinter dem genialen Sonos-Logo http://t3n.de/news/sonos-logo-590458/ 2015-01-27T10:00:14Z
Wenn ein Firmenlogo zum unfreiwilligen viralen Hit avanciert, muss es etwas Außergewöhnliches an sich haben: So geschehen bei Sonos, die eigentlich nur einen neuen Markenauftritt hinlegen wollten.

Wenn ein Firmenlogo zum unfreiwilligen viralen Hit avanciert, muss es etwas Außergewöhnliches an sich haben: So geschehen bei Sonos, die eigentlich nur einen neuen Markenauftritt hinlegen wollten.

Sonos: Dieses Logo fasziniert das Netz

Selten dürfte das Scrollen so viel Freude bereitet haben wie dieser Tage im Falle von Sonos: Der bekannte Hersteller von Musik-Streaming-Lösungen hat sein neues Logo lanciert. Was auf den ersten Blick nicht sonderlich spannend klingt, verblüfft spätestens auf den Zweiten. Das Logo wurde optisch so gestaltet, als würde der Schriftzug aus der Mitte heraus pulsieren und Schallwellen aussenden.

Das neue Sonos-Logo wurde mit einer optischen Täuschung zum ungeplanten Viral-Stunt. (Grafik: Sonos)
Das neue Sonos-Logo wurde mit einer optischen Täuschung zum ungeplanten Viral-Stunt. (Grafik: Sonos)

Was zu Sonos passt wie die Faust aufs Auge ist Ergebnis des sogenannten Moiré-Effekts, einer optischen Täuschung, die sich aus der Überlagerung von Mustern, Rastern und feinen Linien ergibt. Bei Nutzern im Netz kam das gut an: Ein Tweet des US-amerikanischen IT-Portals The Verge reichte aus, um das neue Logo von Sonos zum viralen Hit zu machen.

Designer wollen Scroll-Effekt zufällig entdeckt haben

Allein: Gerechnet haben offenbar weder Sonos noch die Urheber des Logos mit diesem Erfolg, wie aus einem jetzt veröffentlichten Bericht von Fast Company hervorgeht. „Wir haben nicht damit gerechnet, dass den Menschen das so prominent auffällt“, sagt Webb Blevins, Vice President of Brand Design bei Sonos. Man habe ursprünglich ein Logo entwerfen wollen, „das sich bewegt, etwas ausstrahlt, etwas dynamisches hat“, ergänzt Laura Stein, Creative Director bei der beauftragen Agentur um Bruce Mau Design. Obwohl es sich um eine optische Täuschung handelt, seien bei der Gestaltung zunächst keinerlei wissenschaftliche Kriterien berücksichtigt worden.

Laut Stein hätten Designer den Effekt vielmehr zufällig im laufenden Entwicklungsprozess entdeckt, als sie über das Logo scrollten. Erst anschließend sollen die Designer den Effekt händisch verstärkt haben. Sonos dürfte der Viral-Stunt in jedem Fall recht sein: Das neue Logo ist nur ein Teil einer groß angelegten Rebranding-Offensive, die das Unternehmen wieder zu frischem Glanz verhelfen soll.

via www.fastcodesign.com

]]>
Daniel Hüfner
WordPress-Themes direkt im Frontend anpassen: Das kann CSS Hero http://t3n.de/news/wordpress-css-hero-589322/ 2015-01-25T15:51:42Z
Mit der WordPress-Erweiterung CSS Hero passt ihr das Aussehen eines Themes über eine grafische Oberfläche direkt im Frontend an. Wir haben uns das Tool für euch angeschaut.

Mit der WordPress-Erweiterung CSS Hero passt ihr das Aussehen eines Themes über eine grafische Oberfläche direkt im Frontend an. Wir haben uns das Tool für euch angeschaut.

Mit CSS Hero könnt ihr das Aussehen von WordPress-Themes mithilfe einem WYSIWYG-Interface anpassen. (Screenshot: CSS Hero)
Mit CSS Hero könnt ihr das Aussehen von WordPress-Themes mithilfe einem WYSIWYG-Interface anpassen. (Screenshot: CSS Hero)

CSS Hero: Ohne Code das Aussehen von WordPress-Themes anpassen

WordPress ist das wohl beliebteste Content-Management-System der Welt. Am einfachsten kommen Nutzer mit einem vorgefertigten Theme zu einer WordPress-Seite. Doch gerade bei einem der unzähligen kostenlosen WordPress-Themes besteht natürlich schnell die Gefahr, dass eure Seite wie die von dutzenden anderen aussieht. Natürlich könntet ihr das Theme selbst anpassen, dann müsstet ihr euch aber wiederum mit CSS auskennen. Eine Lösung für dieses Problem soll euch CSS Hero liefern.

Über einen kleinen Button im Frontend könnt ihr damit bequem und ohne eine Zeile Code anschauen zu müssen die Elemente eurer Seite bearbeiten. Dazu wählt ihr das entsprechende Element einfach per Mausklick aus. Anschließend könnt ihr Farbe, Größe, Abstände und mehr direkt verändern. Das Ergebnis wird euch ebenfalls automatisch angezeigt. Außerdem habt ihr die Möglichkeit, euch eure Seite in einer entsprechenden Ansicht für Tablets oder Smartphones anzuzeigen. So könnt ihr direkt testen, ob die Änderungen auch außerhalb vom Desktop noch gut aussehen.

WordPress: CSS Hero funktioniert nicht mit allen Themes und Erweiterungen

Leider funktioniert CSS Hero nicht mit jedem Theme. Eine Liste aller unterstützten Themes findet ihr auf Herstellerseite.Seit Version 1.2 gibt es allerdings auch den sogenannten „Rocket Mode“. Mit ihm sollt ihr theoretisch dazu in der Lage sein, auch Themes zu bearbeiten, die nicht offiziell unterstützt werden. Auch mit anderen WordPress-Erweiterungen kann es Probleme geben. Im Zweifelsfall solltet ihr auch hier überprüfen, ob eine für euch notwendige WordPress-Erweiterung unterstützt wird. Entwickler finden auf der CSS-Hero-Seite eine Erklärung, wie sie ihr Theme oder ihre Erweiterung anpassen müssen, um es in Kombination mit dem Tool verwenden zu können.

Wer CSS Hero auf einer Website einsetzen möchte, der zahlt dafür derzeit einmalig 14 US-Dollar. Wer die Erweiterung auf bis zu fünf Websites nutzen möchte, muss dafür 29 US-Dollar bezahlen. Für 79 US-Dollar könnt ihr CSS Hero sogar auf bis zu 999 Seiten einsetzen. Übrigens benötigt ihr CSS Hero nicht mehr zwingend, wenn ihr mit eurem Layout zufrieden seid. Die dazugehörigen CSS-Dateien könnt ihr einfach exportieren und auch ohne die Erweiterung nutzen.

via www.producthunt.com

]]>
Kim Rixecker
10 schicke HTML- und WordPress-Templates für deine Webvisitenkarte http://t3n.de/news/webvisitenkarte-template-html-589561/ 2015-01-22T07:30:17Z
Nicht jeder braucht gleich eine eigene umfangreiche Homepage. Den meisten fehlen dafür auch schlicht die Inhalte. Aber für viele Webworker empfiehlt es sich zumindest eine Webvisitenkarte …

Nicht jeder braucht gleich eine eigene umfangreiche Homepage. Den meisten fehlen dafür auch schlicht die Inhalte. Aber für viele Webworker empfiehlt es sich zumindest eine Webvisitenkarte anzulegen, die die elementaren Informationen, wie Kontaktdaten, Foto und Tätigkeitsfeld beinhaltet. Dafür gibt es haufenweise Templates, die unkompliziert angepasst und eingerichtet werden können. Zehn davon stellen wir hier vor:

1.FlexyVcard-Responsive Vcard Template

templates wordpress webvisitenkarte

Das Responsive-Design-Template ist kompatibel mit Bootstrap und hat Anpassungsmöglichkeiten bei der Farbauswahl, den Hintergründen, Seitenanimationen und beim Seitenaufbau. Es beinhaltet einen Blogbereich, unterstützt Google Fonts und hat ein integriertes Kontaktformular.

Mehr Informationen / Demo

2. VR Responsive-vCard-Template

wordpress templates themes webvisitenkarte vcard

Bei diesen Template im Responsive Design könnt ihr zwischen sechs Farbschemen, zwölf Hintergründen und über 60 Seitenanimationen wählen.

Mehr Informationen / Demo

3. Who I am – Webvisitenkarte/ Portfolio

wordpress template webvisistenkarte vcard template wordpress vcard webvisistenkarte

Das „Who I Am“-Theme ist sowohl als WordPress-Theme, als auch als HTML-Version erhältlich. Der Onepager eignet sich nicht nur als reduzierte vCard, sondern auch als umfangreiche Portfolioseite, wenn man alle Features ausnutzt. Es gibt eine helle und eine dunkle Variante.

Mehr Informationen / Demo

4. Premium Layers: HTML-vCard & Resume Template

wordpress theme template vcard webvisistenkarte

Das Template ist etwas reduzierter, hat aber alles, was man von einer Webvisitenkarte erwartet. Es besteht aus acht Masken, auf denen du Farben und Schriften anpassen kannst. Es ist ebenfalls responsiv. Das Template unterstützt Font Awesome Icons.

Mehr Informationen / Demo

5. The Compass – klassische Webvisitenkarte

vcard templates webvisistenkarten wordpress html wordpress templates vcard webvisitenkarten

Compass ist eine sehr reduzierte Webvisitenkarte (WordPress/ HTML), ebenfalls ein Onepager. Es stehen 3 Farbsets zur Verfügung und zwei Optionen für Animationen. Font Awesome Ions und Google Fonts werden unterstützt.

Mehr Informationen / Demo

6. Libero – Responsive vCard Portfolio Template

wordpress html template vcard webvisistenkarte

Libero ist ein One-Page-HTML-Template. 20 Farbanpassungen sind möglich und du kannst zwischen einer hellen und einer dunklen Version wählen. Schöne Features: Skills-Box und Google-Maps-Addon für die Kontaktinformationen.

Mehr Informationen/ Demo

7. Motion

Webvisitenkarte vcard theme html wordpress template

Motion ist ein responsives HTML5-/CSS3-Template. Gewählt werden kann zwischen 10 Farben, mit denen Links, Buttons und das Menü angepasst werden kann. Es stehen acht Hintergründe zur Auswahl.

Mehr Informationen/ Demo

 8. Oresume wordpress html templates vcard webvisitenkarte

Oresum ist ein One-Page-HTML-Template mit 5 Starter-Skins und umfangreichen Anpassungsmöglichkeiten. Schöne Features für den Lebenslauf in Form von einer Timeline. Zwei Darstellungsmöglichkeiten für Skills.

Mehr Informationen/ Demo

9. Bookcard (WordPress/ HTML)

Bildschirmfoto 2015-01-21 um 13.03.38Bildschirmfoto 2015-01-21 um 13.04.01

Bookcard gibt es sowohl als Responsive-WordPress- als auch als HTML-Template. Es besteht aus der Coverseite und drei scrollbaren Seiten im inneren des Folders. Anpassungsmöglichkeiten gibt es bei der Farbe, beim Style und für die Animationen. Zudem ist es mit 9 Dollar relativ günstig.

Mehr Informationen/ Demo

10. Webvisistenkarte „Maria“ – Klassisch und kostenlos

wordpress html theme template vcard webvisitenkarte

 

Einfache Webvisitenkarte mit Platz für Informationen, CV, Kontaktdaten und eigenem Kontaktformular. Enthalten sind Mail-Skript und Stylesheets mit verschiedenen Farbvariationen, die beliebig gewechselt werden können.

Mehr Informationen/ Demo

 

Eine Webvisitenkarte reicht euch nicht? Dann ist vielleicht hier was für euch dabei: 10 WordPress-Themes für dein Portfolio.

Du möchtest so wenig wie möglich selbst machen? Dann lies auch: Drei Dienste für schicke und simple Web-Visitenkarten.

 

]]>
Melanie Petersen
Designinspiration: Diese Dribbble-Shots müsst ihr gesehen haben [Bildergalerie] http://t3n.de/news/dribbble-designinspiration-589189/ 2015-01-20T07:00:12Z
Farbe, Form, Muster, Anordnung, Raster, Kontrast. Wenn es um ästhetisches Design geht, muss der Designer wissen, welche Regeln es gibt und wie sie gebrochen werden können. In dieser Serie wollen …

Farbe, Form, Muster, Anordnung, Raster, Kontrast. Wenn es um ästhetisches geht, muss der Designer wissen, welche Regeln es gibt und wie sie gebrochen werden können. In dieser Serie wollen wir euch die besten Dribbble-Shots des Monats zeigen: Vielleicht ist ja die eine oder andere Inspiration für euch dabei!

Die Inspiration ist ein solcher Besucher, der nicht immer bei der ersten Einladung erscheint.Peter Iljitsch Tschaikowsky

Obwohl Webdesignern und Grafikern ein kreativer Ruf vorauseilt, schnell entwickelt sich ein Trott: Zwischen WordPress-Themes und Bootstrap-Gittern. Wir wollen euch helfen diesem Alltag zu entfliehen und zeigen euch regelmäßig eine Auswahl an ansprechenden Designs, die ihr vielleicht nicht kennt – quasi ein Kickstarter für eure eigene Kreativität.

Dribbble ist eine – ehemals exklusive – Designer-Community. Darin werden vor allem Stücke gezeigt, die sich noch in Bearbeitung befinden. Somit können sich Designer frühzeitig Meinungen von etablierten Experten einholen. Deine Designs zeigst du als sogenannte „Shots“, im Format 400 zu 300 Pixeln.

Woher holt ihr euch eure Inspiration?

]]>
Mario Janschitz
Die Geschichte der Typografie: 5-minütiger Animationsfilm erklärt Old Style, Transitional und Modern http://t3n.de/news/geschichte-der-typografie-animationsfilm-589093/ 2015-01-19T07:30:01Z
Was zeichnet eigentlich Old Style, Transitional und Modern aus? Eine Animation von Ben Barret-Forrest erklärt die Geschichte der Typografie in 2.400 Bildern.

Was zeichnet eigentlich Old Style, Transitional und Modern aus? Eine Animation von Ben Barret-Forrest erklärt die Geschichte der in 2.400 Bildern.

„Die erste Schrift, die für den Buchdruck kultiviert wurde, hieß Blackletter.“

Eine gute Typografie ist ein wesentlicher Bestandteil für gutes Design. Und sie wird von uns allen geschätzt. Doch die wenigsten Menschen kennen die Geschichte hinter der Kunst, was schade ist, denn mit dem Wissen kann man die Disziplin doch um einiges besser verstehen. Buchstaben waren beispielsweise nicht immer so, wie sie heute aussehen. Die Ursprünge der Typografie gehen auf Johannes Gutenberg zurück. In ihrer Ursprungsform beschäftigte sie sich in den vergangenen Jahrhunderten mit der Kunst der Gestaltung von Druck-Erzeugnissen nach ästhetischen Gesichtspunkten. Die erste Schrift, die von Gutenberg für den Buchdruck kultiviert wurde, hieß Blackletter. Erst viel später, mit dem Siegeszug des Computers, rückte auch der sogenannte „Pixel Type“ für nicht gedruckte Erzeugnisse in den Fokus. Dazwischen lagen hunderte Jahre, die jeweils ihre ganz eigenen stilistischen Charakterzüge aufweisen. Seid ihr darüber im Bilde?

Die Geschichte der Typografie: Was ist der Unterschied zwischen Old Stlye, Transitional und Modern?

Die Geschichte der Typografie erklärt die Unterschied zwischen Old Stlye, Transitional und Modern. (Screenshot: YouTube)
Die Geschichte der Typografie erklärt die Unterschiede zwischen Old Style, Transitional und Modern. (Screenshot: YouTube)

Falls nicht, möchte euch der Illustrator Ben Barret-Forrest gerne einen Crash-Kurs in der Geschichte der Typografie geben. In einer wunderbaren Animation, die er bereits vor einigen Monaten online stellte, zeigt er euch den Wandel der Typografie von den Anfängen bis in die Neuzeit. Er erklärt unter anderem die Merkmale der drei großen Hauptkategorien, nach denen unterschieden wird: Old Stlye, Transitional und Modern. Dafür hat Barret-Forrest mehr als 290 Buchstaben ausgeschnitten und über 2.400 Bilder geschossen, die schlussendlich zu diesem 5-minütigen YouTube-Clip geführt haben. Sehr sehenswert, wie wir finden.

via theultralinx.com

]]>
Andreas Weck
Wikipedia-App: Schickes neues Design stellt Fotos in den Fokus http://t3n.de/news/wikipedia-app-update-588780/ 2015-01-16T10:36:45Z
Die Wikimedia Foundation hat der mobilen Wikipedia-App ein schickes Design-Update verpasst. Ein besonderer Fokus liegt auf Fotos.

Die Wikimedia Foundation hat der mobilen Wikipedia-App ein schickes Design-Update verpasst. Ein besonderer Fokus liegt auf Fotos.

Die mobile Wikipedia-App kommt in einem neuen . Im Mittelpunkt stehen nun Bilder, die den Artikel illustrieren sollen. Zudem wurde an einer besseren Lesbarkeit und der Suchfunktion gearbeitet. Das Design-Update wird zuerst Android-Nutzern zur Verfügung stehen, das Update für die iOS-App soll folgen.

Wikipedia-App: Neues Design setzt auf schicke Fotos

Wikipedia-App für Android in neuem Design. (Screenshot: Wikimedia Foundation)
Wikipedia-App für Android in neuem Design. (Screenshot: Wikimedia)

Die neu designte Wikipedia-App soll den Leser animieren, mehr zu erfahren. Das beginnt bei dem prominent am Beginn des Artikels erscheinenden Fotos mit inhaltlichem Bezug zum Artikel. Dieses Foto lässt sich per Fingertipp vergrößern, streicht man nach links oder rechts gelangt man zum nächsten oder vorherigen Bild.

Darüber hinaus wird es am Ende des Artikels Vorschläge für inhaltlich ähnliche Artikel geben, so wie das bei Blogs und Nachrichtenwebsites bereits üblich ist. Zu den optimierten Suchfunktionalitäten gehören eine besser sichtbare Suchleiste sowie eine Liste der kürzlich gesuchten Themen.

Wikipedia versammelt nach eigenen Angaben derzeit 33,5 Millionen Artikel in 287 Sprachen auf seiner Plattform. Die neu designte Wikipedia-App soll dazu beitragen, mit der Fülle an Informationen besser umgehen zu können. Im August 2014 war bereits die Wikipedia-App für iOS einem umfangreichen Redesign unterzogen worden. Zu den neuen Features gehört die Möglichkeit, Artikel zu editieren und Texte für späteres Lesen im Offline-Modus zu speichern.

via techcrunch.com

]]>
Jörn Brien
Style-Guides in Windeseile erstellen: Markly unterstützt Designer http://t3n.de/news/sketch-photoshop-markly-design-specs-588596/ 2015-01-15T09:39:49Z
Markly generiert automatisch Design-Specs aus euren Photoshop- oder Sketch-Entwürfen. Wir verraten euch, was die App alles kann.

Markly generiert automatisch Design-Specs aus euren Photoshop- oder Sketch-Entwürfen. Wir verraten euch, was die alles kann.

Markly: Design-Specs für Photoshop- und Sketch-Entwürfe

Für Photoshop und Sketch: Markly hilft beim Erstellen von Design-Specs. (Grafik: Markly)
Für Photoshop und Sketch: Markly hilft beim Erstellen von Design-Specs. (Grafik: Markly)

Für das Erstellen von Design-Specs kann viel Zeit draufgehen. Eine neue App namens Markly will den Prozess jetzt deutlich beschleunigen. Eure Entwürfe könnt ihr direkt von Photoshop oder Sketch importieren. Anschließend reicht beispielsweise ein einziger Klick auf ein Element, um seine Dimensionen zu vermerken.

Abstände lassen sich bequem per Drag-and-Drop einfügen. Per Doppelklick auf ein Textelement könnt ihr einen genutzten Font und die Schriftfarbe vermerken. Das Aussehen der Linien und anderen Elemente, mit denen beispielsweise Abstände gemessen werden, könnt ihr in Markly jederzeit ohne viel Aufwand ändern.

Markly funktioniert auf Macs und Windows-Rechnern

Wenn ihr Änderungen an eurem vornehmt, also beispielsweise die Farbe, Position oder Größe eines Elements verändert, passt auch Markly die entsprechenden Angaben automatisch an. Die Photoshop-Version von Markly existiert in Versionen für OS X und Windows.

Markly ist ein praktisches Tool, das die Erstellung von Design-Specs und UI-Style-Guides deutlich vereinfachen kann. Eine Einzellizenz der Photoshop-Version kostet 39 US-Dollar. Die Sketch-Variante erscheint leider erst am 31. Januar 2015. Ihr könnt sie aber schon jetzt für den vergünstigten Preis von 29 US-Dollar vorbestellen. Bezahlen könnt ihr die Software per PayPal oder mit einer Kreditkarte.

via www.producthunt.com

]]>
Kim Rixecker
Ein lohnender Klick: So sorgt ihr für mehr User-Engagement http://t3n.de/news/ux-user-experience-user-engagement-588118/ 2015-01-12T13:04:03Z
Mit kleinen spaßigen Elementen könnt ihr das User-Engagement erhöhen. Wie das funktioniert und worauf ihr dabei achten solltet, verraten wir euch in diesem Artikel.

Mit kleinen spaßigen Elementen könnt ihr das User-Engagement erhöhen. Wie das funktioniert und worauf ihr dabei achten solltet, verraten wir euch in diesem Artikel.

UX: So funktioniert unser Belohnungssystem

Im November 2014 beschwerte sich Christian Heilmann in Form eines Blogbeitrags über ein weitverbreitetes Problem im Interface-Design: Viel zu oft, so Heilmann, wird eine eigentliche klare Handlungsabsicht von einer App ignoriert. Während die Macher der App damit natürlich ein Ziel verfolgen, ärgert das den Nutzer. Und da betrifft nicht nur den Mozilla-Evangelist. Tatsächlich sind wir alle darauf programmiert. Der Grund dafür liegt in dem Neurotransmitter Dopamin.

Das menschliche Gehirn versucht immer, Muster in der Welt um uns herum zu erkennen. Egal ob in der Liebe, beim Glücksspiel oder bei der Verwendung einer App: Entdecken wir ein uns bekanntes Muster, schüttet unser Gehirn Dopamin aus. Wenn wir uns entsprechend dem Muster verhalten und damit erfolgreich sind, wird eine weitere Dosis ausgeschüttet. Wenn wir aber im Gegenzug auf ein vermeintliches bekanntes Muster stoßen, unser angelernte Reaktion darauf jedoch nicht das zu erwartende Ergebnis bringt, sind wir verwirrt und fühlen uns schlimmstenfalls sogar beklommen.

Zunächst lässt sich daraus natürlich ableiten, dass ein bekanntes UI-Element, wie ein Subscribe-Button oder eine Bildergalerie, so funktionieren sollte, wie wir es von ihm erwarten. Übermäßige Experimentierfreude kann hier leicht dazu führen, dass eure Nutzer verwirrt sind, und sich schlimmstenfalls sogar von eurer App abwenden. Das bedeutet allerdings nicht, dass ihr nicht für Überraschungen sorgen könnt. Im Gegenteil!

UX-Design: Wie Überraschungen zum Motivator werden

Wenn uns eine Website oder App an einer unerwarteten Stelle belohnt, wird sich das unser Gehirn merken und versuchen, weitere Überraschungen aufzuspüren. So kann auch das User-Engagement erhöht werden. Allerdings gilt auch hier: Mehr ist nicht unbedingt besser. Sind die Überraschungen zu aufdringlich, stellt sich schnell ein gegenteiliges Gefühl ein, und wir sind tendenziell eher genervt.

In einem sehr lesenswerten Beitrag für das US-amerikanische UX-Magazine zu diesem Thema hat der Designer Husam Machlovi einige gute Beispiele für die Integration solcher Überraschungen in das UI-Design von Web-Apps gesammelt. Darin erwähnt er beispielsweise den E-Mail-Dienstleister MailChimp, der seine Nutzer bei der Benutzung des Tools immer wieder mit kleinen humoristischen Elementen überrascht. Bei der Einrichtung einer E-Mail-Kampagne bekommt ihr lustige animierte GIFs angezeigt. Habt ihr eure Kampagne terminiert, werdet ihr sogar mit einem virtuellen High-Five belohnt.

Ein weiteres Beispiel wäre der Lade-Screen von Slack. Der Unternehms-Messenger zeigt hier immer wieder interessante oder lustige Texte an. Durch das Lesen der Texte erscheint uns der Ladevorgang nicht nur kürzer, sondern wir haben auch eine positive Assoziation mit dem Dienst. Da niemand gerne wartet, könntet auch ihr euch überlegen, wie ihr Nutzern diese Zeit mit einer kleinen Überraschung versüßen könntet. Auch wenn ihr von gewohnten Pfaden abweichen wollt oder müsst, kann es hilfreich sein, neue Belohnungen zu schaffen, um Nutzer leichter an ein bisher unbekanntes Muster zu gewöhnen.

UX-Design: Slack macht Ladezeiten dank kleiner Sprüche erträglicher. (Screenshot: Slack)
UX-Design: Slack macht Ladezeiten dank kleiner Sprüche erträglicher. (Screenshot: Slack)

User-Engagement: Wie ihr eure Nutzer positiv überraschen könntet

Neben dem erwähnten Lade-Screen eignen sich auch 404-Seiten für eine kleine Überraschung. In einer idealen Welt sollte eure Besucher die zwar eigentlich nie zu Gesicht bekommen, aber hin und wieder dürfte es unvermeidbar sein. Wenn eure Besucher schon nicht finden, wonach sie suchen, könntet ihr ihren Frust wenigstens mit einer kleinen „Belohnung“ abfedern. Einige sehr schöne Beispiele dafür findet ihr in unserem Artikel „‚404 Error! Wanna play Pacman instead?‘ – 50 Beispiele für kreative Fehlerseiten“.

Darüber hinaus solltet ihr einen genauen Blick auf eure Website oder App werfen. Gibt es Momente in den es möglich und sinnvoll wäre, das Belohnungszentrum eurer Besucher zusätzlich zu stimulieren. Dabei sollte euer eigenes Branding als Grundlage dienen. Außerdem dürft ihr nicht vergessen, dass die Belohnungen durch Handlungen eurer Nutzer ausgelöst werden müssen und der Bedienung eurer Seite oder App niemals im Weg stehen sollten.

Wer sich eingehender mit dem Thema Nutzungserlebnis beschäftigen möchte, der sollte einen Blick auf unseren Artikel „UX: Die 12 besten Blogs, die in jeden Feed gehören“ werfen.

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Kim Rixecker
Kenne deine Formeln – Mit Geometrie zum perfekten UI-Design http://t3n.de/news/perfektes-ui-design-587154/ 2015-01-06T13:33:07Z
Einfache Geometrie gehört zum Handwerkszeug eines guten Designers, behauptet Matej Latin. An einem einfachen Beispiel erklärt der UI- und UX-Designer, wie das funktioniert.

Einfache Geometrie gehört zum Handwerkszeug eines guten Designers, behauptet Matej Latin. An einem einfachen Beispiel erklärt der UI- und UX-Designer, wie das funktioniert.

Weil automatisches Ausrichten manchmal einfach nicht funktioniert.

Mir ist aufgefallen, dass ich ziemlich häufig Geometrie verwende, wenn ich Bedienoberflächen gestalte - also habe ich beschlossen, ein einfaches Beispiel zu teilen, an dem ich vor ein paar Tagen gearbeitet habe. Die Ausrichtung von Eingabeelementen in Photoshop ist einfach, da sie mit voreingestellten Ausrichtungsoptionen daherkommt. Und für 95 Prozent der Anwender ist das völlig ausreichend. Was kann man aber bei den 5 Prozent der Beispiele tun, bei denen man diese Hilfsmittel nicht verwenden kann? Tja, das kommt ganz darauf an, woran man arbeitet. Lass uns ein spezifisches Beispiel anschauen.

Ausrichtung eines Icons im Zentrum eines ...

Viertelkreises. Das war das neueste Beispiel, bei dem ich Geometrie verwenden musste, um ein pixelgenaues UI-Element zu erhalten.

Ich arbeitete an einem Bestätigungsfenster, das sich in einem Kreis befand. Stimmt, bei Wondermags probieren wir alle Arten von coolen Sachen aus. Hier wollten wir den Nutzer fragen, ob er eine Aktion wirklich ausführen möchte. Wir erklären ihm, was passieren wird, und bieten ihm Optionen zum Bestätigen oder Abbrechen.

Hier ist eine kleine Skizze des Fensters:

geometrie-skizze
Die grobe Skizze zeigt, wie in den unteren Viertelkreisen die Buttons für Bestätigen und Abbrechen positioniert werden sollen.

Wir versuchen hier das Problem zu lösen, zwei Icons vernünftig zur Mitte des jeweiligen Buttons auf der unteren Hälfte auszurichten (bestätigen oder abbrechen). Wenn man die Funktion zum vertikal und horizontal zentrierten Ausrichten von Photoshop verwendet, kommt das hier dabei raus:

geometrie-fail
Nach der Positionierung mit Photoshops Bordmitteln sitzen die Buttons offensichtlich nicht korrekt im Zentrum der Viertelkreise.

Das sieht nicht richtig und gelinde gesagt sehr merkwürdig aus. Photoshop positioniert es so, weil es das Element wie ein Rechteck behandelt, und nicht wie einen Viertelkreis – für Photoshop macht das keinen Unterschied.

geometrie-photoshop-fail
Die gepunktete Linie zeigt das Rechteck, das Photoshop als Grundlage für die vermeintlich zentrierte Positionierung nimmt.

Die Viereckfläche als Antwort

Ich habe überlegt, was der einfachste und genaueste Weg wäre, es exakt zum wirklichen Zentrum zu positionieren. Und hier kommt die Geometrie ins Spiel. Ich habe herausgefunden, dass der Schlüssel die quadratische Fläche innerhalb des Viertelkreises sein könnte. Alles, was ich tun musste, war, die quadratische Fläche davon zu ermitteln und ein Rechteck mit der gleichen Fläche zu zeichnen, das man als Hilfe verwendet. Aber vorher musste ich herausfinden, welche Abmessungen ich verwenden musste.

geometrie-square-area
Die gestreifte Fläche ist die, um die es in den folgenden Berechnungen geht.

Die Formel, um die Quadratfläche eines Kreises zu ermitteln, lautet A=π*r^2. Aber in meinem Fall nutzte ich nur ein Viertel des Kreises. Also lautete meine Formel:

A = π * r^2 / 4

π ist ein Standardwert mit 3,1416 und r ist der Radius, der in meinem Fall 145 Pixel beträgt, also die halbe Breite des Kreises.

Die quadratische Fläche innerhalb des Rechtecks, die ich zeichnen musste, besteht demnach aus 16.513 Pixeln.

Aber die Quadratflächen-Info half mir nicht viel weiter. Ich kann in Photoshop kein Rechteck zeichnen, indem ich seine Quadratfläche angebe. Was ich brauche, ist die Breite des Rechtecks. Um sie zu erhalten, musste ich einfach nur die Quadratwurzel zu meiner Formel hinzufügen.

A = √(π * r^2 / 4)

Das Endergebnis lautet 128,5 und eine Menge Dezimalstellen. Jetzt konnte ich auf meinem Viertelkreis ein Quadrat mit einer Breite von 128 Pixeln zeichnen und es an der oberen linken Ecke ausrichten.

geometrie-right-square-area
Das errechnete Rechteck hat nun die gleiche Quadratfläche wie der Viertelkreis.

Ich richtete das Icon horizontal und vertikal zentriert zum Hilfsrechteck auf meinem Viertelkreis aus.

geometrie-right-center
Das Kreuz zeigt das Zentrum des Hilfsvierecks - hier sollten unsere Buttons positioniert werden.

Ich führte den selben Prozess für den anderen Button aus und das war's. Pixelgenaue Positionierung, pixelgenaues User-Interface-Design.

geometrie-perfect
Nimmt man das errechnete Rechteck zugrunde, wirken die Buttons perfekt zentriert.

Hier ist der Vergleich von vorher und nachher:

geometrie_im_ui_design_richtig_falsch
Vorher und Nachher: falsch und richtig.

Fazit

Ich möchte gern zwei Hauptaspekte dieses Artikel herausheben. Einer ist, dass Geometrie und Mathematik einem im Allgemeinen eine Menge Hilfe bei pixelgenauem User-Interface- und Web-Design leisten. Man muss nur den richtigen Dreh finden.

Der andere ist: Wenn du etwas tust, dann mach es richtig. Wenn du ein Interface gestalten musst, dann strebe nach Pixelgenauigkeit oder lass es bleiben. Das unterscheidet durchschnittliche Interface-Designer von den besten. Investiere ein paar Überstunden dafür, mehr als nötig, wenn du es kannst.

Try, fail, think, learn.

Kennt jemand andere Methoden um das zu erreichen? Verwendet ihr auch Geometrie und Mathematik beim UI- oder Webdesign?

Schreibt uns eure Meinung in die Kommentare!

Dieser Artikel erschien zuerst auf medium.com.

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Matej Latin
32 Mythen im UX-Design [Bildergalerie] http://t3n.de/news/mythen-ux-design-586735/ 2014-12-31T09:40:27Z
Webseiten-Besucher scrollen nicht? Das sieht Zoltán Gócza ganz anders: Er hat 32 Mythen im UX-Design benannt und Alessandro Giammaria hat daraus hilfreiche Poster konzipiert.

Webseiten-Besucher scrollen nicht? Das sieht Zoltán Gócza ganz anders: Er hat 32 Mythen im UX-Design benannt und Alessandro Giammaria hat daraus hilfreiche Poster konzipiert.

Der ungarische User-Experience-Designer Zoltán Gócza hat eine Liste der 32 häufigsten Mythen über UX- und zusammengestellt. Der italienischen Werbeagentur COM gefiel sie so sehr, dass sie die Liste anschließend mit Hilfe des Grafikdesigners Alessandro Giammaria in eine Sammlung brillanter Poster verwandelte. Zu sehen ist auf den Grafiken neben dem jeweiligen Mythos noch eine tiefergehende Erklärung. Heraus kam eine ansehnliche Quelle an Tipps und Anregungen, die sowohl für erfahrene als auch angehende UX-Designer hilfreich ist.

„People don’t scroll“, und weitere Mythen im UX-Design

Unter den Postern finden sich vermeintliche Tipps wie „All pages should be accessible in 3 clicks“, „People don’t scroll“ oder „Design is about making a website look good“. Zoltán Gócza glaubt, dass UX-Designer mit diesen und den restlichen 29 Tipps in der Lage sein sollten, gute Webseiten zu konzipieren. Wer mehr über das Projekt wissen möchte, sollte nicht verpassen auch seine Website mit den UX-Design-Mythen zu besuchen. In der Bildergalerie unten haben wir die einzelnen Poster für euch aufgeführt. Zudem könnt ihr sie hier in voller Auflösung betrachten.

32 Mythen über UX-Design. (Grafik: Zoltán Gócza und Alessandro Giammaria, uxmyths.com)
32 Mythen über UX-Design. (Grafik: Zoltán Gócza und Alessandro Giammaria, uxmyths.com)

via theultralinx.com

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