Design | t3n News News, Infos, Tipps und aktuelle Artikel zu Design 2014-10-20T07:38:55Z t3n Redaktion http://t3n.de/tag/design Infografik: Wie unser Hirn auf Logos reagiert http://t3n.de/news/infografik-hirn-logos-reagiert-572948/ 2014-10-20T07:38:55Z
Weniger als eine Sekunde dauert es, bis sich das Gehirn für eine Reaktion auf Logos entscheidet. Eine Infografik zeigt, was in dieser Zeit passiert und wie sich das Hirn verhält.

Weniger als eine Sekunde dauert es, bis sich das Gehirn für eine Reaktion auf Logos entscheidet. Eine Infografik zeigt, was in dieser Zeit passiert und wie sich das Hirn verhält.

Logos: Infografik zeigt Reaktionen

Innerhalb von 400 Millisekunden ist es geschehen. Schaut ein Betrachter ein neues Logo an, hat sich das Gehirn schnell für eine Reaktion darauf entschieden. Innerhalb kürzester Zeit steht also fest, wie man auf ein Logo und damit vielleicht sogar auf einen gesamten Brand reagiert.

Eine Infografik von Logomaker fasst die aktuellen Forschungsergebnisse aus der Neurowissenschaft zusammen. Sie zeigt, was im ersten Moment des Betrachtens eines Logos im Gehirn passiert, wo die entsprechenden Informationen verarbeitet werden und wie Farben, Formen und Bedeutungen zusammenspielen.

Ein Klick auf untenstehendes Vorschaubild öffnet die ganze Infografik. Logos-Reaktionen-Infografik-Logomaker-How-Your-Brain-Sees-A-Logo-teaser

via blog.hubspot.com

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Johannes Schuba
Freebbble: 1000 kostenlose Design-Vorlagen aus dem Dribbble-Imperium http://t3n.de/news/freebbble-1000-kostenlose-design-vorlagen-572949/ 2014-10-20T07:34:42Z
Aus dem Alltag vieler Designer ist Dribbble nicht mehr wegzudenken. Freebbble, ein Spin-off der populären Plattform, stellt Nutzern jetzt über 1.000 kostenlose Inhalte zum Sofortabruf zur Verfügung.

Aus dem Alltag vieler Designer ist Dribbble nicht mehr wegzudenken. Freebbble, ein Spin-off der populären Plattform, stellt Nutzern jetzt über 1.000 kostenlose Inhalte zum Sofortabruf zur Verfügung.

Freebbble bietet über 1.000 Design-Vorlagen

Vier Jahre nach dem Start dürfte Dribbble zum festen Wortschatz unter Kreativschaffenden gehören. Ob Designer, Webentwickler, Illustratoren oder Typographen – knapp 500.000 Nutzer stellen auf der Plattform ihre Arbeiten vor und lassen sie von Gleichgesinnten bewerten.

Freebbble bietet über 1.000 kostenlose Design-Vorlagen. (Screenshot: t3n)
Freebbble bietet über 1.000 kostenlose Design-Vorlagen. (Screenshot: t3n)

Entsprechend groß ist auch die Zahl an kostenlosen Vorlagen, Icons und Templates. Weil die angesichts der schieren Fülle an Inhalten aber nicht immer einfach aufzufinden sind, leistet die Website Freebbble Abhilfe. Sie hält, was ihr Name verspricht: Mehr als 1.000 kostenlose Vorlagen zum produktiven Einsatz im Design- und Kreativumfeld hält Freebbble zum Download bereit.

Das findest du auf Freebbble

Darunter finden sich zum Beispiel Icon-Sets, fotorealistische Mockups für Smartphones und Tablets, Vektorgrafiken, WordPress-Templates und mehr. Für Designer ergibt sich so eine beachtliche Inspirationsquelle. Aus Sicht von Besuchern der Seite ist erfreulich, dass eine vorherige Registrierung für den Download der Inhalte nicht erforderlich ist.

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Daniel Hüfner
41 minimalistische Wallpaper für einen schicken Desktop http://t3n.de/news/minimalistische-wallpaper-desktop-549927/ 2014-10-20T04:30:06Z
Keine Lust mehr auf den Standard-Hintergrund deines Desktops? Du magst es minimalistisch? Dann haben wir hier ein wenig Wallpaper-Inspiration für euch.

Keine Lust mehr auf den Standard-Hintergrund deines Desktops? Du magst es minimalistisch? Dann haben wir hier ein wenig Wallpaper-Inspiration für euch.

Es gibt verschiedene Seiten im Netz, die minimalistische Wallpaper für Interessierte zur Verfügung stellen – beispielsweise simpledesktops.com. In der folgenden Galerie haben wir 41 individuelle Wallpaper zusammengestellt, die ein wenig Abwechslung auf den virtuellen Schreibtisch bringen. Es finden sich unter anderem Hintergrundbilder für Nostalgiker, die auf 8-Bit-Motive stehen sowie Motive bestimmter Kult-Charaktere, die das Fanboy-Herz höher schlagen lassen. Doch auch symbolträchtige Beispiele findet ihr, die eine politische Aussage in sich tragen. Viel Spaß bei der Auswahl!

41 minimalistische Wallpaper für jeden Geschmack!

Minimalistische Wallpaper - Cloud-Storage: Zum Download: SimpleDesktops.
Minimalistische Wallpaper - Cloud-Storage: Zum Download: SimpleDesktops.

Dieser Artikel ist eine Überarbeitung eines Artikels aus dem Jahr 2013.

via simpledesktops.com

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Andreas Weck
Typografie im Webdesign: So kannst du Schriftarten kombinieren http://t3n.de/magazin/typografie-webdesign-235755/ 2014-10-17T11:22:11Z
Die richtige Schrift war schon immer ausschlaggebend für gutes Design. Seit Webfonts im Web typografische Vielfalt erlauben, stehen auch Webdesigner vor der Herausforderung, die genau passende …

Die richtige Schrift war schon immer ausschlaggebend für gutes . Seit Webfonts im Web typografische Vielfalt erlauben, stehen auch Webdesigner vor der Herausforderung, die genau passende Schrift auszuwählen. Dabei kommt es vor allem auch auf die richtige Kombination von Schriften an.

Der Webdesigner Gerrit van Aaken definiert Typografie als „die Kunst und Lehre der grafischen Gestaltung, die in irgendeiner Form mit Schriftzeichen zusammenhängt“. umfasst damit ein weites Feld und entscheidet maßgeblich über Eindruck und Nutzerfreundlichkeit einer Website. Oliver Reichenstein, Gründer bei der bekannten Agentur Information Architects, meinte bereits 2006: „Webdesign ist zu 95 Prozent Typografie“. Nachdem sich ab 2007 Webfonts durchgesetzt haben, hat die typografische Vielfalt im Web nochmals einen gehörigen Schub erhalten – Services wie Typekit oder Google Fonts sei Dank. Das bedeutet, dass Webdesigner zunehmend gute Kenntnisse zur Beurteilung einer Schrift brauchen.

Gefeierte Vielfalt

Stark vereinfacht kann Typografie zwei Ziele verfolgen: Sie ist entweder expressives Gestaltungsmittel oder ein reduzierter Informationsträger. Die erste Variante feiert die Schrift als Ausdrucksmittel und nutzt ihre gestalterische Kraft. Da die Leserlichkeit hier nicht im Vordergrund steht, eignet sich dieser Stil vorrangig für Websites mit wenig Text – oder solchen, die bewusst aus der Reihe tanzen möchten.

dms ae38b6038798102c74c79d038f96b037
Das Magazin „Literary Bohemian“ spielt mit einer expressiven Schriftkombination und versprüht so Reklame-Charme.
Expressive Schriftmischungen, wie auf der Website des Magazins „Literary Bohemian“, versprühen starken Retro-Charme und haben einen sehr plakativen Reklame-Charakter. Dieser Stil ist jedoch auch sehr experimentell und verlangt vom Gestalter einiges an Erfahrung – schließlich sollte man Fonts nicht einfach wild durcheinander würfeln.

Reduzierte Typografie

Im üblicher ist die reduzierte Typografie: Die Schrift wird eher als Mittel zum Zweck verwendet und nicht als zentrales Gestaltungselement. Wichtig ist dann, dass der Nutzer den Inhalt gut erfassen kann, die gewählten Schriften also gut leserlich sind. In diesem Fall sollten Webdesigner nicht zu viele Schriften verwenden – zwei oder drei Varianten dürften meist ausreichen. Der Leserlichkeit dient auch die Verwendung großer Typografie, die seit Jeffrey Zeldmans Manifest im Trend liegt.

dms dea6c7c3afba77dbb09b68ff2601d003
Auch der Webentwickler Peter Kröner achtet auf seiner Website auf eine gute Lesbarkeit seiner Texte und nutzt daher eine angenehm große Schrift.

Kontrast statt Konflikt

Kombiniert man Schriften miteinander, entsteht ein Schriftkontrast. Ob die Schriften zueinander passen, hängt von der richtigen Balance ab. Cameron Chapman bringt es in einem Artikel auf die Formel: „Kontrast ja, Konflikt nein“. Konflikte können dabei sowohl bei zu wenig als auch bei zu viel Kontrast entstehen. Sind die Schriften zu ähnlich, heben sie sich nicht genug voneinander ab. Die Auswahl wirkt zufällig, als habe der Designer aus Versehen eine falsche Schrift eingestellt. Ist der Kontrast zu stark, wirkt dies unprofessionell – die Schriften scheinen beliebig nebeneinander gesetzt. Eine stimmige Schriftmischung hat also genau den richtigen Kontrast.

dms c4abc24ab3e030871bf58e1dfb1c88cd
Der Kontrast zwischen den Schriften bestimmt die Harmonie – und auch, wie professionell ein Design wirkt (oben: zu wenig Kontrast, unten: zu viel Kontrast).
Der Spielraum dabei ist jedoch enorm, je nachdem, ob eher ein harmonischer oder ein extremer Eindruck gewünscht ist.

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Björn Rohles
Schnell und einfach zu interaktiven Prototypen: Das kann Pixate http://t3n.de/news/pixate-prototyping-ios-android-572097/ 2014-10-15T11:13:48Z
Mit Pixate erstellt ihr schnell interaktive Prototypen für Mobilgeräte. Dank der dazugehörigen Apps für Android und iOS könnt ihr Animationen und Interaktionen direkt auf eurem Smartphone testen.

Mit Pixate erstellt ihr schnell interaktive Prototypen für Mobilgeräte. Dank der dazugehörigen Apps für Android und iOS könnt ihr Animationen und Interaktionen direkt auf eurem Smartphone testen.

Mit Pixate erstellt ihr schnell eigene Prototypen und testet sie auf eurem Smartphone. (Screenshot: Pixate)
Mit Pixate erstellt ihr schnell eigene Prototypen und testet sie auf eurem Smartphone. (Screenshot: Pixate)

Pixate: Kinderleicht zum interaktiven Prototyp

Prototyping-Tools für Mobile-Apps gibt es mittlerweile einige. Von der Konkurrenz soll sich Pixate vor allem durch die Fähigkeit absetzen, innerhalb kurzer Zeit interaktive Prototypen zu erstellen und direkt auf dem Zielgerät testen zu können. Pixate selbst existiert in Form einer Web- und einer OS-X-App. Getestet werden können die interaktiven Designs auf iOS- und Android-Geräten.

Der Umgang mit Pixate ist denkbar einfach. Zunächst wählt ihr ein Zielgerät für euren Prototyp aus. Hier stehen euch die verschiedenen iPhones, die Apple Watch und bekannte Android-Smartphones als Vorlagen zur Verfügung. Ihr könnt aber auch selbst die Bildschirmgröße eures Zielgerätes festlegen. Dann legt ihr eure Design-Elemente in Form von Ebenen an. Der Umgang mit ihnen entspricht dem, was wir von Bildbearbeitungsprogrammen wie Photoshop kennen. Jedes dieser Elemente kann per Drag-and-Drop mit einer Interaktion versehen werden. Die lassen sich je nach Bedarf einfach anpassen. Außerdem stehen verschiedene Animationen bereit.

Pixate: Euer Smartphone zeigt euch den aktuellen Stand des Prototyps

Den Fortschritt eures Prototyps seht ihr immer direkt auf dem Bildschirm eures Smartphones, zumindest wenn ihr die entsprechende iOS- oder Android-App installiert habt. Dann könnt ihr euren Prototyp testen und schauen, ob das Design wie gewünscht auf dem Mobilgerät aussieht. Android-Nutzer klagen derzeit zwar noch über einen recht hohen Akkuverbrauch durch die App, ansonsten funktionierte sie in unserem kleinen Test aber einwandfrei.

Pixate erlaubt auch die Arbeit mehrerer Team-Mitglieder an einem Prototyp. Wer möchte, kann das Tool für dreißig Tage kostenlos testen. Danach wird der Abschluss eines kostenpflichtigen Abonnements notwendig. Die Preise beginnen für eine einzelne Person bei 8,34 US-Dollar. Teams zahlen 16,67 US-Dollar pro Monat und Nutzer. Zu einem späteren Zeitpunkt soll es außerdem ein Enterprise-Paket für große Unternehmen geben. Wer schnell interaktive Prototypen erstellen möchte, sollte unbedingt einen Blick auf Pixate werfen.

mzl.ayuoyjrt. 75
Pixate
Download @
App Store
Entwickler: Pixate, Inc.
Preis: Kostenlos

Pixate
Download @
Google Play
Entwickler: Pixate, Inc.
Preis: Kostenlos

via www.producthunt.com

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Kim Rixecker
Twenty Fifteen: Das neue Standard-Theme für WordPress legt den Fokus auf Einfachheit und Typografie http://t3n.de/news/twenty-fifteen-standard-wordpress-theme-572042/ 2014-10-15T09:44:02Z
Für WordPress erscheint jedes Jahr ein neues Standard-Theme. Aktuell ist es Twenty Fourteen, das voraussichtlich im Dezember mit dem Release von WordPress 4.1 von Twenty Fifteen abgelöst wird.

Für WordPress erscheint jedes Jahr ein neues Standard-Theme. Aktuell ist es Twenty Fourteen, das voraussichtlich im Dezember mit dem Release von WordPress 4.1 von Twenty Fifteen abgelöst wird. Wie das Theme aussieht und welche Theme-spezifischen Funktionen und Möglichkeiten es bietet, zeigen wir euch in diese Artikel.

Twenty Fifteen: Schlicht und auf den Inhalt fokussiert

Twenty Fifteen, das neue Standard-Theme von WordPress. (Screenshot: WordPress-Make-Blog)
Twenty Fifteen, das neue Standard-Theme von WordPress. (Screenshot: WordPress-Make-Blog)

Takashi Irie ist verantwortlich für das Design des Themes und beschreibt es als Blog-fokussiertes Theme mit Augenmerk auf Typografie. Das Theme ist zweispaltig aufgebaut: Der Inhalt befindet sich rechts, die Sidebar links – wenn der Viewport zu klein wird, verschwindet der Sidebar-Bereich. Er kann dann per Button-Klick über dem Inhalt eingeblendet werden. Des weiteren gibt es einen Footer-Bereich, in dem sich der „Proudly-powered-by-WordPress“-Hinweis befindet.

Damit ihr euch einen besseren Eindruck davon machen könnt, starten wir erst mal mit weiteren Screenshots:

Twenty Fifteen: Umfangreiche Möglichkeiten der Anpassung

Twenty Fifteen bringt neben dem schön einfachen und klaren Design einiges an Anpassungsmöglichkeiten mit. Das Theme bietet einen Widget-Bereich, der in der Sidebar erscheint und in dem ihr wie gewohnt eure Widgets platzieren könnt. Des Weiteren werden zwei Menüpositionen angeboten: eine normale Navigation, die in der Sidebar direkt unter dem Titel beziehungsweise gegebenenfalls unter der Beschreibung erscheint und ein Menü für eure Profile bei Sozialen Netzwerken. Um dieses Feature zu nutzen, müsst ihr nur ein neues Menü erstellen, eure Social-Media-Links einfügen und es der Position „Social Links Menu“ zuweisen. Folgende Netzwerke sind integriert:

Codepen, Digg, Dribbble, Dropbox, Facebook, Flickr, GitHub, Google+, Instagram, LinkedIn, Email (mailto: links), Pinterest, Pocket, PollDaddy, Reddit, RSS Feed (urls mit „/feed/“), Spotify, StumbleUpon, Tumblr, Twitch, Twitter, Vimeo, WordPress und YouTube.

Anpassungs-Möglichkeiten von Twenty Fifteen im Theme Customizer. (Screenshot: WordPress-Make-Blog)
Anpassungs-Möglichkeiten von Twenty Fifteen im Theme Customizer. (Screenshot: WordPress-Make-Blog)

Daneben bietet euch das Theme die Möglichkeit, das Aussehen über den Theme-Customizer anzupassen. Hier steht euch neben den Standard-Funktionen wie der Anpassung des Titels und der Beschreibung, dem Hinzufügen eines Header-Bilds (wird als Hintergrund des Sidebar-Bereichs eingerichtet) und eines Hintergrundbilds (ist dann der Hintergrund des Inhaltsbereichs) sowie dem direkten Zugriff auf Widgets und Menüs noch die Möglichkeit zur Verfügung, die Farben des Themes anzupassen.

Dazu könnt ihr aus fünf alternativen Farb-Schemata auswählen oder die Farben den Header-Text, die übrigen Sidebar-Texte sowie der Hintergrundfarbe für den Inhaltsbereich und den Sidebar-Bereich selbst wählen.

Twenty Fifteen: Im Dezember ist es soweit

Wie schon angesprochen soll Twenty Fifteen mit dem Release von WordPress 4.1 in der finalen Version veröffentlicht werden – er ist für den 8. Dezember geplant. Seit gestern steht das Theme zum Download zur Verfügung, wie im Blog des Make-Bereichs auf wordpress.org zu lesen ist. Wenn ihr helfen wollt, dass Bugs und andere Fehler behoben werden, könnt ihr einfach ein Ticket anlegen.

Was haltet ihr von diesem neuen Theme? Ist es euch zu schlicht oder genau das, worauf ihr gewartet habt?

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Florian Brinkmann
Ein Augenschmaus: 50 minimalistische und inspirierende Visitenkarten http://t3n.de/news/45-minimalistische-visitenkarten-505583/ 2014-10-15T04:00:39Z
Schlichtes Design funktioniert dieser Tage fast überall. Beliebt sind beispielsweise auch minimalistische Visitenkarten. Was mit ihnen assoziiert wird und wie sie aussehen können, erfahrt ihr in …

Schlichtes funktioniert dieser Tage fast überall. Beliebt sind beispielsweise auch minimalistische Visitenkarten. Was mit ihnen assoziiert wird und wie sie aussehen können, erfahrt ihr in diesem Beitrag.

Minimalistische Visitenkarten können viel über eine Person aussagen

Klasse Idee: Minimalistische Visitenkarten per Stempeldruck. (Quelle: Mike Burton
Klasse Idee: Minimalistische Visitenkarten per Stempeldruck. (Quelle: Mikey Burton)

Visitenkarten sind heutzutage nicht mehr jedermanns Sache. In Zeiten von Social Media und Karriere-Netzwerke verweisen viele Personen lieber auf ihr Online-Profil – nicht selten, weil sie sich dort umfangreich präsentieren können. Ein Foto hier, ein weiterführender Link da und eine Vita in der Infobox, die keine Fragen offen lässt. Doch es gibt auch noch Personen, die es etwas puristischer mögen, lieber den dezenteren Weg bevorzugen und auf die kleinen Kärtchen zurückgreifen. Auch gibt es Menschen, die ihre Visitenkarten zu kleinen Kunstwerken machen und mit detailreichen Illustrationen ausstatten oder sie ganz einfach minimalistisch halten. Tatsächlich kann so eine Karte viel über einen Menschen aussagen – manchmal sogar mehr als ein Online-Profil auf Facebook, Xing und Co.

Nehmen wir das minimalistische Beispiel: Solch ein Design wird oft mit einem modernen und stilvollen Typus assoziiert. Zudem wirkt es auf viele Menschen luxuriös – unabhängig vom Beruf oder dem Status im Unternehmen. Wie so ein Design schlussendlich aussehen kann, möchten wir euch in diesem Beitrag zeigen. Insofern haben wir uns für diesen Artikel im Web umgeschaut und einige wirklich sehenswerte Beispiele zusammengestellt. Nicht zuletzt, um zu inspirieren und euch zu zeigen, wie man sein „Digitales Ich“ auch gebührend auf einem kleinen, rechteckigen Papierkärtchen ins rechte Licht rücken kann.

Dieser Artikel ist eine Überarbeitung eines Artikels aus dem Jahr 2013.

Stellenanzeige auf t3n Jobs schalten

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Andreas Weck
40 kostenlose WordPress-Themes für Responsive Design http://t3n.de/news/kostenlose-wordpress-themes-responsive-webdesign-376838/ 2014-10-14T16:30:24Z
Das Angebot an kostenlosen Templates für die eigene Website wächst stetig. Auch die Auswahl an Wordpress-Themes, die Responsive Webdesign unterstützen, ist inzwischen beachtlich.

Das Angebot an kostenlosen für die eigene Website wächst stetig. Auch die Auswahl an , die unterstützen, ist inzwischen beachtlich. Zur besseren Übersicht hier eine Auswahl von 40 kostenlosen und responsiven WordPress-Themes.

Responsive Design bei WordPress-Themes

Immer mehr Nutzer surfen über mobile Endgeräte im Internet. Ob unterwegs mit dem Smartphone oder auf der Couch mit dem Tablet: Neue Nutzungsgewohnheiten verändern die Anforderungen an Websites jedweder Machart. Mit einem responsiven WordPress-Theme verbessert ihr die Usability und Lesbarkeit eurer jetzigen und eurer zukünftigen Besucher.

Schon jetzt haben Notebooks und Smartphones den Desktop als beliebtesten Zugangsweg ins Internet hinter sich gelassen, wie die ARD/ZDF-Onlinestudie 2014 zeigt. Und auch der Anteil der Nutzer, die Internetinhalte über das Tablet abrufen, hat sich von 16 Prozent im Jahr 2013 auf 28 Prozent im Jahr 2014 gesteigert.

Vieles spricht daher für ein WordPress-Theme, das auch für mobile Endgeräte optimiert wurde.

40 WordPress-Themes für Responsive Design

Die folgenden WordPress-Themes sind durch Responsive Webdesign für alle Endgeräte optimiert. Wer auf eigene Faust eine responsive Website erstellen will, sollte sich stattdessen in die Einzelteile der folgenden Artikelserie einlesen:

  1. Responsive Webdesign, Teil 1: Layout- und Textdarstellung
  2. Responsive Webdesign, Teil 2: Das Navigationsmenü
  3. Responsive Webdesign, Teil 3: Darstellung von Galerien und Videos

1. Twenty Fourteen von WordPress

Responsive WordPress-Theme: Twenty Fourteen.
Twenty Fourteen, das diesjährige Default-Theme von WordPress, ist vollständig für responsive Websites ausgelegt. (Screenshot: Twenty Fourteen)

2. Twenty Thirteen von WordPress

Responsive WordPress-Theme: Twenty Thirteen.
Auch das 2013er WordPress-Theme Twenty Thirteen wartet mit responsiven Funktionalitäten auf. (Screenshot: Twenty Thirteen)

3. Codium Extend von CodeReduction

Responsive WordPress-Theme: Codium Extend. (Screenshot: Codium Extend)

4. Live Wire von Theme Hybrid

Responsive WordPress-Theme: Live Wire.
Das responsive WordPress-Theme Live Wire ist unter der Maßgabe Mobile First entwickelt worden. (Screenshot: Live Wire)

5. Pinboard von One Designs

Hinweis: Standardmäßig ist hier Infinite Scroll aktiviert, was mit einem Footer natürlich etwas unglücklich ist. Das kann in den Theme-Optionen umgestellt werden.

Responsive WordPress-Theme: Pinboard.
Responsive WordPress-Theme: Pinboard. (Screenshot: Pinboard)

6. Match von DoveThemes

Responsive WordPress-Theme: Match.
Schön für persönliche Webseiten: Das responsive WordPress-Theme Match. (Screenshot: Match)

7. Fictive von Automattic

Responsive WordPress-Theme: Fictive.
Das WordPress-Theme Fictive legt Wert auf Personalisierung – etwa durch Einbindung der Social Networks. (Screenshot: Fictive)

8. RestImpo von Tomas Toman

Responsive WordPress-Theme: RestImpo.
Das Theme RestImpo bietet unter anderem sechs vorgefertigte Farbschemata, 220 Schriftarten und Unterstützung für viele populäre Plugins. (Screenshot: RestImpo)

9. Superhero von Automattic

Responsive WordPress-Theme: Superhero. (Screenshot: Superhero)
Große Bilder und farbliche Akzente: Das kostenlose WordPress-Theme Superhero. (Screenshot: Superhero)

10. Spacious von ThemeGrill

Responsive WordPress-Theme: Spacious. (Screenshot: Spacious)
Spacious gehört zu den WordPress-Themes, die besonders aufgeräumt daher kommen. (Screenshot: Spacious)

11. Times von Rohit Tripathi

Responsive WordPress-Theme: Times. (Screenshot: Times)
Viele Content-News auf einen Blick: Das responsive Theme Times. (Screenshot: Times)

12. Radiate von ThemeGrill

Responsive WordPress-Theme: Radiate. (Screenshot: Radiate)
Mit Radiate holt ihr euch ein modernes WordPress-Theme im klaren Look ins Haus. (Screenshot: Radiate)

13. Perfetta von GavickPro

Responsive WordPress-Theme: Perfetta. (Screenshot: Perfetta)
Das Theme Perfetta wurde speziell für Gastronomen und Food-Blogger entwickelt. (Screenshot: Perfetta)

14. Influence von SiteOrigin

Responsive WordPress-Theme: Influence. (Screenshot: Influence)
Das Theme Influence bietet einen gewissen Hipster-Charme. (Screenshot: Influence)

15. Hemingway von Anders Norén

Responsive WordPress-Theme: Hemingway. (Screenshot: Hemingway)
Das responsive WordPress-Theme Hemingway kommt mit Vollbild-Header-Image und Parallax Scrolling. Fun Fact: Auch eine schwedische Übersetzung ist verfügbar. (Screenshot: Hemingway)

16. Baskerville von Anders Norén

Responsive WordPress-Theme: Baskerville. (Screenshot: Baskerville)
Baskerville kommt mit Widgets für Videos, Flickr und Dribbble. (Screenshot: Baskerville)

17. Wilson von Anders Norén

Responsive WordPress-Theme: Wilson. (Screenshot: Wilson)
Ein WordPress-Theme für Webworker: Wilson. (Screenshot: Wilson)

18. Lingonberry von Anders Norén

Responsive WordPress-Theme: Lingonberry. (Screenshot: Lingonberry)
Ein Hauch von Retina: Das WordPress-Theme Lingonberry bedient eure künstlerischen Ansprüche. (Screenshot: Lingonberry)

19. Pho von ThematoSoup

Responsive WordPress-Theme: Pho. (Screenshot: Pho)
Die Macher von Pho versprechen ein „leanes“ und schnelles responsives WordPress-Theme. (Screenshot: Pho)

20. Dice von Jens Törnell

Responsive WordPress-Theme: Dice. (Screenshot: Dice)
Responsive WordPress-Theme: Dice. (Screenshot: Dice)

21. Kubrick 2014 von John Wilson

Responsive WordPress-Theme: Kubrick 2014. (Screenshot: Kubrick 2014)
John Wilson hat einem Klassiker der WordPress-Themes ein responsives Update verpasst. (Screenshot: Kubrick 2014)

22. Adaption von Automattic

Responsive WordPress-Theme: Adaption. (Screenshot: Adaption)
Noch mehr responsive WordPress-Themes von Automattic – hier: Adaption. (Screenshot: Adaption)

23. Isola von Automattic

Responsive WordPress-Theme: Isola. (Screenshot: Isola)
Das WordPress-Theme Isola besticht durch seine Einfachheit. (Screenshot: Isola)

24. Bosco von Automattic

Responsive WordPress-Theme: Bosco. (Screenshot: Bosco)
Bei diesem responsiven Theme hat Automattic Wert auf außergewöhnliche Typographie gelegt. (Screenshot: Bosco)

25. Radar von wphigh

Responsive WordPress-Theme: Radar. (Screenshot: Radar)
Ein responsives WordPress-Theme im Flat-Desing-Stil: Radar. (Screenshot: Radar)

26. Forefront von Thomas Usborne (Child-Theme für GeneratePress)

Responsive WordPress-Theme: Forefront. (Screenshot: Forefront)
Responsive WordPress-Theme: Forefront. (Screenshot: Forefront)

27. Solon von aThemes

Responsive WordPress-Theme: Solon. (Screenshot: Solon)
Mit Solon nutzt ihr ein responsives WordPress-Theme, das persönlichen Blogs einen modernen Anstrich verleiht. (Screenshot: Solon)

28. Hudson von Michael Burrows

Responsive WordPress-Theme: Hudson. (Screenshot: Hudson)
Responsive WordPress-Theme: Hudson. (Screenshot: Hudson)

29. Eighties von Justin Kopepasah

Responsive WordPress-Theme: Eighties. (Screenshot: Eighties)
The Eighties are back! In Form eines Responsive-Themes für WordPress. (Screenshot: Eighties)

30. Editor von Array

Responsive WordPress-Theme: Editor. (Screenshot: Editor)
Ein besonders elegantes und minimalistisches WordPress-Theme findet ihr in Editor. (Screenshot: Editor)

31. Pictorico von Automattic

Responsive WordPress-Theme: Pictorico. (Screenshot: Pictorico)
Wer besonders viel mit Bildern arbeitet, sollte sich das responsive Theme Pictorico anschauen. (Screenshot: Pictorico)

32. Independent Publisher von Raam Dev

Responsive WordPress-Theme: Independent Publisher. (Screenshot: Independent Publisher)
Das Theme Independent Publisher erlaubt es euren Lesern, sich voll und ganz auf eure Texte zu konzentrieren. (Screenshot: Independent Publisher)

33. Ignite von Compete Themes

Responsive WordPress-Theme: Ignite. (Screenshot: Ignite)
Die Nutzer des WordPress-Themes Ignite loben vor allem den guten Support. (Screenshot: Ignite)

34. Drop von Compete Themes

Responsive WordPress-Theme: Drop. (Screenshot: Drop)
Responsive WordPress-Theme: Drop. (Screenshot: Drop)

35. Esperanza Lite von Qlue Themes

Responsive WordPress-Theme: Esperanza. (Screenshot: Esperanza)
Mit ihrem responsiven Theme wollen die Macher von Esperanza eine einfache, nahtlose Arbeitsumgebung für Blogger bieten. (Screenshot: Esperanza)

36. Hexa von Automattic

Responsive WordPress-Theme: Hexa. (Screenshot: Hexa)
Ein Hauch von Retro-Charme: Das responsive WordPress-Theme Hexa. (Screenshot: Hexa)

37. Ex Astris von Sarah Gooding (Child-Theme für Stargazer)

Responsive WordPress-Theme: Ex Astris. (Screenshot: Ex Astris)
Das responsive WordPress-Theme Ex Astris ist speziell für die Nutzer des Themes Stargazer entwickelt worden. (Screenshot: Ex Astris)

38. Zweig von Simon Vandereecken

Responsive WordPress-Theme: Zweig. (Screenshot: Zweig)
Wer es ein bisschen extravagant mag, kann sich vielleicht für das Theme Zweig begeistern. (Screenshot: Zweig)

39. Sorbet von Automattic

Responsive WordPress-Theme: Sorbet. (Screenshot: Sorbet)
Ein WordPress-Theme, das an den Sommer erinnert: Sorbet. (Screenshot: Sorbet)

40. Highwind von jameskoster

Responsive WordPress-Theme: Highwind. (Screenshot: Highwind)
Das schwerelose Design des responsiven Themes Highwind soll den richtigen Rahmen für eure Inhalte liefern. (Screenshot: Highwind)

Wir hoffen, dass wir euch einige neue Themes zeigen konnten. Übrigens: Bei der Erstellung eigener WordPress-Themes unterstützt euch diese t3n-Artikelreihe.

Kennt ihr weitere kostenlose WordPress-Themes, die responsive sind und hier nicht fehlen dürfen?

Letztes Update des Artikels: 12. Oktober 2014. Der Originalartikel stammt von Lars Budde.

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Florian Brinkmann
Sind die Farben deiner Seite barrierefrei? WebAIM bietet dir einen einfachen Check http://t3n.de/news/webseiten-barrierefrei-gestalten-571747/ 2014-10-14T12:17:05Z
Barrierefreie Farbkombinationen sind nicht nur für Menschen mit Farbsehschwäche wichtig. WebAIM bietet eine Maske, mit der du schnell überprüfen kannst, ob die Farb- und Helligkeitskontraste auf …

Barrierefreie Farbkombinationen sind nicht nur für Menschen mit Farbsehschwäche wichtig. WebAIM bietet eine Maske, mit der du schnell überprüfen kannst, ob die Farb- und Helligkeitskontraste auf deiner Seite barrierefrei sind.

Barrierefreiheit im Netz: Farbwahl und Kontraste sind entscheidend

Wie unser einfaches Beispiel zeigt, sind die richtigen Farb- und Helligkeitskontraste im Netz nicht nur für Menschen mit Sehschwäche wichtig.
Wie unser einfaches Beispiel zeigt, sind die richtigen Farb- und Helligkeitskontraste im Netz nicht nur für Menschen mit Sehschwäche wichtig.

Auf der Seite WebAIM ist es ohne großen Aufwand möglich, Farb- und Helligkeitskontraste auf ihre Barrierefreiheit hin zu testen. Wer die Farbwerte für Vorder- und Hintergrundfarbe angibt, bekommt direkt ausgeworfen, wie hoch der Kontrast ist und welcher Stufe des WCAG-Standards er entspricht.

Mit den „Lighten-“ und „Darken-“ Buttons kann man per Klick einzelne Farbnuancen verändern, bis der erwünschte Kontrast erreicht ist –der entsprechende Farbcode wird gleich mit ausgegeben. Die Maske berücksichtigt dabei normale oder große Schrift.

Warum ein Farbkontrast nicht immer ausreichend ist

(Screenshot: Webaim.org)
(Screenshot: Webaim.org)

Nicht immer reicht jedoch der richtige Farbkontrast aus. Menschen können Objekte digital auf zweierlei Arten voneinander abgrenzen: Entweder durch einen Farb- oder einen Helligkeitskontrast. Aufgrund von Sehbehinderungen, aber auch bei starkem Gegenlicht oder schlecht eingestellten Computerbildschirmen, kann es bei einer reinen Farbcodierung trotz ausreichendem Kontrast zu starkem Informationsverlust kommen.

Ein Beispiel: Wenn sich ein Button vom Hintergrund nur durch die Farbe unterscheidet, die beiden Farben jedoch eine ähnliche Sättigungs- beziehungsweise Helligkeitsstufe haben, wäre der Button in diesem Fall kaum noch erkennbar. Auch auf diese Weise können Barrieren bei der Wahrnehmung einer Webseite entstehen.

Die Organisation WebAIM empfiehlt daher zusätzlich das Tool ColorZilla für Firefox und das hauseigene WAVE: Mit ColorZilla könnt ihr die Farbwerte der einzelnen Seitenelemente einfach extrahieren. Und mit WAVE könnt ihr die Kontrastverhältnisse für alle Seitenelemente auf einmal analysieren. Aber auch sämtliche andere Kriterien, die für Barrierefreiheit wichtig sind, können überprüft werden.

Wie barrierefrei ist t3n.de? WebAIM im Test

(Screenshot: Webaim.org)
Check an der eigenen Seite t3n.de. Die Datumsangaben sind nicht barrierefrei und bestehen den Test nicht.  (Screenshot: Webaim.org)

Auch für t3n.de haben wir einen kleinen Check via WebAIM unternommen. Ergebnis: Zumindest unsere Datumsanzeigen haben in puncto Farb- und Helligkeitskontraste Luft nach oben.

Was ihr noch bei der Gestaltung barrierefreier Webseiten im Auge behalten solltet, erfahrt ihr auf der Homepage von WebAIM oder auf einfach-barrierefrei.net. Auch t3n.de hat gerade einen weiteren Schritt in Richtung Barrierefreiheit unternommen: Unsere Artikel kann man sich jetzt auch vorlesen lassen.

 

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Melanie Petersen
Sticker UI Book: Das Stickeralbum für UX- und UI-Designer http://t3n.de/news/sticker-ui-book-stickeralbum-571138/ 2014-10-10T09:14:57Z
Wer sagt, dass Webdesign nicht auch analog funktionieren kann? Das Sticker UI Book, das derzeit auf Kickstarter sein Glück versucht, versüßt UX- und UI-Designern nicht nur den kreativen Prozess, …

Wer sagt, dass Webdesign nicht auch analog funktionieren kann? Das Sticker UI Book, das derzeit auf Kickstarter sein Glück versucht, versüßt UX- und UI-Designern nicht nur den kreativen Prozess, sondern auch den Austausch und die Dokumentation ihrer Ideen.

Sticker UI Book: Design-Ideen kritzeln, kleben, zeigen

Die meisten Kreativen greifen auch in Zeiten überdimensionaler Screens, Notebooks und Tablets zwischendurch auf Stift und Papier zurück, um ihre Ideen festzuhalten. Nicht nur geht das manchmal schneller, es hilft auch, gedankliche Bilder besser greifbar zu machen – für sich und andere, deren Feedback man einholen möchte.

Das Sticker UI Book bietet einen Ort für deine Skizzen und Ideen zum UI-Design. (Foto: Killer, Inc.)
Das Sticker UI Book bietet einen Ort für deine Skizzen und Ideen zum UI-Design. (Foto: Killer, Inc.)

So geht es auch Jennifer Williams und Brandy Bora. Die beiden User-Experience-Designerinnen aus Brooklyn haben sich unter dem Firmennahmen Killer, Inc. zusammen getan, um das Leben von Web Professionals mit ebenso spaßigen wie nützlichen Produkten zu versüßen. Nun haben sie ihr erstes Projekt auf Kickstarter gebracht: Ein Stickeralbum, mit dem sich der Webdesign-Prozess analog vorbereiten lässt. Und sich dabei ein bisschen so anfühlt wie früher auf dem Schulhof, als man Regenbogen- und Glitzereinhorn-Aufkleber mit seinen Freunden ausgetauscht hat.

Von Statusbalken bis WYSIWYG: Das Sticker UI Book liefert die wichtigsten Templates gleich mit

Das Sticker UI Book soll sowohl Studenten als auch angehenden und professionellen UX- und UI-Designern einen Ort für ihre Ideen geben. Dazu bringt es auf 48 Seiten diverse Vordrucke – etwa Smartphone, Tablet oder Website – mit, in die sowohl Sticker eingeklebt als auch Notizen eingetragen werden können. Daneben gibt es aber auch freie Seiten, auf denen man seiner Kreativität völlig freien Lauf lassen kann.

Die mitgelieferten Stickerbögen umfassen typische Elemente aus dem User-Interface-Design, zum Beispiel oft genutzte Icons, Ladebalken, Mediaplayer oder auch die WYSIWYG-Toolbar. Auch mobile Tastaturen und diverse Buttons sind mit von der Partie. Die Macher des Sticker UI Book haben die Sticker so gestaltet, dass sie nicht zu üppig und komplex sind, um Ideen weiter zu entwickeln und die Elemente in das eigene Gestaltungskonzept einzubinden.

Derzeit hat das Sticker UI Book bei Kickstarter etwas mehr als die Hälfte der anvisierten 12.500 US-Dollar eingenommen, im Erfolgsfall sollen die ersten Sets noch im Winter verschickt werden. Wer das Projekt unterstützen und sich für 25 US-Dollar ein Stickeralbum sichern will, hat noch 20 Tage Zeit, dies zu tun.

via www.fastcodesign.com

]]>
Lea Weitekamp