Design | t3n News News, Infos, Tipps und aktuelle Artikel zu Design 2014-09-16T07:51:04Z t3n Redaktion http://t3n.de/tag/design 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
Die Entseelung des Logo-Designs: Wie ein Startup professionelle Markenauftritte für nur 50 Dollar kreieren will http://t3n.de/news/logo-design-tailor-brands-567160/ 2014-09-15T14:02:16Z
Das Geschäft mit dem Logo-Design ist nicht nur milliardenschwer, es ist auch zum Volkssport geworden. Über populäre Plattformen wie 99Designs oder Fiverr können Unternehmen schnell und günstig …

Das Geschäft mit dem Logo-Design ist nicht nur milliardenschwer, es ist auch zum Volkssport geworden. Über populäre Plattformen wie 99Designs oder Fiverr können Unternehmen schnell und günstig von Freiberuflern und Hobby-Designern an ein Logo kommen. Vielleicht brauchen sie bald nicht einmal mehr das. Das Tailor Brands will einen Weg gefunden haben, der professionelle Markenauftritte für wenig Geld vollautomatisch erstellt.

Logo-Design mit Tailor Brands: Klick dir deine Marke

Die Idee, von der Yali Saar in der vergangenen Woche auf der TechCrunch-Disrupt-Konferenz in San Francisco berichtete, klingt so simpel wie verlockend: Erhalte mit nur wenigen Klicks ein Logo für dein Unternehmen. Einzigartig, schön, hip. Oben drauf gibt’s einen Briefkopf und eine Visitenkarte. Und all das vollautomatisch für einen Kampfpreis von „50 Bucks“, also fünfzig US-Dollar.

Das Startup von Saar heißt Tailor Brands, was so etwas wie ein virtueller Schneider für Markenauftritte bedeutet. Nicht weniger als 80 Millionen „Small Businesses“, also primär Freiberufler und kleine, lokale Einzelhändler haben Saar und sein Team damit im Visier. Wie er erklärt, brauchen sie wie jeder Großkonzern ein individuelles Branding für ihren Erfolg. Sie wollen das auch. Nur leisten, so die These der Gründer, könnten sie es sich nicht. Und deshalb möchten sie mit Tailor Brands gleich zwei Probleme lösen: Professionelle, oft hunderttausende Dollar teure Logos auf der einen Seite erschwinglich und aus der Not geborene, qualitativ minderwertige Selfmade-Logos obsolet machen.

Datengetriebener Angriff auf 99Designs, Fiverr und Co.

Es ist dieselbe Kerbe, in die bereits viele Dienste wie zum Beispiel 99Designs, Graphicriver oder das populäre Designer-Portal Fiverr schlagen, über das wir im August einen ausführlichen Artikel veröffentlicht haben. Das Prinzip dahinter ist immer das gleiche: Sage was du brauchst und suche dir das beste Ergebnis zum günstigsten Preis aus. Bei Tailor Brands geht es noch weiter. Durch den hochautomatisierten und auf Basis von Algorithmen beruhenden Gestaltungsprozess müssen – zumindest theoretisch – sogar die von Fiverr angepriesenen, oft spottbilligen Grafikdesigner aus Entwicklungsländern wie Pakistan oder Indien um ihre Kundschaft fürchten.

Tailor Brands automatisiert das Logo-Design: Tausende Algorithmen erstellen ein den eigenen Werten und Unternehmen entsprechendes Logo. (Screenshot: t3n)
Tailor Brands automatisiert das Logo-Design: Tausende Algorithmen erstellen ein den eigenen Werten und Unternehmen entsprechendes Logo. (Screenshot: t3n)

Anfangen tut auf der Webseite von Tailor Brands alles mit einer Eingabemaske, auf der man den Namen seines Unternehmens eingibt. Nach einer Kurzbeschreibung des eigenen Tätigkeitsprofils geht es mit den „Values“, also Werten weiter, die man in einigen wenigen Stichworten niederschreiben soll. Tailor Brands selbst schlägt „A Timeless Brand with powerful features“ als rudimentäres, wenn auch prägnantes Beispiel vor. Nachdem man anschließend noch Angaben zur gewünschten Farbe, dem Gründungsjahr und dem Standort des eigenen Unternehmens gemacht hat, kommt der digitale Maschinenraum von Tailor Brands mit einem Klick auf „Let’s design!“ schließlich auf Touren. Wie „1.000 Designer, die gleichzeitig zusammenarbeiten“ soll der Dienst funktionieren.

Tailor Brands verspricht schöne Ergebnisse. Man spricht von über 350.000 möglichen Design-Möglichkeiten, rund 15.000 berücksichtigte und mit in die Gestaltung des Logos einfließende Design- und Struktur-Kriterien sollen für die nötige Individualität sorgen. So sucht die Webseite auf Basis der vom Nutzer eingegebenen Daten etwa passgenaue Farben und Fonts aus dem Fundus heraus und gleicht diese zusätzlich im Hinblick auf Form und Geschmacksmuster ab. Am Ende steht ein Logo, wie aus einem Trichter gegossen.

Tailor Brands liefert enttäuschende Ergebnisse

Die in unseren Testläufen so erzielten Ergebnisse enttäuschen allerdings. Zwar sind die Geschmäcker per se verschieden, subjektiv und fairerweise befindet sich das Startup mit seinem Dienst auch noch immer in einer als solche ausgewiesenen Testphase. Auf dem Papier aber kommen die vorgeschlagenen Logos wenig virtuos daher, wirken austauschbar und grenzen sich optisch kaum zu Lösungen ab, wie man sie zum Beispiel auch gänzlich kostenlos mit dem Hipster Logo Generator im Netz findet. Zudem liegt es in der Natur des Dienstes, dass das Logo-Design bedingt durch die Algorithmen frei von menschlicher Kreativität vollzogen wird.

Zumindest sichert das Startup zu, seinen Dienst ohne jedweden Einfluss vorgefertigter Templates zur Verfügung zu stellen. Auch sollen bei jedem Durchlauf andere Ergebnisse herauskommen. Das bleibt angesichts der unserem Eindruck nach wiederkehrend ähnlichen Ergebnisse ebenso fraglich wie die Sache mit den Bild- und Nutzungsrechten. Wie Tailor Brands in den Geschäftsbedingungen schreibt, empfiehlt man jedem Nutzer eigenständig eine Due-Dilligence-Prüfung, um potenzielle Marken- oder Urheberrechtsverletzungen zu verhindern.

]]>
Daniel Hüfner
Entwickeln für iPhone 6 und iPhone 6 Plus: Apple stellt PSD-Vorlagen bereit http://t3n.de/news/iphone-6-plus-psd-vorlagen-mockups-567106/ 2014-09-15T08:58:21Z
Apple stellt Entwicklern jetzt auch Photoshop-Vorlagen des neuen iPhone 6 und iPhone 6 Plus zur Verfügung. Damit könnt ihr eure Apps auch auf den neuen Apple-Smartphones in Szene setzen.

stellt Entwicklern jetzt auch Photoshop-Vorlagen des neuen und iPhone 6 Plus zur Verfügung. Damit könnt ihr eure auch auf den neuen Apple-Smartphones in Szene setzen.

PSD-Vorlagen für iPhone 6 und iPhone 6 Plus: Apple macht genaue Vorgaben, wie ihr die Vorlagen in euren Marketingmaterialien nutzen könnt. (Grafik: Apple)
PSD-Vorlagen für iPhone 6 und iPhone 6 Plus: Apple macht genaue Vorgaben, wie ihr die Vorlagen in euren Marketingmaterialien nutzen könnt. (Grafik: Apple)

iPhone 6 und iPhone 6 Plus: Apple veröffentlicht PSD-Vorlagen

Letzte Woche am neunten September 2014 hat Apple zwei neue Smartphones vorgestellt. Das iPhone 6 und das iPhone 6 Plus bieten mit einer Displaygröße von 4,7 beziehungsweise 5,5 Zoll deutlich größere Bildschirme als ihre Vorgängermodelle. Die beiden neuen iPhones sollen ab dem 19. September 2014 ausgeliefert werden. Damit Entwickler passend zum Start auch ihre Apps in etwaigen Werbematerialien auf den überarbeiteten Apple-Smartphones präsentieren können, hat der Computerkonzern aus Cupertino jetzt entsprechende Photoshop-Vorlagen veröffentlicht.

Über die App-Store-Marketing-Seite von Apple können die PSD-Vorlagen für das iPhone 6, das iPhone 6 Plus sowie ältere iOS-Geräte als ZIP-Datei heruntergeladen werden. Die ZIP-Dateien für das iPhone 6 und das iPhone 6 Plus enthalten jeweils die entsprechenden Photoshop-Dateien für die Modelle in Silber und in Space-Grau. Außerdem gibt es beide Farbvarianten in stehender und in liegender Position. Für Entwickler, die ihre Apps vermarkten wollen, sind die PSD-Vorlagen von Apple eine praktische Sache. Vor allem weil die verschiedenen Anbieter von Mockup-Diensten derzeit noch keine entsprechenden Vorlagen für das iPhone 6 und iPhone 6 Plus im Angebot haben. Allerdings müssen Entwickler beim Download der Apple-Vorlagen versichern, dass sie sich an die Marketing-Richtlinien des App-Stores halten werden.

iPhone 6 und iPhone 6 Plus: iOS-7-Apps werden automatisch an das größere Display angepasst

Apps, die für iOS 7 entwickelt wurden, sollten ohne Probleme auf den größeren Displays der neuen iPhone-Generation dargestellt werden können. Immerhin bleibt es bei einem Seitenverhältnis von 16 zu 9, wie es Apple bereits mit dem iPhone 5 eingeführt hat. Allerdings könnten natürlich vor allem beim iPhone 6 Plus einige Icons, die für deutlich kleinere Bild Bildschirme mit merklich geringerer Auflösung erstellt wurden, durch das Upscaling etwas pixelig aussehen. Hier werden App-Entwickler wohl nachbessern müssen, um ihren Kunden das bestmögliche App-Design liefern zu können.

]]>
Kim Rixecker
CSS3: Coole Animationen für im Grid angeordnete Bilder http://t3n.de/news/css3-animationen-grid-565807/ 2014-09-13T14:44:14Z
Mit HTML5 und CSS3 stehen Webworkern viele Möglichkeiten zur Verfügung, um ihre Webseiten noch spannender und interaktiver zu machen. Wir stellen dir einige nette Effekte vor, mit denen du dein …

Mit und stehen Webworkern viele Möglichkeiten zur Verfügung, um ihre Webseiten noch spannender und interaktiver zu machen. Wir stellen dir einige nette Effekte vor, mit denen du dein Portfolio oder Bilder-Blog visuell aufwerten kannst.

Viele Designer und Blogger setzen auf große Bilder, um ihre Arbeit oder ihre Beiträge in Szene zu setzen. Das Mansory-Layout ist dabei eine sehr häufig benutzte Anordnung, bei der Elemente gleichmäßig und passend über den Bildschirm beziehungsweise im jeweiligen Container verteilt werden. Infinite Scrolling und dynamisches Nachladen von Elementen gehören bei größeren Portfolios ebenfalls zum Standard-Repertoire. Häufig werden die neu hinzugeladenen Elemente einfach nur eingeblendet – was an sich vollkommen in Ordnung ist.

Für Visualisten: Nachladende Bilder aufpeppen mit CSS3

Luigi Petrut reicht das aber nicht, sodass er eine Sammlung von CSS-Animationen für Bilder in Grid-Layouts geschrieben und frei zur Verfügung gestellt hat.

Mit „Cool CSS Loading Effects for Grid Images“ verpasst du deinem Portfolio oder Bilder-Block ein nettes visuelles Extra. (Animation: tuxmix.com)
Mit „Cool CSS Loading Effects for Grid Images“ verpasst du deinem Portfolio oder Bilder-Block ein nettes visuelles Extra. (Animation: tuxmix.com)

Die „Cool CSS Loading Effects for Grid Images“ getaufte Sammlung beinhaltet fast 40 verschiedene Animationen, mit denen nachgeladene Elemente in Szene gesetzt werden können. Von verschiedenen Fade-Animationen bis hin zu zwei- und dreidimensionalen Animationen ist alles vertreten. Die Animationen und die dazugehörigen Laderoutinen wurden im Chrome 36+, Firefox 31+, Opera 23+, Safari 5+ und Internet Explorer 11 getestet.

Auf der Demo-Seite kannst du die Animationen live testen. Den Quellcode und eine Anleitung zum Nachbauen der Demo findest du in Luigi Petruts Blog TutsMix.

]]>
Ilja Zaglov
Schick, einfach und mit WordPress-Integration: So erzählt ihr Geschichten mit Storyform http://t3n.de/news/storyform-wordpress-566707/ 2014-09-12T08:47:54Z
Mit Storyform sollt ihr eure Artikel in kürzester Zeit richtig schick aufbereiten können. Das Tool gibt es als WordPress-Plugin, mit etwas mehr aufwand kann es aber auch mit anderen …

Mit Storyform sollt ihr eure Artikel in kürzester Zeit richtig schick aufbereiten können. Das Tool gibt es als WordPress-Plugin, mit etwas mehr aufwand kann es aber auch mit anderen Content-Management-Systemen genutzt werden.

WordPress-Plugin: Mit Storyform erstellte Artikel sehen einfach schick aus. (Screenshot: Storyform)
WordPress-Plugin: Mit Storyform erstellte Artikel sehen einfach schick aus. (Screenshot: Storyform)

Storyform: In wenigen Klicks zu einem schicken Artikel

Die New York Times hat es 2012 mit ihren Multimedia-Artikel „Snow Fall“ vorgemacht: Online-Artikel müssen nicht unbedingt einer starren Form folgen. Es gibt Alternativen zum einfachen Webseiten-Layout, bei dem der Text von oben nach unten verläuft und nur gelegentlich durch Bilder unterbrochen wird. Allerdings hat natürlich nicht jeder die notwendigen Ressourcen, um gleich einen sogenannten Scrollytelling-Artikel auf die Beine zu stellen.

Wer trotzdem nicht auf ein schickes, von Print-Magazinen inspiriertes Design verzichten möchte, für den gibt es mit Storyform eine einfache Möglichkeit, um genau das zu erreichen. Die damit erstellten Artikel setzen auf ansehnliche Typografie, nebeneinander angeordnete Spalten und großformatige Bilder. Außerdem lassen sich leicht Fullscreen-Videos integrieren und die verschiedenen Templates sind vollständig responsiv.

Storyform kann mit jedem beliebigen CMS genutzt werden. (Screenshot: Storyform)
Storyform kann mit jedem beliebigen CMS genutzt werden. (Screenshot: Storyform)

Storyform für WordPress oder für jedes andere CMS

Die einfachste Möglichkeit Storyform zu verwenden, ist das WordPress-Plugin. Das könnt ihr über WordPress.org installieren, oder indem ihr euch das Plugin direkt von der Storyform-Website als ZIP-Datei besorgt. Da findet sich auch eine Anleitung zur Erstellung von Storyform-Artikeln.

Alternativ zum WordPress-Plugin, könnt ihr Storyform auch in Kombination mit anderen Content-Managment-Systemen verwenden. Das ist aber logischerweise deutlich aufwendiger bei der Einrichtung und bei der Erstellung von Artikeln. Egal, für welche Plattform ihr euch entscheidet, um Storyform nutzen zu können, müsst ihr auf der Website des Anbieters einen App-Key beantragen. Dazu reicht die Eingabe eurer E-Mail-Adresse, eures Namens und der URL eurer Website.

via www.producthunt.com

]]>
Kim Rixecker
App-Design unter der Lupe: Dieses Blog analysiert herausragende Features beliebter iOS-Apps http://t3n.de/news/app-design-lupe-blog-analysiert-565871/ 2014-09-08T09:40:52Z
Gutes App-Design zeigt sich oft in den Details. Seit einigen Monaten analysiert Buffer-Designer Brian Lovin besonders bekannte iOS-Apps und zeigt, was sie besonders macht. Vielleicht ist das eine …

Gutes App-Design zeigt sich oft in den Details. Seit einigen Monaten analysiert Buffer-Designer Brian Lovin besonders bekannte iOS-Apps und zeigt, was sie besonders macht. Vielleicht ist das eine oder andere Feature für euer nächstes Projekt dabei.

Brianlovin.com: Willkommene Inspiration für App-Designer

Das Social Network Path präsentiert seinen Nutzern verschiedene Interaktionsmöglichkeiten auf ansprechende Weise. Screenshot: brianlovin.com)
Das Social Network Path präsentiert seinen Nutzern verschiedene Interaktionsmöglichkeiten auf ansprechende Weise. (Screenshot: brianlovin.com)

Das Social-Media-Tool überzeugt viele Nutzer nicht nur durch seine Funktionalität, sondern auch durch sein klares, minimalistisches Design. Brian Lovin, der seit September 2013 fest zum Team von Buffer gehört, hat daran einen nicht unerheblichen Anteil. Doch auch privat ist der Webdesigner aus Texas an gutem Design interessiert.

In der Reihe „Design Details“ nimmt Lovin auf seinem eigenen das App-Design bekannter und beliebter iOS-Apps unter die Lupe – vom Login und „Onboarding“ über Ladeabläufe, Scrolling und In-App-Suche bis hin zu spezifischen Funktionen wie etwa Profilen, Kontaktverwaltung und diversen User-Interaktionen. Zu den , die Lovin sich bisher angeschaut hat, zählen Pinterest, Foursquare, SoundCloud, Path, Skype, Flickr, Twitter und auch die neue Instagram-App Hyperlapse.

Gutes App-Design zeigt sich im Detail

In seinen Artikeln lenkt Lovin die Aufmerksamkeit des Lesers auf Details, die dem User im Alltagsgebrauch gar nicht unbedingt auffallen, die eine App aber gerade deswegen zu etwas Besonderem machen: weil sie die Interaktion erleichtern und für ein „rundes“ Nutzungserlebnis sorgen.

So etwa bei der Skype-App für iOS, bei der Lovin die animierte Ladeanzeige und die Übergänge zwischen einzelnen Screens ebenso hervorhebt wie die In-App-Navigation, die der User durch paralleles „Wischen“ erschließt und dabei mit jedem Swipe den Header ein kleines bisschen weiter verschiebt. In kurzen Videos veranschaulicht Lovin für seine Leser, welches Feature beziehungsweise welchen Ablauf er gerade beschreibt – zum Teil muss man sich die kurzen Sequenzen mehrfach ansehen, um alle enthaltenen UX- und UI-Kniffe zu entdecken.

App-Design Skype 1 App-Design Skype 2

Für alle, die danach trachten, ihrem App-Design den letzten Schliff zu geben, dürfte Brian Lovins Blog eine willkommene Fundgrube an Inspiration sein.

Wer sich stattdessen für Brian Lovins Arbeit bei Buffer selbst interessiert, wird eher auf seinem Profil bei Dribbble fündig: Hier gibt der Projektmanager Einblicke in das Buffer-Design und zeigt Impressionen von Dashboards, Datenvisualisierung oder E-Mail-Templates.

]]>
Lea Weitekamp
Welches Theme ist das? Diese Tools identifizieren WordPress-Themes für euch http://t3n.de/news/wordpress-themes-identifizieren-564458/ 2014-08-28T09:10:33Z
Wir haben für euch drei Tools unter die Lupe genommen, die euch sagen, welches Theme ein WordPress-Blog einsetzt. Welches das beste Werkzeug dafür ist, verraten wir euch in unserem Artikel.

Wir haben für euch drei Tools unter die Lupe genommen, die euch sagen, welches ein WordPress-Blog einsetzt. Welches das beste Werkzeug dafür ist, verraten wir euch in unserem Artikel.

WordPres-Themes identifizieren: Wir stellen euch drei Tools vor, die euch sagen. welches Theme eine Seite nutzt. (Screenshot: WhatTheme)
WordPres-Themes identifizieren: Wir stellen euch drei Tools vor, die genau diese Möglichkeit liefern. (Screenshot: WhatTheme)

WordPress: Diese Tools identifizieren das eingesetzte Theme für dich

Ihr habt ein WordPress-Blog gesehen und würdet gerne wissen, welches Theme die Seite nutzt, findet aber keinen Hinweis darauf? Kein Problem, es gibt mittlerweile mehrere Tools, die das Theme einer WordPress-Seite identifizieren können. Wir haben uns drei solcher Werkzeuge für euch angeschaut und überprüft, wie gut die Tools arbeiten. In unserem kleinen Test haben wir einen Blick auf WordPress Theme Search, WPThemeDoctor und WhatTheme geworfen.

Im Bezug auf konnte uns WhatTheme leider am wenigsten überzeugen. Einige unserer Test-Seiten erkannte das Tool überhaupt nicht. Und wenn das Werkzeug ein Theme erkannte, lieferte es im Gegensatz zu den beiden anderen Tools nur den Namen und keine zusätzlichen Informationen. Dafür erkennt WhatTheme aber auch Joomla- und Drupal-Themes. Dadurch kann die Seite auch hilfreich sein, wenn ihr nicht wissen solltet, welches CMS eingesetzt wird. Zu Identifikation von WordPress-Themes würden wir trotzdem eines der beiden anderen Werkzeuge empfehlen.

WordPress Theme Search und WPThemeDoctor liefern euch zusätzliche Informationen zu erkannten WordPress-Themes. (Screenshot: WordPress Theme Search)
WordPress Theme Search und WPThemeDoctor liefern euch zusätzliche Informationen zu erkannten WordPress-Themes. (Screenshot: WordPress Theme Search)

WordPress-Themes identifizieren

Sowohl Theme Search als auch WPThemeDoctor funktionierten in unserem kleinen Test recht gut. Perfekt sind beide allerdings auch nicht. Tendenziell schien WPThemeDoctor geringfügig mehr Themes zu erkennen, lieferte aber zumindest in einem Fall auch ein falsche Ergebnis. Trotzdem ist die Trefferquote noch relativ hoch. Außerdem liefern sie zu allen erkannten WordPress-Themes zusätzliche Informationen zum Ersteller des jeweiligen Themes sowie einen Link und eine Kurzbeschreibung.

Auch wenn die Tools gewisse Schwächen haben, kann es sich durchaus lohnen, alle drei Werkzeuge in die eigenen Bookmarks aufzunehmen. Wer wirklich mal ein Theme identifizieren will, erspart sich damit möglicherweise viel Zeit.

via www.producthunt.com

]]>
Kim Rixecker
Das neue Jimdo: Deutscher Website-Baukasten erstrahlt im neuen Glanz http://t3n.de/news/neue-jimdo-deutscher-563996/ 2014-08-26T13:00:43Z
Der beliebte Website-Builder Jimdo hat sein Produkt komplett überarbeitet. Die Nutzer erwartet nun ein komplett neu gestalteter Editor und vor allem neue, modernere Templates zum Bauen ihrer …

Der beliebte Website-Builder Jimdo hat sein Produkt komplett überarbeitet. Die Nutzer erwartet nun ein komplett neu gestalteter Editor und vor allem neue, modernere zum Bauen ihrer Webseiten.

Jimdo: Marktführer für Homepage-Baukästen in Deutschland

Homepage-Baukästen sind ein beliebtes Mittel für Nutzer, die eine eigene Homepage benötigen, sich aber nicht mit Hosting und komplizierten CMS-Systemen auseinanderzusetzen. Einer der beliebtesten Baukästen in Deutschland stammt aus Hamburg und hört auf den Namen Jimdo. Die Hamburger Firma mit Vorzeige-Startup-Kultur richtet sich mit ihrem Produkt ganz bewusst den Otto Normalverbraucher und möchte auch nicht-technikaffinen Menschen ermöglichen, eine eigene Homepage zu unterhalten. Jimdo adressiert nun mit einem Update einen der häufigsten Kritikpunkte aus der Vergangenheit: Den in die Jahre gekommenen Look der vorgefertigten Homepage-Templates.

Jimdo Facelift: Die neue Jimdo-Version bringt viele schicke neue Templates und einen überarbeiteten Editor mit. (Quelle: Jimdo)
Jimdo Facelift: Die neue Jimdo-Version bringt viele schicke neue Templates und einen überarbeiteten Editor mit. (Quelle: Jimdo)

Rund 30 neue und schicke Templates, die sich an aktuellen Webdesign-Trends orientieren

In Sachen Features und Usability konnte Jimdo in der Vergangenheit bereits voll überzeugen, aber oft wurde kritisiert dass viele der Templates in Jimdos Baukasten sehr alt aussehen, und den Eindruck machen, als ob sie aus den 90ern stammen. Mit einem kompletten Facelift führt Jimdo nun rund 30 neue, attraktive Templates ein, die den Nutzern zur Verfügung stehen. Die neuen Varianten sind deutlich abwechslungsreicher, dynamischer und orientieren sich an aktuellen Trends im Webdesign.

Neuer Editor soll das Bearbeiten von Jimdo-Webseiten noch intuitiver machen

Zusätzlich zu den neuen Templates haben die Hamburger außerdem ihren gesamten Editor überarbeitet. Dieser macht es nun noch leichter, Inhalte einzufügen, Texte zu ändern, die Farben oder die Größe von Elementen zu ändern. Die Templates können vollständig an die Bedürfnisse der Nutzer angepasst werden. Neue Nutzer, die sich bei Jimdo anmelden bekommen automatisch die neue Variante zu sehen. Bestehende Nutzer können in den Editor-Einstellungen zum „neuen Jimdo“ wechseln.

]]>
Moritz Stückler
Das Blau von Facebook und das Grün von WhatsApp: BrandColors zeigt euch die Corporate-Identity-Farben großer Marken http://t3n.de/news/brandcolors-ci-farben-563527/ 2014-08-22T11:20:22Z
Das Blau von Facebook? Das Grün von WhatApp? Das Rot von Google+? BrandColors hilft euch bei diesen Fragen und zeigt euch Corporate-Identity-Farben vieler Dienste und Unternehmen in einer Übersicht.

Das Blau von Facebook? Das Grün von WhatApp? Das Rot von Google+? BrandColors hilft euch bei diesen Fragen und zeigt euch Corporate-Identity-Farben vieler Dienste und Unternehmen in einer Übersicht.

BrandColors: Von 500px bis Zendesk – diese 261 Farbschemen nutzen große Marken für die Corporate-Identity

„Wie war doch gleich der genaue Farbwert vom Facebook-Blau?“ Solche oder ähnliche Fragen sind im Designer-Arbeitsalltag die Regel. Nicht nur zum Designen von Social-Media-Elementen, sondern auch, um sich beispielsweise von den Farbpaletten diverser Dienste inspirieren zu lassen. Der Dienst BrandColors zeigt die Corporate-Identity-Farben vieler Unternehmen im Überblick.

Zum Entwickeln von Farbpaletten für eine Corporate-Identity hilft es, sich bei anderen zu orientieren. Vor allem bei großen Unternehmen wie den Sozialen Netzwerken und Twitter oder Anbietern wie Adobe und Dell sind diese schon lange getestet und für gut befunden worden.

BrandColors zeigt Farbschemen von 261 Marken und ermöglicht das Suchen darin und das Erstellen von Kollektionen. (Screenshot: BrandColors)
BrandColors zeigt Farbschemen von 261 Marken und ermöglicht das Suchen darin und das Erstellen von Kollektionen. (Screenshot: BrandColors)

BrandColors bietet Übersicht über insgesamt 261 Dienste und Unternehmen. Von Airbnb über Amazon, Beats, Coca Cola, Dropbox, Evernote, Facebook, GitHub, HTC, Ikea, Kickstarter, Microsoft, Samsung, Skype, StackOverflow, Thunderbird, Ubuntu über Vimeo oder und Xing bis YouTube und ZTE. Von Smartphone-Hersteller über Cloud-Dienst bis Linux-Distribution ist alles dabei.

Neben einer Suche ermöglicht BrandColors auch das Zusammenstellen einer eigenen Kollektion über die Auswahl verschiedener Marken. Die Kollektion kann dann separat exportiert werden. Für diese Kollektionen gibt es auch benutzerdefinierte Links wie diesen, mit denen Farbschemen geteilt werden können.

BrandColors: Übersicht auf Website oder Export in verschiedene Formate

Die BrandColors-Website zeigt euch mit einem Klick auf eine Farbe den hexadezimalen Farbwert an. Daneben können Nutzer die Farbwerte auch in verschiedenen Formaten exportieren. Ob für Photoshop, als CSS-Datei oder lieber für die CSS-Preprozessoren SCSS oder LESS bleibt dabei jedem selbst überlassen. Dabei können alle Farbschemen, die BrandColors zeigt, enthalten sein, oder nur eine benutzerdefinierte Auswahl.

BrandColors ermöglicht den Export aller Farben oder der Farben der eigenen Kollektion. Ob als SCSS, LESS oder wie hier normales CSS kann der Nutzer dabei auswählen. (Screenshot: Sublime Text)
BrandColors ermöglicht den Export aller Farben oder der Farben der eigenen Kollektion. Ob als SCSS, LESS oder wie hier normales CSS kann der Nutzer dabei auswählen. (Screenshot: Sublime Text)

Für Inspiration oder das gezielte Suchen von Farben: BrandColors ist ein praktischer Webdienst, der Designern auf jeden Fall mindestens einen Bookmark wert sein sollte.

via twitter.com

]]>
Johannes Schuba
The Stocks: 11 Websites für lizenzfreie Stockfotos an einem Ort http://t3n.de/news/thestock-lizenzfreie-stockfotos-aggregiert-563473/ 2014-08-22T09:17:24Z
Viele Websites ansurfen, um das passende Stockfoto zu finden? Mit „The Stocks“ gehört das der Vergangenheit an. Der Dienst aggregiert elf Anbieter für lizenzfreie Stockfotos.

Viele Websites ansurfen, um das passende Stockfoto zu finden? Mit „The Stocks“ gehört das der Vergangenheit an. Der Dienst aggregiert elf Anbieter für lizenzfreie Stockfotos.

The Stocks: Anbieter von Websites für lizenzfreie Stockfotos an einem Ort

Die Suche nach passenden Stockfotos kostet oft einiges an Nerven und Geld. Vor allem, wer Kosten sparen will, greift auf Anbieter für lizenzfreie Stockfotos zurück. Kollege Andreas hat euch in seinem Artikel schon zehn alternative Fotoseiten vorgestellt, darunter auch einige Anbieter für lizenzfreie Stockfotos – einer der bekanntesten Vertreter ist Unsplash. Die Website The Stocks bündelt genau solche Anbieter. Mit an Bord sind noch „Little Visuals“, „New Old Stock“, „Super Famous“ und sieben weitere.

TheStocks aggregiert verschiedene Anbieter lizenzfreier Stockfotos. Ist links die gewünschte Seite ausgewählt, sind rechts die Fotos zu sehen. (Screenshot: TheStocks)
The Stocks aggregiert verschiedene Anbieter für lizenzfreie Stockfotos. Ist links die gewünschte Seite ausgewählt, sind rechts die Fotos zu sehen. (Screenshot: The Stocks)

Die Seite ist einfach strukturiert. Auf der linken Seite finden sich alle Anbieter – elf an der Zahl –, die The Stocks aggregiert. Ein Klick auf den jeweiligen Namen der Seite lädt sie im rechten Bereich. Praktisch, um Motive zum Fremdschämen endlich zu eliminieren.

Nicht verwirren lassen: Die Usability von The Stocks

Beim Aufruf der Startseite von The Stocks ruft die Seite automatisch per Zufall eine der aggregierten Seiten auf, da es keine dedizierte Homepage gibt. Landet man per Zufall auf „Breaking Pic“, bekommt man eine Meldung, dass die Seite im Oktober schließt. Das allerdings trifft natürlich auch nur auf Breaking Pic zu, nicht auf The Stocks, die diesen Anbieter nach der Schließung sicherlich einfach ersetzen werden. Also nicht wundern.

via www.producthunt.com

]]>
Johannes Schuba