Design | t3n News News, Infos, Tipps und aktuelle Artikel zu Design 2015-02-28T15:03:10Z t3n Redaktion http://t3n.de/tag/design Das Ende der Isolation: Wie Apps in Zukunft zusammenarbeiten werden http://t3n.de/news/apps-system-zusammenarbeit-schnittstellen-595047/ 2015-02-28T15:03:10Z
Die App-Metapher ist ausdrucksstark und dank der starken Verbreitung von Smartphones leicht erlernbar. Doch sie hat auch einen Nachteil: Um eine gestellte Aufgabe zu lösen, ist ein mehrmaliger …

Die App-Metapher ist ausdrucksstark und dank der starken Verbreitung von Smartphones leicht erlernbar. Doch sie hat auch einen Nachteil: Um eine gestellte Aufgabe zu lösen, ist ein mehrmaliger Wechsel zwischen Apps notwendig. Das müsste nicht so sein, wenn wir Apps als Dienstleister betrachten würden.

Das App-System: Einfach und erweiterbar

Hier ist klar: Diese Systeme sind über Apps erweiterbar. (Bild: Andreas Weder)
Hier ist klar: Diese Systeme sind über Apps erweiterbar. (Bild: Andreas Weder)

Apps sind überall: auf Handys, Fernsehern, Set-Top-Boxen, Uhren. Wir finden sie zunehmend auch auf Desktopsystemen, wo sie grundsätzlich nichts Neues sind, denn installierbare Anwendungen gibt es dort schon seit eh und je. Doch mit dem Begriff der „App“ schwingen hier die gleichen Versprechen wie auf Smartphones mit: auch Apps für Desktops sollen in Stores einfach zu finden, leicht gekauft und installiert sein.

„Apps: eine exzellente Metapher für Einfachheit und Erweiterbarkeit.“

Hinter dem Siegeszug von Apps stecken außer cleverem Marketing und einträglichen Business-Modellen auch tiefere Gründe: Apps sind eine exzellente Metapher für Einfachheit und Erweiterbarkeit. Apps auf einem Smartphone sollen unter vielen äußeren Bedingungen gut und schnell funktionieren. Daher zwingen sie uns, die Komplexität auf der Interface-Ebene auf einzelne Blöcke herunter zu brechen und verlangen von uns, dass wir diese klar umreißen. Der Kontext einer Nutzung wird so klarer, die Use-Cases bleiben simpel, die Menüs werden schlanker.

Gleichzeitig lassen sich die Systeme leicht erweitern. Kunden und Benutzern wird das vor allem anhand des Icon-Rasters klar: Zeige ich einem Benutzer einen Homescreen und frage ihn, wie das System dahinter erweitert werden kann, ist die Antwort immer: indem ich eine zusätzliche App installiere. Ist das dann nicht möglich oder nicht einfach zu bewerkstelligen, fühlt man sich betrogen. Ein App-System mit nur wenigen Icons hingegen, hinter denen auch noch komplexe Menübäume stecken, fühlt sich schwerfällig und auch irgendwie „falsch“ an.

Nachteile von Apps: Das Beispiel Facebook-Messenger

Facebook: Die erzwungene Trennung von Netzwerk- und Messenger-App fühlt sich für Nutzer noch holprig an. (Screenshot: t3n)
Facebook: Die erzwungene Trennung von Netzwerk- und Messenger-App fühlt sich für Nutzer noch holprig an. (Screenshot: t3n)

Doch Apps haben auch Nachteile. Einer davon ist das „Flattern“ (oder auch: thrashing). Apps sind so eng gehalten, dass oft mehrere von ihnen kombiniert werden müssen, um größere Aufgaben zu lösen. Das erfordert andauernde Wechsel zwischen diesen Apps, was desorientierend und belastend wirken kann und oft zusätzliche (wenn auch meist offensichtliche) Klicks erfordert. Ein andauernder App-Wechsel stört den hindernisfreien Fluss (flow), in dem ein Benutzer ruhig, fokussiert und effizient arbeiten kann.

Ein aktuelles Beispiel für das geschilderte Problem ist Facebooks Messenger. Benutzer werden einerseits gezwungen, nur für den Austausch von Meldungen eine eigene App zu installieren, obwohl dies nicht Teil der Kernfunktionalität von Facebook ist. Dann aber gestaltet sich der Wechsel zwischen Messenger und der Hauptapp äußerst holprig und so störend, dass frustrierte Benutzer sich schließlich nach Messaging-Alternativen umsehen werden. Das dürfte den Zielen von Facebook eher zuwider laufen.

Ein weiterer Nachteil von Apps sind die entstehenden Datensilos. Eine typische App operiert auf einem Typ von Daten (etwa: Seiten, Bilder, Kontaktinfos, Maileinstellungen). Benötigt eine andere App dieselben Daten, so muss ein Zugriff auf diese einfach möglich sein. Ähnliches gilt für verschiedene Apps, die auf demselben Datensatz arbeiten müssen: der Zugriff auf diesen muss klar geregelt sein – mit vielen Spielern wird ein Spiel nicht unbedingt einfacher.

Auf beide Probleme könnten Apps mit einem erhöhten Funktionsumfang reagieren. Damit würden wir aber deren klare Ausrichtung und Einfachheit torpedieren. Da ist ein modulares Prinzip à la Lego, bei dem einfache Bauteile temporär zu größeren Strukturen kombiniert werden, deutlich viel versprechender. Denn so kann ein App-System weiterhin seine Stärken ausspielen.

„The end of apps as we know them“

Was heißt das? Sehr konkret hat Paul Adams das in dem spannenden Artikel, „The end of apps as we know them“ auf seinem Blog „Inside Intercom“ dargestellt. Er spricht davon, dass Apps nur noch in ausgewählten Fällen das Ziel einer Interaktion sein werden. Er schlägt vor, dass sie ihre Funktionen und Interfaces einander und der Umgebung vermehrt über Card-UIs zugänglich machen sollen.

Eine solche Entwicklung lässt sich bereits in aktuellen Versionen von Android und iOS beobachten. Auch hier bleiben Apps einerseits ihren Kernaufgaben treu, bieten ihre Dienste aber vermehrt anderen Apps an. Ein Beispiel: der Password-Manager unter iOS. Muss ich mich im eingebauten Webbrowser auf einer Webseite einloggen, so kann ich neu an Ort und Stelle meinen Password-Manager aufrufen, mich authentifizieren und Benutzername und Passwort einfüllen lassen. Die Grundlage für dieses Verhalten bilden die in iOS neu eingeführten Erweiterungen (extensions). Früher war dafür ein Wechsel zur Password-App notwendig – beide Login-Daten mussten händisch und nacheinander kopiert und nach einem Wechsel zurück in den Browser wieder eingefügt werden.

Eine App ruft eine andere auf: Einfüllen der Login-Daten auf einer Webseite (iOS). (Bild: Andreas Weder)
Eine App ruft eine andere auf: Einfüllen der Login-Daten auf einer Webseite (iOS). (Bild: Andreas Weder)

Über ähnliche Mechanismen kann ich Daten einer App an eine andere App übergeben. Bleibe ich beim Browser als Beispiel, so kann eine Seite mit den Webdiensten Evernote und Instapaper direkt geteilt werden, die dann deren Inhalt verarbeiten. Auch hier bleibe ich im Browser und muss erst dann wirklich zur Evernote-App wechseln, wenn ich die geteilte Seite weiter bearbeiten möchte.

Eine App reicht Daten weiter: 
Abspeichern einer Webseite in Evernote (Android). (Bild: Andreas Weder)

Eine App reicht Daten weiter: 
Abspeichern einer Webseite in Evernote (Android). (Bild: Andreas Weder)

Apps zu Arbeitsketten kombinieren

Ein ähnliches, aber weitergehendes Beispiel ist das Dialogfenster, das eingeblendet wird, wenn ich ein Foto in einer „Fotos“-App per Mail oder als Nachricht versenden möchte. Es stammt von der jeweiligen Nachrichten-App, wird jedoch im Kontext der „Fotos“-App angezeigt. Der Benutzer kann so ein Foto versenden, ohne die aktuelle App verlassen zu müssen. Im Gegensatz zum bloßen Teilen mit Instapaper oder Evernote wird hier eine komplexere Funktion der „Mail“-App zwischenzeitlich verwendet, bevor ich zu „Fotos“ zurückkehre.

Eine App zeigt sich in einer anderen: Ein Fenster zum Schreiben einer Mail in der „Fotos“-App (iOS). (Bild: Andreas Weder)
Eine App zeigt sich in einer anderen: Ein Fenster zum Schreiben einer Mail in der „Fotos“-App (iOS). (Bild: Andreas Weder)

Mit diesen Mechanismen lassen sich flexibel und erweiterbar Apps zu kleinen Arbeitsketten kombinieren. Die Kernbeobachtung hier ist, dass das „Flattern“ zwischen Apps und damit grobe Unterbrechungen im Nutzungsfluss vermieden werden. Einmal eingeführt, ist das so einleuchtend und erleichternd, dass es schnell selbstverständlich und erwartet wird.

So richtig spannend wird das, wenn Apps ihre Dienste überall anbieten können. Ein Trend in aktuellen Mobile-Betriebssystemen sind beispielsweise zunehmend interaktive Nachrichtenströme. Möchte ich auf eine SMS antworten, so ziehe ich die zugehörige Benachrichtigung nach unten. Es wird ein Textfeld sichtbar, in das ich direkt meine Antwort tippen kann. Möchte ich schnell eine Geburtstagserinnerung erstellen, verwende ich mein ToDo-Widget im Nachrichtenstrom dafür. Muss ich die Spesen für ein Mittagessen erfassen, kann ich auch das erledigen, ohne erst die zugehörige App starten zu müssen.

Apps zu Diensten im Nachrichtenstrom: Reagieren und direktes Antworten auf eine Meldung (Android, iOS). (Bild: Andreas Weder)
Apps zu Diensten im Nachrichtenstrom: Reagieren und direktes Antworten auf eine Meldung (Android, iOS). (Bild: Andreas Weder)

Apps als Bausteine und nicht als Ziel unserer Interaktion – die Idee lässt sich weiterspinnen. Solange eine App eine Aufgabe genau abdeckt, starte ich sie separat. Benötige ich ihre Dienste nur nebenbei, so taucht sie auf, ohne dass ich das richtig merke.

App-Funktionalitäten bei Bedarf von überall aus

„Apps sollten die Bausteine, nicht das Ziel unserer Interaktion sein.“

Auch bei Magnolia setzen wir auf ein modulares, App-basiertes System, um komplexe CMS-Funktionalitäten abbilden zu können und gleichzeitig einzelne Aufgabenbereiche separat und einfach erlernbar zu halten. Magnolia besitzt einen Strom für Nachrichten und einen zweiten für Aufgaben (Tasks), auf die direkt reagiert werden kann. Typisch für diese Interaktionen ist, dass die angebotenen Arbeitsschritte klein und fokussiert sein müssen: Möchte ich mehr als nur schnell antworten oder eine Anfrage gutheißen, oder fallen gar mehrere Arbeitsschritte an, so wechsle ich immer in die zuständige App und richte damit meine gesamte Aufmerksamkeit auf die neue Aufgabe.

Bei einem CMS könnte das Baustein-Prinzip die Arbeitsabläufe in Zukunft noch weiter verändern. Ein Beispiel: Das Ziel ist eine neue Marketing-Site – eine größere Aufgabe also. Eine Seitenvorlage ist hierfür ein guter Ausgangspunkt. Eine App liefert den Seiteneditor, eine andere erlaubt es, Bilder und Videos einzufügen. Ohne dass ich die Seite verlasse, editiere ich sie mithilfe von Apps. Am Ende eines solchen Stroms von einzelnen Arbeitsschritten liegt die Publikation der neuen Seite. Auch hierfür bieten Apps wieder dem System ihre Dienste an – zeigen Dialoge, bieten Zugriff auf Daten oder stellen Interfaces zum Vergleichen zweier Seitenvarianten zur Verfügung.

Zugegeben: Bei Magnolia sind wir von solchen Abläufen noch etwas weit weg. Unser Weg führt uns aber vermehrt zu aufgabenorientierten Schnittstellen (task-oriented UIs). Apps sind dabei Inspiration und Baustein zugleich.

Fazit: Apps werden nicht verschwinden – aber sich verändern

Apps werden nicht verschwinden. Sie überzeugen als Metapher für Modularisierung und Erweiterbarkeit und erlauben uns Anbietern, klar umreißbare Blöcke für dedizierte Aufgabenbereiche anzubieten. Die typischen Funktionen einer App werden aber immer mehr dort erscheinen, wo sie gebraucht werden. So entsteht eine fokussierte Erfahrung, die den Nutzer im Flow belässt und flüssiges, konzentriertes Arbeiten unterstützt.

Weiteres zu Apps, ihren Chancen und Problemen findet ihr in den Slides zu meinem Talk „There’s Apps for that“ der J.Boye Konferenz in Philadelphia von 2013.

Über den Autor: Andreas Weder ist Head of User Experience bei Magnolia CMS.

]]>
Andreas Weder
5 Stunden Bällebad: So ensteht ein Cover für das t3n Magazin [Video] http://t3n.de/news/making-of-t3n-magazin-596581/ 2015-02-28T11:02:27Z
Im Rahmen unserer Themenwoche Leadership zum Marktstart des neuen t3n Magazins wollen wir euch die Entstehung des Covers zeigen. Im Video seht ihr die Stunden im Studio kurz zusammengefasst.

Im Rahmen unserer Themenwoche Leadership zum Marktstart des neuen t3n Magazins wollen wir euch die Entstehung des Covers zeigen. Im Video seht ihr die Stunden im Studio kurz zusammengefasst.

3.500 Bälle, fünf Stunden im Fotostudio und acht beteiligte Personen: Das ist die Bilanz des Cover-Shootings für das neue t3n Magazin Nr. 39. Nach vielen Planungsstunden nahmen wir an einem Freitagnachmittag im Januar ein Fotostudio in Beschlag. Der Plan: Ein Bällebad selbst bauen und das neue Cover darin entstehen lassen.

3.500 Bälle und fünf Stunden im Fotostudio: Das war das Covershooting für das t3n Magazin Nr. 39. (Foto: Johannes Schuba)
3.500 Bälle und fünf Stunden im Fotostudio: Das war das Covershooting für das t3n Magazin Nr. 39. (Foto: Johannes Schuba)

3.500 Bälle: Die Bilanz eines t3n-Covershootings

So sieht es aus: Das fertige Cover der t3n Nr. 39. (Foto: Kevin Münkel, Grafik: Jan Heidemann)
So sieht es aus: Das fertige Cover der t3n Nr. 39. (Foto: Kevin Münkel, Grafik: Jan Heidemann)

Die beliebteste Schätzfrage des Nachmittags: Wie viele Bälle passen in ein unser kleines Bällebad? Am Ende waren es knapp 3.500 Stück, die uns eine passende Kulisse für das neue Cover geliefert haben. Nach drei Stunden Aufbau und Tests konnte das Shooting losgehen. Eineinhalb Stunden lang machte es sich Lea-Sophie Cramer von Amorelie auf Luftmatratze und Kopfkissen bequem, Fotograf Kevin Münkel stieg für die Fotos auf die Leiter.

Die erste Favoriten-Auswahl wurde getroffen und es waren genug Fotos im Kasten. Nachdem auch das Bällebad wieder in seine Einzelteile zerlegt und verstaut war, entstand das Cover dann am Rechner unseres Grafikers Jan Heidemann.

Nun bleibt nur noch eine Sache ungeklärt: Was machen wir mit 3.500 Bällebad-Bällen?

]]>
Johannes Schuba
20 wunderschöne Visitenkarten-Vorlagen für Photoshop [Teil 2] http://t3n.de/news/20-wunderschoene-2-596090/ 2015-02-28T06:59:20Z
Visitenkarten haben auch und vielleicht gerade im Zeitalter der sozialen Netzwerke noch ihren Platz. Ganz besonders, wenn es sich um solche Kunstwerke handelt, wie die PSD-Templates, die wir euch …

Visitenkarten haben auch und vielleicht gerade im Zeitalter der sozialen Netzwerke noch ihren Platz. Ganz besonders, wenn es sich um solche Kunstwerke handelt, wie die PSD-Templates, die wir euch in diesem Artikel vorstellen.

Kostenlose Visitenkarten als PSD-Files

Visitenkarten können eine erfrischende Abwechslung sein im heute scheinbar alles beherrschenden Strudel der Xing- und LinkedIn-Profile. Mittlerweile heben sie sich von der breiten Masse ab und wissen in vielen Fällen durch Kreativität oder atemberaubendes Design zu überzeugen. Der Wahl der Schriften, Farben und Formen, aber auch des Formats und der Anordnung sind bei der Erstellung von Visitenkarten keine Grenzen gesetzt. Die Profile in den sozialen Netzwerken sind dagegen starr und für jeden Nutzer durch den Code, der der jeweiligen Anwendung hinterliegt, in gewisser Weise vereinheitlicht und wenig individuell.

In diesem zweiten Teil der Serie haben wir weitere 20 wundervoll gestaltete Beispiele zusammengetragen, die sich allesamt bearbeiten und somit an eigene Bedürfnisse anpassen lassen. Die Designs liegen kostenlos und im PSD-Format vor, Links zu den Vorlagen findet ihr jeweils in den Bildunterschriften.

Visitenkarte hochkant in Schwarz-Weiß-Gelb

sophisticated business card template psd - Visitenkarten
Im Hochkantformat erstellte Visitenkarten stechen heraus aus der breiten Masse. Dieser Effekt wird hier durch sorgsam gesetzte, knallig-gelbe Akzente verstärkt (zcool.com.cn).

Während das grundlegend schwarz-weiße Design diese Visitenkarte eher klassisch und fast langweilig wirken lässt, setzt das knallige Gelb diesem ersten Eindruck einen angenehmen Kontrast entgegen. Das verwendete Hochkantformat ist nach wie vor eher ungewöhnlich und damit eine angenehme Abwechslung.

Visitenkarte auf Karopapier-Muster

brain card psd layered material - Visitenkarten
Visitenkarten im Look eines Schreibblocks gibt es nicht alle Tage zu sehen. Fast schade, denn gepaart mit anderen kreativen Elementen schindet dieses Design ordentlich Eindruck (zcool.com.cn).

Andere Visitenkarten setzen bei der Darstellung von Oberflächen auf Hochglanz-Optik, die wie poliert aussieht. Hier wurde mit dem vom College-Block bekannten Karopapier-Muster einmal ein ganz anderer Weg eingeschlagen. Die Darstellung der Oberfläche ist ebenso kreativ wie die pfiffige Idee der Darstellung der eigenen Kompetenzen in Form des beschrifteten Gehirns.

Schwarz-weiß invertierte Karte

business_card_preview_big - Visitenkarten
Das „Business Card PSD Template“ spielt mit Farben und schwarz-weiß Kontrasten (freepsdfiles.net).

Blickfang dieser vom Format her klassischen Visitenkarte ist sicherlich der augenfällige farbige Ring, der in jedem Fall Aufmerksamkeit auf sich zieht und in Erinnerung bleibt. Neben diesem Element wird hier mit der Möglichkeit gespielt, die Karte beidseitig zu bedrucken. Während die Vorderseite schwarze Schrift auf weißem Grund vorweist, wird diese Konstellation auf der Kartenrückseite umgekehrt, was einen höchst ansehnlichen  Effekt erzielt.

Visitenkarte in Schwarz mit Neonfarben

Graphic design - Visitenkarten
Mehr auffallen kann eine konventionelle Visitenkarte wohl kaum (zcool.com.cn).

An dieser Visitenkarte gibt es kaum unauffällige Bestandteile. Allein das Hintergrundmuster, bestehend aus dem aneinandergereihten Wort „Graphicdesign“ ist aufregend. Dazu kommt die knallige grüne Schriftfarbe, die passend, aber nicht weniger auffällig, mit fett gedruckten Lettern in Neonpink kombiniert wird.

Broschüre im Superhelden-Look

Brochure_Template_PSD_1_Preview - Visitenkarten
Das „Brochure Template“ ist eine farbenfrohe Abwechslung unter den mitunter recht fad gestalteten Unternehmensbroschüren (freepsdfiles.net).

Zugegeben, dieses Projekt ist eher als Broschüre und weniger als Visitenkarte gedacht. Durch die einzigartige Aufmachung hat es dieses außergewöhnliche und sehr sorgfältig gestaltete Faltblatt trotzdem in unsere Auswahl geschafft. Die flippigen Farbkombinationen und der Superhelden-Charakter eignen sich wohl nicht für jede Branche. Sicher ist aber, dass diese skurile Art der Präsentation kaum in Vergessenheit geraten wird.

Weitere Ideen für Visitenkarten

Im ersten Teil der Serie „20 wunderschöne Visitenkarten-Vorlagen für Photoshop“ haben wir euch bereits einige feine Projekte vorgestellt. Besonders kreative Formen von Visitenkarten haben wir hier zusammengetragen: „Tipps für kreative Visitenkarten und 50 inspirierende Beispiele [Bildergalerie]“. Für die Fans von minimalistischem Design ist sicher in dieser Sammlung das ein oder andere Schmankerl dabei: „Ein Augenschmaus: 50 minimalistische und inspirierende Visitenkarten“.

via freepik.com

]]>
Marcel Seer
Cheat-Sheets für Webdesigner: Jede Menge Helfer im Überblick http://t3n.de/news/cheat-sheets-fuer-webdesigner-596526/ 2015-02-27T15:40:29Z
Webdesigner und Entwickler eint ein Dilemma: Es ist fast unmöglich, alle Shortcuts und Tastaturkürzel der verwendeten Software sowie unterschiedliche Programmiersprachen und Frameworks im Kopf zu …

Webdesigner und Entwickler eint ein Dilemma: Es ist fast unmöglich, alle Shortcuts und Tastaturkürzel der verwendeten Software sowie unterschiedliche Programmiersprachen und Frameworks im Kopf zu behalten. Jede Menge Cheat-Sheets erleichtern die Arbeit ungemein. Wir haben im ersten Teil unserer Übersicht einige der hilfreichsten Exemplare für Webdesigner gesammelt.

Es spielt keine Rolle, ob du blutiger Anfänger oder eingefleischter Vollblut-Webdesigner bist. Es spielt auch keine Rolle, seit wie vielen Jahren du mit einem bestimmten Framework oder einer Software arbeitest – ab und an musst du die Doku wälzen oder im Handbuch nachschlagen. Wesentlich häufiger wirst du allerdings auf Cheat-Sheets oder Schnellreferenzen zurückgreifen. Das ist kein Beinbruch, denn bei der Komplexität vieler Anwendungen kann sich kaum ein Webdesigner alle Tastaturkürzel und andere Details merken.

Cheat-Sheets für Webdesigner: Farben und Typografie

Eher an Einsteiger richten sich die Cheat-Sheets, bei denen es um Farblehre und Theorie geht. (Foto: CardPrinting.us)
Eher an Einsteiger richten sich die Cheat-Sheets, bei denen es um Farblehre und Theorie geht. (Foto: CardPrinting.us)

RGB Colour Codes: Das PDF gibt einen Überblick über alle RGB-Farbcodes. Link zum Cheat-Sheet

RGB vs. CMYK: Die Infografik zeigt unter anderem, wo die Stärken und Schwächen von RGB und CMYK liegen. Link

Web Safe Color Chart: Mit den hier aufgeführten Farben kann bei einem Einsatz auf einer Webseite nichts schief gehen. Link

Pantone Number: Für alle, die eine Schnellreferenz für Pantone-Nummern als PDF benötigen. Link

Color Codes Matching Chart HTML: Hier gibt es Codes für CMYK- und RGB-Farben. Link

So you need a typeface: Der durchaus humoristische Ansatz zur Wahl der richtigen Schrift geht davon aus, dass die Wahl auf der Art des Projekts basiert. Link

Cheat-Sheets: Bildbearbeitung und andere Software

Unter den Cheat-Sheets finden sich auch Kurzanleitungen wie eine Referenz zum Stiftwerkzeug von Photoshop. (Foto: trainingonsite.com)
Unter den Cheat-Sheets finden sich auch Kurzanleitungen wie eine Referenz zum Stiftwerkzeug von Photoshop. (Foto: trainingonsite.com)

Adobe Photoshop CS6 Keyboard Shortcuts Cheat Sheet: Der Name verrät es schon – ein Cheat-Sheet mit Tastaturkürzeln für Photoshop CS6. Link Weitere Cheat-Sheets für Photoshop findet ihr auf t3n.

Photoshop Toolbox Reference: Photoshop bietet eine Fülle von unterschiedlichen Werkzeugen. Mit Hilfe dieser Schnellreferenz lassen sich die einzelnen Funktionen der Tools nachschlagen. Link

Photoshop CS6 Brush Guide: Vergessen, wie das mit den Pinseln in Photoshop CS6 war? Kein Problem mit dieser Kurzanleitung. Link zum Cheat-Sheet

Adobe Illustrator CS6 Shortcuts Cheatsheet: Das Cheat-Sheet gibt Auskunft über in Illustrator CS6 verwendbare Tastaturkürzel. Link

Indesign CS6 Tools Panel: Diese praktische Ressource führt alle Werkzeuge von Indesign inklusive Shortucts und Modifizierungen auf. Link

Pen Tool Technique: Wie das mit dem Stiftwerkzeug in Photoshop, Illustrator und Indesign funktioniert, zeigt dieses Cheat-Sheet. Link

Adobe Creative Suite Toolbar Shortcut Wallpapers: Bei Hongkiat kann man sich Hintergrundbilder in unterschiedlichen Größen herunter laden. Deren Inhalt: Shortcuts zu Photoshop, Illustrator, Indesign und Flash. Link zu den Cheat-Sheets

GIMP Cheat Sheet: Für alle Photoshop-Verweigerer bietet sich GIMP an. Für die Software existieren natürlich ebenfalls Cheat-Sheets. Link

Sketch Shortcuts: Die alternative Bildbearbeitung Sketch verfügt über eine Reihe von Shortcuts, die dieses Cheat-Sheet übersichtlich aufführt. Link

Cheat-Sheets für Webdesigner: HTML

Eine Art interaktives Wörterbuch für HTML. (Foto: workflower.fi)
Eine Art interaktives Wörterbuch für HTML. (Foto: workflower.fi)

HTML5 Cheat Sheet: Ein Cheat-Sheet zu HTML5 gehört in die Sammlung jedes Webdesigners. Link

HTML Vocabulary: Das interaktive Cheat-Sheet versteht sich als Wörterbuch für HTML. Einfach auf den Begriff rechts klicken und die entsprechenden Fragmente werden im Code links hervor gehoben. Link

HTML Elements Index: Die Websiet listet alle HTML- und XHTML-Elemente auf. Link

CSS-Cheat-Sheets

Unter den CSS-Cheat-Sheets finden sich auch einige zu Frameworks. (Foto: bootstrap cheat sheets)
Unter den CSS-Cheat-Sheets finden sich auch einige zu Frameworks. (Foto: bootstrap cheat sheets)

CSS Vocabulary: Das interaktive Cheat-Sheet versteht sich als Wörterbuch für CSS. Einfach auf den Begriff rechts klicken und die entsprechenden Fragmente werden im Code links hervor gehoben. Link

CSS Cheat Sheet: Das Cheat-Sheet von OverAPI behandelt unter anderem Selektoren, CSS3 Box, Animationen und mehr. Link zum Cheat-Sheet

Responsive Web Design Cheat Sheet: Wer sich die Frage nach den besten Breakpoints für sein Design stellt, ist mit diesem Cheat-Sheet gut bedient. Link

The complete Font Awesome 4.3.0 icon reference: Das Cheat-Sheet beinhaltet jedes Font Awesome 4.3.0 Icon, jede CSS-Klasse und Unicode. Link

Foundation-5 Cheat Sheet: Bei diesem Dokument handelt es sich um eine umfassende Referenz zu Foundation 5. Link zum Cheat-Sheet

Master Cheat Sheet for Bootstrap 3: Das Cheat-Sheet zum Framework Bootstrap 3 lässt sich als PDF herunter laden. Link

Bootstrap Glyphicons: Das interaktive Cheat-Sheet zeigt für jedes Bootstrap Glyphicon HTML Tag, Unicode HTML Entity und CSS Rule. Link

Cheat-Sheets für JavaScript und JQuery

Klassische Kurzreferenz – in diesem Fall für JavaScript. (Foto: OverAPI)
Klassische Kurzreferenz – in diesem Fall für JavaScript. (Foto: OverAPI)

JavaScript Cheat Sheet: Das Cheat-Sheet zu Javascript von OverAPI ist umfassend. Link

JavaScript Regex Cheatsheet: Wer häufiger Regular Expressions für JavaScript nachschlagen muss, könnte sich für diese Referenz interessieren. Link

jQuery Quick API Reference: Die API-Referenz lässt sich für unterschiedliche Versionen von jQuery einsehen. Link

Cheat-Sheets für SEO und Socialmedia

Webdesigner müssen zu einem gewissen Grad auch fit in SEO sein. (Foto: MOZ)
Webdesigner müssen zu einem gewissen Grad auch fit in SEO sein. (Foto: MOZ)

On-Page SEO Cheat Sheet: Ein interaktives Cheat-Sheet für alle Webdesigner, die auch suchmaschinenoptimierte Webdesigns anbieten wollen. Link

The Web Developer’s SEO Cheat Sheet: Sehr umfangreiches und empfehlenswertes Cheat-Sheet von Moz zum Thema SEO. Link

Social media cheat sheet: Es gilt ein Bild auf mehreren sozialen Netzwerken zu posten. Wer sich nicht sicher ist, welche Maximalabmessungen erlaubt sind. Findet mit diesem Cheat-Sheet Hilfe – auch zu Fragen wie beispielsweise die maximale Dateigröße gibt es Antworten. Link

CMS-Cheat-Sheets

Wer sich mit WordPress-Templates beschäftigt, findet ebenfalls Hilfe in Form von Kurzreferenzen. (Foto: Build Your Own Blog)
Wer sich mit WordPress-Templates beschäftigt, findet ebenfalls Hilfe in Form von Kurzreferenzen. (Foto: Build Your Own Blog)

Ghost Cheat Sheet: Webdesigner, die mit dem CMS Ghost zu tun haben, sollten sich das entsprechende Cheat-Sheet ansehen. Link

The Time Saving Copy/Paste WordPress Cheat Sheet: Wer sich mit dem Entwickeln, Aktualisieren und Warten von WordPress-Templates beschäftigt, findet in diesem Cheat-Sheet die gängigsten Funktionen und kann sie per Copy&Paste verwenden. Link

Joomla! 3.x templates cheatsheet: Dieses Cheat-Sheet liefert Informationen rund um Joomla-Templates. Link

Noch mehr Cheat-Sheets

Fehlt euch noch eine Kategorie oder habt ihr weitere Empfehlungen für Cheat-Sheets innerhalb der einzelnen Kategorien? Dann lasst uns das doch in den Kommentaren wissen, denn wir werden diesen Artikel regelmäßig aktualisieren. In einem zweiten Teil wollen wir für euch für Entwickler empfehlenswerte Cheat-Sheets sammeln.

]]>
Sébastien Bonset
Diese 15 Web-Templates musst du gesehen haben [Teil 2] http://t3n.de/news/diese-15-web-templates-gesehen-2-595629/ 2015-02-25T08:09:42Z
Eine weitere feine Sammlung kostenloser Web-Templates im PSD-Format präsentieren wir euch in diesem Artikel. Die Vorlagen eignen sich teils für Blogs oder News-Websites, aber auch für Shops und …

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

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

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

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

Enterprise-Web-Template

Creative Website Design Template PSD - Web-Templates
Flat Design, viel Raum und zahlreiche Möglichkeiten zur Anwendung bietet das „Creative Website Design Template PSD“ (psdfinder.com).

Eine höchst ansehnliche Möglichkeit zur Darbietung von Produkten oder Services, zum Beispiel für Freelancer, bietet das von Psdfinder zur Verfügung gestellte Template. Während andere Templates viele Elemente auf wenig Raum unterzubringen versuchen, ist dieses Layout eher minimalistisch und auf die Wahrung von Weißraum ausgelegt.

Metro-Style-Web-Template

Free Creative Minimal Business Agency Webpage Design - Web-Templates
Eine alternative Gestaltung einer Website, abseits des Bekannten, bietet das „Free Creative Minimal Business Agency Webpage Design“ (behance.net) (CC BY-NC 3.0).

Ali Sayeds Web-Template folgt nicht dem typischen Aufbau einer Website mit Navigations-Menü in der Kopfzeile und vertikal absteigend folgenden Inhalten, die durch imaginäre Spalten in Form gesetzt werden. Vielmehr erinnert die Anordnung der verschieden großen, rechteckigen Blöcke an das von Windows verwendete Metro-Design.

Web-Template für Blogs oder Magazine

iPress Free PSD Magazine & Blog Template - Web-Templates
Viele Elemente, viel Inhalt und dabei immer noch eine klare Struktur bietet das „iPress Free PSD Magazine & Blog Template“ (dribbble.com).

Das „iPress Free PSD Magazine & Template“ kündigt durch seinen Namen den Verwendungszweck als Blog oder Magazin-Website bereits an. Das zwischen zwei und drei Spalten wechselnde Layout wirkt kantig und klar strukturiert. Das grundlegend schwarz-weiße Design wird durch sorgsam gesetzte farbige Leisten und Buttons aufgewertet.

Alternatives Gmail-Template

Reimagining Gmail - Web-Templates
Web-Templates sind nicht nur klassische Websites. Die Arbeit an „Reimagining Gmail“ ist aus Unzufriedenheit mit dem derzeitigen von Google angebotenen User-Interface entstanden und möchte alternative Ideen zeigen, Googles Service zu gestalten (dribbble.com).

Weniger ein Design für eine klassische Website als vielmehr eine kreative Idee für eine alternative Gestaltung von Googles E-Mail-Service liefert George Vasyagin mit seinem Projekt „Reimagining Gmail“.

Corporate-Design-Web-Template

Das schwarz-weiß Design mit punktuell eingesetzten, auffällig gelben Elementen und Textpassagen wirkt seriös und gleichzeitig modern.  „Skokov - Free Corporate Web Design Template PSD“ (skokov.cc).

Ein sehr aufgeräumtes, auf Bilder und Symbolik fixiertes Layout hat der Web-Designer Skokov in Form dieses PSD-Templates erschaffen. Der eigenen Beschreibung zur Folge ist das Template für die Nutzung einer Unternehmenswebsite ausgelegt. Das acht PSD-Dateien beinhaltende Paket ist unter anderem für die Nutzung unter WordPress oder Joomla! gestaltet.

Weitere Web-Templates aus der Serie

Den Anfang dieser Serie hat der Artikel „Diese 15 Web-Templates musst du gesehen haben“ gemacht. Weitere Vorstellungen gelungener Web-Templates werden folgen.

via downloadpsd.com

]]>
Marcel Seer
Smashing Conference: Beliebte Web-Konferenz lädt erneut nach Oxford http://t3n.de/news/smashing-conference-oxford-595726/ 2015-02-24T14:22:24Z
Die erste Smashing Conference im Jahr 2015 steht auf dem Terminplan: Im März geht die beliebte Web-Konferenz in Oxford in die siebte Runde.

Die erste Smashing Conference im Jahr 2015 steht auf dem Terminplan: Im März geht die beliebte Web-Konferenz in Oxford in die siebte Runde.

Vom 16. bis zum 19. März liegt das Frontend-Mekka wieder für vier Tage im Englischen Oxford. Schon zum siebten Mal seit 2012 findet die Smashing Conference für Webentwickler und -designer statt.

Smashing Conference: Bekannte Speaker, Networking und Insights

Die zweite Auflage der Smashing Conference in Oxford bringt wieder einige Highlights mit. Der erste und der letzte Tag bestehen aus Workshops, unter anderem zu Themen wie Responsive Webdesign, Responsive Images oder Flexbox. Die zwei Konferenztage in der Mitte widmen sich praxisnahen Vorträgen mit vielen Best Cases, Insights, Strategien und Tools. Die lockere Atmosphäre auf der Konferenz erlaubt außerdem den Austausch mit den Referenten, aber auch das Networking der Teilnehmer untereinander wird groß geschrieben.

Die zweite Smashing Conference in Oxford findet wieder in der „Oxford Main Hall“ statt. (Foto: Smashing Conference)
Die zweite Smashing Conference in Oxford findet wieder in der „Oxford Main Hall“ statt. (Foto: Smashing Conference)

All diese Themen werden den Teilnehmern von bekannten Speakern vermittelt. Am Ende des ersten Workshop-Tages ist außerdem ein Abend-Event für alle Teilnehmer geplant, bevor die Konferenz am nächsten Tag startet.

Smashing Conference im Überblick

Datum und Ort:

  • 16. bis 19. März 2015
  • Oxford

Themen:

  • Webdesign
  • Webentwicklung

Tickets

smashing-conference-tickets

Jetzt ein Ticket für die Smashing Conference kaufen

]]>
t3n Redaktion
„Schrift funktioniert wie Hintergrundmusik“ – Typografie-Experte Spiekermann im Interview [Sponsored Post] http://t3n.de/news/typografie-webinale-erik-spiekermann-interview-593302/ 2015-02-24T09:30:34Z
Im Vorfeld der webinale spricht Typografie-Experte Erik Spiekermann über Schrift im Netz – warum sie wie Hintergrundmusik funktioniert und warum im Internet eigentlich kaum andere Regeln gelten …

Im Vorfeld der webinale spricht Typografie-Experte Erik Spiekermann über Schrift im Netz – warum sie wie Hintergrundmusik funktioniert und warum im Internet eigentlich kaum andere Regeln gelten als auf Papier.

erik_spiekermann-webinale
Typografie- und Design-Experte Erik Spiekermann (Edenspiekermann).

Die webinale ist die Konferenz für Digital-Professionals, Trendsetter und Macher im World Wide Web – sie ist die optimale Crossover-Plattform für Wissensvermittlung, Inspiration sowie Erfahrungsaustausch über alle Branchen hinweg. International renommierte Digital-Experten und Vordenker wie der Typografie- und Design-Experte Erik Spiekermann geben auf der webinale vom 7. bis 11. Juni 2015 in Berlin ihr Know-How an die Teilnehmer weiter - in über 80 Workshops, Sessions und Keynotes. Dabei stehen die Trends von morgen ebenso auf dem Programm wie praxistaugliches Wissen für erfolgreiche Web- und Mobile-Projekte von heute.

Im Vorfeld der webinale hat der Journalist Thomas Wießeckel sich mit Erik Spiekermann über Schrift im Netz unterhalten. Wießeckel ist seit Anfang 2009 Redakteur bei Software & Support Media. Seine Themengebiete umfassen Webtechnologien und -Entwicklung sowie die Bereiche Mobile Development und Open Source.

Thomas Wießeckel: Herr Spiekermann, Sie haben gesagt: „The web is more type than anything.“ Wird das im Massenmedium Internet gebührend beachtet?

Erik Spiekermann: Allmählich schon. Es gibt kaum noch Entschuldigungen, alle typografischen Mittel nicht optimal einzusetzen. Andererseits sehen auch die meisten Paperback immer noch schlampig aus, obwohl gute Typografie dort auch nicht mehr kostet als schlechte. Alles also eine Frage des Bewusstseins und des Könnens, nicht der Technik.

Wießeckel: Wie beeinflusst Typographie generell die Wahrnehmung einer Website? Der Großteil der Aufmerksamkeit wird ja vermeintlich durch den grafischen Anteil des Layouts geschluckt.

Spiekermann: Das ist ein Trugschluss. Die Gesamtanmutung der Seite ist zum großen Teil von Schrift geprägt. Auch eine Seite nur mit Schrift ist ja erst mal ein Bild, bevor wir näher hinschauen zum Lesen. Wir nehmen wahr, bevor wir verstehen. Typografie funktioniert wie Hintergrundmusik: Man hört nicht hin, unbewusst macht sie aber doch Stimmung.

Wießeckel: In Ihrer Keynote auf der webinale sagen Sie, dass wir die Sache auch gleich richtig angehen könnten … Was machen wir bisher denn falsch?

Spiekermann: Schrift wird unterschätzt, weil sie so selbstverständlich ist. Über Luft reden wir auch nur, wenn sie schlecht ist. Aber schlechte Typografie – die falsche Schrift oder ihre falsche Anordnung – sendet eine Botschaft an unsere Wahrnehmung. Und diese Botschaft überträgt sich auf die Wahrnehmung der Marke, des Unternehmens, des Absenders. Wie im richtigen Leben.

Wießeckel: Typographie besteht aus vielen Details, und wir reden im Zusammenhang mit dem Web nicht nur von hochauflösenden Smartphone-Displays, sondern auch von klassischen Billigmonitoren aus dem Mitnahmemarkt. Wie schafft man es, diese Welten in Einklang zu bringen?

Spiekermann: Je nachdem, ob man ein Haus aus kleinen Backsteinen, großen Betonplatten oder groben Balken baut, muss man die Architektur auch anpassen. Der Maßstab ist aber immer der Nutzer und der hat Erwartungen. Gestalter müssen die richtigen Werkzeuge haben und einsetzen. Wer sich mit niedriger Auflösung oder schlechten Verbindungen rausredet, ist nur zu faul das Handwerk richtig zu lernen.

„Unsere Augen sind immer noch nebeneinander und eine Handspanne ist immer noch eine Handspanne“

Wießeckel: Reden wir über die Gestaltung mit Typographie. In den letzten Jahren wurden immer mehr Techniken aus dem klassischen Druck ins Web übertragen. War das der falsche Ansatz? Hätten wir das Web nicht komplett neu denken müssen?

Spiekermann: Nein, denn weder unsere Augen noch unsere Hände sind neu gedacht. Natürlich spielt es eine Rolle, ob man in eine Lampe schaut beim Lesen oder auf eine reflektierende Oberfläche wie Papier. Wir haben uns aber seit Gutenberg, also seit mehr als 500 Jahren, an bestimmte Lesarten gewöhnt. Die optimale Form des Buches, der Zeitung, des Magazins ist lange gefunden. Schriftgrößen, typografische Hierarchien, Anordnung und Art der Bilder dienen alle dazu, einen Inhalt so attraktiv wie möglich darzustellen.

Die Art der Interaktion mit Inhalten ist auf einem iPad anders als auf Papier, aber die meisten Kriterien für Gliederung und Darbietung des Inhalts sind die gleichen. Wir müssen etliches neu lernen und anpassen, aber unsere Augen sind immer noch nebeneinander und eine Handspanne ist immer noch eine Handspanne. Die optimale Schriftgröße, der Abstand zur Leseoberfläche und vor allem eben die Inhalte sind als Parameter für die Gestaltung geblieben. Wer klassisches Layout kann, der kann auch Layout fürs Web oder fürs Smartphone.

Wießeckel: Bedingt durch die Fragmentierung der Devices und der nicht immer identischen Bandbreite ist man irgendwann dazu übergegangen, Font Icons zu verwenden, um Bildsprache ressourcenschonend zu transportieren. Ist das in Ihren Augen ein Missbrauch von Typographie oder ein genialer Schachzug?

Spiekermann: Icons gibt es immer schon dort, wo man kultur- und sprachenübergreifend kommunizieren muss und wo es auf Nuancen nicht ankommt. Wörter sind viel eindeutiger als Symbole, deshalb hat sich unsere Schrift ja auch innerhalb von 5000 Jahren von einfachen Symbolen zu diesem System von modularen Zeichen entwickelt, das wir das Alphabet nennen. Aber für wiederkehrende Vorgänge und eindeutige Handlungen sind solche Icons überaus praktisch.

Wießeckel: Ein weiteres Problem im Web ist das inkonsistente Handling von Systemschriften – zum Teil auch innerhalb verschiedener Betriebssystemversionen eines Herstellers. Wenn man sich als Designer nicht darauf verlassen kann, dass man das erwartete Ergebnis erzielt, bleiben nur Webfonts … sind sie der Weg, den wir im Web gehen müssen?

Spiekermann: Schon lange nicht mehr. Schriften werden auf dem Server vorgehalten und der jeweiligen Webseite zugespielt, wie das mit Bildern ja auch schon so ist. Oder gibt es Systembilder? Es gibt keinen Grund mehr nur Systemschriften zu verwenden. Wer es kann, bereitet Webfonts so auf, dass nur die jeweils nötigen Zeichen und Schnitte geladen werden. Damit sind Ladezeiten kein Thema mehr. webinale_blase_oUZ (1)Ein Webfont braucht nicht mehr als 20 Kilobyte, das entspricht einem kleinen Bild. Allerdings sind noch lange nicht alle Webfonts so gut aufbereitet, dass sie ähnlich reibungslos funktionieren wie Georgia oder Verdana.

Möchtest du Erik Spiekermann live auf der webinale erleben, dann sichere dir jetzt dein Ticket. Noch bis zum 26. März gibt es den Frühbucherrabatt. Zudem bekommst du bei Anmeldung für drei Konferenztage bis zum 26. März ein Android-Tablet geschenkt.

Das aktuelle Programm der webinale findest du im großen Zeitplan.

]]>
Melanie Petersen
Prototyping auf Speed: Mit Weld erstellt ihr in Minuten responsive Prototypen http://t3n.de/news/prototyping-speed-weld-erstellt-595212/ 2015-02-22T11:28:06Z
Mit Weld gibt es ein spannendes Prototyping-Tool für responsive Web-Apps. Innerhalb kurzer Zeit könnt ihr damit klickbare Prototypen für den Desktop, Tablets und Smartphones erstellen.

Mit Weld gibt es ein spannendes Prototyping-Tool für responsive Web-Apps. Innerhalb kurzer Zeit könnt ihr damit klickbare Prototypen für den Desktop, Tablets und Smartphones erstellen.

Prototyping-Tool: Mit Weld erstellt ihr in kurzer Zeit klickbare, responsive Prototypen. (Screenshot: Weld.io)
Prototyping-Tool: Mit Weld erstellt ihr in kurzer Zeit klickbare, responsive Prototypen. (Screenshot: Weld.io)

Responsive Prototypen mit Weld erstellen

Prototyping-Tools gibt es mittlerweile wie Sand am Meer. Um aus der bestehenden Auswahl noch hervorzustechen, müssen Anbieter ihren potenziellen Kunden deshalb auch einen Mehrwert bieten. Im Fall von Weld dürfte das sicherlich durch die einfache Erstellung von responsiven Prototypen gegeben sein. Innerhalb von kurzer Zeit können Nutzer den Prototyp einer Web-App für den Desktop, Tablets und Smartphones erstellen. Das kinderleichte Interface tut sein übriges, um Weld zu einem extrem spannenden Tool zu machen.

Über das Web-Interface von Weld könnt ihr bequem das Layout eures Prototyps zusammenklicken. Hier stehen euch alle möglichen Elemente wie Grafiken, Buttons, Texte oder Icons zur Verfügung. Mit einem Klick wechselt ihr jeweils zwischen der Desktop-, Tablet- oder Smartphone-Ansicht hin und her. Bearbeitet ihr ein Element, könnt ihr zuvor festlegen, ob die Änderungen nur die gewählte Ansicht betreffen sollen oder nicht.

Weld: Prototypen können live geteilt werden

Ein weiteres praktisches Feature von Weld ermöglicht das Teilen eures Prototyps per E-Mail oder SMS. Über den versendeten Link könnt ihr dann beispielsweise sofort überprüfen, wie sich der Prototyp auf eurem Smartphone oder Tablet macht. Besonders spannend: Alle Änderung, die ihr vornehmt, werden live auf das andere Gerät übertragen. Die Funktion eignet sich natürlich auch gut dafür, potenzielle Änderungen am Design mit anderen Team-Mitgliedern zu diskutieren, die sich nicht im selben Büro befinden.

Ihr könnt Weld kostenlos nutzen, sofern ihr nur an einem Projekt arbeitet. Für jeweils zehn US-Dollar plus Steuern könnt ihr an zwei weiteren Prototypen arbeiten. Eine unlimitierte Anzahl an Prototypen könnt ihr für 29 US-Dollar pro Monat zuzüglich Steuern anlegen und bearbeiten. Weld macht schon jetzt einen guten Eindruck, soll mittelfristig aber noch deutlich ausgebaut werden. Zukünftig sollen unter anderem auch Scripting-Möglichkeiten hinzukommen. Langfristig soll Interaktivität auch ganz ohne Programmierung über Weld möglich sein. Wie gut das funktionieren wird, bleibt abzuwarten.

Wenn ihr nach weiteren Alternativen sucht, solltet ihr einen Blick auf unseren Artikel „Prototyping: 5 Online Tools für Dein UX-Design“ werfen.

via www.producthunt.com

]]>
Kim Rixecker
Individuelle WordPress-Seiten ohne eine Zeile Code: Das kann Layers http://t3n.de/news/wordpress-seiten-layers-bauen-595176/ 2015-02-22T09:11:14Z
Mit Layers sollen sich WordPress-Seiten mit einem individuellen Layout erstellen lassen, ohne dass eine Zeile Code geschrieben oder angepasst werden muss. Wir haben uns das Tool für euch angeschaut.

Mit Layers sollen sich WordPress-Seiten mit einem individuellen Layout erstellen lassen, ohne dass eine Zeile Code geschrieben oder angepasst werden muss. Wir haben uns das Tool für euch angeschaut.

Layers: Von der Installation bis zur leeren Layout-Vorlage in wenigen Minuten

Am Ende der Layers-Einführung wird das Layout für die erste Seite gewählt. (Screenshot: eigene WordPress-Installation)

Nicht jeder WordPress-Nutzer besitzt die notwendigen Kenntnisse, um ein Theme selbst zu erstellen oder anzupassen. Mit Layers lassen sich auch ohne Programmierkenntnisse Seiten-Layouts erstellen, die individuell aussehen. Der Start mit Layers ist denkbar einfach. Ihr ladet euch einfach den ZIP-Ordner runter und installiert Layers im WordPress-Backend wie ein ganz normales Theme (über „Design“ > „Themes“ und dann oben auf „Installieren“). Anschließend werdet ihr auf die Willkommens-Seite von Layers weitergeleitet. Hier könnt ihr jetzt Stück für Stück eure Site einrichten.

Ganz am Ende des Vorgangs geht es an die Erstellung der ersten Seite – hier könnt ihr aus vorgefertigten Layouts wie „Application“ oder „Contact Page“ auswählen oder aber eine leere Seite erstellen (was im Test ausgewählt wurde). Nach der Auswahl werdet ihr zum Customizer weitergeleitet.

Ein Seiten-Layout mit Layers erstellen

Layers bringt einige nützliche Widgets mit. (Screenshot: eigene WordPress-Installation)
Layers bringt einige nützliche Widgets mit. (Screenshot: eigene WordPress-Installation)

Jetzt könnt ihr anfangen, ein Layout zusammenzustellen. In der Sidebar des Customizers findet ihr die Punkte „Edit Layout“, „Site Settings“, „Header“, „Footer“, das bekannte „Statische Startseite“ und „CSS“. Schauen wir uns zuerst den Punkt „Edit Layout“ an. Hier könnt ihr über den Unterpunkt „Home Page Body“ Inhalt und Layout eurer Seite anpassen.

Das Prinzip von Layers ist dabei folgendes: Über Widgets fügt ihr Inhalte in die Seite ein, wobei ein Widget immer eine Zeile in der Seite ist (zwei Widgets nebeneinander funktionieren also nicht, ohne den Code anzufassen). Neben den Standard-Widgets von WordPress stehen noch vier Layers-Widgets zur Verfügung. Mit ihnen könnt ihr Inhalte einfügen und gegebenenfalls auch im Raster anzeigen, Kontakt-Details sowie eine Karte integrieren, eure letzten Posts inklusive Abstract anzeigen und einen Slider einbauen.

Umfangreiche Einstellungsmöglichkeiten in der Detailansicht der Widgets. (Screenshot: eigene WordPress-Installation)
Umfangreiche Einstellungsmöglichkeiten in der Detailansicht der Widgets. (Screenshot: eigene WordPress-Installation)

Um ein Widget hinzuzufügen, klickt ihr einfach wie gewohnt auf „Widget hinzufügen“ und bekommt die Widgets angezeigt. Durch Anklicken wird ein Widget hinzugefügt und es öffnen sich automatisch die Detail-Einstellungen. Hier könnt ihr dann beispielsweise beim Content-Widget Spalten löschen oder hinzufügen, einstellen, wie viele Spalten ein Content-Bereich einnehmen soll und so weiter. Dieselbe Arbeitsweise gilt für die anderen Theme-Bereiche (In die mobile Sidebar muss auch das Menü eingefügt werden, da dieses sonst im mobilen Layout nicht angezeigt wird).

Weitere Einstellungsmöglichkeiten

Über den Punkt „Site Settings“ könnt ihr Menüs den verschiedenen Theme-Positionen zuweisen, das Logo sowie Titel und Untertitel anpassen, bestimmen, welche Sidebar auf welchem Seitentyp angezeigt werden soll und verschiedene Schriftarten für den body-Text, Überschriften und Buttons auswählen (zurückgegriffen wird hier auf Googles Web-Fonts).

Unter dem Punkt „Header“ könnt ihr sein Layout anpassen, einstellen, ob der Header sticky sein soll und eigenes JavaScript einfügen. Ähnliches gilt für den Bereich „Footer“. Wenn ihr mit einer Seite zufrieden seid, könnt ihr sie über die Schaltfläche „Speichern & Publizieren“ veröffentlichen. Wollt ihr eine neue Seite erstellen, geht ihr einfach über „Layers“ > „Add New Page“.

Layers bringt außerdem noch einige Seiten-Templates mit – unter anderem eine Blog-Ansicht. Über die weiteren Möglichkeiten von Layers könnt ihr euch in der Dokumentation informieren.

Ein erstes Ergebnis mit Layers. (Screenshot: eigene WordPress-Installation)
Ein erstes Ergebnis mit Layers. (Screenshot: eigene WordPress-Installation)

Ein Fazit

Es lässt sich mit Layers tatsächlich ziemlich viel einstellen und individuell verändern – eine Landingpage mit den wichtigsten Informationen, den letzten Beiträgen und einer Karte ist schnell erstellt, und der Code sieht bei oberflächlicher Betrachtung auch ganz okay aus. Wer allerdings ganz genaue Vorstellungen und Wünsche hat, die über ein gewisses Schema hinausgehen, wird sich auch weiterhin selbst ein Theme erstellen (lassen) müssen.

Wer aber einfach eine Website mit WordPress und anpassungsfähigen Seitenlayouts erstellen will, keine ausgefallenen Gestaltungswünsche hat und nicht selbst ein Theme erstellen kann oder will, der sollte sich Layers mal anschauen.

]]>
Florian Brinkmann
15 atemberaubende UI-Kits als Photoshop-Vorlagen http://t3n.de/news/15-atemberaubende-ui-kits-593850/ 2015-02-21T15:13:35Z
Es gibt im Netz unzählige traumhaft schön gestaltete UI-Kits, also Design-Elemente in Form von PSD-Dateien. 15 davon stellen wir euch in diesem Artikel vor.

Es gibt im Netz unzählige traumhaft schön gestaltete UI-Kits, also Design-Elemente in Form von PSD-Dateien. 15 davon stellen wir euch in diesem Artikel vor.

Ob mobile Website, Desktop-Pendant oder Responsive , App oder Software – unter den folgenden User-Interface-Kits finden sich Komponenten für alle erdenklichen Anwendungszwecke. Vorherrschend ist unter den gezeigten UI-Kits sicher das geliebte wie gehasste, aber nach wie vor aktuelle Flat Design. Daneben sind unter den Designs sowohl knallig-farbenfrohe Varianten, als auch unscheinbar gedeckte, solche, die sich vornehmlich Pastelltönen bedienen und andere, die hauptsächlich dunkle Farbtöne anschlagen. Alle vorgestellten Projekte stehen kostenlos zum Download bereit und lassen sich sowohl in privatem Kontext als auch kommerziell wiederverwenden.

Die Links zu den PSD-Dateien sind entweder in den Bildunterschriften untergebracht oder befinden sich in den Beschreibungen in der Bildergalerie. Die hier auf der Artikelseite dargestellten Sammlungen von User-Interface-Elementen zeigen teilweise nur Ausschnitte, die vollständigen Varianten mit allen Elementen befinden sich der Übersichtlichkeit halber in der Bildergalerie.

UI-Kit für Blogs oder Magazine im Flat Design

test
UI-Kits für alle Lebenslagen: Das „Blog-/Magazine-Flat-UI-Kit“. (Screenshot: graphicburger.com)

Das „Blog/Magazine Flat UI Kit“ bietet ein farbintensives, schnörkelloses Flat Design mit zahlreichen nützlichen Elementen. Alle dargestellten Komponenten lassen sich nach eigenen Wünschen anpassen. Die Bilder dienen nur der Veranschaulichung und sind nicht Teil des UI-Kits.

UI-Elemente in hellen Pastelltönen

test
„Flat UI Elements“. (Screenshot: graphicburger.com)

Als Design für Anwendungen, aber auch für Websites eignet sich die von Marie Dehayes erschaffene Sammlung von UI-Elementen. Die einzelnen Komponenten liegen in Form von vollständig skalierbaren Vektorgrafiken vor.

Flat-Design-UI-Kit „Rounded Square“

test
„Flat Rounded Square UI Kit“. (Screenshot: webappers.com)

Eine extrem umfangreiche Sammlung von Webelementen liefert das „Flat Rounded Square UI Kit“. Für die Gestaltung von Apps, Websites oder auch Software bleiben mit dieser Zusammenstellung kaum Wünsche offen.

Mobiles „Hipstacowboys“-UI-Kit

test
UI-Kit „Dribbble App Concept PSD“. (Screenshot, bearbeitet: graphicburger.com)

Das UI-Kit „Dribble App Concept PSD“ ist, wie es der Name vermuten lässt, prädestiniert für den Einsatz auf mobilen Endgeräten. Das Design mutet frisch und modern an und wirkt passend zum Namen des Labels von Designer Marek Dvorak „Hipstacowboys“.

Düsteres „Hero“-UI-Kit im Flat Design

test
„Hero Free UI Kit PSD“. (Grafik: dribbble.com)

Im UI-Kit von Vladislav Kamelsky dominieren kraftvolle Farben im minimalistischen, mit Rundungen bedachten, Flat Design. Insgesamt wirkt das UI-Kit eher düster, lässt sich aber dennoch durch die simple, weil auf Funktionalität getrimmte Machart auch in seriösem Kontext einsetzen.

Weitere UI-Kits

Einige weitere gestalterische Perlen im Flat Design haben wir euch schon in den Artikeln „Flat Design: 15 User-Interface-Kits zum Download“ und „Flat Design: 20 sehenswerte User-Interfaces“ vorgestellt.

via www.freepik.com

]]>
Marcel Seer