Webdesign | t3n News News, Infos, Tipps und aktuelle Artikel zu Webdesign 2014-10-22T12:14:02Z t3n Redaktion http://t3n.de/tag/webdesign Macht Wired.de das Scrollytelling salonfähig? http://t3n.de/news/macht-wiredde-scrollytelling-573570/ 2014-10-22T12:14:02Z
Sie sind immer noch irgendwie in Mode: Scrollytelling-Websites. In diesem Artikel zeigen wir euch fünf Beispiele – und warum die deutsche Wired der eigentliche Gewinner ist.

Sie sind immer noch irgendwie in Mode: Scrollytelling-Websites. In diesem Artikel zeigen wir euch fünf Beispiele – und warum die deutsche Wired der eigentliche Gewinner ist. Bei allen Nachteilen, die scrolllastige Webprojekte haben, werden sie auch heute noch gerne eingesetzt. Die Folge sind oft Performance-Probleme, „Informations-Overkill“, schlechtes Handling durch stetiges Scrollen, fehlende Footer und Probleme beim Link-Sharing. Darüber hinaus rückt der Inhalt häufig in den Hintergrund, weil die Animationen die ganze Aufmerksamkeit auf sich ziehen.

Wir haben bereits mehrmals über Scrollytelling, aber auch von ScrollMagic berichtet – welches als Framework sicher zu den Besten gehört, um diese Art von Website umsetzen zu können. Wer vom Scrollytelling überzeugt ist, dem möchte ich die folgenden Inspirationen nicht vorenthalten:

Scrollytelling ist tot. Lange lebe Scrollytelling?

Scrollytelling-Websites werden teilweise als Heilmittel für den Journalismus gehandelt, weil Inhalte dadurch spannender und interaktiver vermittelt werden können. Publisher erhoffen sich, dass Leser für „spannenden“ oder „erlebbaren“ Inhalt lieber Geld ausgeben, als für klassische Formate wie ihr sie auch bei uns, oder auf anderen Portalen lesen könnt. Verlage wie beispielsweise die New York Times haben eigene Tools entwickelt, um Scrollytelling für Journalisten zugänglicher zu machen. Trotzdem treten Scrollytelling-Artikel nicht so häufig auf, wie es anfangs prophezeit oder erhofft wurde. Was ich persönlich aufgrund der Nachteile, die mit solchen Artikeln einhergehen, begrüße.

scrollytelling
Scrollytelling wie es sein sollte. (Screenshot: wired.de)

Vielmehr gibt es heute eine neue Entwicklung, nämlich einzelne Elemente des „klassischen“ Scrollytelling subtil anzuwenden. Ein positiver Versuch ist das neue Artikel-Layout der deutschen Wired. Hier wird der Text spaltenartig – allerdings nur mit einer Spalte – und teilweise asymmetrisch präsentiert, Zitate oder Bildergalerien unterstützen den Text, funktionieren aber auch alleinstehend und bekommen den ihnen gebührenden Whitespace. Egal ob Überschrift, Teaser oder einzelne Absätze, die Informationsblöcke sind leicht zu erfassen und machen zugleich auch einzeln etwas her. Das Scrollen selbst passiert eigentlich aus einem Feature heraus: die große Schriftgröße und der Whitespace. Dadurch entsteht zwar eine gewisse „Länge“ der Artikel, der Leser fühlt sich beim Scrollen aber nicht genervt, weil die Website künstlich in die Länge gezogen wird. Darüber hinaus verzichtet Wired.de auf überflüssige Animationen.

Wired.de, ein Vorzeigebeispiel

Sollte das Design der Wired-Artikel aus dem „klassischen“ Scrollytelling inspiriert beziehungsweise hervorgegangen sein, dann begrüße ich sie, denn: Einzeln wirken Stilmittel stärker, als wenn eine Website jeden Effekt wiedergibt, der bis dato entwickelt wurde. Wenn Scrollytelling-artige Websites den Journalismus retten können, dann nur so, wie es die deutsche Wired umzusetzen versucht: Die Vorteile von Scrollytelling nutzen, aber die Inhaltslänge kurz genug halten, um sicherzustellen, dass die Artikel lesbar sind und Performance-Probleme ausbleiben.

Wie denkt ihr über Scrollytelling?

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Mario Janschitz
Material Design: Google veröffentlicht 750 kostenfreie SVG-Icons http://t3n.de/news/google-material-design-icons-573630/ 2014-10-22T09:43:33Z
Google hat 750 SVG-Icons unter einer freien Creative-Commons-Lizenz veröffentlicht. Die Icons sind als Ressourcen für App-Entwickler gedacht, die Anwendungen im „Material Design“ erstellen wollen.

Google hat 750 SVG-Icons unter einer freien Creative-Commons-Lizenz veröffentlicht. Die Icons sind als Ressourcen für App-Entwickler gedacht, die Anwendungen im „Material Design“ erstellen wollen.

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

Google: Schicke Icons zur kostenfreien Verwendung veröffentlicht

Googles neue Designsprache „Material Design“ zeigt sich bereits in Android 5.0 Lollipop. Aber auch Web-Apps sollen, wenn es nach Google geht, auf „Material Design“ setzen. Um App-Entwickler dabei etwas unter die Arme zu greifen, hat der Suchgigant jetzt 750 SVG-Icons unter einer freien Creative-Commons-Lizenz auf GitHub veröffentlicht.

Die Icons decken verschiedene Funktionen ab und sind zum überwiegenden Teil einfarbig gehalten. Ausnahmen bilden vor allem Icons, die Zwischenstände bei der Akkuladung oder der WLAN-Empfangsqualität darstellen sollen. Die Icons könnt ihr euch entweder über die GitHub-Seite von Google herunterladen oder mit den folgenden Befehlen direkt über die Paket-Manager Bower und NPM:

$ bower install material-design-icons
$ npm install material-design-icons

Google: Material Design Icons stehen als SVG- und PNG-Dateien bereit

Die Icons kommen als SVG-Datei jeweils in einer Größe von 24 und 48 Pixeln. Außerdem gibt es SVG- und CSS-Sprites von allen Symbolbildchen. Darüber hinaus gibt es die Icons als PNG-Dateien in verschiedenen Versionen für das Web, iOS oder andere Einsatzgebiete. Wer sich alle Glyphen in Ruhe anschauen möchte, kann dazu die Live-Preview-Seite der Icons nutzen.

Wem die Icons nicht zusagen, der sollte einen Blick auf unsere Artikel „Iconmelon: Hier findet ihr kostenlose SVG-Icons für euer nächstes Projekt“ und „Flaticon: Fast 13.000 kostenlose Vektor-Icons zum Download“ werfen.

via www.producthunt.com

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Kim Rixecker
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
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
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
Responsive Webdesign für lau: Diese Website bündelt mehr als 500 Templates http://t3n.de/news/responsive-webdesign-fuer-lau-569426/ 2014-09-30T13:06:47Z
Du willst deine Website mit einem Responsive Webdesign versehen oder eine neue damit launchen? Dann solltest du einen Blick auf W3Layouts werfen. Die Website bündelt über 500 kostenlose …

Du willst deine Website mit einem versehen oder eine neue damit launchen? Dann solltest du einen Blick auf W3Layouts werfen. Die Website bündelt über 500 kostenlose Design-Vorlagen, gruppiert nach Themen und Branchen.

Responsive Webdesign: Große Sammlung mit thematischer Gruppierung

In Kategorien wie „Blogging Template“ „Interior and Furniture“ oder „Mobile App Templates“ bietet W3Layouts Zugriff auf über 500 Design-Vorlagen. Zu jeder Vorlage gibt es eine Demo, mit der man das Design vorab testen kann. Die kostenlosen stehen unter der Lizenz „Creative Commons Attribution 3.0 unported“, enthalten allerdings einen Backlink auf w3layouts.com, den man erst entfernen darf, wenn man 10 US-Dollar via PayPal spendet.

Neben vielen Responsive-Webdesign-Temples gibt es bei w3layouts.com auch einige UI-Kits.
Neben vielen Responsive-Webdesign-Temples gibt es bei w3layouts.com auch einige UI-Kits. (Quelle: w3layouts.com)

So oder so darf man die Responsive-Webdesign-Vorlagen von w3layouts für private und kommerzielle Projekte nutzen und sie bei Bedarf anpassen. Bei einigen Templates verlinkt w3layouts auch auf PSD-Dateien. Insgesamt eine sehr nützliche Sammlung für das nächste Website-Projekt, bei dem man ein Responsive Design nutzen möchte.

Responsive Webdesign für WordPress

Ist WordPress das CMS der Wahl, dann solltest Du einen Blick auf unseren Artikel zu Responsive-Webdesign-Templates für WordPress werfen.

]]>
Jan Christe
Die Basics des Responsive Webdesign [Infografik] http://t3n.de/news/basics-responsive-webdesign-568195/ 2014-09-22T09:08:10Z
Je schneller die Zahl der mobilen Internetnutzer steigt, desto dringender wird die Frage, wie sich Website-Inhalte auf verschiedenen Endgeräten optimal darstellen lassen. Ein möglicher …

Je schneller die Zahl der mobilen Internetnutzer steigt, desto dringender wird die Frage, wie sich Website-Inhalte auf verschiedenen Endgeräten optimal darstellen lassen. Ein möglicher Lösungsansatz ist – die wichtigsten Basics zeigt eine neue .

Responsive Webdesign: Grundvoraussetzung für die mobile Kommunikation

Nach den Analysten von Morgan Stanley wird die Zahl der mobilen Internetnutzer die der Desktop-Surfer noch vor Ende 2014 endgültig übersteigen. Auch in Deutschland ist der Trend eindeutig: Schon 2013 lag die Zahl der Internetnutzer, die von mobilen Endgeräten aus auf das Netz zugreifen, bei 51 Prozent – im Vergleich zu nur 37 Prozent im Vorjahr. In der Altersgruppe der 16–24-Jährigen stieg der Anteil der mobilen Internetnutzer innerhalb eines Jahres sogar von 59 auf 81 Prozent.

Wer das Internet nutzt, um seine Zielgruppen zu erreichen – und dabei nicht nur auf vorhandene Infrastrukturen wie Facebook setzt – sollte auf diese Entwicklung reagieren. Denn eine Seite, die aufgrund langer Ladezeiten und endlosem Scrolling für mobile Nutzer zur Tortur wird, konvertiert nicht – oder zumindest wesentlich schlechter als das Desktop-Pendant.

Einen Ausweg verspricht seit einiger Zeit das Responsive Webdesign, ein Gestaltungsprinzip, mit dessen Hilfe der Inhalt einer Website sich flexibel an die Gegebenheiten des jeweiligen Bildschirms beziehungsweise Endgerätes anpasst.

Infografik zeigt die Basics des Responsive Webdesign auf einen Blick

Einen Überblick darüber, wie genau Responsive Webdesign funktioniert und warum es sinnvoll ist, den eigenen Webauftritt entsprechend zu überarbeiten, liefert die folgende Infografik. Wer sich die wichtigsten Basics schnell noch einmal vor Augen rufen möchte oder einen Kunden oder Geschäftspartner vom Nutzen der Darstellungsform überzeugen muss, findet hier eine anschauliche Hilfestellung.

Zum Vergrößern der Grafik einfach auf den unten stehenden Ausschnitt klicken.

Ihr wollt selbst eine Website in Responsive Webdesign umsetzen? Dann findet ihr in unserer Artikelreihe Responsive Webdesign hilfreiche Tipps.

Responsive_Webdesign_Basics_Ausschnitt
Die Basics des Responsive Webdesign. (Grafik: Verve)

via blog.hubspot.com

]]>
Lea Weitekamp
WebTech Conference 2014: „Alle müssen ein Verständnis aufbauen, wie modernes Webdesign funktioniert“ [Sponsored Post] http://t3n.de/news/webtech-conference-2014-alle-567390/ 2014-09-17T13:20:27Z
Vom 26. bis 29. Oktober findet die WebTech Conference in München statt. Die Themen: Responsive Webdesign, Continuous Delivery, Dev-Ops. Im Vorfeld spricht Frontend-Entwickler und SVG-Anhänger Sven …

Vom 26. bis 29. Oktober findet die WebTech Conference in München statt. Die Themen: , Continuous Delivery, Dev-Ops. Im Vorfeld spricht Frontend-Entwickler und SVG-Anhänger Sven Wolfermann über die wichtigsten Kniffe im Responsive-Webdesign-Umfeld.

Zur WebTech Conference 2014: SVG-Crack Sven Wolfermann im Interview

Die WebTech Conference 2014 findet vom 26. bis 29. Oktober in München statt und beleuchtet eine Fülle technischer und methodischer Konzepte, die für den Erfolg im Web von großer Bedeutung sind. Neben ihrer Kompetenz für Responsive (mit HTML5) und JavaScript steht die Konferenz auch für moderne Architektur- und Methodenthemen wie agile Vorgehensweisen, Continuous Delivery und Dev-Ops. Sämtliche Themen werden von mehr als 60 erfahrenen Speakern diskutiert, unter anderem von Sven Wolfermann mit seinem Vortrag „SVG – weniger Pixel, mehr Fun“.

WTC Sven WolfermannSven Wolfermann ist freier Webentwickler mit Schwerpunkt Frontend-Entwicklung (HTML5/CSS3/RWD) und lebt in Berlin. Seit 2003 ist er mit seiner Firma „maddesigns“ für Agenturen und Firmen tätig. Sven arbeitet seit drei Jahren ausschließlich in Responsive-Webdesign-Projekten, hält Vorträge und leitet Workshops zum Thema RWD. Er hat ein Faible für Performance-Optimierung und ein Augenmerk auf UX und Accessibility. Zudem twittert er liebend gern unter @maddesigns. Im Interview steht er uns Rede und Antwort.

Frage: Sven, seit einiger Zeit schon stemmst du Projekte im Responsive-Webdesign-Umfeld. Wo liegen da – neben den Bildern – deiner Meinung nach die größten Probleme?

Sven Wolfermann: Es gibt natürlich eine Reihe von Problemen, die auf Webworker zukommen, wenn es um Responsive Webdesign geht. Das betrifft nicht nur Frontend-Entwickler im speziellen, sondern das ganze Team. Alle müssen ein Verständnis dafür aufbauen, wie modernes Webdesign funktioniert. Das zieht demzufolge einen veränderten agilen Workflow nach sich, um effizient zu arbeiten und Fehler möglichst früh im Designprozess erkennen zu können und zu beheben. Technisch ist vieles möglich, aber oft lassen sich Fehler im Konzept und im Design schwerer beheben. Probleme bereiten sicher die große Varianz der Bildschirme und ihre hohe Auflösung, aber auch Performance und Content-Strategie.

Frage: Sprites dürften vor allem wegen der verschiedenen Display-Auflösungen zu Problemen führen – aber wieso nicht einfach ein zweites Icon-Sprite anlegen?

Wolfermann: Um auf dem Retina-Screen optimale Bild-Icons anzuzeigen, war schnell eine Lösung gefunden: einfach die Bilder beziehungsweise Sprites doppelt so groß anlegen. Das Problem, dass die Icons dann trotzdem nur in einer „Ansichtsgröße” vorliegen, bestand allerdings weiter. Man kann also das Icon nicht an einer anderen Stelle noch mal größer oder kleiner verwenden. Die Größe ist in Pixel gemeißelt. Icon-Fonts, also Schriften á la Dingbats, die Symbole anstelle von Buchstaben und Ziffern haben, wurden bisher als ein adäquates Mittel für skalierbare Icons eingesetzt.

Frage: Und was spricht gegen Icon-Fonts?

Wolfermann: Icon-Fonts lösen viele unserer Probleme, bringen aber auch neue mit sich. Eines der nervigsten ist sicher die Positionierung der Icons. Dazu gesellen sich Probleme wie die Zugänglichkeit oder dass diese „Buchstaben” nur einfarbig sind. Was erschwerend hinzukommt ist die Ladezeit, besonders wenn man große Icon-Font-Bibliotheken lädt, von denen man aber nur eine Hand voll Icons verwendet. Darüber hinaus werden Schriften später geladen als andere Assets und – speziell in WebKit-Browsern – die Anzeige des Textes wird solange angehalten, bis die Schrift geladen ist. Gerade mobil kann das einige Sekunden in Anspruch nehmen. Nicht zu vergessen ist, dass der Fallback für Icon-Fonts kompliziert ist. Sicherlich alles lösbar mit gewissen Aufwand, aber gefühlt ist das immer nur ein „Hack” gewesen.

Frage: Gibt es keine umfassenden und brauchbaren Alternativen?

Wolfermann: Eine gute Alternative sind SVG-Sprites. Man stelle sich vor, man erstellt Sprites wie gewohnt, die Sprite-Grafik aber nicht als PNG, sondern (mit Vektordaten) als SVG. Die kann man dann wie gewohnt als background-image mit background-position einbinden. Man kann aber noch weiter gehen. SVG-Inhalte können in modernen Browsern auch direkt in HTML integriert werden. Das hat den Vorteil, dass wir auf die SVG-Elemente mit CSS und JavaScript zugreifen und so auch Veränderungen vornehmen könnten. So kann man nicht nur Transitions und Animationen verwenden, man kann auch die SVG-spezifischen Eigenschaften wie stroke mit CSS verändern.

Frage: Wie so oft, will man schon fast sagen, eilt das SVG-Format zur Hilfe. Wo liegen hier weitere Vorteile?

Wolfermann: SVG bietet zudem die Möglichkeit, auf ein einzelnes Element einer ganzen Datei zu referenzieren, also einen Inhalt woanders darzustellen. Über <use xlink:href="" /> können die Inhalte ganz einfach an anderer Stelle ausgegeben werden. Die Icons können dann natürlich mehrfarbig sein und sogar SVG-Effekte verwenden. Die Einbindung ist zudem barrierefreier und semantisch korrekt. Weiterhin ist die Positionierung der Icons zum Text wesentlich verlässlicher.

Frage: SVGs lassen sich also intern und extern referenzieren – wozu rätst du persönlich?

Wolfermann: Extern natürlich. Das ist wie bei CSS oder JavaScript – extern referenzierte Dateien lassen sich cachen. Genauso ist es mit SVG, die Datei wird nur einmal geladen und dann in den Browsercache geworfen. Wenn man den Code der SVG-Datei intern einbindet, lädt man den Overhead bei jedem Seitenaufruf. Außerdem muss man darauf achten, dass dann die Sprite-Ebenen im sogenannten <defs>-Bereich liegen, da er nicht im Browser angezeigt wird. Sonst hat man die Icons doppelt in der Seite.

Frage: Gibt es Möglichkeiten, das zu automatisieren?

Wolfermann: Wie so oft ist der beliebte Ausspruch von Webentwicklern „dafür gibt es doch sicher ein Grunt-Modul!?” auch hier zutreffend. SVG-Store bietet die Möglichkeit, aus einzelnen SVG-Dateien ein Icon-Sprite zusammenzusetzen. Grunt-Iconizer kann das ebenfalls – und noch mehr. Das bekannte Modul Grunticon wird demnächst auch die Option für diese SVG-Sprites haben. Außerdem gibt es bereits Gulp-Module. Und auch der Online-Service Icomoon bietet die Möglichkeit, aus den gewählten Icons ein SVG-Sprite oder ein Icon-Font zu erstellen.

Frage: Das klingt nach der perfekten Allround-Lösung, oder gibt es noch einen Haken?

Wolfermann: Das größte Problem ist, man ahnt es vielleicht schon, der Internet Explorer. Obwohl der IE in den letzten Jahren zu Chrome und Firefox aufgeschlossen hat, können IE9-11 keine extern verlinkten SVG-Elemente mit <use> laden. Die JS-Library SVG4Everybody hilft hierbei und stellt gleichzeitig noch den Fallback für Browser, die SVG nicht unterstützen bereit.

Frage: Was ist deiner Meinung nach nun das geringere Übel?

Wolfermann: SVG-Icons sind die bessere Wahl, da sie vielseitiger sind. Arbeiten aber Redakteure im , die dann „mal schnell einen Text mit Icons ausstatten sollen”, ist die herkömmliche Variante mit Icon-Fonts sicher besser. Man sollte also abwägen, es ist nicht zwingend ein Für und Wider, sondern eine gute Ergänzung zum jetzigen Vorgehen.

Grundsätzlich sehe ich das immer so: Wenn eine Technik für 90 Prozent der Browser super funktioniert und sie meine Arbeit leichter macht, setze ich sie auch ein. Wenn ich mir für zehn Prozent der Browser (oder je nach Projekt noch weniger) dann einen sinnvollen Fallback überlegen muss, ist das okay. Das hindert mich aber nicht daran, die restlichen 90 Prozent der Browser optimal zu bedienen.

WebTech Conference: Jetzt anmelden und Android-Tablet erhalten

Alle Teilnehmer der WebTech Conference erhalten freien Zugang zur parallel stattfindenden International PHP Conference – zudem erhält man bei Anmeldung bis 25. September ein Android-Tablet geschenkt und spart mit den Frühbucherpreisen.

Alle Speaker der WTC im Überblick!

]]>
t3n Redaktion
Photoshop fürs Webdesign: Muss das (noch) sein? http://t3n.de/news/photoshop-webdesign-geeignet-566839/ 2014-09-16T07:51:04Z
Photoshop ist ein mächtiges Werkzeug, das die Konkurrenz lange hinter sich gelassen hat und oft für so ziemlich jede Aufgabe im Design verwendet wird – auch für die Gestaltung von Webseiten.

ist ein mächtiges Werkzeug, das die Konkurrenz lange hinter sich gelassen hat und oft für so ziemlich jede Aufgabe im verwendet wird – auch für die Gestaltung von Webseiten. Aber ist das wirklich noch sinnvoll?

Bei der Frage nach dem perfekten Gestaltungs-Tool spalten sich die Design-Geister. Ob Photoshop, Fireworks (auch wenn es leider eingestellt wurde), Illustrator, Sketch oder sogar InDesign: Jeder hat seine persönliche „Nummer 1“ und arrangiert sich mit den programmeigenen Arbeitsweisen. Einige Webworker und Designer schwören sogar auf die Entwicklung im Browser, um den Designprozess zu verkürzen.

Für diejenigen allerdings, die eine strikte Designvorlage vor der Umsetzung bevorzugen, fällt die Wahl des geeigneten Tools häufig auf Photoshop. Warum auch nicht? Die Gestaltungsmöglichkeiten in Photoshop sind beinah grenzenlos, das Programm ist weit verbreitet und sehr benutzerfreundlich. Und doch eignet sich Photoshop deutlich schlechter als andere Lösungen für das Wichtigste im Webdesign: das Layout.

Das Problem? Photoshop-Dateien sind einfach riesig

Als Designerin im eigenen Unternehmen habe ich viel über die Nachteile von Photoshop im gelernt und bin deshalb aus persönlicher Vorliebe auf Illustrator umgestiegen. Diese Gründe haben mich dazu gebracht, meine Gewohnheiten über Bord zu werfen und Photoshop nur noch als Gestaltungshilfe für besonders schönes Eye-Candy auf Websites zu benutzen.

Das Problem? In einer Photoshop-Datei wird jede externe Grafik grundsätzlich eingebettet. So gehören Photoshop-Dateien, die 100 Megabyte oder mehr auf die Waage bringen, zum Alltag eines jeden Webdesigners, der mit dem Tool arbeitet.

Schwierig, den Überblick zu behalten – besonders im Team

Typische Dateistruktur mit Photoshop
Typische Dateistruktur bei einem Web-Projekt mit Photoshop.

Und: In einem Ordner häufen sich unzählige Dateien, die jeden Zustand der Seite aufzeigen. Für jedes Pop-Up, jede Aktion und jede Unterseite muss nicht selten eine eigene Datei angelegt werden. Ich habe schon häufig Ordner mit unzähligen Dateien erhalten wie „register.psd“, „register-error.psd“ und „register-confirmation.psd“, dabei haben sich dahinter, wie die Namen vermuten lassen, nur verschiedene Aktivitätszustände versteckt.

Die Übermittlung an Dritte ist so immer zeitintensiv und umständlich. Eine Alternative hierzu wäre das Speichern der einzelnen Elemente in separaten Ebenen und Ebenenkompositionen. Bei zunehmender Detailtiefe der jeweiligen Unterseite kann das aber schnell in einer aufgeblasenen und chaotischen Datei resultieren.

Die Wiederverwertbarkeit

Elemente, die sich auf allen Seiten wiederholen, können in Photoshop erst seit Kurzem global angepasst werden – dateiübergreifende Smartobjekten sind also nur den aktuellsten Versionen von Photoshop vorbehalten.

In anderen Programmen wie Adobe Illustrator können mit Symbolen dokumentübergreifende Bibliotheken für Elemente geschaffen werden, die zentral angepasst werden können. So resultieren Anpassungen an wiederverwendbaren Elementen nicht darin, dass mehrere Dokumente mühsam von Hand angepasst werden müssen. Ähnlich verhält es sich mit Adobe-InDesign-Musterseiten.

Zugriff auf Ebenen

Ein einfacher Klick reicht in Photoshop nicht aus, um ein Element auszuwählen. In kleinteiliger Arbeit muss das gewünschte Objekt per Rechtsklick oder über den Ebenen-Manager ausfindig gemacht werden.

Ja, Photoshop bietet Möglichkeiten, nach Ebenen zu suchen oder nach bestimmten Kriterien zu filtern, allerdings betrachte ich diese Funktionen als notwendigen Workaround für ein Problem, mit dem man sich in anderen Programmen gar nicht erst beschäftigen muss.

Gruppen und Ordner

Der Workflow in Photoshop macht manche, alltägliche Aufgaben eines Webdesigners manchmal sehr kompliziert. (Grafik: Julia Lindenberg)
Der Workflow in Photoshop macht manche, alltägliche Aufgaben eines Webdesigners manchmal sehr kompliziert. (Grafik: Julia Lindenberg)

Die Photoshop-Datei zum obigen Bild wird vermutlich aus verschiedenen Ordnern bestehen, die jeweils aus dem Inhalt eines Quadrats besteht. Das klingt nach einer logischen Ordnerstruktur, denn so ist es Möglich, die Quadrate im Ganzen zu verschieben. Was aber, wenn sich der Kunde überlegt, die Headline jedes Bereichs sieben Pixel nach oben verschieben zu wollen? Plötzlich macht die eben noch logische Ordnerstruktur keinen Sinn mehr und der Designer würde sich wünschen, lieber alle Headlines gruppiert zu haben. So aber muss jetzt aus jedem Ordner die eine Ebene selektiert und verschoben werden.

Auch wenn du ordentlich arbeitest und deine Datei mit Ebenenkompositionen und Smartobjekten gewissenhaft strukturierst und benennst, kann es passieren, dass deine Struktur für schnelle Design-Änderungen nicht geeignet ist.

Objektgrößen verändern und Elemente anordnen

Programme, die für Layout-Arbeiten optimiert sind, legen besonders viel Wert darauf, dass die Größe eines selektierten Objekts sofort ablesbar ist. In Photoshop aber muss zunächst die Ebene selektiert, das Objekt ausgewählt und das Info-Fenster geöffnet sein, bevor die aktuelle Größe erkennbar ist  – für mich zu viele Schritte für eine simple Information, die in der Layout-Phase wertvolle Zeit kostet. Ebenso verhält es sich mit dem pixelgenauen Positionieren verschiedener Objekte auf der Arbeitsfläche. Das Verschiebe-Werkzeug bietet zwar eine Pixel-Anzeige, aber kein Eingabefeld, um einen exakten Wert zum Verschieben zu verwenden. Hierfür muss das Transformieren-Werkzeug bemüht werden.

Grafiken aus Photoshop extrahieren

„Photoshop? Viele Arbeitsprozesse lassen sich in anderen Programmen schneller und bequemer realisieren.“

Kleine Grafiken aus einem Photoshop-Dokument zu extrahieren, gestaltet sich häufig als eine zeitintensive Beschäftigung. Zwar gibt es Tools, die speziell dafür ausgelegt sind, Elemente aus Photoshop-Dateien automatisch auszugeben. Diese benötigen zumeist aber eine strikte Ordnerstruktur, um ihre Arbeit korrekt ausführen zu können.

Das wiederum schränkt bei der Gestaltung ein und kostet Zeit. Zudem bieten Vektor-Programme wie Illustrator die Möglichkeit, beim Export eine Grafik in 200-prozentiger Größe auszugeben. Besonders bei Retina-optimierten Websites ist das unglaublich wertvoll. In Photoshop muss die Datei hierfür von vornherein in doppelter Größe angelegt werden, um später Unschärfen beim Hochskalieren zu vermeiden. Die vom End-Design abweichende Dokumentgröße kann während des Layouts auch unnötige Zeit für das Umrechnen der Werte ins Ziel-Layout kosten.

Keine Frage: Adobe gibt sich Mühe

Photoshop Layout Hilfe
Nutzer der Creative Cloud erhalten regelmäßige Updates, die Photoshop auch in Sachen Webdesign fiter machen sollen. (Screenshot: Julia Lindenberg)

Dass Photoshop schon lange nicht mehr ausschließlich als Bildbearbeitungsprogramm dient, ist offensichtlich. Adobe bemüht sich, mit Updates den Anforderungen der Designer gerecht zu werden. Die intelligenten Hilfslinien, die im Juni 2014 mit einem großen Update für alle Photoshop-CC-User verfügbar wurden, vereinfachen beispielsweise das Anordnen von neuen Objekten und Formen um ein Vielfaches. Die ursprünglich als Bildbearbeitungsprogramm konzipierte Allzweckwaffe wird immer mehr an die Anforderungen von Webdesignern angepasst.

Dennoch lassen sich viele Arbeitsprozesse in anderen Programmen schneller, bequemer und „wartbarer“ realisieren. Was nun der Grund dafür ist, dass sich ein Bildberarbeitungs-Programm als „Standard“ für Webdesign-Vorlagen etabliert hat, kann ich nur vermuten. Wahrscheinlich spielen hierbei die Verbreitung und Bekanntheit des Programms eine große Rolle, sodass sogar viele professionelle Dienstleister ihre Templates noch immer in Photoshop liefern und auch verlangen. Und: Die Kompatibilität von Photoshop-Dateien ist auch nicht außer Acht zu lassen. Während aktuelle Versionen von Programmen wie Illustrator oder InDesign nur noch mit erhöhtem Aufwand von älteren Versionen der Programme geöffnet werden können, kommen ältere Photoshop-Versionen meist problemlos mit Dateien aus neueren Versionen aus der Creative Cloud zurecht.

Auch das Lizenzmodell von Adobe dürfte seinen Teil dazu beigetragen haben. Während man heute für einen monatlichen Preis von unter 100 Euro die gesamte Suite zur Verfügung gestellt bekommt, mussten früher mehrere Tausend Euro auf ein Mal aufgebracht werden. Verständlich, dass die Wahl dann auf die insgesamt günstigere Allzweck-Waffe Photoshop gefallen ist.

Mit Gewohnheiten brechen

Natürlich mag es viele Webdesigner geben, die sehr geübt und schnell in der Bedienung von Photoshop sind und die über die von mir aufgezählten Nachteile nur lachen können. Die Frage bleibt: Wären sie in anderen Programmen noch effizienter und würde die Nutzer dieser Tools die Zusammenarbeit im Team oder mit Externen nicht noch erleichtern?

Es ist nicht unwahrscheinlich, dass Adobe in Zukunft noch mehr Verbesserungen für Webdesigner in Photoshop integrieren wird. Diejenigen, die sich schon jetzt nach einer Lösung für die oben genannten Probleme sehnen, sollten einen Blick über den Tellerrand hinaus wagen und einer der vielen Photoshop-Alternativen eine Chance geben. Ich benutze bisher Adobe Illustrator und bin sehr zufrieden – aber auch Sketch scheint eine interessante Alternative zu sein. Und bevor ich mich jetzt den Photoshop-Fans als Zielscheibe präsentiere, lasst mich noch eins sagen: Das Beitragsbild habe ich in Photoshop gebastelt. Ich liebe dieses Programm; nur nicht für Webdesign.

Und jetzt freue ich mich über eure Kommentare.

]]>
Julia Lindenberg
FocusPoint: jQuery-Plugin für fokales Cropping http://t3n.de/news/focuspoint-jquery-plugin-fuer-565810/ 2014-09-08T07:33:43Z
Der Einsatz von Bildern im Responsive Webdesign bringt einige Herausforderungen mit sich. FocusPoint hilft dabei, den wichtigsten Bildausschnitt immer im Vordergrund zu halten. Wir stellen das …

Der Einsatz von Bildern im bringt einige Herausforderungen mit sich. FocusPoint hilft dabei, den wichtigsten Bildausschnitt immer im Vordergrund zu halten. Wir stellen das jQuery-Plugin kurz vor.

Webseiten haben schon seit langem kein feststehendes Layout mehr. Mit Responsive Webdesign haben Webworker die Möglichkeit, hochdynamische Webseiten zu schaffen, die sich jeder Geräteklasse anpassen können. Die zahlreichen Möglichkeiten bringen aber auch einige Herausforderungen mit sich – eine davon ist der Umgang mit Bildern. Mit Responsive Images stehen serverseitige Techniken zur Verfügung, um Bilder der Gerätegröße anzupassen. Ein Problem behebt eine automatische Lösung jedoch meistens nicht: den Bildausschnitt.

Bilder in responsiven Webseiten können durch die Skalierung auf die entsprechende Viewport-Größe schnell ihre Wirkung verlieren und aus dem Kontext gerissen werden. Focalpoint.js sagt dieser Problematik den Kampf an.

Wie FocusPoint funktioniert

FocusPoint Beispiel
Ohne Fokuspunkt können Bilder in responsiven Layouts schnell aus dem Kontext gerissen werden. (Grafik: FocusPoint)

Die Grundidee von FocusPoint ist, den wichtigsten Punkt eines Bildes – den so genannten „focal point“ – immer sichtbar zu lassen, egal wie das Bild durch die Änderungen am Layout der Webseite skaliert werden sollte. Hierfür benötigt FocusPoint nur die Koordinaten dieses Punktes und arbeitet dann im Hintergrund, um sicherzustellen, dass er nie „ausgecroppt“ wird.

FocusPoint Koordinatensystem
FocusPoint errechnet ein koordinatensystem mit dem der Fokuspunkt des Bildesbestimmt werden kann. (Grafik: FocusPoint)

FocusPoint unterteilt das Bild mit zwei Achsen, die von der Mitte des Bildes ausgehen. So entsteht ein Koordinatensystem mit vier Bereichen. Durch Angabe von positiven (rechts, oben) oder negativen (links, unten) X- und Y-Werten kannst du jetzt den Fokuspunkt des Bildes bestimmen.

FocusPoint einsetzen

Für die Verwendung von FocusPoint brauchst du (1.9+) und die FocusPoint-JavaScript- sowie CSS-Dateien.

<link rel="stylesheet" href="focuspoint.css">
<script src="jquery.js"></script>
<script src="focuspoint.js"></script>

Mit dem nachfolgenden Markup kannst du die Größe des Bildes und die Position des Fokuspunktes definieren.

<div class="focuspoint"
data-focus-x="0.331"
data-focus-y="-0.224"
data-image-w="400"
data-image-h="300">
<img src="image.jpg" />
</div>

Das Setzen von data-image-w und data-image-h ist zwar optional, aber empfehlenswert, da das Koordinatensystem sonst erst dann berechnet werden kann, wenn das Bild geladen wurde, was dazu führen kann, dass der korrekte Bildausschnitt erst nach dem Laden sichtbar wird. Wenn dir die Berechnung des Fokuspunktes zu kompliziert ist, kannst du das Fokuspunkt Helper-Tool von FocusPoint benutzen.

Abschließend muss FocusPoint initialisiert werden. In der Regel würde das innerhalb der $(document).ready()-Funktion passieren.

$('.focuspoint').focusPoint();

Mit der adjustFocus()-Methode kannst du den Fokuspunkt jederzeit neu berechnen lassen. Das ist vor allem wichtig, wenn du ausgeblendete Elemente nach dem ersten Fokussieren sichtbar machst. Da diese Elemente keine Größe haben, wird der Fokuspunkt nicht korrekt sein. mit adjustFocus() behebst du dieses Problem.

Im GitHub-Repository von FocusPoint findest du das jQuery-Plugin und einige Beispiele für die Anwendung von FocusPoint.

]]>
Ilja Zaglov