Design | t3n News News, Infos, Tipps und aktuelle Artikel zu Design 2015-05-27T11:04:55Z t3n Redaktion http://t3n.de/tag/design Kostenfreie Stock-Fotos finden: Diese Mac-App hilft euch bei der Suche http://t3n.de/news/kostenfreie-stock-fotos-612783/ 2015-05-27T11:04:55Z
Die Mac-App Zoommy soll Kreativen die Suche nach kostenfreien Stock-Fotos erleichtern. Einen Haken hat das Programm aber.

Die Mac-App Zoommy soll Kreativen die Suche nach kostenfreien Stock-Fotos erleichtern. Einen Haken hat das Programm aber.

Wer nur mal schnell ein schickes Foto für die Gestaltung eines Blogs, einer Website oder eines Flyers benötigt und dafür kein Geld ausgeben will, der kann auf zahlreiche Gratis-Portale zurückgreifen. Bei Unsplash, Gratisography oder Camarama finden sich Stock-Fotos, die für private und kommerzielle Zwecke kostenfrei zur Verfügung stehen.

Zoommy-App sammelt kostenfreie Stock-Fotos. (Screenshot: Zoommy/t3n)
Zoommy-App sammelt kostenfreie Stock-Fotos. (Screenshot: Zoommy/t3n)

Allerdings kann die Suche nach einem Foto sehr mühsam werden, wenn man dutzende Portale auf der Suche nach dem richtigen Bild abgrasen muss. An dieser Stelle setzt Zoommy ein. Die Mac-App wurde von dem Entwickler Dmitrij Belyaev und dem Designer Artem Nosenko entwickelt und steht in der Beta-Version zum Download zur Verfügung.

Kostenfreie Stock-Fotos im Stream

Einmal installiert, zeigt die angenehm minimalistisch gestaltete Zoommy-App die zur freien Verwendung zur Verfügung stehenden Fotos in einem Stream an. Die Fotos können nach dem Herkunftsportal geordnet werden. Favorisierte Fotos können zur besseren Auffindbarkeit markiert oder gleich heruntergeladen werden. Ein Link weist zudem auf die Originalseite, auf der das Foto hochgeladen wurde.

Ein wichtiges Feature fehlt der Mac-App allerdings: die Suchfunktion! So ist es zwar nett, den Fotostream einfach so zu durchforsten und sich Inspiration zu holen. Wer allerdings auf der Suche nach einem bestimmten Motiv ist, muss auf die Originalplattformen zurückgreifen – wenigstens bietet Zoommy aber hier gleichzeitig eine Übersicht mit den entsprechenden Links.

via www.producthunt.com

]]>
Jörn Brien
JPEG, GIF oder PNG? Diese Infografik hilft bei der Verwendung gängiger Bildformate http://t3n.de/news/bildformate-ueberblick-jpeg-gif-png-586476/ 2015-05-25T13:20:07Z
Im Überblick der Bildformate erfährst du, wann du JPEG, GIF oder PNG nutzen solltest. Zudem gibt es auch etwas unnützes Wissen zum Angeben – für den Fortgeschrittenen und den Profi.

Im Überblick der Bildformate erfährst du, wann du JPEG, GIF oder PNG nutzen solltest. Zudem gibt es auch etwas unnützes Wissen zum Angeben – für den Fortgeschrittenen und den Profi.

Es gibt gute Gründe, während der Bildspeicherung zum Dateiformat JPEG anstatt zum GIF oder PNG zu greifen – und genauso andersherum. WhoIsHostingThis zeigt unsicheren Nutzern in einer Infografik, wann welches Dateiformat wirklich sinnvoll ist. So wird deutlich, dass bestimmte Fotografien beispielsweise in JPEG abgelegt werden sollten, animierte Bilder hingegen im GIF- und transparente Bilder im PNG-Format – so weit, so bekannt. Doch wie sieht es bei Webgrafiken aus, die nur wenige Farben besitzen? Beispielsweise kleine Icons? Auch hier schlägt die Infografik die jeweils optimalen Dateiformate vor.

Unnützes Wissen für Profis und Fortgeschrittene: Wann wurden die Bildformate entwickelt?

Ganz nebenbei erfährt der Betrachter aber auch einige weitere nützliche Informationen. Was ist zum Beispiel der Unterschied zwischen PNG-8 und PNG-24? Wofür steht die Abkürzung GIF? Mit welchem Tool können JPEG-Dateien komprimiert werden? Wissenswertes trifft jedoch auch auf unnützes Wissen: Wann wurden beispielsweise die einzelnen Dateiformate entwickelt? Und von wem? Nach dem Klick auf den Ausschnitt, der euch zur Komplettansicht der Infografik führt, erfahrt ihr es.

bildformate-jpg-gif-png-teaser

via theultralinx.com

]]>
Andreas Weck
And they all look just the same: Das Webdesign kopiert sich immer und immer wieder http://t3n.de/news/same-webdesign-kopiert-immer-611581/ 2015-05-24T06:56:46Z
Das Internet ist zu uniform geworden, und das ist für niemanden gut. Greg Storey appeliert, dass sich Webdesigner zu ihren Wurzeln orientieren sollten.

Das Internet ist zu uniform geworden, und das ist für niemanden gut. Greg Storey appeliert, dass sich Webdesigner zu ihren Wurzeln orientieren sollten.

Den englischen Titel habe ich mir von Malvina Reynolds' Song „Little Boxes“ geklaut. Bestimmt haben viele von euch den Text schon mal gehört, wenn auch von einem anderen anderen Künstler gesungen als vom Original-Songwriter. Malvina hat diesen Song als Protest geschrieben –  gegen die Massen-Konformität beim Hausbau in den Vororten San Franciscos in den frühen 1960er-Jahren. Wenn du jemals durch diese Gegend gefahren bist, konntest du dort immer noch die kleinen Klipp-Klapp-Schachteln sehen, die sich wie Pünktchen auf den Hügeln und über das ganze Gebiet verteilen. Obwohl Daly City die Vorlage für den Song bot, sind diese gleichförmigen Vororte im ganzen Land verbreitet.

Wie die Häuser in den Vororten von San Francisco sieht oft auch Webdesign aus. (Foto: Aaron Gustafson / flickr.com, Lizenz: CC-BY-SA)

Heutzutage hat sich das Klipp-Klapp-Prinzip in einen anderen Bereich unserer Gesellschaft eingeschlichen: das World Wide Web. Große Fortschritte in der Technologie, die auf gemeinsamen Standards aufbauen, haben es Web-Designern ermöglicht, unglaubliche Websites zu schaffen, die noch vor 20 Jahren als Science-Fiction durchgegangen wären. Es ist erstaunlich, was die Kombination aus HTML, CSS und JavaScript heute umsetzen kann.

Vor seinem heutigen Posten als CEO für Basecamp war Jason Fried ein talentierter Webdesigner (ist er immer noch), seine Software-Firma 37signals war ein Bombenerfolg, wegen seines Sachverstandes und unternehmerischen Scharfsinns. Ich muss wohl nicht erst erwähnen, dass ich Jasons Meinung und Einblick ins Web-Design sehr hoch schätze.

Er schrieb kürzlich über des Redesgin seiner Firmenwebsite und welchen Trend er beobachtet, der nicht zu etwas Gutem führt. Nicht nur für Designer, sondern auch für Unternehmen.

„Wenn ich sehe, was heutzutage im angesagt ist, bin ich abgetörnt. Es ist alles ein bisschen zu glatt, zu over-designt. Ich habe glatt satt.

Dann, wenn du runterscrollst, schiebt sich der Hintergrund weg und ein weiteres großes Foto mit noch mehr Text darauf taucht auf. Und so weiter … Vielleicht hast du diesen Stil schon gesehen – er fängt an, überall aufzutauchen. Für das Auge eines Designers sieht das gut aus, und es ist technisch eindrucksvoll, aber ich bin mir nicht sicher, ob es irgendetwas bedeutungsvolles aussagt über die Firmen, die es verwenden. Schlimmer noch (für diese Firmen) – es hat eine neue Art von Unordnung geschaffen: Zu viele Firmen sehen gleich aus – nur Style und nicht genug Substanz.“

— Jason Fried

Ich wiederhole es noch mal, um zu betonen, wie viel Jason vom Geschäft versteht: Firmeninhaber, Marketingmanager, Creative-Directors, Designer – alle sollten dieses Statement überdenken in Bezug auf ihre eigenen digitalen Erzeugnisse oder diejenigen, für die sie verantwortlich sind.

„Zu viele Firmen sehen gleich aus – nur Style und nicht genug Substanz.“

Weil unser Werkzeug sich weiter entwickelt und unsere Technologien mehr und mehr Flash-artige Erlebnisse ermöglichen, müssen wir die besten, direktesten Wege bestimmen, mit denen wir unsere Kunden und Nutzer erreichen. Wollen oder brauchen sie lange, scrollende Beschreibungen mit Fly-ins, Karussellen und ruhigen Video-Gifs, oder suchen sie nur nach der Suppe des Tages? Dan Cederholm hat vor einem Jahr eine richtig gute Bemerkung zu diesem Punkt gemacht:

Das ist meine Lieblings-Website. Ich besuche sie fast jeden Tag. Sie ist nicht responsiv. Sie ist nicht fürs iPhone optimiert. Sie sieht auf dem Retina-Display unscharf aus. Sie nutzt nicht das neueste HTML5/CSS3-Framework. Sie hat keinen ausgeklügelten vertikalen Rhyhtmus. Die Schriftarten sind nichts Besonderes. Sie ist weder imitierend noch Flat. Sie besitzt kein eigenes Favicon. Es gibt dafür keine native App oder Twitter oder Instagram. Sie verwendet kein Ajax oder Scrum oder node.js oder Sinatra. Sie verfügt über keine API oder einen RSS-Feed oder VC-Funding. Sie wurde nicht auf einem berühmten Tech-Blog gefeatured und hat keinen Award gewonnen.

Sie gibt mir die Suppe des Tages. Das ist Webdesign.“

— Dan Cederholm

Dans Artikel erinnert mich an die Website für Berkshire Hathaway, eine der erfolgreichsten Kapital-Management- und Investmentfirmen der Welt. Sie ist zugleich Eigentümer einer der altmodischst-aussehenden Websites des heutigen Webs.

Wenn sie es wollten, könnten Berkshire Hathaway ein Design-Studio ihrer Wahl beauftragen oder kaufen, um es in Vollzeit an nichts anderem als ihrer Website arbeiten zu lassen, für alle Ewigkeit. Sie hätten das seit 1996 (als die Site zuerst erschien) jederzeit tun können, aber sie taten es nicht, weil die Firma notorisch sparsam ist – sich anders zu verhalten würde aus dem Rahmen fallen, sowohl für die Branche, als auch ihre Kunden. Ihre Site besteht vom Design her nur aus Inhalten und, wenn überhaupt, sehr wenig Style. Und aus diesem Grunde ist sie wundervoll.

Die Website Berkshire Hathaway ist von 1996 – und heute noch mit dem Design im Netz, obwohl die Firma eine ganze Abteilung für nichts als die Website anstellen könnte. (Screenshot: Berkshire Hathaway)
Die Website Berkshire Hathaway ist von 1996 – und heute noch genauso im Netz, obwohl die Firma eine ganze Abteilung für nichts als die Website anstellen könnte. (Screenshot: Berkshire Hathaway)

Ich würde es lieben, lieben, lieben, wenn Happy Cog (mein Design-Studio) die Möglichkeit bekäme, mit Berkshire Hathaway zu arbeiten. Wir könnten eine Menge tun, um die Site besser kompatibel zu allen Devices zu machen und dabei helfen, das Erscheinungsbild und die Usability durch bessere Typografie auf den neuesten Stand zu bringen (Meine Güte, wäre das cool!), aber ich würde niemals, nicht in einer Million Jahren, versuchen, ein großes Geschäft zu machen, indem ich ihren Look modernisiere, nur, um mit der Zeit zu gehen.

Das wäre das Klipp-Klapp-Prinzip.

]]>
Greg Storey
Kostenlose Ressourcen für Kreative: Makerbook zeigt euch, wo ihr Bilder, Fonts, Videos und mehr findet http://t3n.de/news/kostenlose-design-ressourcen-makerbook-611970/ 2015-05-21T12:58:13Z
Makerbook ist ein Verzeichnis ausgewählter Websites auf denen ihr kostenfreie Bilder, Videos, Grafiken, Mockups, Fonts und mehr findet. 

Makerbook ist ein Verzeichnis ausgewählter Websites auf denen ihr kostenfreie Bilder, Videos, Grafiken, Mockups, Fonts und mehr findet. 

Makerbook: Verzeichnis kostenloser Grafik- und Video-Ressourcen

Ihr benötigt noch schnell ein passendes Foto für ein Projekt oder sogar ein Video, aber euer Budget ist schon stark ausgeschöpft? Dann solltet ihr einen Blick auf Makerbook werfen. Makerbook ist ein Verzeichnis ausgewählter Websites, auf denen ihr kostenfreie Inhalte finden könnt.

Fotos, Grafiken, Videos und mehr: Auf Makerbook findet ihr kostenlose Design-Ressource. (Screenshot: Makerbook)
Fotos, Grafiken, Videos und mehr: Auf Makerbook findet ihr kostenlose Design-Ressource. (Screenshot: Makerbook)

Das Verzeichnis ist unterteilt in insgesamt acht Kategorien: Fotografie, Mockups, Grafiken, Texturen, Audio, Video, Fonts und Farben. Alle indexierten Websites stellen ihre Ressourcen kostenfrei zur Verfügung. Zwar ist die Anzahl der Einträge nicht unbedingt hoch, dafür kann sich die Qualität der von Hand ausgewählten Quellen wirklich sehen lassen.

Kostenlose Design-Ressourcen über Makerbook aufspüren

Wer nach kostenfreien Design-Ressourcen sucht, der sollte Makerbook unbedingt einen Besuch abstatten. Der einzige Nachteil der Seite ist die fehlende Suchfunktion. Aufgrund der übersichtlichen Aufmachung und der überschaubaren Anzahl an Quellen ist das allerdings kein allzu großes Manko.

In diesem Zusammenhang solltet ihr auch einen Blick auf unsere Artikel „Grafikpower für dein Projekt: Die 15 besten Seiten für kostenlose Icons und Icon-Fonts“ und „Hochglanz und für lau: 11 Seiten, die langweiligen Stockfotos den Kampf ansagen“ werfen.

via www.producthunt.com

]]>
Kim Rixecker
Photoshop-Tutorials: Die 15 besten deutschsprachigen Videos und Quellen http://t3n.de/news/photoshop-tutorials-15-besten-604884/ 2015-05-20T12:07:05Z
Photoshop ist ein mächtiges Tool mit einer Vielzahl an Features. Wie es gelingt diese sinnvoll einzusetzen, demonstrieren einige Web-Quellen anschaulich in Form von Photoshop-Tutorials.

Photoshop ist ein mächtiges Tool mit einer Vielzahl an Features. Wie es gelingt diese sinnvoll einzusetzen, demonstrieren einige Web-Quellen anschaulich in Form von Photoshop-Tutorials. Eine Auswahl besonders gelungener stellen wir euch hier vor.Photoshop ist derart komplex, dass die Anzahl an Möglichkeiten, bestimmte Aufgaben anzugehen, nahezu grenzenlos sind. Beinahe eben so unüberschaubar ist die Menge an Tutorials, die zu Photoshop existieren. Leider ist ein großer Teil davon in englischer Sprache, sodass nicht jeder unserer Leser davon in vollem Umfang profitieren kann. Aber auch im deutschsprachigen Web gibt es gute Anleitungen, anhand derer sich grundlegende Herangehensweisen genauso wie fortgeschrittene Techniken in Photoshop erlernen lassen. Das Netz hält für jedes Anforderungsniveau passende Tutorials bereit, sei es in Form von detaillierten Forenbeiträgen, die Lösungen zu spezifischen Problemen schildern, bebilderten Schritt für Schritt Anleitungen oder leicht reproduzierbaren Video-Beiträgen. Die unserer Meinung nach lohnenswertesten Anlaufstellen präsentieren wir euch hier inklusive Bild und Kurzbeschreibung. Links zu den Quellen befinden sich jeweils in der Bildbeschreibung oder im Beschreibungstext.

Adobe TV

Photoshop-Tutorials direkt vom Hersteller der Software (Screenshot: tv.adobe.com).

Einen optimalen Einstieg in die Software liefern sicherlich die zahlreichen Videos, die Adobe selbst Nutzern der Bildbearbeitungssoftware zur Verfügung stellt. Ein großer Vorteil gerade für Anfänger ist hier der gut strukturierte und chronologische Aufbau der Tutorials. Beginnend mit simpleren Funktionen wie dem Auswählen von Objekten oder dem Konzept von Ebenen wird hier ein Grundgerüst geschaffen, auf das Videos zu komplexeren Features im weiteren Verlauf einer Playlist dann aufbauen.

psd-tutorials.de

photoshop-tutorials_psd-tutorials
Über 1.600 Photoshop-Tutorials bietet psd-tutorials.de (Screenshot: psd-tutorials.de).

Einen riesigen Fundus an Tutorials zu Photoshop, aber auch zu zahlreichen anderen Anwendungen findet man bei psd-tutorials.de. Nach kostenloser Registrierung stehen über 1.600 bebilderte Anleitungen zur Verfügung, mittels derer sich das eigene Know how bezüglich der Bildbearbeitungssoftware aufpolieren lässt. Die Tutorials können über eine Filterfunktion angesteuert oder auch über Schlagworte direkt durchsucht werden. Downloads werden über ein Creditsystem bezahlt, bei dem die Währung gekauft, aber auch durch bestimmte Handlungen in der Community verdient werden können.

fxencore

photoshop-tutorials_fxencore
fxencore liefert über 100 Tutorials für Photoshop, dazu Pinsel, Schriften und mehr (Screenshot: fxencore.de).

Über 100 Tutorials zu Photoshop und darüber hinaus aus für zahlreiche andere Anwendungen aus dem Bereich Grafikbearbeitung liefert fxencore. Die bereitgestellten Anleitungen sind frei zugänglich und selbst für den Download von Brushes oder Fonts wird kein Login auf der Seite benötigt. Die Tutorials lassen sich über Kategorien wie „Texteffekt“, „Photoshop Grundlagen“ oder „Bildmanipulation“ filtern. Zusätzlich zeigt eine Skala den Schwierigkeitsgrad der einzelnen Anleitungen an.

Die Photoshop-Profis

Der YouTube-Kanal der Photoshop-Profis (Rheinwerk Verlag) verspricht alle zwei Wochen ein neues Video, das sich mit konkreten Szenarien aus den Bereichen Photoshop-Art oder Fotodesign befasst, zur Verfügung zu stellen. Bis heute sind schon knapp 200 teils mehr als halbstündige Lehrvideos entstanden. In der Regel werden hier eher anspruchsvolle Techniken und Vorgehensweisen dargestellt von Leuten, die sich mit ihrer Materie bestens auskennen. Leider sind keine thematisch sortierten Playlists vorhanden, dafür lassen sich aber schnell alle Videos ermitteln, die vom gleichen Autor stammen.

Webmasterpro

photoshop-tutorials_Webmasterpro
Unter der Rubrik Design finden sich bei Webmasterpro rund 150 Photoshop-Tutorials (Screenshot: webmasterpro.de).

Unter dem Reiter Design finden sich bei Webmasterpro rund 150 Tutorials, die sich mit Fotobearbeitung allgemein, mit Retusche, Texteffekten und dem Entwerfen von Nutzeroberflächen auseinandersetzen. Die Tutorials sind alle frei zugänglich und bedürfen keiner Anmeldung auf der Plattform. Für Einsteiger ist die separat zu den eigentlichen Anleitungen von der Community erstellte Einführung in Photoshop interessant. Hier wird die Arbeitsoberfläche erklärt, ebenso wie der Umgang mit Ebenen, Masken, Texten und Auswahlwerkzeugen. Ergänzend gibt es eine Auflistung der wichtigsten Photoshop Shortcuts sowie eine Gegenüberstellung deutscher und englischer Begrifflichkeiten in Zusammenhang mit der Software.

GFX Sector

photoshop-tutorials_gfxsector
GFX Sector eine Vielzahl an Ressourcen wie auch Tutorials zu Adobes Bildbearbeitungssoftware (Screenshot: gfx-sector.de).

GFX Sector ist, wie der Name bereits verrät, ein Forum, das sich mit grafischen Effekten auseinandersetzt. Neben diversen Gigabytes an Ressourcen, die das Portal kostenlos zur Verfügung stellt, sind auch über 800 Tutorials allein für Photoshop Teil von GFX Sector. Wer sich im Forum registriert, erhält Zugriff auf eine Fülle an Anleitungen, die über eine relativ übersichtliche Threadstruktur organisiert sind. Es findet für die einzelnen Themen auch eine Einordnung der Schwierigkeit statt, was insbesondere für Anfänger hilfreich sein sollte. Behandelte Oberbereiche sind zum Beispiel „Fotomanipulation“, „Filtertutorials“, „Webdesign/Interface“, „Texteffekte“ oder „Rendern/Cutten“.

Designnation

photoshop-tutorials_Designnation
Designnation: Besonders gute Tutorials lassen sich durch die Bewertungsfunktion leicht identifizieren (Screenshot: tutorials.designnation.de).

Designnation beherbergt zahlreiche Tutorials zu verschiedenen Designer-Themen. Explizit für Photoshop wurden bislang knapp 400 Anleitungen von den Mitgliedern der Plattform erstellt. Zwar existieren bei Designnation Kategorien, doch werden diese leider nur zu einer Minderheit der Tutorials vergeben. Praktisch sind hingegen die Möglichkeiten, Anleitungen über Schlagwörter zu finden oder über die Bewertung durch die Community nach guten Tutorials zu stöbern.

Alice-Grafixx

photoshop-tutorials_alice-grafixx
Klein, aber fein ist die Comunity Alice-Grafixx, die sowohl schriftliche als auch Video-Tutorials bietet (Screenshot: alice-grafixx.de).

Alice-Grafixx ist eine Foren-Community, in der es neben zahlreichen Ressourcen wie Pinseln, Verläufen, Mustern und Stilen auch zahlreiche Tutorials gibt. Speziell für Photoshop existieren derzeit 83 Anleitungen, die sich über die Themenbereiche „Grundlagen“, „Webdesign“, „Texteffekte“, „Objekte erstellen“, „Photomanipulation“ und „Effekte“ erstrecken. Zusätzlich zu den verschriftlichten Tutorials, die direkt über die Startseite verlinkt werden, finden sich tiefer im Forum selbst auch eine Reihe von Video-Anleitungen.

tutorials.de

photoshop-tutorials_tutorials.de
Ein riesiges Forum sowie einige Tutorials helfen dem Besucher von tutorials.de bei Fragen zu Photoshop aus (Screenshot: tutorials.de).

Bei tutorials.de gibt es Anleitungen für fast jede Anwendung, die man so auf dem PC nutzen kann. Auch die Design-Sparte hält einige nützliche Tutorials bereit. Für das Bildbearbeitungsprogramm aus dem Hause Adobe sind es zur Zeit zwar nur 41. Das angehängte Unterforum, welches sich ausschließlich Photoshop widmet, hat allerdings mit seinen über 11.500 Themen und bald 80.000 Beiträgen einen reichhaltigen Fundus und hilfsbereite Nutzer mittels derer sich auch fortgeschrittene Fragestellungen oft klären lassen.

designtrax.de

photoshop-tutorials_designtrax
Keine Unmengen, aber dafür sorgsam aufbereitete und gut illustrierte Photoshop-Tutorials findet man bei designtrax.de (Screenshot: designtrax.de).

Nützliche Tutorials zu Illustrator und auch Photoshop stellt Mediengestalter Stefan Hüglin auf seiner Website designtrax.de zur Verfügung. Die Anzahl der Tutorials bewegt sich um die 50 Stück, allerdings sind hier einige besonders kreative Fundstücke dabei. Im Gegensatz zu manch großem Forum sind die Tutorials stets gut gegliedert, sehr anschaulich und reichhaltig bebildert sowie ausreichend kleinschrittig erklärt.

photoshop-podcast.de

photoshop-tutorials_photoshoppodcast
Über 300 Video-Tutorials zu Photoshop gitb es bei photoshop-podcast.de (Screenshot: photoshop-podcast.de).

Ein ausführliches Sammelsurium von Video-Tutorials zu Photoshop bietet die Website photoshop-podcast.de. Bis zum heutigen Tag sind dort 304 Podcasts eingestellt, die sich je im Rahmen von etwa fünf bis zehn Minuten bewegen. Inhaltlich wird diverses geboten. Es gibt Videos, die explizit Fortgeschrittene adressieren und komplexere Themen wie HDR-Tonung oder Schwarz-Weiß Konvertierung ansprechen. Aber es werden auch einzelne Werkzeuge in Photoshop vorgestellt oder neue Features aktueller Versionen gezeigt.

einpraegsam.de

Joerg Esser stellt auf seiner Seite einpraegsam.de Tutorials zu Photoshop, Lightroom und Gimp bereit. Schritt für Schritt zeigt der Autor in seinen mittlerweile rund 200 Lernvideos, wie der perfekte Umgang mit den Bildbearbeitungsprogrammen gelingt. Thematisch werden beispielsweise Vorgehensweisen zum Maskieren, Freistellen und Ausschneiden gelehrt, ebenso wie demonstriert wird, wie Bilder mittels Aufhellen, Nachschärfen und anderen Werkzeugen optimiert werden können. Zielgruppe sind dabei Anfänger wie fortgeschrittene Nutzer.

Tube2Brain Photoshop

Der YouTube-Kanal Tube2Brain Photoshop verspricht, jede Woche ein neues Photoshop Tutorial zu veröffentlichen. Dabei bewegen sich die Themen im Wesentlichen in den Bereichen „Grundlagen“, „Beautyretusche“ und „Texteffekte“. Zahlreiche Videos orientieren sich allerdings auch an Fragen aus der Community, weshalb auch ein großer Teil der Videos unter „Allgemeines“ kategorisiert sind. Zur Zeit existieren rund 60 Video-Tutorials, von denen einige bis zu einer halben Stunde lang sind, der Großteil ist aber kompakter im Bereich von fünf bis zehn Minuten.

PhotoshopHelpGerman

Über 200 Video-Tutorials hauptsächlich zu Photoshop, aber auch zu Cinema 4D beherbergt der YouTube-Kanal PhotoshopHelpGerman. Die Themenvielfalt, die die Videos zusammengenommen umfassen, ist groß. Die Tutorials reichen von Anleitungen zum Erzeugen des Tilt-Shift Effekts über Beatyretusche und visuelles Tuning von Objekten hin zur Erstellung von Texteffekten, dem Umgang mit Farbverläufen, Smart Objects und Gradiationskurven.

drweb

photoshop-tutorials_drweb
(Screenshot: drweb.de).

Zahlreiche gute Photoshop-Tutorials sind auch in der Abteilung Design bei drweb zu finden. Zwar sind hier neben reinen Tutorials auch andere Artikel zu Design-Themen zu finden, doch insbesondere die Anleitungen von Dirk Metzmacher, seinerseits Herausgeber des Photoshop-Weblogs, sind immer wieder einen Blick wert, wenn es um die Verbesserung der eigenen Photoshop-Fähigkeiten geht.

]]>
Marcel Seer
Pimp deinen Desktop! 24 super schicke Polyscape-Wallpaper http://t3n.de/news/polyscape-wallpaper-611579/ 2015-05-20T09:19:57Z
Wer seinen Desktop mal wieder aufhübschen möchte, kann das mit Polyscape-Wallpapers tun! 24 Hintergründe haben wir für euch kuratiert.

Wer seinen Desktop mal wieder aufhübschen möchte, kann das mit Polyscape-Wallpapers tun! 24 Hintergründe haben wir für euch kuratiert.

Polyscape-Wallpaper waren vergangenen Monat der Trend auf Reddit. (Grafik:  /r/polyscapes)
Polyscape-Wallpaper waren vergangenen Monat der Trend auf Reddit. (Grafik: /r/polyscapes)

Der Polyscape-Stil lässt sich schwer definieren. Müsste ich es tun, würde ich sagen, dass er sich vor allem durch geografische Formen und absetzende Farben sowie sich überlappende oder spiegelnde Videos und Fotografien auszeichnet. Mit dem Stil wurde in den letzten Jahren des Öfteren in Musikvideos experimentiert. Erstmals ist er mir in den Clips von Lady Gaga aufgefallen – „Born this Way“ ist so ein Beispiel.

Doch auch im Netz haben sich Designer und Künstler dem Polyscape-Design gewidmet. In einem Subreddit /r/polyscapes hat sich beispielsweise eine Fangemeinde einen Ort geschaffen, in dem sie eigene Kreationen untereinander austauschen und kuratieren. Im April hat er es sogar in die Trends von Reddit geschafft – ein deutliches Signal für einen aufkommenden Trend.

Polyscape-Wallpaper für deinen Desktop – Top oder Flop?

In der untenstehenden Galerie könnt ihr einige Wallpaper finden, die euren Hintergrund ein wenig pimpen. Leider gibt es keine Dual-Bildschirm-Hintergründe – wer da Abhilfe leisten möchte ist sicherlich in dem oben erwähnten Subreddit herzlich willkommen.

Zu guter Letzt interessiert uns: Wie findet ihr den Polyscape-Stil? Über Geschmack lässt sich zwar bekanntlich nicht streiten, denn jeder hat seinen ganz individuellen Blick, aber eure Meinungen sind dennoch interessant. Erzählt mal!

Übrigens: Wer es ein wenig unaufgeregter mag, findet in dem Beitrag „Minimalistische Wallpaper: 45 Grafiken für einen schicken Desktop“ auch einige sehenswerte Hintergründe für den Bildschirm.

via theultralinx.com

]]>
Andreas Weck
Pingendo: Einfaches Prototyping für Designer dank Bootstrap http://t3n.de/news/pingendo-einfaches-prototyping-608076/ 2015-05-17T15:02:21Z
Du willst wissen, wie sich dein Design responsive „anfühlt“, hast aber keine Lust, dich selbst mit HTML und CSS rumzuschlagen? Mit Pingendo kannst du innerhalb von Minuten einen funktionieren …

Du willst wissen, wie sich dein Design responsive „anfühlt“, hast aber keine Lust, dich selbst mit HTML und CSS rumzuschlagen? Mit Pingendo kannst du innerhalb von Minuten einen funktionieren Bootstrap-Prototypen erstellen.

Pingendo: Responsive durch Bootstrap

Pingendo ist ein LESS-basierter WYSIWYG-Bootstrap-Editor. Das hat den unschätzbaren Vorteil, dass man einerseits auf das vorhandene Gerüst von Bootstrap aufbauen kann und dieses eben nicht „blind“ im Code-Editor, sondern direkt mit visuellem Feedback bearbeiten kann. Da Pingendo – durch Bootstrap – schon responsives Verhalten aller Elemente vorsieht, scheint es als Prototyping-Tool sehr geeignet.

Startet man Pingendo, kann man sich entscheiden, ob man mit einem leeren Projekt oder einem der mitgelieferten Templates starten will. Die Templates sind ganz praktisch, wenn man sich in das Programm einfinden oder nicht ganz bei Null anfangen möchte.

(Screenshot: Pingendo)
Los geht's. (Screenshot: t3n)

Die Benutzeroberfläche kommt sehr aufgeräumt daher und besteht aus fünf Bereichen:

  1. Viewport
  2. Menüleiste
  3. Bereichs- und Komponentenbibliothek
  4. Eigenschafteneditor
  5. HTML- und CSS-Editor (beim Start minimiert)
(Screenshot: Pingendo)
Die Bereiche der App. (Screenshot: t3n)

Mit Hilfe der Bereichs- und Komponentenbibliothek kann man sich sehr schnell ein Grundgerüst seiner Seite zusammenstellen – ganz einfach per Drag & Drop. Dazu bietet Pingendo fertige Aufteilungen in Spalten, Navigation, Footer, diverse Bild-Text-Aufteilungen und vorgefertigte Slider.

(Screenshot: Pingendo)
(Screenshot: t3n)

Da Pingendo auf Bootstrap basiert, kann man Elemente breakpointbasiert ein- und ausblenden. So bekommt man innerhalb kürzester Zeit eine Seite, die sich in Struktur und Verhalten dem jeweiligen Viewport anpasst.

Genauso schnell kann man die strukturellen Elemente dann mit Inhalten füllen – sowohl mit lokalen, als auch mit externen (Web-)Quellen. Mit dem Eigenschaften-Editor kann man Elemente befüllen und anpassen – wobei die Möglichkeiten hier doch sehr begrenzt sind. Man hat eine feste Anzahl an vordefinierten Farben, Größen und Spezialeigenschaften.

Testen des Prototyps: Wo Pingendo an seine Grenzen stößt

Ein erster Prototyp lässt sich soweit sehr gut und innerhalb kurzer Zeit erstellen. Testen kann man die Seite allerdings erst, wenn man sie exportiert hat – so etwas wie eine Preview-Funktion gibt es leider nicht. Verschiedene Interaktionen, wie zum Beispiel das Ausklappen eines Drop-Down-Menüs, lassen sich erst in der gespeicherten HTML-Datei ausführen. Gerade das hat doch Nervpotential, da man diese Elemente dann auch schwer gestalten und bearbeiten kann.

Will man tiefer eintauchen (und beispielweise die Inhalte eines Drop-Down-Menüs anpassen), muss man sich dann doch die Mühe machen und im Quelltext des Projekts arbeiten. Zum Glück ist der entsprechende HTML-/CSS-Editor in Pingendo integriert und man muss nicht die Anwendung wechseln.

Die HTML- und CSS-Dateien sind sehr gut strukturiert und bieten somit eine sehr gute Basis für Entwickler, um damit weiter arbeiten zu können. Das Angenehme ist, dass Änderungen wie Farben gleich mit in das UI übernommen werden, sodass man sämtliche Eigenschaften, die man in CSS/LESS definiert, auch sehr einfach auf andere Elemente anwenden kann, ohne wieder in den Quelltext zurückkehren zu müssen.

Eigene Regeln und Eigenschaften kann man jedoch nicht zum UI  hinzufügen, sondern nur bestehende editieren.

Fazit

Pingendo ist sehr gut dafür geeignet, schnell einen Prototypen einer responsiven Website zu erstellen, die nach bestimmten Standardschemata und mit gängigen Elementen aufgebaut ist. Da schon sehr viel „Grundverhalten“ der Elemente mitgebracht wird, kann man hier wenig Fehler machen. Wünschenswert wäre es, wenn man im UI mehr breakpointbasierte Eigenschaften einstellen könnte, außer Elemente ein- und auszublenden. Schriftgrößen, Farben, Größen, Abstände … all das kann man nicht über die Benutzeroberfläche einstellen.

Somit ist Pingendo ein Tool, um Seiten zu erstellen, die wahrscheinlich so aussehen werden, wie die meisten anderen. Für außergewöhnliche, innovative Interaktionen und Navigationen sind Programme mit mehr Freiraum und Flexibilität wesentlich besser geeignet.

]]>
Jürn-Christian Hocke
Prototyping in geil: Ist Marvel ein Must-Have für Designer? http://t3n.de/news/prototyping-geil-marvel-609673/ 2015-05-16T11:03:21Z
Marvel ist eine App, die es Designern erlauben soll, schnell und effizient Prototypen von Webseiten und Apps zu erstellen. Der Clou ist, dass das Tool nicht mit einzelnen Content-Objekten gefüttert …

Marvel ist eine App, die es Designern erlauben soll, schnell und effizient Prototypen von Webseiten und Apps zu erstellen. Der Clou ist, dass das Tool nicht mit einzelnen Content-Objekten gefüttert werden muss, sondern dass die Interaktion des Prototypen auf ein Bild aufgesetzt wird. Als Grundlage können unter anderem PSDs, AIs, PDFs, Fotos und digitale Scribbles dienen. Wir haben das Tool für euch getestet.

Angetestet: Marvel

Marvel vespricht einfaches Prototyping. (Foto: Marvel)
Marvel vespricht einfaches Prototyping. (Foto: Marvel)

Marvel ist sowohl für iOS, als auch für Android und als Web-App verfügbar. Man kann sich sehr bequem via Dropbox-Account anmelden, was gerade für die Zusammenarbeit mit anderen Sinn macht, da die Ressourcen und Prototypen über Dropbox synchronisiert werden können. Da wir die kostenfreie Version der App getestet haben, konnten wir nur die Single-User-Features nutzen.

Die Pro-Version umfasst ein Abomodell, das für den Einzelnutzer acht bis zehn Euro pro Monat kostet. Das Abo gibt es in drei verschiedenen Größen: Einzelnutzer-, Team- und Firmenlizenz. Die Features der Pro-Version betreffen vor allem das Arbeiten im Team, das Entfernen des „Marvel“-Brandings aus den Prototypen und (ein wirklich nettes Feature) die Erstellung von Android-Builds (die Erstellung einer App aus dem Prototypen).

Marvel: Die Mobile-App

(Screenshot: Marvel mobile App, HTC One M9)
Marvel mobile App, HTC One M9 (Screenshot: t3n)

Legen wir also los: Die Android-App ist schnell auf unserem Smartphone (HTC One M9) und Tablet (Samsung Galaxy Note 8.0) installiert. Und das erste Projekt will begonnen werden. Bevor man loslegen kann, irgendwelche Bilder und Skizzen miteinander zu verknüpfen, entscheidet man sich für einen Projektnamen und legt fest, für welches Gerät das Projekt sein soll. Allerdings kann man auf dem Smartphone und auf dem Tablet nur Prototypen erstellen, die in Abmessung und Auflösung dem eigenen Gerät entsprechen, also keinen Prototypen für eine Desktop-Website oder ähnliches – dazu später mehr bei der Web-App.

Nach diesen Grundeinstellungen geht es dann endlich los: Um eine neue Skizze beziehungsweise Seite hinzuzufügen, kann man zwischen Freihandskizze, Kameraaufnahme oder einem Bild aus der Handy- oder Tablet-eigenen Galerie oder eben aus der (verbundenen) Dropbox wählen.

Das Skizzieren auf dem Smartphone gestaltet sich als extrem schwierig, da keinerlei Zoom oder Navigationstools zur Verfügung stehen. Man hat zwar die Möglichkeit, über „Undo-Steps“ seine Ausrutscher ungeschehen zu machen, aber mehr als unbeholfene Linien, Ellipsen und Rechtecke sind kaum zu schaffen. An dieser Stelle ist ein entsprechender Eingabestift, wie es ihn für das Galaxy Note gibt, ideal. Auf dem Tablet hingegen lässt es sich sehr angenehm skizzieren – dank Stift und größerem Screen.

(Screenshot: Marvel mobile App, HTC One M9)
Die Marvel-App auf dem HTC One M9. (Screenshot: t3n)

Nachdem das mit dem Scribbeln auf dem Smartphone eher schlecht als recht funktioniert hat, mussten dann doch wieder Papier und Stift her. Nach der Aufnahme (oder der Auswahl aus Galerie oder Dropbox) kann man das entsprechende Bild ziemlich komfortabel drehen, skalieren und positionieren. Schade jedoch, dass der Rest des Bilds abgeschnitten wird – das heißt, man kann keine scrollbaren Seiten erstellen.

(Screenshot: Marvel mobile App, HTC One M9)
(Screenshot: t3n)

Nachdem man seine Skizzen hinterlegt hat, geht es daran, sie sinnvoll miteinander zu verbinden. Man wählt die entsprechende Seite aus und fügt einen rechteckigen, sogenannten „Hotspot“ hinzu. Diesen kann man relativ frei positionieren und mit Hilfe der Eckpunkte skalieren – Rotation oder anderen Formen (Ellipsen) sind nicht möglich.

Die Ansicht kann man allerdings, wie man es auf dem Smartphone gewöhnt ist, durch Pinchen vergrößen und verkleinern, sodass man auch relativ kleine Bereiche markieren kann. Hat man einen Bereich definiert, wählt man aus, auf welche der anderen Skizzen verlinkt werden und welcher Übergang (Fade, Scroll, Flop, Pop …) verwendet werden soll.

(Screenshot: Marvel mobile App, HTC One M9)
(Screenshot: t3n)

So arbeitet man sich durch die einzelnen Screens seines Prototypen, den man sich dann am Ende direkt auf dem Gerät anschauen oder über diverse Kanäle (E-Mail, Whatsapp …) teilen kann. Wirklich gut an den Prototypen ist, dass sie online gehostet werden und man sie sich ohne App oder Plugin anschauen kann, weil es simple HTML-Dateien sind.

Fazit zur Mobile-App

Die Marvel-Mobile-App ist ein großartiges Tool, um schnell relativ lineare, wenig komplexe Abläufe in Form eines Prototypen abzubilden und gegebenenfalls im Team abzustimmen – also eine ideale Brainstorming-Basis oder um eine Idee schnell und einfach zu visualisieren. Tiefgreifendere „Microinteraktionen“ und Bedienkonzepte, die über ein einfaches Klicken und Tappen hinausgehen, sind mit der Mobile-App nicht abbildbar. Ein großes Manko ist, dass man die Seiten nur so groß erstellen kan, wie der Screen des Gerätes ist.

Marvel: Die Web-App

Die Web-App ist sehr umfangreich und bietet Funktionalitäten, die man in der Mobile-App vergebens sucht, wie zum Beispiel das globale Management der Teams und Teammitglieder. Auch in der Erstellung der Prototypen ist die Web-App um wesentliche Funktionen erweitert.

Erstellt man einen Prototypen in der Web-App, ist die Auswahl der möglichen Formate erstaunlich groß und reicht von diversen Mobiltelefonen über Tablets und Desktop-Formate bis hin zur Apple-Watch – wirklich beeindruckend. Anders als bei der Mobile-App, bei der man das beim Erstellen des Prototyps auswählen muss, ist diese Funktion hier leider etwas versteckt und nicht in den Workflow integriert. Schade ist, dass man den Prototypen nicht um mehrere Geräte erweitern kann, um zum Beispiel Responsiveness abzubilden. Dafür muss man entsprechend viele Prototypen anlegen – für jede Auflösung einen.

Auswahl des Devices
Die Marvel-Web-App: Auswahl des Devices. (Screenshot: t3n)

Arbeitet man bei der Erstellung des Prototypen am Computer und will eine Skizze hinzufügen, kann man nur von der verbundenen Dropbox oder vom Computer selbst ein Bild hochladen. Eine Möglichkeit, mit der Maus, einem Stift oder via Touchscreen eine Skizze zu erstellen, gibt es nicht – das muss vorher in Photoshop oder einem Grafikprogramm der Wahl erledigt werden.

Der Bearbeitungsmodus sieht – verglichen mit der Mobile-App – ganz anders aus und bietet wesentlich mehr Möglichkeiten. Anders als auf dem Smartphone kann man hier beliebig große Bilddaten verwenden und einen „Fixed-Header-“ und „Fixed-Footer“-Bereich festlegen, der dann beim Scrollen einer langen Seite stehen bleibt – wieso gibt es dieses Feature nicht auch in der Mobile-App? Im Bearbeitungsmodus kann man das aktuelle Bild sogar direkt ersetzen, so erspart man sich lästiges Neuverknüpfen und Definieren der Hotspots. Allerdings kann man die aktuelle Skizze nur durch Inhalte aus der Dropbox ersetzen.

Bearbeitung des fixen Headerbereichs
Bearbeitung des fixen Headerbereichs. (Screenshot: t3n)

Die Interaktionsmöglichkeiten, die man einem Hotspot in der Web-App zuweisen kann, sind wesentlich umfangreicher als in der Mobile-App: Klicken, Hover, Swipen, Pinchen und Doppelklick – ansonsten funktioniert alles genauso wie bei der Mobile-App. Man verlinkt die Hotspots mit den anderen Seiten des Prototypen und wählt eine Transition aus (die sind immerhin identisch mit denen der Mobile-App). Sehr praktisch ist die Preview-Funktion, die den Prototypen im Browser öffnet.

Festelegen der Interaktion
Festlegen der Interaktion. (Screenshot: t3n)

Schaut man sich dann den fertigen Prototypen im Browser an, wird ein entsprechender Geräterahmen (bei einigen Geräten kann man die Farbe in den Einstellungen anpassen) um das Projekt angezeigt, sodass der Prototyp in seinem korrekten Umfeld angezeigt wird. Dieses Verhalten lässt sich auch nur in der Web-App aktivieren oder deaktivieren.

Finaler Prototyp
Finaler Prototyp (Screenshot: t3n)

Fazit zur Web-App

Auch die Web-App hat, was die Interaktionsmöglichkeiten angeht, noch einige Lücken. So kann man Hotspots nur eine Interaktion zuweisen, was gerade beim Swipen nicht ideal ist. Interaktionen wie „Ziehen“ oder sogar „Drag & Drop“ sind nicht möglich. Allerdings ist Marvel auch ein Werkzeug, das in einer sehr frühen Phase eines Projekts zum Einsatz kommt, wo es eher um das große Ganze geht, als um detaillierte Funktionalität und Interaktion.

Alles in allem ist Marvel deshalb ein gutes und schnelles Werkzeug, um mal eben etwas festzuhalten und zu testen – um also eine Diskussionsgrundlage zu erarbeiten, die dann mit anderen, mächtigeren Wireframing- und Prototyping-Programmen wie Axure verfeinert werden kann. Ob einem das ein Zehn-Euro-Abo wert ist, muss jeder für sich selbst entscheiden.

]]>
Jürn-Christian Hocke
Interface-Design für die Apple Watch: 6 Tipps für deine erste Smartwatch-App http://t3n.de/news/interface-design-apple-watch-609729/ 2015-05-16T07:56:15Z
Noch steckt sie in den Kinderschuhe und doch wird die Apple Watch wohl ein neues Zeitalter einleiten, was die Usability von Apps und unsere Gewohnheiten in der Kommunikation angeht.

Noch steckt sie in den Kinderschuhe und doch wird die Apple Watch wohl ein neues Zeitalter einleiten, was die Usability von Apps und unsere Gewohnheiten in der Kommunikation angeht. Wie du dich schon jetzt für die ersten App-Designs der neuen Uhr vorbereitest und was du auf dem kleinen Bildschirm zu beachten hast, zeigen wir dir.

Die Apple Watch: Umdenken und neue Wege gehen

Ob Smartwatches wirklich Einzug in unseren Alltag halten werden, ist noch umstritten, aber letztendlich eine logische Schlussfolgerung der momentanen Entwicklung. Unser Auto funktioniert per Sprachsteuerung, wir kontrollieren unseren Stromverbrauch per App und wischen zum nächsten Fernsehprogramm per Gestensteuerung.

Die Apple Watch bietet die Möglichkeit, umzudenken und neue Wege zu gehen, was unseren alltäglichen Umgang mit Apps und die Kommunikation betrifft. Und egal, ob du nun ein Startup aus dem Boden stampfst oder bestehende iPhone-Apps für die intelligente Uhr weiterentwickelst: Es gibt einiges zu beachten.

Guidelines für die Apple Watch. (Screenshot: Apple)
Guidelines für die Apple Watch. (Screenshot: Apple)

1. Halte dich an die Guidelines

(Screenshot: Apple)
(Screenshot: Apple)

Neue Ideen bergen einen Zauber in sich, aber sie können dich auch schnell zur Verzweiflung bringen und dich viel Zeit kosten. Vor deinem ersten Brainstorming kannst du die Apple-Watch-Human-Interface-Guidelines außer Acht lassen, um Out of the Box ungestört Ideen zu entwickeln. Direkt danach solltest du dir die Richtlinien von Apple zur Gestaltung für die Smartwatch aber dringend zu Gemüte führen. Du lernst dadurch nicht nur, was Apple verbietet, sondern bekommst auch einen Einblick, welche neuen Funktionen die Apple Watch mitbringt.

2. KISS: Keep it stupid and simple

Das betrifft nicht nur das Design der App, sondern auch den Inhalt, der wiedergegeben wird. Egal ob sich der Nutzer deiner App für die 38- oder die 42-Millimeter-Variante der intelligenten Uhr aus Cupertino entschieden hat: Die zur Verfügung stehende Fläche für Inhalte und Gesten ist sehr klein und sollte nur mit dem Nötigsten befüllt werden.

Versuche nicht, möglichst viele Informationen auf einen Screen zu bekommen, sondern teile deine Inhalte zum Beispiel auf mehrere Screens intelligent auf, die per einfacher Swipe-Geste zu erreichen sind.

Fokussiere dich beim Gestalten auf die Funktionalität und den Mehrwert. (Screenshot: Apple)
Fokussiere dich beim Gestalten auf die Funktionalität und den Mehrwert. (Screenshot: Apple)

3. Die Steuerung muss grobmotorisch und intuitiv sein

Deine App wird nur dann genutzt, wenn sie Spaß macht und einen Mehrwert bietet. Eine intuitive Bedienung kann entscheidend für den Erfolg deiner App sein. Ein gutes Beispiel dafür ist Tinder. Es gibt unzählige Dating-Portale, aber es ist das einfache nach links und nach rechts Wischen, dass die Entscheidung für den passenden Partner spielerisch und leicht macht.

Apps wie die von SoundCloud oder Spotify haben das Finden und Abspielen von Musik perfektioniert. Durch einfaches nach links oder rechts Wischen springst du in der Playlist vorwärts oder rückwärts, nach unten wischen zeigt die Suche, nach oben wischen lässt dich die Lautstärke bestimmen.

4. Überrasche durch neue Funktionen: Nutze Force-Touch und Vibrationen

Die Apple Watch ist Neuland und selbst die Mitarbeiter im Apple-Store können dir zu vielen Fragen rund um die Smartwatch noch keine qualifizierte Antwort geben. Umso besser, wenn du schon beim Design und der Konzeption auf die Nutzung der neuen Features achtest und Wert darauf legst.

Ein neues Feature ist zum Beispiel Force-Touch. Die Apple Watch merkt nicht mehr nur, dass du auf das Display drückst, sie analysiert auch, wie stark. Das bietet dir die Möglichkeit, eine Art Schnellnavigation vorzusehen, über die der Nutzer die wichtigsten drei Funktionen zum Beispiel jederzeit abrufen kann.

Du entwickelst eine App, die von Hinweisen und Interaktion lebt? Dann versuch, die leichten Vibrationen der Smartwatch zu nutzen, um auf deine App aufmerksam zu machen.

5. Halte das Datenvolumen gering

Schon im Designprozess solltest du darauf achten, keine Informationen einzubauen, die zu viel Ladezeit beanspruchen. Die Apple Watch hat selbst keinen Internetzugriff, sondern verbindet sich über Bluetooth mit deinem iPhone. Wer die Apple Watch schon mal genutzt hat, weiß, wie lang eine Server-Anfrage dauern kann.

Auch hier gilt: Weniger ist mehr. Nutze schlanke Grafiken und gib nur die wirklich wichtigen Informationen wieder.

6. Gestalte die Eingabe einfach

Kurze Wörter sind ein Gewinn für eine simple Bedienbarkeit der App. (Screenshot: Apple)
Kurze Wörter sind ein Gewinn für eine simple Bedienbarkeit der App. (Screenshot: Apple)

Die Apple Watch bietet keine klassische Eingabefunktion für Text per Tastatur. Der Input erfolgt also entweder per Sprachsteuerung oder über Buttons. Aufgrund der langsamen Verbindung zu Siri und der Tatsache, dass man nicht unbedingt in der Öffentlichkeit mit seiner Uhr sprechen will, macht die letztere Variante zur komfortableren Lösung.

Aufgrund des kleinen Displays von 272 x 340 Pixeln oder 312 x 390 Pixeln solltest du für eine einfache Interaktion auch einfache Entscheidungsgrundlagen bieten. Ja. Nein. Play. Pause. Hinzufügen. Löschen. Kurze Wörter sind hier definitiv ein Gewinn für eine simple Bedienbarkeit der App.

Eine alternative und oft bessere Lösung dafür sind Icons. Klein, im besten Fall eindeutig und international zu verstehen, ist die Bedienung über mit Icons belegten Buttons die eleganteste Lösung, um durch die App zu navigieren.

So startest du dein erstes Apple-Watch-App-Design

In den Apple-Watch-Human-Interface-Guidelines findest du neben nützlichen Tipps zum Format und der User-Experience auch Template-Vorlagen für Photoshop und sogar Sketch, das in Sachen App-Design aufgrund seiner einfachen Bedienbarkeit immer mehr Anhänger findet.

Wenn du in Photoshop gestalten willst, bist du mit der Apple-Watch-GUI-PSD von Pek Pongpaet gut bedient. Dort findest du eine Übersicht der gängigsten Formatvorlagen und Use-Cases, die definitiv für die Gestaltung und Funktionalität von Nutzen sein können.

Wenn du in Photoshop gestalten willst, bist du mit der Apple-Watch-GUI-PSD von Pek Pongpaet gut bedient.
Wenn du in Photoshop gestalten willst, bist du mit der Apple-Watch-GUI-PSD von Pek Pongpaet gut bedient.

Falls du lieber direkt im Device layoutest, bietet sich eine Vorlage an, die einen Teil der Uhr zeigt, um den finalen Look & Feel vor Augen zu haben. Das Apple-Watch-Template von Medialot ist eine simple, aber schöne Grundlage zum Gestalten und für die Präsentation beim Kunden, die nahezu alle Variationen der Apple Watch aufzeigt.

Du hast es wahrscheinlich schon mitbekommen: Vektor ist King und Sketch ist langsam, aber sich auf dem Vormarsch. Der Vorteil ist neben den schnellen Ladezeiten die maximale Schärfe, welche die Vektor-Elemente unendlich skalierbar machen. Somit ist auch die aktuell beste Vorlage für deine nächste Apple-Watch-App die „Apple Watch GUI Kit .sketch resource“ von Jan Losert.

Jan war nicht nur so nett, dieses Kit kostenlos zur Verfügung zu stellen, sondern hat auch noch das Pendant in Photoshop dazu gestaltet. Aufgrund der vielen Downloads und des Erfolgs dieses Kits wurde es schon geupdated und enthält jetzt über 40 Screens, die alle den Apple-Watch-Typeface-Guidelines entsprechen. Definitiv eine Vorlage, die dir viel Arbeit abnimmt und deinen Start mit der Apple Watch ebnen.

Und welche App wollt ihr auf Apples Smartwatch bringen?

]]>
Pierre Starkloff
In 60 Sekunden: Mit Better Error Pages zur außergewöhnlichen Fehlerseite http://t3n.de/news/fehlerseite-better-error-pages-609991/ 2015-05-12T08:26:24Z
Mit Better Error Pages lässt sich in 60 Sekunden eine schicke und kostenlose Fehlerseite erstellen.

Mit Better Error Pages lässt sich in 60 Sekunden eine schicke und kostenlose Fehlerseite erstellen.

Eine kreative Fehlerseite ist schön, aber selten

Was sind sie doch schön, unsere 50 Beispiele für kreative Fehlerseiten – von humorvoll bis verspielt. Inzwischen haben viele Websitebetreiber erkannt, dass man auch mit nicht existierenden Unterseiten einer Website bleibenden Eindruck hinterlassen kann. Dass man beim Surfen allerdings auf Fehlerseiten stößt, die kurzerhand zu einer Partie Pacman einladen oder sich wenigstens optisch von den einfachen HTML-Seiten aus den 90er-Jahren abgrenzen, gehört immer noch zur Seltenheit. Vielleicht ändert sich das jetzt.

Better Error Pages: in 60 Sekunden zur schicken Fehlerseite. (Screenshot: t3n)
Better Error Pages: in 60 Sekunden zur schicken Fehlerseite. (Screenshot: t3n)

Mit Better Error Pages nämlich gibt es jetzt ein Tool, das Betreibern von Websites innerhalb weniger Minuten eine schlüsselfertige und schicke Fehlerseite verspricht.

Better Error Pages: Templates für die Fehlerseite

Das Erstellen der vergleichsweise augenfälligen Fehlerseite funktioniert dabei in drei Schritten: Zuerst werden Nutzer nach Informationen zu ihrer Website befragt – so zum Beispiel zur URL und der E-Mail-Adresse für den Support. Anschließend kann aus bisher drei Templates gewählt werden, die im nächsten Schritt hinsichtlich ihrer Farbgestaltung angepasst werden können. Zum Schluss wird die Fehlerseite nach Eingabe einer E-Mail-Adresse als HTML-Datei verschickt und kann vom Nutzer schlüsselfertig runtergeladen werden.

Zwar ist der Dienst kostenlos, umsonst aber ist er deshalb noch lange nicht. Hinter Better Error Pages steht mit StatusPage.io nämlich ein kommerzieller Dienst zum Erstellen von Server-Statusseiten, zu dessen Kunden unter anderem Kickstarter oder BitBucket gehören. Das Tool zum Erstellen einer schicken Fehlerseite ist also auch eine clevere Werbemaßnahme. Für kleine Websitebetreiber, die weder Mühe noch Geld in eine solche stecken wollen, ist Better Error Pages aber einen Blick wert.

Kennt ihr weitere Tools zum Erstellen kreativer Fehlerseiten? Lasst es uns in den Kommentaren wissen!

]]>
Daniel Hüfner