Design | t3n News News, Infos, Tipps und aktuelle Artikel zu Design 2015-03-26T08:12:42Z t3n Redaktion http://t3n.de/tag/design Das kannst du zwar so machen, aber dann isses halt scheiße: Warum Usability bestimmte Regeln braucht http://t3n.de/news/usability-heurisitiken-598304/ 2015-03-26T08:12:42Z
„Aber das sieht doch geil aus!“ Wie oft hört man diesen Satz, wenn jemand ein absolut unnötiges UI/UX-„Feature“ in einem Webprojekt verteidigen will. Oder noch schlimmer: Das „Feature“ …

„Aber das sieht doch geil aus!“ Wie oft hört man diesen Satz, wenn jemand ein absolut unnötiges UI/UX-„Feature“ in einem Webprojekt verteidigen will. Oder noch schlimmer: Das „Feature“ widerspricht der Usability und jeder Heuristik oder ist sogar ein Anti- oder Dark Pattern. In diesem Artikel zeigen wir euch, was hinter diesen Usability-Buzzwords steckt – und warum Designer so viel Verantwortung tragen.

Die Usability kann anhand bestimmter Kriterien beziehungsweise anhand von „Regeln“ bewertet werden, die aussagen, wie leicht oder kompliziert User-Interfaces von Nutzern bedient werden können. Das User-Interface-Design ist also mit der Usability verknüpft.

Heuristiken: Usability unterliegt Regeln

Wenn es um Usability geht, sind Heuristiken unausweichlich, bestimmen sie doch, wie wir mit User-Interfaces umgehen. Wenn von Usability-Regeln gesprochen wird, meint man eigentlich Heuristiken und davon gibt es verschiedene Definitionsansätze. Die zwei bekanntesten:

„Heuristik, die; – [zu griech. heurískein = finden, entdecken]: Lehre, Wissenschaft von den Verfahren, Probleme zu lösen; methodische Anleitung, Anweisung zur Gewinnung neuer Erkenntnisse;“ Brockhaus

„Im Gegensatz zum Algorithmus stellt eine Heuristik eine Lösungsmöglichkeit dar, die, einer Daumenregel ähnlich, zu einer Problemlösung eingesetzt werden kann, ohne eine Lösung zu garantieren. Michael G. Wessels

Für das Web sind wohl die ersten und auch wichtigsten Heuristiken im Jahr 1995 veröffentlicht worden: Die „10 Usability-Heuristiken des User-Interface-Designs“ von Jakob Nielsen. Sie zeigen, dass das UI – also die Schnittstelle zwischen Mensch und Software – essentiell für die Bedienbarkeit von Software ist.

Kurzum: Heuristiken sind einfache (und ungenaue) Lösungen für Probleme, angelernte und oft benutzter Muster, anhand derer sich Benutzer während der Bedienung einer Software zurechtfinden können. Daher sind Heuristiken auch kulturellen Eigenheiten unterworfen und werden somit zu Regeln, um die Usability zu erhöhen.

„As a rule, conventions only become conventions if they work.“ Steve Krug

Anti-Pattern: „Kann man so machen, is halt nur scheiße“

Aber nur weil viele etwas falsch machen, ist es noch lange nicht richtig. Soll heißen: Es gibt Usability-Heuristiken, die sich etabliert haben, obwohl sie sich negativ auf das Anwendererlebnis auswirken – einfach weil sich der Nutzer damit abgefunden hat. Diese Heuristiken nennt man „Anti-Pattern“. Diese Muster zeichnen sich dadurch aus, dass sie zwar oft angewendet wurden und immer noch werden, allerdings eine suboptimale Lösung zu einem Problem liefern.

Diese Anti-Muster sind zu vermeiden, denn erstens verschlechtern sie das Nutzererlebnis der Software und zweitens werden dadurch künstliche Heuristiken erzeugt, da Benutzer sich an sie gewöhnen müssen, was wiederum zum ersten Problem führt. Es ist also durchaus sinnvoll, vorher zu validieren, bevor man blindlings Heuristiken von einer konkurrierenden Website kopiert. Kurzum: Nur weil etwas gut benutzbar oder schön aussieht, muss es noch lange nicht gut benutzbar sein.

(Screenshot: WordPress)
Usability hängt of an Kleinigkeiten. (Screenshot: WordPress)

Ein Beispiel für ein Anti-Pattern: Der Nutzer wird über den Status des Systems im Unklaren gelassen. Ein Anti-Pattern wäre, wenn WordPress den „Save“-Button im Backend nicht ausgrauen würde, nachdem der Nutzer drauf geklickt hat. Der graue und somit inaktive Button zeigt aber klar an, dass die Interaktion vom System erfasst und das Speichern ausgelöst wurde – und er nicht noch mal auf den Button klicken muss.

Komm auf die dunkle Seite der Macht: Usability und Dark Pattern

Eine Besonderheit der Anti-Pattern sind die sogenannten „Dark Pattern“, die das Ziel haben, Benutzer gezielt in die Irre zu führen. Es handelt sich hierbei also nicht um eine schlechte Lösung eines Problems, die sich durch eine breite Verwendung durchgesetzt hat, sondern um ein Muster, das Nutzer bewusst verwirren soll.

Klassisches Beispiel für ein Dark Pattern: Das „X“ zum Schließen eines Fensters. (Bild: Shutterstock / kpatyhka)
Heuristiken können auch in die Irre führen. Klassisches Beispiel: Das „X“ zum Schließen eines Fensters. (Bild: Shutterstock / kpatyhka)

Ein Beispiel für ein Dark-Pattern: Ihr wollt ein Overlay schließen und drückt auf den Button, der durch ein „X“ gekennzeichnet ist. Ihr tut das, weil die Heuristik besagt, dass dieser Button Programme und Fenster schließt. Der Klick darauf schließt aber nicht das Fenster, sonder leitet euch – unerwartet – auf eine andere Website um. Hier wurde also eine Heuristik benutzt, um euch aktiv in die Irre zu führen. Mehr zu Heuristiken und Dark Pattern findet ihr übrigens hier.

Für mehr zum Thema Heuristiken und UI-Pattern kann ich euch diese Wesites empfehlen:

Heuristiken: Designer haben große Verantwortung

Egal ob UX- oder UI-Designer: Nur weil andere etwas machen, heißt es noch lange nicht, dass das auch gut ist. Anders gesagt: Nur weil Apples Blur gut auf ihrer dedizierten Hardware läuft und dabei (in den Augen mancher) gut aussieht, heißt das noch lange nicht, dass der Blur-Effekt inflationär in jedem Webprojekt vorkommen muss. Denn: Die Performance wird schlechter sein und somit das UX schmälern.

Mit Macht kommt Verantwortung, und wenn ihr das „Gesicht“ von Software plant und umsetzt, habt ihr diese Verantwortung den Kunden und Nutzern gegenüber. Gesetze schützen uns teilweise vor Dark Pattern, allerdings nicht vor schlecht zu bedienender Software. Davor können uns nur fähige Designer schützen. Nämlich ihr!

Seid ihr Heuristik-Helden?

]]>
Mario Janschitz
t3n sucht freie Autoren (m/w) für das Ressort Design http://t3n.de/news/t3n-sucht-freie-autoren-design-602117/ 2015-03-25T14:45:37Z
Du willst auf freier Basis schreiben, hast einen guten Stil und (Web)Design gehört zu deinen thematischen Steckenpferden? Dann haben wir was für dich: Wir suchen ab sofort freie Autoren zur …

Du willst auf freier Basis schreiben, hast einen guten Stil und (Web)Design gehört zu deinen thematischen Steckenpferden? Dann haben wir was für dich: Wir suchen ab sofort freie Autoren zur Unterstützung unseres Design-Ressort.

Du bist Spezialist für (Web)Design und Usability? Die gängigen Tools und neuesten Trends kennst du aus dem Effeff? Über Farbenlehre weißt du genauso gut Bescheid wie über Homepage-Baukästen oder CMS? Vielleicht hast du ja Lust, für t3n.de zur Feder zu greifen!

Uns faszinieren neue Technologien, das Web und digitale Geschäftsmodelle. Darüber schreiben wir im t3n Magazin und auf t3n.de. Mit viel Liebe zum Detail. Ab sofort suchen wir Autoren oder Autorinnen auf freier Basis für unser Ressort Design.

Als freier Autor oder freie Autorin verfasst du regelmäßig Beiträge für t3n.de und bringst eigene Themenvorschläge ein. Regelmäßig heißt: Du kommst täglich dazu, für uns News, Trendstücke oder nutzwertige Tipps und Tricks zu verfassen.

Wir freuen uns auf deine Bewerbung, wenn ...

  • ... du erste journalistische Erfahrungen und eine gute Schreibe hast.
  • ... du langfristig und auf regelmäßiger Basis für uns schreiben willst.

Bei Interesse freuen wir uns auf deine Bewerbung unter jobs@yeebase.com. Dein Ansprechpartner ist Florian Blaschke.

]]>
t3n Redaktion
Mit diesem Tool rendern die Profis: Pixar veröffentlicht kostenlose „RenderMan“-Version http://t3n.de/news/renderman-pixar-kostenlos-601765/ 2015-03-24T10:56:53Z
Die Pixar-Animation-Studios haben eine kostenlose Non-Commercial-Version ihrer Rendering Software „RenderMan“ veröffentlicht. Sowohl für Profis als auch für angehende Visual Artists ist das …

Die Pixar-Animation-Studios haben eine kostenlose Non-Commercial-Version ihrer Rendering Software „RenderMan“ veröffentlicht. Sowohl für Profis als auch für angehende Visual Artists ist das Tool einen Blick wert.

„RenderMan“: Von Shrek bis Star Wars

Jeder kennt sie und fast jeder liebt sie: die Animationsfilme der Pixar-Animation-Studios. Wie viel Aufwand hinter einem einzigen Film steckt, wissen allerdings nur die Wenigsten. Eines der Tools, das bei Filmen wie Shrek oder Toy Story, aber auch beim Herrn der Ringe oder Star Wars hinter den Kulissen zum Einsatz kommt, ist „RenderMan“. Die Software für photorealistische visuelle Effekte ist eine feste Größe in der Welt der visuellen Überarbeitung von Filmen.

„RenderMan“ gibt es ab sofort auch in einer kostenlosen Variante. Diese Version umfasst alle Funktionen, die auch in der Retail-Variante vorhanden sind, nur dass sie ausschließlich für nicht-kommerzielle Zwecke genutzt werden darf. Laut Pixar umfasst das sowohl den Einsatz zu Lern- und Ausbildungszwecken, als auch für die Plugin-Entwicklung, zur Software-Evaluation sowie für alle privaten Projekte. Wichtig ist hier, dass es sich bei „RenderMan“ ausschließlich um eine Software für Rendering und visuelle Effekte handelt. Als Quelle braucht die Software daher bereits bestehende Szenen aus anderen Software-Produkten wie Autodesk Maya, Foundry Katana oder Cinema4D Studio von Maxon.

Die „RenderMan“-Community zeigt euch, was mit der Software alles möglich ist. (Screenshot: pixar.com)
Die „RenderMan“-Community zeigt euch, was mit der Software alles möglich ist. (Screenshot: pixar.com)

Die „RenderMan“-Community

Alle Einsteiger finden in der „RenderMan“-Community zahlreiche Beispiele für die Verwendung der Software sowie nützliche Tipps und Hilfestellungen. Wer sich also einfach mal mit dem Erstellen von visuellen Effekten auseinandersetzen will, hat jetzt die Gelegenheit dazu. Solltet ihr im Nachhinein doch über eine kommerzielle Nutzung eurer Projekte nachdenken, könnt ihr die kostenlose Version jederzeit in eine Vollversion umwandeln lassen. Aber Vorsicht: Sie schlägt mit satten 495 US-Dollar zu Buche plus 200 US-Dollar für ein Jahr Support. Hier heißt es definitiv: erst mal die kostenlose Variante testen.

Wenn ihr noch Fragen zur kostenlosen Version oder zu „RenderMan“ im Allgemeinen habt, findet ihr auf pixar.com einen umfangreichen FAQ-Teil, der fast keine Frage unbeantwortet lässt. „RenderMan“ steht ab sofort zum Download bereit – ein 64-bit-Betriebssystem ist allerdings Pflicht, um das Tool zu nutzen. Neben Mac OS 10.7, 10.8 und 10.9 sowie Windows 7 und 8 unterstützt „RenderMan“ auch Linux glibc ab der Version 2.12 sowie gcc ab Version 4.4.5.

Habt ihr schon Erfahrung mit „RenderMan“ oder kennt ihr gute Alternativen zu Maya, Katana und Co.? Schreibt sie uns in die Kommentare.

via pixartimes.com

]]>
Gerrit Kilian
Frontend-Editing in WordPress: Das kann Upfront http://t3n.de/news/frontend-editing-wordpress-upfront-601096/ 2015-03-22T12:03:14Z
Mit Upfront könnt ihr das Frontend eurer WordPress-Seite direkt per Drag & Drop bearbeiten. Die Macher sehen es als Konkurrenzprodukt für Homepage-Baukästen wie Jimdo, Weebly oder Wix.

Mit Upfront könnt ihr das Frontend eurer WordPress-Seite direkt per Drag & Drop bearbeiten. Die Macher sehen es als Konkurrenzprodukt für Homepage-Baukästen wie Jimdo, Weebly oder Wix.

WordPress: Mit Upfront bearbeitet ihr das Frontend per Drag-and-Drop. (Screenshot: Upfront)
WordPress: Mit Upfront bearbeitet ihr das Frontend per Drag-and-Drop. (Screenshot: Upfront)

Upfront für WordPress: Frontend kinderleicht bearbeiten

Mehr als 60 Millionen Websites nutzen das Content-Management-System WordPress. Wer aber das Frontend einer WordPress-Seite anpassen will, muss sich notgedrungen mit HTML, CSS und JavaScript auskennen. Upfront soll das ändern. Mit dem Tool könnt ihr per Drag & Drop Elemente auf eure Website ziehen und das Layout kinderleicht verändern. Die Macher sehen Upfront als Konkurrenz für Homepage-Baukästen wie Squarespace, Jimdo, Weebly oder Wix – allerdings kombiniert mit den Vorteilen des WordPress-CMS.

Egal ob Texte, Bilder, Galerien, Videos, Widgets oder mehr: Elemente lassen sich bequem aus einer Leiste am linken Bildschirmrand auswählen und auf der Seite platzieren. Anschließend könnt ihr die Größe des Elements verändern und die Einstellungen anpassen. Auch Texte lassen sich mit Upfront direkt im Frontend bearbeiten und natürlich habt ihr von dort auch Zugriff auf eure Mediengalerie.

WordPress: Upfront unterstützt auch responsives Design

Mit Upfront sollt ihr auch responsive Layouts für unterschiedliche Geräteklassen anlegen können. Auch das geht schon jetzt über die Responsive-Ansicht relativ flüssig. Mit nur einem Klick könnt ihr zwischen Desktop-, Smartphone- und Tablet-Ansicht wechseln. Wie auch außerhalb der Responsive-Ansicht könnt ihr jederzeit ein Raster einblenden, um euch beim Anlegen von Elementen daran zu orientieren.

Noch befindet sich Upfront in einer recht frühen Entwicklungsphase. Wer will, kann das Tool aber schon über die Upfront-Demo-Seite testen. Eine kleine Erläuterung zum Umgang mit dem Tool findet ihr in diesem Artikel von den Upfront-Machern.

In diesem Zusammenhang könnte euch auch unser Artikel „Themify Builder: WordPress-Themes per Drag & Drop erstellen“ interessieren.

]]>
Kim Rixecker
Hallöchen! 18 inspirierende Beispiele für coole Portfolio-Webseiten http://t3n.de/news/inspirierende-portfolio-webseiten-600501/ 2015-03-22T08:01:20Z
Ihr plant eine Portfolio-Webseite aufzusetzen oder zu überarbeiten? In diesem Artikel kuratieren wir ein paar sehenswerte Beispiele, die euch inspirieren könnten.

Ihr plant eine Portfolio-Webseite aufzusetzen oder zu überarbeiten? In diesem Artikel kuratieren wir ein paar sehenswerte Beispiele, die euch inspirieren könnten.

Eine persönliche Portfolio-Webseite zu erstellen, ist eine große Herausforderung für einen Freelancer . Immerhin soll sie sein Talent und seine Kreativität widerspiegeln und eine eigene Handschrift besitzen, gleichzeitig aber nicht von online gestellten Projekten ablenken.

Ein gutes Design wirkt als Blickfang und dient als Aushängeschild. Nicht nur Designer, auch Autoren und Entwickler können mit ihren schicken Portfolio-Webseiten neugierige Besucher und potentielle Kunden in ihren Bann ziehen. Egal, ob mit einem minimalistischen Design, schrillen Illustrationen oder multimedialen Elementen.

Eine Portfolio-Webseite im Stil eines Videospiels: Das Robby-Leonardi-Beispiel

Eine inspirierende Portfolio-Webseite hat der multidisziplinäre Designer Robby Leonardi veröffentlicht. (Screenshot: rleonardi.com)
Eine inspirierende Portfolio-Webseite hat der multidisziplinäre Designer Robby Leonardi veröffentlicht. (Screenshot: rleonardi.com)

Ein besonders herausragendes Beispiel, das in den letzten Jahren für Aufsehen gesorgt hat, ist die Portfolio-Webseite von Robby Leonardi. Der New Yorker ist ein multidisziplinärer Designer, der sich sowohl auf Illustrationen und Animationen als auch auf Grafik-Design und Front-End-Entwicklung spezialisiert hat. Besucher können Leonardi wie in einem Videospiel durch verschiedene Level steuern. Der Online-Auftritt ist wie ein Lebenslauf aufgezogen, in dem er immer wieder auf Stationen, Arbeiten und gewonnene Awards hinweist. So erfahren Interessierte, dass er unter anderem den „Net Award 2013“ für das beste Online-Portfolio gewonnen hat. Wie passend!

Es gibt unzählige andere Portfolio-Seiten, die nicht weniger sehenswert sind. Wir haben in der Bildergalerie einige Beispiele zusammengestellt, die uns zum einen durch ein klares Design, zum anderen aber auch durch spielerische Elemente aufgefallen sind. Eine Inspirationsquelle für eure nächste Portfolio-Webseite, die ihr uns übrigens gerne in den Kommentaren zeigen könnt – vielleicht nehmen wir sie ja mit auf in unserer Sammlung.

]]>
Andreas Weck
Diese 15 Web-Templates musst du gesehen haben [Teil 3] http://t3n.de/news/diese-15-web-templates-gesehen-3-595922/ 2015-03-21T08:05:41Z
Eine weitere feine Sammlung kostenloser Web-Templates im PSD-Format präsentieren wir euch in diesem Artikel. Die Vorlagen eignen sich teils für Blogs oder News-Websites, aber auch für Shops und …

Eine weitere feine Sammlung kostenloser Web-Templates im PSD-Format präsentieren wir euch in diesem Artikel. Die Vorlagen eignen sich teils für Blogs oder News-Websites, aber auch für Shops und Business-Auftritte sind passende Designs dabei.

Web-Templates für verschiedene Anwendungsbereiche und Geschmäcker

Je nach Zweck einer Website stehen bestimmte Features mehr oder weniger im Vordergrund, manche Elemente sind Blog-typisch, andere sind unerlässlich für die Firmenseite. Struktur und Raumaufteilung, die Festlegung der Spaltenanzahl, Umgang mit Weißraum, Farben, Schatten und Schriftsätze sollten beim Gestalten einer Website wohlüberlegt sein, wenn das Design stimmig und attraktiv beim Betrachter ankommen soll.

Wir haben ein paar sehr gelungene Templates zusammengetragen, die sich teils geradezu für einen bestimmten Zeck aufdrängen, sich teilweise aber auch recht variabel einsetzen lassen. Die Templates sind allesamt kostenlos und liegen im PSD-Format vor, sodass sie sich an eigene Bedürfnisse anpassen und weiterverarbeiten lassen. Aber auch als Inspiration für eigene Design-Ideen bieten die folgenden Projekte reichlich Sehenswertes. Die Links zu den Templates findet ihr jeweils in der Bildunterschrift oder in der Bildbeschreibung in der Galerie.

Single-Page-Template „Wooster“

Wooster - Vintage Single Page PSD Theme - Web-Templates
Schwarz-weißes Onepage-Web-Template „Wooster“. (Screenshot: graphberry.com)

Das vollständig in schwarz-weiß gehaltene Single-Page-Template „Wooster“ soll den Angaben der Macher zufolge als Web-Template für Agenturen oder zur Präsentation des Produktportfolios Anwendung finden. Die Kontraste werden in diesem Design geschickt dazu eingesetzt, die einzelnen Elemente der Website voneinander abzugrenzen. Als Schriften werden kostenlose Google-Fonts genutzt, die ebenso wie die verwendeten Bilder in der Hilfedatei des Pakets verlinkt werden.

Template für eine Movie-Website

Cinema 22 - Free PSD Movie - Web-Templates
Film-Website im Flat Design. (Screenshot: sukafreebies.com)

Weniger häufig zu finden und deshalb Teil dieser Sammlung von Web-Templates sind solche Design-Vorlagen, die sich mal mit etwas anderem befassen als mit Layouts für Blogs, Unternehmens-Websites oder Shops. Ein gelungenes Beispiel ist das von Bagus Fikri kreierte Template für eine Movie-Website – ohne viel Schnickschnack in funktionalem Flat Design.

Fashionpress-Template

FashionPress_Free_Psd_V2 - Web-Templates
Eine der beiden Varianten des Fashionpress-Web-Templates. (Screenshot: dribbble.com)

Das „Fashionpress Free PSD“ von Shakil Ali beinhaltet zwei Variationen eines Web-Templates für Onlineshops, die beide gleichermaßen prädestiniert sind, Produkte innerhalb eines nicht zu aufdringlichen, aber dennoch augenfälligen Designs zu präsentieren.

„Charity Website Template“

Free Charity Website Template PSD - Web-Templates
Web-Template im gekachelten „Sharp Design“. (Screenshot: cssauthor.com)

Das von Krishnan Unni entworfene „Charity Website Template“ wird beschrieben als einzigartiges „Sharp Design“. Wenngleich „einzigartig“ hier leicht überhöhenden Charakter hat, bietet das Template doch eine sehr ansehnliche, vielseitig einsetzbare gestalterische Grundlage in einem nicht alltäglichen gekachelten Design.

Web-Template „Skokov Profit“

SKOKOV Profit — Free Business PSD Template - Web-Templates
Modernes Business Website-Template (Screenshot: skokov.cc).

Das Web-Template „Skokov Profit“ ist farblich in einen modern anmutenden Dreiklang aus Schwarz, Weiß und Rot getaucht. Das Onepage-Layout ist durch ansehnliche halbtransparente Flächen und angenehm proportionierten Weißraum klar strukturiert, was das Gesamtpaket sehr professionell wirken lässt. Dem Einsatz als Unternehmens-Website steht bei diesem Template nichts im Weg.

Weitere Web-Templates aus der Serie

Weitere Artikel aus unserer Serie über gelungene Web-Templates findet ihr hier:

]]>
Marcel Seer
In 2 Wochen zum perfekten Webauftritt: So klappt's mit Jimdo und 99designs [Sponsored Post] http://t3n.de/news/jimdo-99designs-600140/ 2015-03-18T06:00:56Z
Ein Profi erstellt ein Logo und oben drauf gibt’s die passende Website dazu – ab sofort bietet der Website-Baukasten Jimdo genau das an. Möglich macht das eine Kooperation mit dem beliebten …

Ein Profi erstellt ein Logo und oben drauf gibt’s die passende Website dazu – ab sofort bietet der Website-Baukasten Jimdo genau das an. Möglich macht das eine Kooperation mit dem beliebten Design-Marktplatz 99designs.

Jimdo und 99designs machen gemeinsame Sache

Mit der Kooperation von Jimdo und 99designs sollen Websites aus Baukästen noch schöner werden. (Bild: t3n)
Mit der Kooperation von Jimdo und 99designs sollen Websites aus Baukästen noch schöner werden. (Bild: t3n)

Möchten Freelancer und kleine Unternehmen möglichst schnell und unkompliziert eine Website erstellen, ist die Nutzung eines Website-Baukastens oft das Mittel der Wahl. Die vorgefertigten sehen gut aus, sind leicht zu installieren und können durch Widgets zu einem umfassenden Webauftritt ausgebaut werden.

Problematisch wird es jedoch, wenn Nutzer darüber hinaus ein eigenes Logo (zum Beispiel das ihrer Firma) in die Website einbinden wollen. Entweder ist dieses noch gar nicht vorhanden (zum Beispiel wegen fehlender Kenntnisse) oder aber es passt trotz individueller Anpassungen nicht so richtig zum Template.

Für beides gibt es jetzt eine Lösung:  Der beliebte Website-Baukasten Jimdo und 99designs, ein Online-Marktplatz für Designarbeiten, machen gemeinsame Sache. Im Rahmen einer Kooperation können Nutzer ab sofort ein professionell gestaltetes Logo sowie eine dazu passende für Desktop und mobile Geräte optimierte Webseite erhalten. Der Prozess angefangen beim Kauf bis hin zur Auslieferung von Logo und Website soll nicht länger als zwei Wochen dauern.

In 4 Schritten zum Markenauftritt

  1. Nutzer starten bei 99designs einen Wettbewerb für Logo und Webseite
  2. Der Nutzer beantwortet einige Fragen rund um Unternehmen und gewünschten Style – daraus ergibt sich das Briefing für die Designer
  3. Innerhalb von zwei Wochen erstellen mehrere Dutzend Designer Vorschläge, von denen der Nutzer sich schließlich seine Favoriten aussuchen kann, die in die weitere Abstimmung gehen
  4. Am Ende entscheidet sich der Nutzer für einen Logo-Favoriten und erhält vom Designer eine dazu passend gestaltete Jimdo-Webseite. Diese lässt sich danach selbst aktualisieren – ohne spezielle Vorkenntnisse.

Preise und Verfügbarkeit

Das Gesamtpaket bestehend aus Logo, Website, Hosting und individueller Domain kostet einmalig 419 Euro. Darin enthalten ist auch eine kostenlose JimdoPro-Mitgliedschaft für ein Jahr. WordPress-Designs werden nicht unterstützt. Laut Jimdo eignet sich das Paket speziell für Berater und Inhaber kleiner Unternehmen, die nach einfachen Websites suchen, die sie selbst bearbeiten können.

Jetzt Logo und Website professionell erstellen lassen!

]]>
t3n Redaktion
iPhone 7: Wie sich Designer das nächste Apple-Smartphone vorstellen http://t3n.de/news/iphone-7-designkonzepte-599981/ 2015-03-17T07:23:21Z
Auch das iPhone 7 wird sicher wieder millionenfach verkauft. Aber wie wird Apples nächstes Smartphone aussehen? Wir zeigen euch die coolsten Designkonzepte aus dem Netz.

Auch das 7 wird sicher wieder millionenfach verkauft. Aber wie wird nächstes aussehen? Wir zeigen euch die coolsten Designkonzepte aus dem Netz.

iPhone 7: Wie wird das nächste Apple-Smartphone aussehen?

Ob das nächste Smartphone „Apple iPhone 7“ oder vielleicht doch eher „iPhone 6s“ heißen wird, wird der Konzern wohl erst in einiger Zeit enthüllen. Trotzdem machen sich verschiedene Designer schon Gedanken darüber, wie das nächste iPhone aussehen könnte – das ist beim iPhone 7 nicht anders als es beim iPhone 6 war.

Dass sie dabei ihrer Fantasie freien Lauf lassen und ihren Konzepten bisweilen auch eher unwahrscheinliche Technologien andichten, macht sie nicht weniger interessant. Wer weiß: Vielleicht bekommen wir das eine oder andere Feature ja tatsächlich eines Tages. Wenn nicht im iPhone 7, dann vielleicht in einer späteren Iteration des Apple-Smartphones.

iPhone 7: Die 5 coolsten Designkonzepte im Netz

iPhone-7-Konzept im iPod-Nano-Look

Der Frankfurter Riho Kroll hat sich für sein iPhone-7-Konzept vom Design des aktuellen iPad Nano inspirieren lassen. Die abgerundeten Seiten des Geräts sind für viele nicht nur schick, sie könnten nach Willen des Designers auch berührungsempfindlich sein und neue Möglichkeiten zur Steuerung des iPhones bieten. Dann könnte das iPhone schon beim Hochheben automatisch die wichtigsten Informationen anzeigen, ohne dass nutzer den Bildschirm entsperren müssen.

Schickes und dünnes iPhone-Konzept

So stellt sich der Designer Yasser Farahi das iPhone 7 vor. (Grafik: Yasser Farahi / Ovalpictures)
So stellt sich der Designer Yasser Farahi das iPhone 7 vor. (Grafik: Yasser Farahi / Ovalpictures)

Yasser Farahi setzt bei seinem Entwurf vor allem auf ein extrem dünnes Gehäuse. Außerdem sind die Seitenränder beinahe nicht mehr vorhanden. Ähnlich den aktuellen iPhone-Modellen wünscht sich Farahi verschiedene Farben für das iPhone 7. Das Display in seinem Entwurf soll mittels Sapphire-Glas geschützt werden.

Home-Button wird ins Display integriert

iPhone-7-Konzept: Martin Hajek will den Home-Button direkt ins Display integrieren. (Grafik: Martin Hajek)
iPhone-7-Konzept: Martin Hajek will den Home-Button direkt ins Display integrieren. (Grafik: Martin Hajek)

Martin Hajek geht bei seinem Entwurf einen ungewöhnlichen Weg: Er zeigt, wie das iPhone 7 aussehen könnte, wenn das Display eine Einsparung für den Home-Button hätte. Damit wäre der einzige physische Button des iPhones direkt in das Touch-Display eingelassen. Links und rechts davon könnten sich Nutzer je zwei App-Buttons anzeigen lassen.

Display an der Seite des iPhones

Zugegeben, der Designer Iskander Utebayev hat sein Designkonzept zunächst als iPhone-6-Konzept vorgestellt. Dennoch wollten wir euch das spannende Konzept nicht vorenthalten. Immerhin könnte das innovative Display, das sich über die Seite des Geräts hinaus erstreckt, auch in ein späteres iPhone integriert werden. Das Touchscreen-Element an der Seite des Geräts könnte die Bedienung des Smartphones auf innovative Art und Weise verbessern.

Extrem schickes iPhone-Konzept

Auch dieses iPhone-Konzept ist spannend. (Grafik: Steel Drake)
Auch dieses iPhone-Konzept ist spannend. (Grafik: Steel Drake)

Steel Drake wiederum springt gleich eine ganze Produktgeneration weiter und hat ein iPhone-8-Konzept erstellt. Das kann sich allerdings sehen lassen. Wer will, kann sich den Entwurf sogar als 3D-Modell anschauen.

Und welche Features wünscht ihr euch vom nächsten iPhone? Welche Entwürfe haben euch beeindruckt?

]]>
Kim Rixecker
Mobile Menüs für den Desktop: Wie Responsive Design die Navigation beeinflusst http://t3n.de/magazin/mobile-menues-fuer-den-desktop-237266/ 2015-03-12T09:49:57Z
Die Navigation ist der wichtigste Bestandteil einer Webseite. Ihre Gestaltung ist grundlegend für die Entwicklung von gut nutzbaren Websites. Mit dem Einzug von Responsive Webdesign erblickten viele …

Die Navigation ist der wichtigste Bestandteil einer Webseite. Ihre Gestaltung ist grundlegend für die von gut nutzbaren Websites. Mit dem Einzug von erblickten viele neue Navigationsmuster das Licht der Welt und lösten alte Grundsätze und Standards für die Gestaltung ab. Diese Entwicklung beschränkt sich nicht nur auf , sondern findet sich auch zunehmend auf dem Desktop wieder. Ein Blick auf Navigations-Patterns im mobilen Zeitalter und ihren Einfluss auf Desktop-Websites.

Mit dem Einzug von Mobile und Responsive Webdesign wurden Webworker vor neue Herausforderungen bezüglich der Gestaltung ihrer Websites gestellt. Die Navigation blieb davon nicht unberührt. Daraus resultierten einige spannende Ansätze für die Gestaltung mobiler Navigationen, die wir uns im Folgenden genauer anschauen.

Dropdown mit OS-Picker – Weil einfach einfach einfach ist

Ein Dropdown-Menü in der Kopfzeile einer mobilen Site bietet ausreichend Platz, um Seiten oder Kategorien unterzubringen. Hierbei greift man in der Regel auf ein Select-Element zurück. Der Vorteil bei dieser Methode ist, dass kein Styling für den Inhalt des Dropdowns vorgenommen werden muss, da bei der Auswahl das Betriebssystem die Ausgabe des Dropdowns steuert. Auch kommt diese Lösung mit minimalem JavaScript aus. Viele Einträge können die Auswahl aber schnell unübersichtlich und frustrierend machen.

Toggled Navigation – Der Klassiker

Die Toggled Navigation ist die wohl am meisten verwendete Navigationsart auf mobilen Webseiten. Dafür wird meistens eine Leiste im oberen Bereich der Websites positioniert. Diese ist mit einem Button-Element ausgestattet, das bei Betätigung die Navigation ausfahren lässt. Hierbei wird anders als bei klassischen Dropdown-Menüs keine neue Ebene über den eigentlichen Inhalt gelegt, sondern die komplette Webseite um die Länge der Navigation verlängert. Das Bootstrap-Framework beispielsweise hält eine solche Navigationslösung parat.

Multi-Toggle – Für komplexe Menüstrukturen

Das Multi-Toggle-Menü ist oberflächlich betrachtet eine Ansammlung von verschachtelten Akkordeons. Der Benutzer tippt auf die Hauptkategorie und öffnet so die enthaltenen Unterkategorien. Mit Multi-Toggle Menüs können höchst komplexe Navigationen auf kleinstem Raum untergebracht werden. Durch die Kategorisierung können Benutzer schneller ans Ziel kommen. Sobald ausreichend Nutzfläche für die Darstellung der Webseite zur Verfügung steht, kann dieses Pattern zum klassischen Multi-Level-Dropdown-Menü ausgebaut werden. Technisch gesehen sind unbeschränkt viele Ebenen möglich. So kann allerdings schnell eine unüberschaubare Navigationsstruktur entstehen, die statt zum Surfen einzuladen eher frustrierend wirkt.

Slide Navigation – Schick aber aufwendig

Navigationselemente müssen nicht zwingend untereinander angeordnet sein. Kategorien können auf mehrere Ebenen aufgesplittet und durch zusätzliche Bedienelemente oder einen Swipe durchgeblättert werden, um so Unterpunkte der Navigation darstellen zu können. Dieses Pattern bietet eine gewisse Übersichtlichkeit bei einer weiterhin hohen Detailtiefe, ist technisch jedoch etwas aufwändiger umzusetzen.

Mobile Menues für den Desktop 1
Diesel weckt auf dem Desktop die Neugier mit weichgezeichneten Hintergrundbildern, die sich erst beim Mouse-Over zu erkennen geben. Solche Effekte lassen sich leider nicht auf Mobilgeräten wiedergeben, da hier die Maus fehlt. (Screenshot: diesel.com)

Ein minimalistisches Beispiel hierfür liefert Apple mit seinem kürzlich eingeführten Navigations-Balken, der bei kleineren Screens nicht komplett sichtbar ist, aber mit einem Swipe bewegt werden kann. Eine Slide-Navigation muss sich dabei nicht nur auf einen kleinen Balken beschränken und könnte die volle Bildschirmgröße einnehmen, um Inhalte besser in Szene zu setzen.

Mega Dropdown – Schick aber Platzeinnehmend

Das Mega-Dropdown ist eine aufbereitete Abwandlung der Toggled-Navigation, bei der neben einfachen Textlinks auch mit Icons, Bildern oder einer Kombination aus beidem gearbeitet werden kann. Durch die Größe der einzelnen Elemente lassen sich zwar weniger Links auf der sichtbaren Fläche unterbringen als bei einer einfachen Toggled-Navigation, die optische Verbesserung kann diesen Nachteil aber durchaus ausgleichen.

Off-Canvas Flyout – Viel Platz bei einfacher Orientierung

Beim Off-Canvas-Pattern wird die Navigation außerhalb des sichtbaren Bereichs des Displays untergebracht und durch einen Tap auf einen entsprechenden Button ausgefahren. Dabei schiebt sich die Navigation entweder über den eigentlichen Content oder verschiebt diesen bis an den Rand des Bildschirms, sodass die Orientierung in der Webseite weiterhin möglich ist.

Das Off-Canvas-Flyout stellt Designern viel Raum zur Platzierung von Elementen zur Verfügung und bietet so große Gestaltungsfreiheit.

]]>
Ilja Zaglov
E-Mail-Marketing: Mit diesen Tipps wird deine Mail auch auf dem Smartphone gern gelesen http://t3n.de/news/e-mail-marketing-tipps-design-mobile-597183/ 2015-03-07T13:02:13Z
Modernes E-Mail-Marketing sollte berücksichtigen, dass die Mehrzahl der Mails und Newsletter auf mobilen Geräten geöffnet wird. Mit dem richtigen Design und einigen Tipps trägt man dieser …

Modernes E-Mail-Marketing sollte berücksichtigen, dass die Mehrzahl der Mails und Newsletter auf mobilen Geräten geöffnet wird. Mit dem richtigen Design und einigen Tipps trägt man dieser Erkenntnis Rechnung und kann so sicher stellen, dass der Empfänger die Mails auch liest.Schon im vergangenen Jahr haben wir in einem Artikel zur mobilen Bedeutung von E-Mail-Marketing berichtet, dass rund die Hälfte aller Nutzer E-Mails bevorzugt auf ihrem Smartphone lesen. Und schon damals galt die Maxime: E-Mail-Marketing muss das geänderte Nutzerverhalten dringend für die eigene Strategie berücksichtigen.

Wie funktioniert rechtssicheres E-Mail-Marketing? Der Leitfaden liefert Antworten.
Bei mobil optimierten E-Mail-Marketing gilt: je simpler die Mail, desto besser. (Foto: optivo)

Ein wichtiger Hebel ist dabei natürlich das Erscheinungsbild der Mail selbst. Dabei sollte man sich nicht auf die diversen Responsive-Templates von Mailing-Programmen verlassen, sondern sich genau überlegen, wie die Mail im besten Fall auszusehen hat. Wer schon mal ernsthaft eine Marketing-Mail gestaltet oder entwickelt hat, weiss ganz genau, dass der Support für CSS in vielen Mail-Clients bestenfalls als uneinheitlich beschrieben werden kann. Aus diesem Grund ist HTML in der Regel immer noch die sicherste Wahl.

Grundlagen für das mobile E-Mail-Marketing

Marketing-Mails sollten zwar responsive sein, aber bei der Planung sollte man besonderes Augenmerk auf das Prinzip „Mobile first“ legen. Bei der Gestaltung von Mails, von denen man ausgeht, dass sie auf einem mobilen Gerät gelesen werden, sollte man stets davon ausgehen, dass der Empfänger sich bloß mit einem Daumen durch die Mail navigiert, im Zweifel nebenher abgelenkt ist und sein Gerät – und damit den Screen – eine Armlänge von sich entfernt hält. Diesen Umständen sollte das Design jeder Marketing-Mail Rechnung tragen. Was sich kompliziert anhört, ist jedoch gar nicht so schwierig. Verwendet man ausreichend dimensionierte Schriftgrößen (Google empfiehlt 18 bis 22 Punkt, während Apple zu 17 bis 22 Punkt rät) und gestaltet auch Buttons und andere Flächen für den Call to Action so groß, dass der Nutzer sie per Touch-Geste problemlos bedienen kann, hat man schon die halbe Miete.

Die folgenden Tipps verstehen sich als Inspiration auf dem Weg zur perfekten Marketing-Mail, die auch mobil das gewünschte Ziel erreicht. Wir konzentrieren uns hier auf das Design der Mail, ihr solltet aber natürlich auch bedenken, dass eine entsprechende Landing-Page für mobile Besucher optimiert sein sollte.

Unterschiedliche Bildschirmgrößen berücksichtigen

Die beiden neuen iPhones im Vergleich: iPhone 6 (vorne) und iPhone 6 Plus (hinten). (Quelle: Apple.com)
Bei Smartphones gilt es eine Vielzahl unterschiedlicher Bildschirmgrößen zu berücksichtigen. (Bild: Apple.com)

Eines der größten Probleme beim Thema „Mobile“ besteht in den unterschiedlichen Bildschirmgrößen aller möglicher Smartphones. Das trifft auch auf den Bereich E-Mail-Marketing zu, denn immerhin wird eure Mail auf ganz unterschiedlichen Screens gerendert.

Diverse Websites haben sich dem Vergleich und dem Aufführen unterschiedlicher Smartphone-Größe verschrieben – wie beispielsweise diese auch für das E-Mail-Marketing geeignete Webseite. Während es mittlerweile fast ein Ding der Unmöglichkeit ist, alle Screen-Größe zu berücksichtigen, sollte man sich einiger fester „Größen“ bewusst werden.  iOS skaliert Mails beispielsweise automatisch, sodass sie auf die Breite des jeweiligen Gerätes passen.

E-Mail-Marketing mit wohl dimensionierter Schriftgröße

Bigger is better – zumindest bei mobilen Mails ist diese Aussage bis zu einem gewissen Grad zutreffend. Die Lesbarkeit von Mails gilt es auch auf mobilen Geräten sicher zu stellen, Damit der Empfänger die Mail bequem lesen kann, muss die Schrift entsprechend groß sein, nicht allerdings zu groß.

Man sollte eine etwas größere Schrift als für seine herkömmliche Kampagne wählen. Ein guter Anfang sind eine 18-Punkt-Schrift für den Text selbst und 22-Punkt-Überschriften. Das hört sich verhältnismäßig riesig an, aber sollte in drastisch verbesserten Öffnungsraten sowie einer besseren CTR resultieren.

Eine Spalte – nicht mehr

Das Format von mobil-tauglichen Marketing-Mails sollte sich an etablierte Standards halten und einspaltig sein – einfach, um dem kleineren Bildschirmen Rechnung zu tragen. Ein einspaltiges Design sorgt beim Empfänger nicht nur für mehr Übersicht, sondern auch für einen besseren Lesefluss.

Bilder für mobiles E-Mail-Marketing – Do or Don’t?

Beim mobilen E-Mail-Marketing scheiden sich die Geister, wenn es darum geht, ob man Bilder in seine Mails integrieren sollte. Das verwundert nicht, denn zum einen wirkt sich ein wenig Eye Candy fast immer positiv aus, zum anderen kosten Bilder mobile Bandbreite und den Empfänger im schlimmsten Fall zusätzlich Geld. Viele mobile Nutzer bekommen Bilder in Newslettern ohnehin gar nicht erst angezeigt – dessen sollten sich Designer und Marketeer bewusst sein. Bisher rendern nur iOS-Geräte Bilder in Mails automatisch.

xxx (Foto: t3n)
Integriert man Bilder in seinen Newsletter, sollte man einige Aspekte berücksichtigen. (Screenshot: t3n)

Aus diesem Grund ist es ein absolutes No-Go, User-Interface-Elemente wie Buttons oder Text als Bild in seiner Mail zu verwenden. Textelemente und die Navigation sollten in HTML – und nur in HTML – umgesetzt sein. Die Mail muss in jedem Fall auch ohne das Bild funktionieren. Wenn eure Mail ohne Bild für den Leser nicht mehr verständlich ist, habt ihr etwas falsch gemacht, denn ihr erreicht nur noch einen Teil der mobilen Nutzer.

Entscheidet man sich trotzdem, Bilder in seinen Marketing-Mails zu verwenden, sollte man unbedingt darauf achten, dass das Bild groß genug, aber nicht zu groß ist. Will heißen: Der Empfänger sollte erkennen, was auf dem Bild zu sehen ist, und das Bild sollte nicht so groß sein, dass der Empfänger scrollen muss, um es komplett zu erfassen. Aus ersterem Aspekt ergibt sich, dass man Bildmaterial mit der richtigen Komposition auswählen sollte.

Keep it simple

Mobil optimierte Mails sind einfach gehalten – einfach in Bezug auf die Texte, aber auch einfach im Design. Je simpler eine Mail aufgebaut ist, desto besser funktioniert sie mobil. Der Empfänger sollte auf einen Blick erfassen können, was die Message ist.

(Screenshot: vimeo.com)
Wie auch für Apps gilt für Mails im mobilen Kontext gilt: gut lesbare Schrift und große Buttons. (Screenshot: vimeo.com)

Auch mobil wird man beim E-Mail-Marketing häufig mit einem Call to Action zu tun haben. Diesen gilt es so zu gestalten, dass der Empfänger auf den ersten Blick versteht, dass er interagieren kann. Eine einfache Möglichkeiten ist es natürlich, Buttons eindeutig zu gestalten. Oder man arbeitet schlicht mit simplen Textblöcken wie „Jetzt kaufen“ oder „Mehr erfahren“. Aus den vergleichsweise kleinen Bildschirmen von Smartphones in Kombination mit Touch-Eigenschaften ergibt sich, dass alle interaktiven Elemente ausreichend dimensioniert sein müssen. Beim Call to Action wählt man bestenfalls eine sich über die ganze Breite des Bildschirms  erstreckende Fläche. Auf diese Weise lässt sich sicherstellen, dass weder Links- noch Rechtshänder vom UI diskriminiert werden. Auch eine farbliche Kennzeichnung bietet sich für ein schnelleres Verständnis seitens der Nutzer an.

Eine sehr einfach gehaltene Navigation wirkt sich auf mobilen Endgeräten ebenfalls positiv aus. Generell muss jedes Element der Mail so gestaltet sein, dass der Leser ohne Probleme versteht, für was es steht. Komplexität ist Gift im mobilen Mail-Marketing.

Fazit

Aufgrund der Entwicklung bei den Nutzern, die ihre Mails immer häufiger mobil lesen, sollten Designer den Hauptfokus bei Mails nicht mehr auf Mail-Clients für den Desktop legen. Um responsiv gestaltete Mails kommt heute kein Unternehmen mehr herum, und ähnlich wie beim Webdesign sollte man auch bei der Gestaltung von Mails einen Mobile-First-Ansatz verfolgen.

Das heißt allerdings keinesfalls, dass man Desktop-Software und Webmail-Clients ignorieren sollte. Weitere Tipps für das E-Mail-Marketing findet ihr auf t3n.

]]>
Sébastien Bonset