Webdesign | t3n News News, Infos, Tipps und aktuelle Artikel zu Webdesign 2016-02-11T09:02:56Z t3n Redaktion http://t3n.de/tag/webdesign Wireframe bis Prototype: Die besten 5 Tools für dein nächstes Webdesign im Vergleich http://t3n.de/news/wireframe-prototype-besten-5-677721/ 2016-02-11T09:02:56Z
Um sich nicht direkt auf das Design zu stürzen, wird häufig erst mal ein grundlegendes Konzept für die Struktur der Website entwickelt. Ein Wireframe entsteht vor der eigentlichen …

Um sich nicht direkt auf das Design zu stürzen, wird häufig erst mal ein grundlegendes Konzept für die Struktur der Website entwickelt. Ein Wireframe entsteht vor der eigentlichen Entwicklungsphase und beinhaltet zum Beispiel Inhaltsbereiche, Navigationselemente, Menüleisten und vieles mehr.

Es gibt zwei Arten von Wireframes: statische und dynamische. Ein statisches Wireframe beinhaltet nur ein grundlegendes Raster, in dem Inhalt und Design noch keine Rolle spielen. Ein dynamisches Wireframe geht schon fast ins Prototyping über: Die Ideen sind weiter ausgereift und beinhalten Interaktionen sowie Animationen. Wir haben euch die Fünf – unserer Meinung nach – besten Tools rausgesucht.

Wenn du mehr über die Vorgehensweise und Unterschiede zwischen Wireframe und Prototyping wissen willst, solltest du diesen Artikel nicht verpassen oder in unserem Magazin Nr. 32 nachblättern.

1. UXPin

Mit wenigen Klicks vom Wireframe zum fertigen Prototype. (Screenshot: uxpin.com)
Mit wenigen Klicks vom Wireframe zum fertigen Prototypen. (Screenshot: uxpin.com)

UXPin ist definitiv mehr als nur ein Wireframe-Tool, denn du kannst damit einen voll interaktiven Prototypen erstellen. UXPin bietet dir eine Auswahl von über hundert UI Elementen und Vorlagen. Und wenn nichts dabei sein sollte, fügst du einfach deine eigenen hinzu.

Über die Echtzeit-Zusammenarbeit kannst du nicht nur mit mehreren Teilnehmern am gleichen Design arbeiten, sondern auch deine Arbeit präsentieren oder teilen, ohne dass ein Account erforderlich ist.

Starten kannst du für sieben Tage kostenlos, danach geht es preislich bei 19 US-Dollar für Freelancer oder kleine Unternehmen los. Die empfohlene Pro-Version kostet 29 US-Dollar und beinhaltet zum Beispiel den Import von Photoshop und Sketch. Falls du noch mehr Funktionen benötigst, kannst du auf Pro+ oder Enterprise erweitern.

2. Craft Plugin

Einfaches Hinzufügen von Content aus Web oder eigenen Fotos in Sketch. (Screenshot: labs.invisionapp.com/craft)
Einfaches Hinzufügen von Content aus Web oder eigenen Fotos in Sketch. (Screenshot: labs.invisionapp.com/craft)

Craft ist ein Plugin für Photoshop und Sketch. Das Entwerfen eines Wireframes an sich passiert also in einem der beiden Programme. Um mehr als nur einen Wireframe zu bauen, bietet dir Craft die Möglichkeit, Inhalte auf einfache Art und Weise zu importieren. Das Craft Plugin steht kostenlos zum Download bereit.

3. Balsamiq

(Screenshot: balsamiq.com)
(Screenshot: balsamiq.com)

Balsamiq ist eines der bekanntesten Tools und konzentriert sich auf reines Wireframing. Vom Design ist es eher schlicht gehalten und erinnert an eine klassische Handzeichnung. Es gibt eine große Auswahl an Elementen, die einfach per Drag&Drop eingefügt werden. Leider sind keine Interaktionen möglich, es gibt aber die Möglichkeit mehrere Tabs miteinander zu verlinken.

Die Einzelbenutzer-Lizenz geht bei 89 US-Dollar los. Der Preis der Volume-Lizenz richtet sich nach den Benutzern.

4. Axure

Mit Axure einfache Mock-ups erstellen. (Screenshot: google.de/axure)
Shopsystem Mock-up? Mit Axure einfach gemacht. (Screenshot: google.de/axure)

Axure kann als reines Wireframe-Tool genutzt werden oder auch als Prototype-Tool. Axure verfügt über eine große Auswahl an UI-Elementen. Mit der Axure-Pro-Version kannst du Kommentare und Erklärungen später als Word-Dokument exportieren und hast somit den perfekten Leitfaden zu deinem Konzept. Erstellte Wireframes lassen sich als HTML- und CSS-Datei exportieren und deine Arbeit kannst du per Link direkt an deinen Kunden schicken.

Axure bringt einen großen Funktionsumfang mit, daher sollte genug Einarbeitungszeit eingeplant werden, sonst kann Axure schnell unübersichtlich werden. Wer Axure testen will, kann mit der 30-Tage-Testversion beginnen. Danach gibt es die Standard-Version für 289 US-Dollar und die Pro-Version für 589 US-Dollar.

5. wireframe.cc

Wireframe.cc bietet eine große Auswahl an UI Elementen. (Screenshot: wireframe.cc)
Wireframe.cc bietet eine große Auswahl an UI Elementen. (Screenshot: wireframe.cc)

Mit der freien Version von wireframe.cc kannst du einfach simple Mock-ups erstellen und durch Teilen des Links deine Arbeit präsentieren und kommentieren lassen. Die Premium-Version hat Einiges mehr zu bieten. Interaktionen, Protokoll Verläufe und der Export als PDF oder PNG sind nur einige Features. Auch wireframe.css bietet dir Zusammenarbeit mit deinem ganzen Team.

Die 7-Tage-Testversion gibt es kostenlos. Mit 99 US-Dollar im Jahr und einem Benutzer startet das "Solo-Paket" und endet mit 990 US-Dollar pro Jahr mit unbegrenzter Benutzeranzahl. Alle Preise sind auch monatlich verfügbar.

 

Für den perfekten Workflow von Beginn an, empfehlen wir Moodboards – hier der passende Artikel.

]]>
Jessy Kösterke
Responsive Webdesign: 18 kostenlose Tools und Extensions zum Testen deiner Seite http://t3n.de/news/responsive-webdesign-tools-380139/ 2016-01-04T11:31:55Z
Beim Responsive Webdesign können Tools und Test-Werkzeuge viel Zeit sparen. Das einfache Umschalten zwischen Viewport-Größen vereinfacht die Arbeit enorm. Wir stellen euch 18 kostenlose Tools, …

Beim können Tools und Test-Werkzeuge viel Zeit sparen. Das einfache Umschalten zwischen Viewport-Größen vereinfacht die Arbeit enorm. Wir stellen euch 18 kostenlose Tools, Browser-Extensions und Bookmarklet dafür vor.

Responsive Webdesign: Tools für die Viewport-Vorschau

Wenn man sein Website-Layout alle paar Sekunden aktualisieren und gleichzeitig für verschiedene Ausgabegrößen testen will, ist man mehr mit dem Ändern des Browserfensters beschäftigt als mit den eigentlichen Anpassungen. Zum Glück aber gibt es etliche Tools zum Testen von Responsive Webdesign: Online-Tools, Browser-Erweiterungen und Bookmarklets.

Sie alle haben ihre Vor- und Nachteile, die wir uns für euch angeguckt haben. Und sollten wir euren Favoriten vergessen haben: Ergänzt ihn doch einfach in den Kommentaren. Wir überarbeiten diesen Artikel regelmäßig und freuen uns über jeden Tipp!

1: Am I Responsive?

Das Responsive-Webdesign-Tool „Am I Responsive?“ mit einem Test der t3n-Seite.
Responsive-Webdesign-Tools: „Am I Responsive?“ mit einem Test der t3n-Seite.

Das Tool „Am I Responsive?“ von Justin Avery gehört zwar nach wie vor zu den intuitivsten Test-Tools, die es gibt, hat aber auch einen entscheidenden Nachteil. Nach Eingabe der URL spuckt die Seite das Layout in nur vier Größen aus: Desktop (1600 x 992 Pixel), Laptop (1280 x 802 Pixel), Tablet (768 x 1024 Pixel) und Mobile (320 x 480 Pixel). Diese Größen zeigen schon: Das letzte Update des Tools ist ein paar Jahre her, genau genommen fünf. Inzwischen gibt es also etliche neue Viewport-Größen, die Am I Reponsive nicht mehr abdeckt. Nette kleine Spielerei: Die vier Devices, die euch als Apple-Geräte angezeigt werden, könnt ihr per Drag & Drop auf dem Bildschirm hin- und herschieben. Wenn ihr euch übrigens für die Entstehungsgeschichte des Tools interessiert – die hat Avery hier aufgeschrieben.

2: #deviceponsive

Das Tool #deviceponsive bei der Arbeit.
Das Tool #deviceponsive bei der Arbeit.

Ähnlich schlicht wie „Am I Responsive?“ kommt auch #deviceponsive von Javier Rivera daher. Alle Ausgabegrößen werden einfach untereinander angezeigt, im Header der Seite könnt ihr zudem die Hintergrundfarbe festlegen oder ein eigenes Logo einbinden, um die Screenshots anschließend zu teilen. Testen könnt ihr Seiten bei diesem Tool für folgende Größen: Macbook (1280 x 800 Pixel), iPad portrait (768 x 1024 Pixel), iPad landscape (1024 x 768 Pixel), Kindle portrait (600 x 1024 Pixel), Kindle landscape (1024 x 600 Pixel), iPhone portrait (320 x 480 Pixel), iPhone landscape (480 x 320 Pixel), Galaxy portrait (240 x 320 Pixel) und Galaxy landscape (320 x 240 Pixel). Einige Größen mehr als Am I Responsive – dennoch ist die Auswahl auch hier beschränkt.

3: Responsive Web Design Testing Tool

Das „Responsive Web Design Testing Tool“ von Matt Kersley.

Beim Online-Test-Tool von Matt Kersley gibt man die URL der zu testenden Website ein und bekommt dann fünf Vorschauvariationen angezeigt: kleine Smartphones, iPhone, kleine Tablets, iPad angezeigt. Auch das ist nicht gerade üppig, für einfache Tests aber genügt das Tool. Wer es lieber als Bookmarklet einsetzen will, kann die von Ben Keen bereit gestellte Lösung dafür nutzen.

4: Responsinator

Der Responsinator – ein weiteres Tool, um Responsive Webdesign zu testen.

Der Responsinator von Tama Pugsley und Andy Hovey bietet nach Eingabe der eigenen Website-URL zwölf vordefinierte Vorschauvarianten für die gängigsten Endgeräte iPhone, iPhone Plus, iPad, Kindle und Android-Geräte. Auch Responsinator ist neben der Webversion als Bookmarklet verfügbar.

5: Demonstrating Responsive Design

Demonstrating Responsive Design.

Jamie Reynolds hat mit Demonstrating Responsive Design ein Online-Tool entwickelt, mit dem man nach Eingabe der eigenen Website-URL eine schicke Vorschau in allerdings auch nur fünf Endgerätgrößen erhält. Jamies Tool ist trotzdem besonders gut für die schnelle Präsentation von Responsive Websites für Kunden geeignet, da sich zwischen den Geräten schnell hin- und herschalten lässt.

Auf der zweiten Seite haben wir weitere Tools für euch unter die Lupe genommen, unter anderem Responsivepx, ResizeMyBrowser und Screenfly.

]]>
Florian Blaschke
Webdesign-Trends 2016: Was uns im neuen Jahr im Netz erwartet http://t3n.de/news/webdesign-trends-2016-664845/ 2015-12-19T07:03:20Z
Webdesign-Trends kommen und gehen – sie werden erschaffen, um sich von der der Konkurrenz abzuheben und die Aktualität einer Seite zu unterstreichen. Sobald Trends von der Mehrheit eingesetzt …

Webdesign-Trends kommen und gehen – sie werden erschaffen, um sich von der der Konkurrenz abzuheben und die Aktualität einer Seite zu unterstreichen. Sobald von der Mehrheit eingesetzt werden, gehören sie zu Standards – oder werden später wieder vergessen. Wir zeigen euch, was 2016 im wichtig wird.

Digitale Medien entwickeln sich rasend schnell und gehören somit auch zu den kurzlebigsten Produkten, die es gibt. Webseiten, die heute entstehen, sind spätestens in zwei Jahren schon wieder ein alter Hut. Damit wir zumindest für das nächste Jahr gewappnet sind, schauen wir in die Glaskugel – und gucken, was das Jahr so bringt.

Webdesign-Trends 2016: One-Pager, Page-Carousels und Scrollytelling

Eine einfache Scrollytelling-Demo. (Screenshot: Dangersoffracking)
Auch 2016 einer der wichtigsten Webdesign-Trends: Scrollytelling. (Screenshot: Dangersoffracking)

Auch im nächsten Jahr wird der klassische One-Pager uns noch begegnen – vermehrt aber wohl in abgewandelter Form. Eine neuartige Darstellungs-Variante ist das Page-Carousel – die Navigation einer solchen Seite erinnert stark an ein E-Magazin. Inhalte werden vermehrt horizontal dargestellt und durch eine Swipe- oder Klick-Funktion eingeblendet. Dabei sind die Inhalte immer in der Höhe und Breite vollflächig zum aktuellen Viewport, mit einem vertikalen Scrollen kann zum nächsten Bereich gesprungen werden. Um eine solche Seite umzusetzen, gibt es beispielsweise das fullPage.js-Framework.

Wie auch in diesem Jahr, wird der Trend des Scrollytellings – eine Kombination aus Storytelling und Scrolling – sich fortsetzen. Diese Adaption ist ausschließlich für das Web geeignet und stützt sich auf das Scrollen. Mit der Scroll-Geschwindigkeit wird der Ablauf gesteuert und kann somit vom Betrachter beeinflusst werden. Eine Demo gibt es beim Projekt Dangersoffracking.

Webseiten mit SVG und CSS3 animieren

SVG- und CSS3-Animationen werden auch im kommenden Jahr wieder ein Renner werden. Durch die ressourcensparende Alternative können schnell und einfach hübsche Animationen gezaubert werden. Es braucht hierfür kein weiteres JavaScript-Framework oder Assets, die unsere Webseite verlangsamen. Egal ob wir ein animiertes SVG-Burger-Menü oder eine CSS-Keyframe-Animation zaubern – die Möglichkeiten sind riesig.

Obwohl SVG eine alte Technik ist und schon häufiger tot gesagt worden ist, erhält das Vektor-Format immer mehr Zuspruch. Einige Vorteile des Formates waren früher uninteressant – heute hingegen ist das skalierbare Format schon alleine für Retina-Displays wichtig. Auch die Möglichkeit, Pfade direkt mit CSS3 zu animieren, macht es zu einem festen Bestandteil im Jahr 2016. Sicher eine Technik, die in den kommenden Jahren noch weiter Fahrt aufnimmt und noch bessere Spezifikationen erhält.

]]>
Jonathan Schneider
Für Touch, Tap und Fernbedienung: So geht Usability-Optimierung für Responsive Webdesign http://t3n.de/news/usability-optimierung-responsive-webdesign-665010/ 2015-12-17T11:03:09Z
Wenn eine Webseite auf allen Geräten – vom Smartphone über den Desktop bis zum Smart TV – optimal dargestellt werden soll, kommt heute Responsive Webdesign zum Einsatz. Doch auch das beste …

Wenn eine Webseite auf allen Geräten – vom Smartphone über den Desktop bis zum Smart TV – optimal dargestellt werden soll, kommt heute Responsive Webdesign zum Einsatz. Doch auch das beste Design ist nicht automatisch nutzerfreundlich. Damit eine responsive Seite auch bei der Usability punktet, muss die Navigation konsistent sein und die unterschiedlichen Eingabemethoden müssen berücksichtigt werden. Worauf Designer und Entwickler achten müssen, erklärt Simon Loebel, COO der UDG United Digital Group.

Navigation konsistent gestalten

Das Responsive Webdesign sollte konsistent sein, damit sich der User auf Desktop oder Mobilgerät zurechtfindet. (Grafik: Shutterstock)
Das Responsive Webdesign sollte konsistent sein, damit sich der User auf Desktop oder Mobilgerät zurechtfindet. (Grafik: Shutterstock)

Entscheidende Faktoren für gelungenes Responsive Webdesign sind die Wiedererkennbarkeit und die Konsistenz des Designs. Aufgrund der unterschiedlichen Bildschirmgrößen werden Layout und die Anordnung des Contents von Auflösung zu Auflösung anders dargestellt. Zentrale Elemente wie zum Beispiel Logos und Farbwelten sollten dennoch einheitlich bleiben. Idealerweise findet sich der User in allen Viewports zurecht, ohne dabei den Aufbau sowie das Navigations- und Contentschema neu erlernen zu müssen.

1. Navigation

Eine in der Bedienung konsistente Navigation ist aufgrund der unterschiedlichen Platzverhältnisse schwer für alle Bildschirme und Viewports umzusetzen. Deshalb sollte in erster Linie darauf geachtet werden, dass die inhaltliche Taxonomie und Benennung der Navigation auf allen Geräten hinweg konsistent bleibt, während sich der funktionale Aspekt der Navigation unterscheiden kann.

2. User-Interface-Elemente

Neben Logo und Farbwelt sollte auch das Design der User-Interface-Elemente möglichst einheitlich sein. So wird gewährleistet, dass der Nutzer einen Button oder einen Link als solchen erkennt, egal welchen Viewport er betrachtet. Auch die Funktion der Elemente sollte einer möglichst großen Konsistenz unterliegen, wobei hier Anpassungen an die Anforderungen der Viewports und Eingabemethoden sinnvoll sind. Beispielsweise müssen alle Funktionen und Informationen auf einem Gerät mit Touchbedienung auch ohne Mouse-Over erreichbar sein.

3. Content und Funktion

Smartphone-Nutzer möchten mit ihrem Gerät Zugriff auf alle Funktionen und Inhalte haben, die eine Webseite auf dem Desktop bietet. Auch wenn Funktionen und Inhalte auf verschiedenen Endgeräten unterschiedlich angeordnet sind und präsentiert werden, sollten diese den Nutzern auf allen Viewports verfügbar sein.

4. Struktur

Auf kleineren Viewports ist es schwierig, komplexe Strukturen darzustellen. Deshalb kann es je nach Fall sinnvoll sein, Verschachtelungen auf einer Seite aufzulösen und gegebenenfalls auf mehrere Seiten zu verteilen. Alternativ sollten vor allem für die kleinen Viewports passende Symbole gewählt werden, die eine Verschachtelung auf einer Seite verdeutlichen. Gute Möglichkeiten sind Akkordeons oder Reiter. Deutliche visuelle Hierarchieebenen in Headlines sowie Trennlinien zwischen Inhaltsblöcken heben die Struktur weiter hervor.

Eingabemethoden berücksichtigen

Gern vergessen aber trotzdem wichtig: In Zeiten von Smart-TVs werden Websites auch oft per Fernbedienung bedient. (Grafik: Shutterstock)
Gern vergessen aber trotzdem wichtig: In Zeiten von Smart-TVs werden Websites auch oft per Fernbedienung bedient. (Grafik: Shutterstock)

Die Bandbreite der Geräte zur Betrachtung von Websites nimmt weiter zu. Zu den bereits weit verbreiteten Desktop-PCs, Tablets und Smartphones kommen heutzutage Smartwatches und Smart-TVs. Das bedeutet, dass – zusätzlich zu den Anforderungen an Darstellungsgröße und Layout der Inhalte – die jeweilige Eingabemethode des Device berücksichtigt werden muss.

In Bezug auf die gängigen Geräte zur Betrachtung von Websites kann zwischen drei grundsätzlich unterschiedlichen Eingabemethoden unterschieden werden:

  • Maus- und Tastatur-Eingabe: Diese Methoden der Eingabe sind üblicherweise auf Desktop-PCs und Laptops verfügbar.
  • Finger-Eingabe und virtuelle Touch-Tastatur: Vor allem auf mobilen Geräten wie Smartphones und Tablets erfolgt die Eingabe direkt durch den Finger des Nutzers.
  • Fernbedienung und virtuelle Non-Touch-Tastatur: Für Smart-TVs müssen neue Eingabemethoden in Betracht gezogen werden. Da sich der Markt an ausgefeilten Fernbedienungen mit Laser, Touch-Rad oder Joystick erst noch entwickelt, sollte bei der Bedienung des Interface am TV-Gerät von eingeschränkten Eingabemethoden, nämlich einer klassischen Fernbedienung nur vier Pfeiltasten und einer Bestätigungstaste, ausgegangen werden.

Die Größe des Betrachtungsgeräts sowie der übliche Abstand des Nutzers zum Gerät haben Einfluss auf die Auflösung und sollten auch bei der Gestaltung und Programmierung von Websites bedacht werden.

]]>
Simon Loebel
3 nützliche Tipps, die Designern helfen noch besser mit Programmierern zu arbeiten http://t3n.de/news/tipps-designer-programmierer-unterschiede-denkweise-659927/ 2015-11-25T12:46:03Z
Das analytische Denken der einen und das kreative Denken der anderen Mitarbeiter führt oft zu Verwirrungen im Team. Ein UX-Stratege gibt Tipps, wie die Kommunikation zwischen Web-Designern und …

Das analytische Denken der einen und das kreative Denken der anderen Mitarbeiter führt oft zu Verwirrungen im Team. Ein UX-Stratege gibt Tipps, wie die Kommunikation zwischen Web-Designern und Codern optimiert werden kann.

Es ist nicht immer ganz einfach, sich mit Programmierern über gewisse Projekte auszutauschen – vor allem nicht als Web-Designer. Beim Wiedergeben der eigenen Vision kommt es nicht selten zu kleineren Missverständnissen, wie kürzlich auch der UX-Content-Strategist Jerry Chao in einem Artikel auf dem Creative-Blog thematisierte. Der in der Bay-Area lebende Chao schreibt: „Die Aufgabe besteht nicht nur darin, nützliche Interfaces zu kreieren, sondern auch den Menschen, die sie bauen sollen, zu erklären, wie sie zu funktionieren haben.“ Der Kalifornier gab in dem Rahmen einige Tipps ab, wie die Kommunikation zwischen den Parteien besser gestaltet werden kann.

So kann die Kommunikation zwischen Web-Designern und Codern optimiert werden – 3 Tipps

UX-Stratege verrät Tipps, wie die Kommunikation zwischen Web-Designern und Codern optimiert werden kann. (Grafik: Shutterstock-Sangoiri)
UX-Stratege verrät Tipps, wie die Kommunikation zwischen Web-Designern und Codern optimiert werden kann. (Grafik: Shutterstock-Sangoiri)

Zum einen verweist Chao darauf, dass Web-Designer unbedingt anfangen sollten Programmieren zu lernen. Genau wie ein Architekt sich mit den verschiedenen Eigenschaften von Materialien auskennt, sollen auch Web-Designer die Basics der Programmiersprachen verstehen, mit denen tagtäglich an den Projekten gearbeitet wird. Jerry Chao schreibt, dass „Designer nicht im Detail wissen müssen, wie genau der Code geschrieben wird, aber sie müssen die Grundlagen beherrschen, um zu verstehen, wie das Design in transkribierbaren Code umgewandelt werden kann.“ Wichtig ist, dass Web-Designer neben HTML und CSS auch ein wenig Javascript lernen.

„Ein besseres Verständnis ist das Herzstück einer guten Zusammenarbeit!“

Zudem plädiert der US-Amerikaner dafür, dass Web-Designer sich schon beim Entwurf ihres Modells häufiger die Perspektive des Programmierers einholen sollen. Zu verstehen, wie ein Entwickler das Modell aus technischer Sicht betrachtet, ist für den UX-Strategen ein wichtiger Schlüssel zum Erfolg. Dazu gehört eben auch, dass die Kreativen technische Aspekte häufiger hinterfragen müssen, sobald sie die Systematik nicht ganz verstanden haben. Chao schreibt: „Dies ist das Herzstück einer guten Zusammenarbeit – es wird euch helfen, eure gegenseitigen Felder besser zu verstehen, eure Beziehung zu stärken und ein besseres Produkt zu erstellen.“

Essentiell für eine vernünftige Kommunikation unter den Kollegen ist für Chao auch, dass Web-Designer ihre Idee so praktisch wie möglich beschreiben müssen. Der Autor erklärt, dass ein häufiger Grund zur Verwirrung oft dem Umstand geschuldet ist, dass beide Webworker unterschiedliche Denkprozesse durchlaufen. Jerry Chao verweist in dem Sinne auf Brad Frosts Methode des „Atomic Web Designs“, die besagt, dass das Modell in fünf verschiedene Level eingeteilt wird: 1. Atoms, 2. Molecules, 3. Organisms, 4. Templates und 5. Pages. Die gesamte Methode wird auf dem Blog des Erfinders detailliert beschreiben.

Außerdem wichtig: Style-Guides, Best-Practices und Collaboration-Tools

In Jerry Chaos Artikel werden zudem die Wichtigkeit von Style-Guides beschrieben, ein paar generelle Best-Practices für eine verständlichere Kommunikation thematisiert und einige Tools vorgestellt, die kollaboratives Arbeiten optimaler vonstatten gehen lassen.

Zum letzten Punkt haben wir von t3n.de jedoch auch ein paar interessante Lesestücke veröffentlicht. Schaut beispielsweise auch in die Beiträge „Collaboration: 20 Tools für mehr Produktivität im Team“ und „Zwischen San Francisco, Berlin und Melbourne: Mit diesen 8 Collaboration-Tools arbeitet 99designs“. Es lohnt sich bestimmt!

via www.creativebloq.com

]]>
Andreas Weck
30 kostenlose WordPress-Themes für Responsive Design http://t3n.de/news/kostenlose-wordpress-themes-responsive-webdesign-376838/ 2015-11-13T09:11: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 30 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.

30 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 Sixteen von WordPress

Das neue Theme für WordPress 4.4. (Screenshot: WordPress.org)
Das neue Theme für WordPress 4.4. (Screenshot: WordPress.org)

Funktioniert erst ab WordPress 4.4

2. Twenty Fifteen von WordPress

Das Standard-Theme des letzten Jahres. (Screenshot: WordPress.org)
Das Standard-Theme des letzten Jahres. (Screenshot: WordPress.org)

3. Chosen von Ben Sibley

Das WordPress-Theme Chosen bietet große Bilder. (Screenshot: WordPress.org)
Das WordPress-Theme Chosen bietet große Bilder. (Screenshot: WordPress.org)

4. Aperture von Michael Van Den Berg

Richtet sich an Fotografen: Aperture. (Screenshot: WordPress.org)
Richtet sich an Fotografen: Aperture. (Screenshot: WordPress.org)

5. Silvia von Theme Junkie

Ebenfalls ein interessantes Theme für Fotografen. (Screenshot: WordPress.org)
Ebenfalls ein interessantes Theme für Fotografen. (Screenshot: WordPress.org)

6. bootcake von imranemu

Schlicht und Orange kommt Bootcake daher. (Screenshot: WordPress.org)
Schlicht und Orange kommt Bootcake daher. (Screenshot: WordPress.org)

7. Libretto von automattic

Schicke Typo für Schreiber bietet Libretto. (Screenshot: WordPress.org)
Schicke Typo für Schreiber bietet Libretto. (Screenshot: WordPress.org)

8. Plain Blog von NavThemes

Das Plain-Blog-Theme ist recht schlicht mit farblichen Akzenten. (Screenshot: WordPress.org)
Das Plain-Blog-Theme ist recht schlicht mit farblichen Akzenten. (Screenshot: WordPress.org)

9. azeria von teFox

Azeria legt den Fokus wieder auf Bild-Präsentation. (Screenshot: WordPress.org)
Azeria legt den Fokus wieder auf Bild-Präsentation. (Screenshot: WordPress.org)

10. BadJohnny von ThemeVan

BadJohnny legt den Fokus auf den Text. (Screenshot: WordPress.org)
BadJohnny legt den Fokus auf den Text. (Screenshot: WordPress.org)

11. SoSimple von fervillz

Der Name sagt alles: Hier geht es schlicht zu. (Screenshot: WordPress.org)
Der Name sagt alles: Hier geht es schlicht zu. (Screenshot: WordPress.org)

12. Libre von automattic

Das Theme richtet sich an Vielschreiber und setzt den Fokus entsprechend. (Screenshot: WordPress.org)
Das Theme richtet sich an Vielschreiber und setzt den Fokus entsprechend. (Screenshot: WordPress.org)

13. Polymer von grvrulz

Polymer hat sich von der Design-Sparche Material Design inspirieren lassen. (Screenshot: WordPress.org)
Polymer hat sich von der Design-Sparche Material Design inspirieren lassen. (Screenshot: WordPress.org)

14. Kent von BinaryMoon

Kent bietet neben dem schlichten Inhaltsbereich auf der rechten Seite ein großes Bild auf der linken. (Screenshot: WordPress.org)
Kent bietet neben dem schlichten Inhaltsbereich auf der rechten Seite ein großes Bild auf der linken. (Screenshot: WordPress.org)

15. Publication von automattic

Publication bringt eine prominente Sidebar mit zwei Spalten mit. (Screenshot: WordPress.org)
Publication bringt eine prominente Sidebar mit zwei Spalten mit. (Screenshot: WordPress.org)

16. Gazette von automattic

Gazette bietet eine große Grid-Ansicht von letzten Beiträgen im Header-Bereich. (Screenshot: WordPress.org)
Gazette bietet eine große Grid-Ansicht von letzten Beiträgen im Header-Bereich. (Screenshot: WordPress.org)

17. Readit von modernthemesnet

Readit-Theme. (Screenshot: WordPress.org)
Readit-Theme. (Screenshot: WordPress.org)

18. Cerauno von automattic

Dieses Theme nutzt wirklich die komplette verfügbare Breite. (Screenshot: WordPress.org)
Dieses Theme nutzt wirklich die komplette verfügbare Breite. (Screenshot: WordPress.org)

19. Oria von Vlad

Oria stellt die Beiträge auf der Startseite in einem Masonry-Layout vor. (Screenshot: WordPress.org)
Oria stellt die Beiträge auf der Startseite in einem Masonry-Layout vor. (Screenshot: WordPress.org)

20. Canard von automattic

Canard bietet einen schicken Bereich für Featured-Beiträge. (Screenshot: WordPress.org)
Canard bietet einen schicken Bereich für Featured-Beiträge. (Screenshot: WordPress.org)

21. Flat von YoArts

Flat verzichtet auf alles Räumliche. (Screenshot: WordPress.org)
Flat verzichtet auf alles Räumliche. (Screenshot: WordPress.org)

22. Apex von Ben Sibley

Apex setzt auf große Beitragsbilder und eine klare Typo. (Screenshot: WordPress.org)
Apex setzt auf große Beitragsbilder und eine klare Typo. (Screenshot: WordPress.org)

23. Vito von Nico Andrade

Auch Vito ist schön schlicht. (Screenshot: WordPress.org)
Auch Vito ist schön schlicht. (Screenshot: WordPress.org)

24. Founder von Ben Sibley

Founder kommt mit einem einspaltigen Layout daher. (Screenshot: WordPress.org)
Founder kommt mit einem einspaltigen Layout daher. (Screenshot: WordPress.org)

25. Coherent von automattic

Coherent fällt mit dem Kontrast zwischen Viewportfüllendem Header-Bild und schlichtem Inhaltsbereich auf. (Screenshot: WordPress.org)
Coherent fällt mit dem Kontrast zwischen Viewportfüllendem Header-Bild und schlichtem Inhaltsbereich auf. (Screenshot: WordPress.org)

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

Das Forefront-Theme bietet eine Sidebar links und rechts. (Screenshot: WordPress.org)
Das Forefront-Theme bietet eine Sidebar links und rechts. (Screenshot: WordPress.org)

27. Receptar von WebMan Design und Oliver Juhas

Receptar kommt mit einem ungewöhnlichen Startseitenlayout. (Screenshot: WordPress.org)
Receptar kommt mit einem ungewöhnlichen Startseitenlayout. (Screenshot: WordPress.org)

28. Drop von Ben Sibley

Das responsive Drop-Theme. (Screenshot: WordPress.org)
Das responsive Drop-Theme. (Screenshot: WordPress.org)

29. Heinrich von winklerin

Das kostenlose Heinrich-WordPress-Theme. (Screenshot: WordPress.org)
Das kostenlose Heinrich-WordPress-Theme. (Screenshot: WordPress.org)

30. Origamiez von Alex Kalh

Origamiez. (Screenshot: WordPress.org)
Origamiez. (Screenshot: WordPress.org)

Wir hoffen, dass wir euch einige neue Themes zeigen konnten.

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

Letztes Update des Artikels: 13. November 2015. Der Originalartikel stammt von Lars Budde.

]]>
Florian Brinkmann
Google-Designchef wettert über Windows 10: „Im Grunde Windows XP im Flat-Design“ http://t3n.de/news/windows-10-matias-duarte-653152/ 2015-11-03T16:10:43Z
Googles Matias Duarte, seines Zeichens Chef der Material-Design-Abteilung, hat sich auf Twitter in mehreren Tweets negativ gegen Microsofts Windows 10 geäußert und trifft offenbar auf einen Nerv, …

Matias Duarte, seines Zeichens Chef der Material-Design-Abteilung, hat sich auf in mehreren Tweets negativ gegen Microsofts geäußert und trifft offenbar auf einen Nerv, fährt aber auch eine Menge Gegenwind ein.

Mathias Duarte: „Windows 10? More like 10 years ago!“

Matias Duarte, ehemals Android-Designchef, mittlerweile verantwortlich für die Umsetzung von Googles Designsprache über Android hinaus, gefällt absolut nicht, was mit Windows 10 angestellt hat. Auf Twitter schreibt er, dass er das Surface 4 mit Windows 10 ausprobiert hätte, die neue OS-Version sich so anfühle wie Windows XP im Flat Design, begleitet vom Hashtag #FutureNot. Nach seinen Vorstellungen sei Microsoft demnach kein zukunftsweisendes Betriebssystem gelungen, was er mit dem Tweet „Windows 10? More like Windows 10 years ago!“ (Übersetzung von uns: „Windows 10? Eher Windows vor 10 Jahren!“) unterstreicht.

Seine Tweets trafen auf einen Nerv – neben Retweets und Faves kamen aber nicht nur bestätigende Antworten, sondern es hagelte allerhand negative Reaktionen, die sich unter anderem gegen Android und Chrome OS richteten. Neben Kritik am Design der beiden Plattformen kamen auch Gegenstimmen zur Android-Sicherheit – ein aktuell heikles Thema: Stichwort Stagefright – und dem Ressourcen-fressenden Chrome auf.

Um den Kritikern Wind aus den Segeln zu nehmen, erklärt er in weiteren Tweets, dass er keine Probleme mit dem Windows-10-Design habe. Ihm gefiel der Paradigmenwechseln, den Microsoft mit Windows 8 beabsichtigte. Seine Kritik richtete sich in erster Linie dahin, dass Windows 10 genauso wie Windows XP funktioniere. Für viele mag das ein Feature sein, für ihn aber nicht.

Windows 10: Für viele der Schritt in die richtige Richtung

Windows 10 soll auf allen Geräteklassen zu Hause sein. (Grafik: Microsoft)
Windows 10 soll auf allen Geräteklassen zu Hause sein. (Grafik: Microsoft)

Für Duarte stellt Windows 10 einen Rückschritt dar, für viele ist die neue Version das, was sie sich von Windows 8 gewünscht hatten. So feiert das Startmenü ein Comeback und Apps aus dem Windows-Store können auch in der Desktopansicht in einem Fenster genutzt werden. Microsoft versteht unter Windows 10 ohnehin mehr ein Upgrade für alle, die mit Windows 7 glücklich waren. Mit Windows 8 war man für die meisten User offenbar über das Ziel hinausgeschossen.

Wie bereits angedeutet wäre eine Entwicklung wie Microsoft sie mit Windows 10 vollzieht, mit Android nicht denkbar. Wenn Googles mobiles OS in zehn Jahren so funktionieren würde wie jetzt, wäre er „sehr, sehr traurig“. Ob es die mittlerweile 1,4 Milliarden Android-Nutzer auch so sehen, ist eine andere Frage.

via www.engadget.com

]]>
Andreas Floemer
Keine Lust auf Lorem Ipsum? 15 schräge Alternativen http://t3n.de/news/keine-lust-lorem-ipsum-15-460574/ 2015-10-25T15:05:38Z
Du bist auf der Suche nach Fülltext, hast aber keine Lust auf Lorem Ipsum? Ob Bacon oder Veggie Ipsum, wir haben die perfekten Fülltext-Variationen für jeden Webdesigner. Sogar Charly Sheen, …

Du bist auf der Suche nach Fülltext, hast aber keine Lust auf Lorem Ipsum? Ob Bacon oder Veggie Ipsum, wir haben die perfekten Fülltext-Variationen für jeden . Sogar Charly Sheen, Samuel L. Jackson und Barack Obama sind dabei.

Ob Fülltext wirklich notwendig und sinnvoll ist, sollen andere entscheiden. Schon 2005 argumentierte Jason Fried von 37 Signals gegen die Verwendung von Fülltext. Auch John McGarvey vom .NetMagazine ist ähnlicher Meinung. Im Juli 2011 schrieb er: „Stop using Lorem Ipsum!“ Doch seien wir mal ehrlich: Wer will und kann auf solche Textpassagen verzichten?

„Bacon ipsum dolor sit amet doner meatball jowl short ribs, chicken prosciutto salami frankfurter. Pig drumstick turducken short ribs, brisket meatloaf ham hock shankle andouille corned beef strip steak. Venison ham bresaola strip steak. Pork belly ribeye prosciutto t-bone.“ (Quelle: baconipsum.com)

Eben, das ist mein Punkt: Wer Fülltext nutzt, sollte auf Lorem Ipsum verzichten und Bacon Ipsum nutzen. Oder andere Alternativen, die sich ähnlich unterhaltsam lesen. Eine kleine Auswahl dieser Fülltext-Variationen haben wir im Folgenden zusammengestellt. Dort findet ihr neben Obama und Samuel L. Ipsum auch Liquor und Cupcake Ipsum, zwei besonders beliebte Fülltext-Generatoren der etwas anderen Art.

15 Alternativen zu Lorem Ipsum

1. Samuel L. Ipsum

Lorem Ipsum Alternativen Samuel L Jackson

Eine der besseren Alternativen ist zweifelsfrei Samuel L. Ipsum. Unter dem „interessanten“ Motto „Motherfucking Placeholder Text Motherfucker!“ erstellt er Fülltexte aus Filmzitaten von Samuel L. Jackson. Ein Beispiel gefällig?

„Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb.“

2. Cupcake Ipsum

Lorem Ipsum Alternative Cupcake Ipsum

Du stehst total auf Cupcakes? Hier kommt der passende Fülltext-Generator: „Cupcake Ipsum“. Um eine ausgewogene Ernährung sicherzustellen, empfehle ich zur Ergänzung die Generatoren Tuna und Veggie Ipsum. Zu ihnen später mehr.

3. Comic Ipsum

Lorem Ipsum Alternativen Comic Ipsum

Was wäre ein nerdiger Webdesigner ohne „Comic Ipsum“? Eben.

„Elastigirl wyatt wingfoot sentinels spawn aurora phoenix. Invisible woman x-23 corsair atrea vampire x, captain america northstar medusa kraven the hunter. Magneto punisher grizzly doctor spectrum, ‚vulcan jonah j.jameson.‘“

4. Zombie Ipsum

Lorem Ipsum Alternativen Zombie Ipsum

Liebhabern der Fernsehserie „The Walking Dead“ möchte ich Zombie Ipsum ans Herz legen. Dank Einstellungsmöglichkeiten wie „Regular“, „Light“ und „50% more brains“ bietet die Lorem-Ipsum-Alternative Liebhabern guter Horrorfilme jede Menge Möglichkeiten

5. Bacon Ipsum

Lorem Ipsum Alternativen Bacon Ipsum

Wo wir gerade bei Fleisch sind: Der Fülltext-Generator Bacon Ipsum bietet Genießern ordentlicher Fleischgerichte allerlei Rezeptideen. Wie wäre es zum Beispiel hiermit?

„Bacon ipsum dolor sit amet doner meatball jowl short ribs, chicken prosciutto salami frankfurter. Pig drumstick turducken short ribs, brisket meatloaf ham hock shankle andouille corned beef strip steak. Venison ham bresaola strip steak. Pork belly ribeye prosciutto t-bone.“

6. Veggie Ipsum

Lorem Ipsum Alternativen Veggie Ipsum

Fleischhaltige Gerichte sind nicht jedermanns Sache. Um auch den Vegetariern gerecht zu werden, verweise ich mit grünen Grüßen auf Veggie Ipsum – ein ethisch absolut korrekter Fülltext-Generator.

7. Lebowski Ipsum

Lorem Ipsum Alternativen Lebowski Ipsum

Lebowski Ipsum verspricht „filter text that ties the room together“. Kurzum: Fülltext, der vor allem unter Kennern der US-Komödie „The Big Lebowski“ Zuspruch finden dürfte.

8. Liquor Ipsum

Lorem Ipsum Alternativen Liquor Ipsum

White Russian lässt sich im Laufe eines Abends mit allerhand alkoholhaltigen Mischgetränken kombinieren. Eine kleine Auswahl bietet Liquor Ipsum, zum Beispiel ...

„Christian brothers jameson long island iced tea caju amigo glen elgin caipiroska dark and stormy. Lemon drop, lime rickey batida seagrams tinto de verano. Glenburgie bijou the blenheim bijou kilchoman polish martini moscow mule sex on the beach dark and stormy heart of fire early times mickey slim harper's dark and stormy.“

9. GAG Ipsum

Lorem Ipsum Alternativen GAG Ipsum

Beim Einsatz von GAG Ipsum verliert ein Projekt an Niveau. Der Fülltext-Generator nutzt Inhalte von 9Gag, um mehr oder weniger sinnvolle Sätze zu formen.

10. Charly Sheen Generator

Lorem Ipsum Alternativen Charly Sheen Generator

9Gag gefällt dir nicht? Wie hältst du es mit Charly Sheen?

„Yeah, I didn't care about that vanity card. In fact, I went straight on with that one and just dispelled that one. But ... whatever. I agreed to do it. There's just one deal point that Jim Robinson – a wonderful man at Morgan Creek, a great company – need to work out is they want me in it. If they do, it's a smash. If they don't, it's a turd that opens on a tugboat.“

11. Hipster Ipsum

Lorem Ipsum Alternativen Hipster Ipsum

Etwas „hipper“ ist zweifelsfrei Hipster Ipsum. Die Lorem-Ipsum-Alternative formt aus Begriffen wie „DIY“, „Quinoa“ und „Pinterest“ sinnfreie Satzfolgen, die deinem neuesten Design das gewisse „Etwas“ verleihen.

12. Fashion Ipsum

Lorem Ipsum Alternativen Fashion Ipsum

Solltest du dich in erster Linie für Modemarken und -kollektionen interessieren, empfehle ich Fashion Ipsum. Der Fülltext-Generator verwendet allerlei Kleidungsstücke, Modemarken und Trendbegriffe um Webseiten mit „Inhalt“ zu füllen.

13. Obama Ipsum

Lorem Ipsum Alternativen Obama Ipsum

Mit Obama Ipsum wird das nächste Kundenprojekt eine hochpolitische Angelegenheit. Der Fülltext-Generator verwendet Abschnitte bekannter Obama-Reden. Wer damit überhaupt nichts anfangen kann, sollte schnell zum nächsten Beispiel springen.

„Her father worked on oil rigs and farms through most of the Depression. So I've got news for you, John McCain. This too is part of America's promise - the promise of a democracy where we can find the strength and grace to bridge divides and unite in common effort. America, this is one of those moments.“

14. Gangsta Lorem Ipsum

Lorem Ipsum Alternativen Gangsta Ipsum

„Shizzle dolizzle boofron amizzle“, sprach der Fülltext-Generator.

15. Tuna Ipsum

Lorem Ipsum Alternativen Tuna Ipsum

Du hast immer noch Hunger – trotz Carne und Veggie Ipsum? Wenn das so ist, empfehle ich Tuna Ipsum, die fischigste Fülltext-Alternative dieser Auswahl.

Kennt ihr weitere Alternativen zu Lorem Ipsum? Wir freuen uns auf eure Ergänzungen in den Kommentaren.

Weiterführende Links

]]>
Lars Budde
Responsive Design: Zehn kostenlose Webdesign-Templates http://t3n.de/news/responsive-design-zehn-455073/ 2015-10-25T07:30:03Z
Das Web findet längst nicht mehr nur auf dem Desktop statt und so ist es kein Wunder, dass Responsive Design in aller Munde ist. Damit passen sich die Webseiten dem Endgerät des Besuchers an und …

Das Web findet längst nicht mehr nur auf dem Desktop statt und so ist es kein Wunder, dass Responsive Design in aller Munde ist. Damit passen sich die Webseiten dem Endgerät des Besuchers an und bieten im Optimalfall perfekte User-Experience bei jeder Viewport- oder Gerätegröße. Wer sich beim Gestalten von responsiven Webseiten noch nicht zu Hause fühlt oder gerne von fertigen Projekten lernt, findet unter den folgenden Responsive-Design-Layouts, was er braucht.

Designa

Designa Template Demo
Designa Template Download

Responsive HTML5/CSS3 Template

Response

Buzz

Modus

Liquid Gem

Folder

Proximet

Serendipity

Halftone

Weiterführende Links

]]>
Ilja Zaglov
Diese 30 kostenlosen WordPress-Themes für Responsive Design musst du kennen http://t3n.de/news/diese-30-kostenlosen-670048/ 2015-10-21T14:49:49Z
Responsive Webdesign wird quasi zum Standard im Web. Wenn du WordPress nutzt, solltest du dir daher die folgenden 30 Themes nicht entgehen lassen. Alle haben ein Responsive Design und sind kostenlos.

Responsive Webdesign wird quasi zum Standard im Web. Wenn du WordPress nutzt, solltest du dir daher die folgenden 30 Themes nicht entgehen lassen. Alle haben ein Responsive Design und sind kostenlos.

1. Twenty Sixteen von WordPress

Das neue Theme für WordPress 4.4. (Screenshot: WordPress.org)
Das neue Theme für WordPress 4.4. (Screenshot: WordPress.org)

Funktioniert erst ab WordPress 4.4

]]>
t3n Redaktion