Kategorien
Design

Design Vs Cancer: Verhelfen Sie diesem großartigen Projekt zum Erfolg!

Sind Sie Designer? Dann wollen Sie dieses Projekt kennenlernen. Ich würde sogar darauf wetten, dass Sie sich beteiligen wollen. Das ist ausdrücklich möglich. Aber beginnen wir doch von vorn, mit der Vorstellung von Design Vs Cancer. Entscheiden Sie dann über die weiteren Schritte. Auch wenn Sie kein Designer sind, wird Sie das Projekt interessieren. Denn nur durch Ihre Mithilfe kann es wachsen. Helfen wir alle mit und machen die Welt ein bisschen besser, oder wie es Kraftklub sagen würde, ein bisschen weniger scheiße.

designVsCancer_CoverImage

Design vs. Cancer: Eine Idee gewinnt an Fahrt

Alles begann mit einer Krebsdiagnose. Diese traf Peter Deltondos Mutter und zerstörte ihr berufliches Leben und das ihres Mannes gleich mit. Während sie gar nicht mehr arbeiten konnte, musste er zeitlich dermaßen starke Einschnitte seiner produktiven Arbeitszeit vornehmen, dass zu der persönlichen Hölle, die eine solche Diagnose aufreißt, auch noch erhebliche wirtschaftliche Probleme hinzu kamen.

Peter Deltondo, von Beruf Designer, entschloss sich, seinen Eltern auch finanziell zur Seite zu springen. Seine Idee war es, auf seiner Website einen Shopbereich zu integrieren. Über diesen Shop wollte er Designprodukte verkaufen, der gesamte Reinerlös sollte seinen Eltern zufließen, die zwischenzeitlich mit Arztrechnungen nur so überschüttet wurden.

Als Peter mit anderen Designern diese Idee besprach, wurde schnell klar, dass er damit auf extrem viel Gegenliebe stieß. Nahezu jeder, mit dem Peter sprach, wollte Teil des Projektes werden. Die Idee nahm enorme Ausmaße an. Es ging nicht mehr "nur" darum, einer Familie, sondern so vielen wie möglich zu helfen. Peter Deltondo startete ein Kickstarter-Projekt und erhielt mehr Zuspruch, als er gebraucht hätte.

Das folgende Video erzählt die Geschichte noch einmal eindrucksvoller:

Am letzten Wochenende ging Design vs Cancer offiziell online. Die derzeit noch recht begrenzte Produktpalette besteht im Wesentlichen aus Shirts, Drucken und Accessoires. Design vs Cancer bezahlt die teilnehmenden Designer, gibt aber alle verbleibenden Gewinnanteile an eine gemeinnützige Stiftung. Diese Stiftung sorgt für die bedarfsgerechte Verteilung der individuellen Hilfen. Fünf Prozent der Gewinne gehen in die Unterstützung der Krebsforschung. Die sollte zwar eigentlich von der Pharmaindustrie geleistet werden, aber die steckt ihr Forschungsbudget bekanntlich lieber in Medikamente zur spontanen Penisverhärtung…

joseph_alessio_winners_never_quit_shirt_design_vs_cancer

Wollen Sie den Kampf der Designer gegen den Krebs unterstützen, so ist das sehr einfach. Sind Sie Designer, nehmen Sie Kontakt zu Peter auf. Sind Sie ein Kunde, kaufen Sie deren Produkte. Der Versand erfolgt weltweit zu akzeptablen Konditionen. Sammelbestellungen rechnen sich naturgemäß besser ;-)

JOIN THE FIGHT

Kategorien
Best-of HTML/CSS/PSD-Ressourcen Essentials

Kostenlose PSD-Mockups für Apps auf Android Wear

Android Wear steht vor der Tür und die ersten Demos sehen schon recht ansprechend aus. Bislang gehörte ich eher zu den Skeptikern des Smartwatch-Hype, das jüngste Video aus Mountain View hat es allerdings geschafft, mich zu einem glühenden Interessenten zu mutieren. Dabei hat es mir speziell Motorolas Moto 360 angetan. Das Äußere wird sich vielfältig zeigen, wenn erst einmal weitere Hersteller auf den an Fahrt gewinnenden Zug aufgesprungen sind. Das Innere, Android Wear selber, ist schon jetzt eine Augenweide. Dafür zu designen, stellt eine ganz neue Herausforderung dar.

Natürlich ist Android Wear nicht der einzige Wettbewerber im Kampf um die Smartwatch-Kundschaft. Es gibt da noch Pebble Steel, Neptune Pine, Samsung Gear 2, Omate TrueSmart, Martian Notifier und ein paar andere. Hartnäckig halten sich Gerüchte über die bevorstehende iWatch, die man allerdings schon seit Jahren herbei prophezeit. Es dürfte konsensfähig sein, zu behaupten, dass Google mit Android Wear die größten Chancen hat den kommenden Standard zu setzen.

Aufbauend auf dem erdrutschartigen Verbreitungserfolg der Android-Plattform, ist der Markt für zusätzliche Produkte mit den gleichen Genen bereits zum jetzigen Zeitpunkt riesengroß. Bereits jetzt sollte man sich als Designer und App-Entwickler Gedanken dazu machen, wie und wo man sich und seine Produkte positionieren will, wenn die Produkte der Zukunft tatsächlich Realität werden.

Die ersten, auf Android Wear basierenden Geräte werden im Sommer in die Hände einer breiteren Käuferschicht gelangen. Bereits zum jetzigen Zeitpunkt stellen ambitionierte Designer Mockups für User-Interfaces ins Weltennetz, auf deren Basis sich die eigene App schön für die extrem mobile Nutzung vorzeichnen lässt. Im folgenden Beitrag haben wir einige Beispiele und freie Ressourcen gesammelt:

MOTO 360 / UI-Konzept von Anand Mourouguessin  

Dieses Konzept gehört zu den ausgereifteren Varianten. Anand implementiert diverse Grund-Interfaces, etwa für die Uhr, Benacvhrichtigungen, Wetter, Musik und GPS. Dabei hält er sich an aktuelle Designtrends, was dem Konzept einen stylishen, zeitgemäßen Touch verleiht. Besonders das starke Weichzeichnen im Hintergrund scheint sich dieser Tage mehr und mehr durchzusetzen. Hingegen verzichtet Anand weitgehend auf Text und hält das Interface auf diese Weise extrem übersichtlich.

ui-Concept-by-anand-mourouguessin

Spotify – Android Wear App von Rico Monteiro

Wenn alles läuft, wie man sich das landläufig so vorstellt, wird es zumindest jede populäre App auch auf Android Wear schaffen. Der Designer dieses Konzepts geht bei Spotify offenbar sicher davon aus. Seine spekulative Gestaltung überzeugt. Die runde UI passt perfekt zu Musik-Playern, das Design ist besser als man es bislang von den Spotify-Apps kennt. Die geringe Displaygröße zwingt zu weiteren Vereinfachungen, die jedoch nicht zu einer Verschlechterung, sondern eher zu einer Verbesserung der UX führen. Offenbar ist Flat Design nur der Anfang.

spotify---android-wear-app

App-Konzept für Android Wear von Michal Galubinski / Thoke Design

Dieses Design beschäftigt sich mit den grundlegenden Funktionalitäten, die die UI eines Android Wear getriebenen Gerätes leisten muss. Besonders konzentriert man sich hier auf die Umsetzung ein- und ausgehender Nachrichten, Sprachsteuerung, Navigation und Suchfunktionalitäten.

application-concept-for-android-wear

Kostenlose Ressourcen

Android Wear Scene 

android-wear-scene

Erstellt von:  Alexander Obenauer
Features:  PSD-Template
Lizenz: Kostenlos für persönliche Projekte nutzbar

Android Wear

android-wear

Erstellt von:  Alexander Obenauer
Features:  PSD-Template
Lizenz: Kostenlos für persönliche Projekte nutzbar

Google Watch

google-watch

Erstellt von:  Regy Perlera
Features:  PSD-Template
Lizenz: Kostenlos für persönliche Projekte nutzbar

Android Wear Template

android-wear-template

Erstellt von:  JC Ferraris
Features: PSD-Template
Lizenz: Kostenlos für persönliche Projekte nutzbar

iWatch

iwatch

Erstellt von:  Alex Cican
Features: 1 HD PSD-Template
Lizenz: Kostenlos für persönliche Projekte nutzbar

Moto 360

moto-360

Erstellt von:  deeepu
Features:  2 Versionen im PSD-Template
Lizenz: Kostenlos für persönliche Projekte nutzbar

Google Watch AEP

google-watch-aep

Erstellt von:   Christoph Fahlbusch
Features:
3 Kompositionen
Lizenz:  Frei verwendbar für persönliche und kommerzielle Projekte

Moto 360 Mockup

moto-360-mockup

Erstellt von:  Mikael Eidenberg
Features: PSD-Template
Lizenz: frei nutzbar, Urhebernennung erwünscht, aber nicht verpflichtend

Android Wear UI

android-wear-ui

Erstellt von: Taylor Ling
Features: 2 Mockups
Lizenz: Kostenlos für persönliche Projekte nutzbar

Zu guter Letzt: Was hältst du von diesem Konzept einer einfachen Uhr, die sich bei Bedarf in eine Benachrichtigungszentrale verwandelt? Das Konzept basiert, wie du sicher bereits bemerkt hast, ebenfalls auf einem unserer freien Templates, nämlich dem von JC Ferraris.

android_wear_-_clock_app_design_ramotion

(Der Beitrag wurde zuletzt im April 2019 um tote Links bereinigt.)

Kategorien
E-Business SEO & Online-Marketing

Online-Marketing-Basics #2: Drei Gründe, warum die eigene Website höchste Priorität haben sollte

Wie bereits im ersten Teil der Serie angedeutet, ist die eigene Website Dreh- und Angelpunkt der meisten erfolgreichen Online-Marketing-Strategien. Schließlich ist es das Ziel der Maßnahmen, Traffic (= Besucherströme) auf die Website zu lenken. Eine Facebook- Unternehmensseite oder ähnliche Instrumente können sie nicht ersetzen. Dafür gibt es vor allem drei schlagkräftige Argumente. Welche das sind und wie Sie Ihre Seite aufbauen sollten, erfahren Sie in diesem Teil der Serie.

surf-107865_640

Ich möchte gar nicht abstreiten, dass es auch erfolgreiche Beispiele ohne eigene Website geben kann. Vor allem die Möglichkeiten von Facebook als größtes soziales Netzwerk haben sich in den vergangenen Jahren deutlich erweitert. Allerdings ist ein solches Vorgehen zu einem hohen Grad branchenabhängig. Nicht jede Branche eignet sich für Vermarktung via Facebook und Co. Und selbst bei passenden Branchen existieren schwerwiegende Nachteile, die es abzuwägen gilt.

Um das ganze an einem konkreten Beispiel aufzuhängen: Die deutsche Ausgabe des Lifestyle-Männermagazins FHM, stampfte im Jahr 2010 die eigene Website ein und verließ sich zu 100 Prozent auf einen Facebook-Auftritt. Von der Domain wurde nur noch auf die Unternehmensseite des sozialen Netzwerks umgeleitet. Nach rund 1 Jahr machte der Verlag diesen Schritt wieder rückgängig. Das war vermutlich mit einem hohen Kostenaufwand verbunden. Die Gründe wurden – meines Wissens nach – nicht öffentlich kommuniziert. Es liegt jedoch auf der Hand, dass die Vorteile (Einsparungen bei Hosting, Programmieraufwand etc.) die folgenden Nachteile nicht ausgleichen konnten.

1. Abhängigkeit

lock-218505_640

Verzichtet man auf eine eigene Website und setzt stattdessen im Online-Marketing hauptsächlich auf einen Auftritt bei einem sozialen Netzwerk, so begibt man sich in starke Abhängigkeit. Wenn das soziale Netzwerk will, werden morgen die allgemeinen Geschäftsbedingungen geändert. Will man diese nicht akzeptieren, muss man das Netzwerk mit seiner Unternehmensseite verlassen und fängt mit seiner Website wieder bei Null an. Zudem verliert man alle (Kunden-)Daten, denn diese sind beim sozialen Netzwerk gespeichert und nicht in der eigenen Hand.

Die Abhängigkeit reicht aber noch weiter: Man ist beim Design extrem eingeschränkt, obwohl es für Unternehmensseiten etc. mehr Möglichkeiten gibt. Zudem kann das soziale Netzwerk jederzeit das Design nach eigenen Vorstellungen anpassen. Um beim Beispiel von Facebook zu bleiben, wurde das bei der Umstellung auf die neue Chronik besonders deutlich. Klar ist, dass für das soziale Netzwerk nicht die Interessen des Unternehmensseiten-Betreibers im Vordergrund stehen, sondern die eigenen. Facebook und Co. stellen sich nicht die Frage: „Wie kann der Mensch hinter der Unternehmensseite am meisten herausholen?“ Sondern: „Wie können wir am meisten aus dem sozialen Netzwerk herausholen?“

Die nächste Gefahr mag derzeit beim Social-Media-Riesen Facebook oder auch beim Google-Ableger Google+ nicht bedrohlich erscheinen, aber die Frage muss man sich dennoch stellen: Was passiert, wenn dieser Dienst morgen eingestellt wird? Alle Daten sind verloren und man muss wieder bei Null anfangen. Das Gleiche gilt übrigens für Hosting-Anbieter mit besonders nutzerfreundlichen Website-Baukästen. Wenn diese ihren Dienst einstellen, weil sie in Konkurs gehen, ist alles weg. Diese Systeme können Sie nicht einfach abspeichern und auf einem x-beliebigen Server wieder aufbauen. Daher sollten Sie auf einen klassischen Hosting-Anbieter setzen und die eigene Website so aufbauen, dass Sie sie abspeichern können und auf dem nächsten Server wieder installieren können. Ob Sie dabei auf ein selbst gebautes Framework setzen oder ein modernes CMS ist bedarfsabhängig und/oder Geschmacksache. Hauptsache ein möglicher Übergang funktioniert reibungslos.

2. Datensicherheit und Datenhoheit

eye-319668_640

Verzichten Sie auf eine eigene Website, zum Beispiel zugunsten einer Facebook-Seite, teilen Sie nicht nur alle Daten mit dem sozialen Netzwerk, sondern sämtliche Kundendaten liegen in dessen Hand. Das Netzwerk teilt Ihnen genau das mit, was es Ihnen mitteilen will. Außerdem: Ob es sich dabei an die geltenden Gesetze Ihres Landes hält, entzieht sich zwar Ihrer Verantwortung, aber vielleicht schrecken die Datenskandale potenzielle Kunden ab. Nur als eigenständiger Seitenbetreiber können Sie sichergehen, dass die Gesetze für Ihre Kunden eingehalten werden. Zudem bleiben die Daten fest in Ihrer Hand. Sie können sie auswerten, behalten, interpretieren und all das messen, was Sie wirklich interessiert.

Ein weiterer Nachteil, der damit in Zusammenhang steht: Geschäfte über die Plattform eines sozialen Netzwerks abschließen zu wollen, ist zwar möglich geworden, allerdings könnte auch das potenzielle Kunden abschrecken. Bislang eroberte F-Commerce (noch) nicht die große Masse im Internet. Etablierte Schnittstellen vertrauenswürdiger Bezahlmethoden wie PayPal oder Kreditkarten auf der eigenen Seite, wirken auf die KundInnen (derzeit zumindest noch) deutlich vertrauenswürdiger. Vergessen Sie außerdem nicht: Ihre gesamte Zielgruppe ist mit großer Wahrscheinlichkeit im Internet unterwegs, aber nicht alle nutzen ein bestimmtes soziales Netzwerk.

3. Gestaltung und Conversion-Rate

colored-pencils-179151_640

Dieser Punkt ist nicht nur ein Argument für eine eigene Website. Er ist zudem – und auch vor allem – ein Argument dafür, warum die eigene Website immer im Online-Marketing höchste Priorität genießen sollte. Denn nur, wenn diese entsprechend aufgebaut und gepflegt wird, bringt sie als Dreh- und Angelpunkt den gewünschten Erfolg ein.

Dass man nur auf der eigenen Website die absolute Gestaltungshoheit über die eigene Internetpräsenz hat, ist bereits angedeutet worden. Doch mit einem eigenen Design und einer eigenen Website ist es nicht getan. Bedenken Sie: Ziel aller Maßnahmen auf den Online-Marketing-Kanälen (egal ob Suchmaschinenoptimierung, Banner-Werbung, Social Media Marketing etc.)  ist es, möglichst große Besucherströme auf Ihre Seite zu lenken. Davon haben Sie aber nur etwas, wenn möglichst viele dieser Seitenbesucher auch das tun, was Sie wollen. Das könnte ein Produkteinkauf, ein Newslettereintrag, eine Kontaktaufnahme etc. sein. Diese Erfolgsquote nennt man dann in der Internet-Fachsprache Conversion-Rate.

Das heißt: Damit Ihre Website funktioniert muss Sie 1. dazu in der Lage sein Besucherströme für bestimmte Marketing-Kanäle zu generieren (der meiste Traffic kommt im deutschsprachigen Raum über die Suchmaschine Google) und 2. eine hohe Conversion-Rate erzielen. Diese beiden Eigenschaften geben Kriterien für den Website-Aufbau vor.

Wie sollte eine erfolgsversprechende Website aufgebaut sein?

Die genannten Eigenschaften geben dadurch bereits zwei Zielgruppen vor, die ich mit meiner Website ansprechen muss: Eine Maschine – nämlich die Suchmaschine Google – und echte Menschen.

Um die Suchmaschine Google anzusprechen, muss man als erstes darauf achten, dass man die Website auf die gewünschten Suchbegriffe hin ausrichtet. Wie oft welche Suchbegriffe in einer bestimmten Region gesucht werden, lässt sich über verschiedene Tools herausfinden. Allen voran bietet Google diese Funktion mit dem kostenlosen AdWords-Keyword-Planer selbst an.

Danach gilt es die Inhalte so zu erstellen, dass Google mitgeteilt wird: Genau diese Suchbegriffe sind die wichtigsten auf meiner Website. Das tut man, indem man in den Inhalten selbst das Gewicht darauf legt, sowie Seitentitel, Description, Url, Überschriften und Meta-Informationen darauf ausrichtet. (Ein Link zu einem weiterführenden Artikel folgt am Ende des Beitrags.)

Um die menschlichen Nutzer mit der Seite anzusprechen und die Besucher in Kunden zu verwandeln, braucht man ein ansprechendes Design, hohe Benutzerfreundlichkeit bei allen Seitenfunktionen und man sollte das Bedürfnis der Nutzer direkt ansprechen. Um das an einem Beispiel zu verdeutlichen: Wenn ein Nutzer auf eine Werbung für Herrenlederstiefel klickt, wird er vermutlich auch genau das suchen. Landet er dagegen auf der Startseite eines Online-Shops, wo er nur Pumps und Flip-Flops sieht, wird er vermuten, hier falsch zu sein und die Seite wieder verlassen.

Hat man dafür gesorgt, dass man dem Nutzer den Inhalt zu seinem Bedürfnis liefert, hängt nun viel von der Aufbereitung des Inhalts ab. Dieser sollte ihm eine Lösung für sein Bedürfnis bieten und ansprechend sein. (Weiterführender Links zur Aufbereitung und Gestaltung der Inhalte folgen am Ende des Beitrags.)

Wie geht es weiter in der Online-Marketing-Serie?

Der nächste Teil der Serie beschäftigt sich mit einer Einführung ins Social-Media-Marketing. Es geht darum, die wichtigsten Social-Media-Kanäle vorzustellen, welche Mittel sich zu welchem Zweck eignen und wo ich welche Zielgruppe finde. Zudem werden Grundregeln der Kommunikation und Interaktion auf sozialen Netzwerken, in Foren etc. vorgestellt.

Nützliche Links zum Beitrag

Online-Marketing-Basics Teil 1: Die Werkzeuge des Online-Marketing im Überblick

Mehr Erfolg im Marketing: Fünf Tipps für Texte, die verkaufen

Webshops: Klassische Conversion-Killer und Conversion-Booster im Überblick

Onsite-Seo-Basics: Effekive Sofortmaßnahmen für jedermann

Der Google-Adwords Keyword-Planer

 

Kategorien
Inspiration Showcases

Steampunk im 3D-Design: 40 faszinierende Zeitreisen

Heute haben wir ein gerüttelt Maß an Inspiration für jeden 3D-Designer – ach, was sage ich – einfach jeden Designer da draußen. Wir stellten 40 außergewöhnliche Steampunk-Werke zusammen, die Sie auf eine Zeitreise zurück in die Kindheit senden werden. Sie werden sich erinnert fühlen an die Tage, an denen Sie wünschten, Sie wären Han Solo, Darth Vader oder – wer weiß – Chewbacca. Damals wünschte man sich ja Haare an verschiedene Körperteile. Heute wäre man froh, man hätte mehr davon auf dem Kopf und weniger an anderen Stellen. Die nachfolgende Sammlung ist ein wunderbarer Beweis dafür, wie viel Fantasie in einem einzelnen Designer stecken kann. Bewundernswert…

Steampunk: Literarische Ursprünge

Steampunk hat viele Väter. Angefangen hat alles mit Jules Verne, später dann H.G. Wells. Beide schufen moderne Welten, dessen Kraft auf Maschinen, häufig dampfgetrieben, beruhte. Prägend für den Begriff an sich dürfte dann der amerikanische Science-Fiction-Autor Kevin Wayne Jeter gewesen sein, der 1987 in einem Brief an das Sci-Fi-Magazin “Locus” schrieb:

“Personally, I think Victorian fantasies are going to be the next big thing, as long as we can come up with a fitting collective term for Powers, Blaylock and myself. Something based on a appropriate technology of that era; like “ steampunks” perhaps…”.

Mit dem Begriff Steampunks wollte er sich und seine Weggefährten, die mehr auf Technik im Retrostil standen, von den eher futuristisch orientierten Cyberpunks abgrenzen.

Neben dieser griffigen, aber rein begrifflichen Prägung sind es dennoch insbesondere Jules Verne, H.G Wells und Mary Shelley, die das Genre bereits im 19. Jahrhundert aus der Taufe hoben. "Metropolis", entstanden in 1927, der berühmte Stummfilm von Fritz Lang darf wohl als erster filmischer Steampunk-Vertreter gewertet werden. Steampunk ist modern, dabei aber durchaus alt und irgendwie mystisch. In jüngerer Zeit gab es einen weiteren beeindruckenden, filmischen Vertreter des Genres, nämlich "Wild, Wild West" mit Will Smith.

Steampunk ist geprägt von Nebel, ungewöhnlicher Belichtung, vielen (Dampf)Maschinen, apokalyptischen Lokationen, Krieg, Weltraum-Eroberungen, riskanten Experimenten – das Genre lebt in jeder Kunstform.

40 Steampunks in Aktion

Star Wars Steampunk

Künstler(in): Nikolai Miroshnishenko

756_large
© Nikolai Miroshnishenko

Steampunk Cockroach

Künstler(in): Skif_Nomad

829_large
© Skif_Nomad

The War Machine

Künstler(in): Ted Terranova

3573_1208056978_large
© Ted Terranova

Steampunk Brawler

Künstler(in): Paul Large

731_large
© Paul Large

Steampunk

Künstler(in): Laurent Pierlot

16324_1231454425_large
© Laurent Pierlot

R2D2 Steampunk

Künstler(in): Denis Anfilov

699_large
© Denis Anfilov

Stream Flower

Künstler(in): Denis Anfilov

241_large
© Denis Anfilov

Automaton

Künstler(in): Kazuhiko Nakamura

152892_1138441523
© Kazuhiko Nakamura

Rhinoceros

Künstler(in): Kazuhiko Nakamura

152892_1286789450_large
© Kazuhiko Nakamura

ZYGOSIS

Künstler(in): Kazuhiko Nakamura

152892_1358586859_large
© Kazuhiko Nakamura

Atoma

Künstler(in): Kazuhiko Nakamura

152892_1316921179_large
© Kazuhiko Nakamura

Requiem for Industry

Künstler(in): Kazuhiko Nakamura

Kazuhiko_Nakamura
© Kazuhiko Nakamura

…dry dock…

Künstler(in): Adam Tredowski

301527_1201611471_medium
© Adam Tredowski

Steampunk iPod

Künstler(in): Oscar Blanco

Steampunk_iPod_by_otas32_by_3D_Asuarus
© Oscar Blanco

Hall of Miscarried Runagrounds

Künstler(in): Ryan Moeck

SULKY_Interior_01
© Ryan Moeck

Johnson‘s Depot

Künstler(in): Ryan Moeck

Interface_03j
© Ryan Moeck

Steampunk Cathedral

Künstler(in): RedHotCG

570_large
© RedHotCG

Steampunk Desk

Künstler(in): Michael Grote

3339
© Michael Grote

Steamnocchio

Künstler(in): Fabricio Moraes

16918_1231173022_large
© Fabricio Moraes

Steampunk MINI Countryman

Künstler(in): Carlex Design

13146_steampunk
© Carlex Design

Consumed

Künstler(in): Toni Bratincevic

286296
© Toni Bratincevic

Fall

Künstler(in): Toni Bratincevic

fall_1680
© Toni Bratincevic

Begemot

Künstler(in): Aleksandr Kuskov

343837_1305058927_large
© Aleksandr Kuskov

Character

Künstler(in): Aleksandr Kuskov

343837_1316940475_large
© Aleksandr Kuskov

Gold Fish

Künstler(in): Aleksandr Kuskov

343837_1368053029_large
© Aleksandr Kuskov

Coca Cola Olympic Games

Künstler(in): Aleksandr Kuskov

343837_1373351101_large
© Aleksandr Kuskov

ShokeR

Künstler(in): Aleksandr Kuskov

343837_1306014971_large
© Aleksandr Kuskov

Chopper Steampunk

Künstler(in): Aci-Roy

637_large
© Aci-Roy

Gemini

Künstler(in): Dmitriy Filippov

330_large
© Dmitriy Filippov

The Time Machine

Künstler(in): Dmitriy Filippov

544_max
© Dmitriy Filippov

Steampunk Desk

Künstler(in): Leticia Sartor

840_large
© Leticia Sartor

Equilibrium

Künstler(in): Daniel Arnold-Mist

secondwavesmall
© Daniel Arnold-Mist

Boulderdash

Künstler(in): Pascal Blanche

59_1103404781_medium
© Pascal Blanche

Steampunk

Künstler(in): Vladimir Petkovic

282_max
© Vladimir Petkovic

Skull

Künstler(in): widi5006

361_max
© widi5006

Alice’s Adventures in Steamland

Künstler(in): Guillaume Dubois

16131_1231966872_large
© Guillaume Dubois

Last Travel

Künstler(in): Laurent Antoine

60815_1108453796
© Laurent Antoine

Music Engine

Künstler(in): YongLiang Bao

280383_1186368912_medium
© YongLiang Bao

Spider Robot

Künstler(in): Adrien Lambert

299369_1220287798_large
© Adrien Lambert

Little Elephant

Künstler(in): Gherardo Zurla

roboel
© Gherardo Zurla

Die gezeigten Werke wurden kuratiert von Victoria Samarinaite, CGTrader

(dpe)

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Photoshop

Die 29 besten HTML/PSD-Themes & UI-Elemente des Sommers 2013

Auch wenn Sie nicht mit WordPress arbeiten, brauchen Sie designtechnisch nicht unter einem Stein zu leben oder sich an anderen Orten zu verstecken. Wir haben folgend eine Liste zusammengestellt, die Themes, Vorlagen und Elemente enthält, mit denen Sie sich zum einen die Arbeit erleichtern und zum anderen einen Schub Inspiration holen können. Unsere Sammslung enthält Themes auf Basis von HTML/CSS, aber auch mit Photoshop umgesetzte Entwürfe und – nicht zuletzt – etliche fertige UI-Elemente und ganze Sets für Web- und mobiles Development. Schauen Sie rein. Da ist sicherlich für jeden was dabei…

A. HTML/CSS-Themes und Templates

 

Strongly Typed: Responsive HTML5 Site Template.

Erstellt von: HTML5 UP
Features: Basiert auf SKELJS, einem leichtgewichtigen Framework zur Erstellung responsiver Themes

strongly typed a responsive html5 site template

Infinite: This is a Small HTML/CSS Template for a Design Blog.

Erstellt von: Nathan Brown
Features: Theme im responsiven Grid-Layout mit schicken Effekten

Infinite – A Design Blog Template HTML/CSS

Megacorp: Black and White Flat Business Theme.

Erstellt von: HTML5Templates.com
Features: Minimalistisches Theme mit verschiedenen Layouts, sowie Versionen für Desktop, Tablet und andere mobile Geräte

Megacorp HTML Theme.

Photoartwork: This Template is Written Entirely in HTML5 and CSS3.

Erstellt von: css3templates.co.uk
Features: Simples, farb-orientiertes Template mit fester Breite

PHOTOARTWORK HTML Theme.

zParalexy: Responsive Theme with Portfolio Page Made in HTML5 and CSS3.

Erstellt von: Zerotheme.com
Features: Flat Design, responsiv, Seiten-Vorlagen

zParalexy – Free Responsive Html5 Theme

Heavyindustry: Industry Inspiration Red Theme.

Erstellt von: HTML5emplates.com
Features: Minimalistisches Theme mit verschiedenen Layouts, sowie Versionen für Desktop, Tablet und andere mobile Geräte

heavyindustry HTML5 template

Zboommusic: Music Artist Inspiration Responsive  Black Theme.

Erstellt von: Zerotheme.com
Features: Responsiv, dunkel, flat, mit verschiedenen Seitenentwürfen

zBoomMusic – Free Responsive Html5 Theme

CSS3_gallery_garden: Simple Two Column Fixed Width Template.

Erstellt von: css3templates.co.uk
Features: Minimalistisches Theme mit fester Breite und eingebautem Accordeon-Slider

CSS3_gallery_garden template

Parallelism: Responsive Portfolio Site Template.

Erstellt von: HTML5up
Features: Portfolio Template mit horizontalem Scroller und Lightbox

parallelism  a responsive portfolio site template

B. PSD Website-Templates

Designer haben häufig ein gutes Auge für die Bedürfnisse des Kunden. So ist es nicht ungewöhnlich, dass sich Entwickler gern an Designentwürfen orientieren. Diese findet man nicht selten in der Form von Photoshop-Dateien. Und genau das finden Sie hier:

.Rufio: Multipurpose Responsive Template.

Erstellt von: Rufio
Features: Theme im Flat Design, das sowohl als HTML, wie auch als PSD vorliegt

Rufio Free Homepage PSD

Classic: Clean & Minimal Blog Design Template.

Erstellt von: Designer First
Features: Minimalistisches PSD-Design mit mehreren Seiten

Clean & Minimal Blog Design

Revenant: Blue and White Color Combination with Clean Grid to Display Your Products.

Erstellt von: premiumcoding.com
Features: PSD-Template für Unternehmens-Websites; Flat Design

Template home page

E-commerce: Template for Online Bookstore.

Erstellt von: cssauthor.com
Features: PSD-Template mit mehreren Seiten, passend hauptsächlich im Ecommerce-Umfeld

E-commerce Template PSD

Portfolio: Template for the 3 Column Portfolio Page.

Erstellt von: premiumcoding.com
Features: Portfolio-Template im Flat Design mit dezenter Farbgebung

Portfolio page in 3 columns

Illustrate: Flat, Black and White Theme for Designers.

Erstellt von: blazrobar.com
Features: Grid-basiertes Flat Design mit stark zurückgenommenem Farbschema

Free Flat Design PSD Template

Webfolio: Minimal Portfolio Template with Mobile Version.

Erstellt von: CSS author
Features: Portfolio-Layout im Flat Design

Minimal Portfolio Template

C. UI-Elemente und komplette Sets

UI-Elemente kann man immer gebrauchen. Vor allem im Bereich der mobilen Entwicklung sind die Sets zu den einzelnen Plattformen von großem Wert. Aber auch ansonsten schadet ein Blick über den eigenen Horizont nie, und wenn es nur zu Inspirationszwecken dient.

Crystal: Free Mobile Application UI Design in PSD.

Erstellt von: CSS author
Features: Basis-Set mit den notwendigsten Elementen einer mobilen App

Mobile Application UI

Nexus 4 GUI: Android UI Design Kit PSD to Version 4.2.2.

Erstellt von: Chirag Dave
Features: 768*1280 UI-Set, unter anderem für Nexus 4 geeignet 

Nexus 4 GUI psd

Window 8 Metro: 100+ Awesome Window 8 Metro Style Icon and  App GUI Kit.

Erstellt von: Redesign Case
Features: Metro UI als PSD in 300 dpi

Window8 Metro GUI

Metro Vibes: Modern Metro UI Kit That Will Help You Shape Your Website.

Erstellt von: pixelkit.com
Features: UI im Stile der Windows 8 Modern UI

Metro Vibes UI Kit

iOS 7 GUI: Photoshop Template of GUI Elements Found in the Beta 1 Release of iOS 7.

Erstellt von: teehanlax.com
Features: Schon legendäre UI-Sammlung von TeehanLax, jetzt auch für iOS 7

iOS 7 GUI PSD

Flat GUI: Amazing Set with More Than 500 Elements Totally Editable Files

Erstellt von: DesignShock.com
Features: Mehr als 500 Elemente und 100 Icons im Google-Style

Flat GUI PSD

iOS 7 UI Kit: Start Designing iOS 7 Apps Today with This Comprehensive GUI Kit

Erstellt von: MediaLoot
Features: Minimalistisches, sauber wirkendes Interface mit einem Grund-Set voll bearbeitbarer Elemente

Free iOS 7 UI Kit

Metro UI Kit: Metro Style Elements Collection

Erstellt von: tempees.com
Features: Farbenfrohe GUI im vormals Metro genannten Look von Windows 8 

Metro UI kit

Vertical Infinity: Mega Flat Style UI Kit in PSD

Erstellt von: CSS author
Features: Retina-optimiertes, plakatives Flat Interface mit unterschiedlichen Varianten jeden Elementes

Vertical Infinity

Minimal GUI Set: Huge Plastic GUI Pack with More Than a Thousand Elements

Erstellt von: wpthemegenerator.com
Features: Minimalistische GUI mit mehr als tausend Elementen, voll bearbeitbar und kommerziell frei nutzbar

Minimal GUI Set

Transparent UI: Full PSD Free Transparent Layered UI Kit

Erstellt von: blugraphic.com
Features: Transparentes Interface im beliebten Glossy-Look

Transparent Ui Kit (Psd)

Flat UI Kit: Red  and Blue Flat and curvy UI Kit.

Erstellt von: Zachary VanDeHey
Features: Schwungvolles, minimalistisches Interface-Konzept mit starken Kontrasten

Flat Ui Kit

Ecommerce Flat: PSD Ecommerce UI Kit with Flat Design.

Erstellt von: graphicsfuel.com
Features: Alle notwendigen Elemente für eine Ecommerce-Anwendung im Flat Design

Ecommerce Flat UI Kit

Die Autoren

Die Shock Family ist ein Team von Web-Enthusiasten, Designern und Entwicklern, die sich der Erstellung aller Arten von nützlichen Ressourcen rund um das Web widmet. Wer sich offenen Auges im Netz bewegt, ist mit Sicherheit schon über eines oder mehrere Projekte der Shock Family gestolpert, als da wären themeshock, eine Sammlung hochwertiger WordPress-Themes und nützlicher Freebies, iconshock, eine der größten Icon-Sammlungen mit mehr als einer Million Piktogramme und WPthemegenerator, ein Online-Tool zur Erstellung von WordPress- und XTML-Themes.

(dpe)

Kategorien
(Kostenlose) Services Essentials Inspiration Showcases

Instant Inspiration: Niice.co, die Suchmaschine für Designer beflügelt die Kreativität

Hat die Muse mal wieder die Koffer gepackt und ist ohne ein weiteres Wort zurück zu den Eltern gezogen? War da gerade noch eine Idee für das nächste Webprojekt? Wo ist sie bloß hin? Wenn mal wieder nichts läuft außer der Nase und der zündende Gedankenfunke einfach nicht kommt, dann – spätestens dann – sollten Sie mal bei Niice.co vorbei schauen. Diese neue Suchmaschine stellt Ihnen Inspirationspakete auf der Basis Ihres konkreten Bedarfs zusammen.

niice-homepage

Inspiration sparks Creativity, des Designers wichtigste Ressource

Designer sind stets auf der Suche nach Inspiration. Kreativität fließt nach einigen Berufsjahren nicht mehr so im Überfluss, wie man sich das vorstellen würde. Enge Deadlines und zu viele Projekte in zu wenig Zeit tun ihr übriges. Creative Block, der Todfeind des Kreativen, lauert stets in der Nähe und wartet auf seine Chance. Einer der Top-Tipps gegen Creative Block, den man in jeder populärpsychologischen Abhandlung zum Thema findet, lautet: Lass dich inspirieren. Leg dir eine riesige Bookmark-Sammlung an und wenn dir mal nichts einfällt, dann schau als erstes dort hinein.

Mit Dr. Web, dem Smashing Magazine und Noupe verfügen unsere Leserinnen und Leser schon mal über eine ordentliche Grundausstattung, auch wenn es um Inspiration geht. Immer wieder veröffentlichen wir themenbezogene Pakete, die die eigene Kreativität zünden sollen.

Weitere Online-Dienste, insbesondere Community-Projekte wie Dribbble, fokussieren das Thema Inspiration, wobei ein weiterer interessanter Aspekt Dribbbles darin besteht, dass Designer sich gegenseitig Feedback zu den Entwürfen geben. Da Designer vielfach Einzelkämpfer sind, ist die Möglichkeit zu dieser Art der Rückkopplung mit Gleichgesinnten von unschätzbarem Wert.

Niice.co: Inspirationsmotor auf drei Pötten

Niice.co, erdacht von den nord-irischen Kreativen Chris Armstrong und Pete Hawkins, bündelt mehrere dieser Quellen und integriert sie unter einer einheitlichen Oberfläche. Zur Zeit verwendet Niice.co die Dienste Behance, Dribbble und Designspiration. Weitere Quellen sollen sukzessive eingebunden werden.

niice-source-switch

Niice.co ist laut Armstrong und Hawkins schon deshalb erforderlich, weil man zwar bei Google auch nach Bildern suchen kann, die Suchmaschine aus Mountain View jedoch nicht über einen „Guter Geschmack“-Filter verfügt.

niice-search-packaging

Optisch erinnert Niice.com entfernt an Pinterest. Die Suchergebnisse werden rein als über den gesamten Bildschirm gekachelte Bilder angezeigt. Hovert man über ein Suchergebnis, erscheint der Hinweis, aus welchem Dienste das Bild stammt. Ein Klick auf ein Suchergebnis führt ohne Umschweife zur urspünglichen Quelle.

niice-overlays-source

Recht schnell wird der Nutzen deutlich, den Niice.co dem suchenden Designer bietet. Eine Suche nach etwa „Packaging“ listet unmittelbar ein große Zahl wirklich gelungener Verpackungsdesigns auf, entsprechendes darf bei der Suche nach „Logo“ erwartet werden. Je mehr Quellen Armstrong verfügbar macht, desto unverzichtbarer wird das Werkzeug im Designer-Alltag werden.

niice-search-logo

Nicht, dass wir uns missverstehen, Niice.co ist keine Suchmaschine für Design-Ressourcen, wie es etwa Freepik ist. Niice.co dient rein zum Ankurbeln der eigenen Kreativität, indem man schaut, was andere zum gleichen Thema bereits geleistet haben.

Niice.co hält, was der Name verspricht. Es ist auf jeden Fall schön anzusehen und bringt selbst bei ungewöhnlichen Suchbegriffen wie „poop„, zu deutsch: „Kacke“, tadellose und uneingeschränkt vorzeigbare Ergebnisse;-)

niice-poop-search

In privater Beta befindet sich ein Feature, mit dessen Hilfe sich sog. „Moodboards“ anlegen lassen. Hierunter muss man sich wohl von Usern kuratierte Suchergebnisse vorstellen, die sich dann mit anderen teilen lassen. Erinnert mich, ohne es bislang gesehen zu haben, an So.cl und natürlich irgendwo an Pinterest. Ich habe mich mal unter „Request Invite“ eingetragen…

Der Dienst ist bei den Net Awards des Design-Magazins .net für eine Auszeichnung als „Side Project Of The Year 2013“ nominiert. Das Voting ist beendet, die Gewinner werden allerdings erst am 31. Mai 2013 bekannt gegeben. Ich drücke Niice.co die Daumen.

Links zum Beitrag

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Inspiration Photoshop Showcases

40 frische Logo-Ideen für Gestalter (plus Tipps zur Umsetzung)

Ein Logo muss auf den ersten Blick überzeugen und soll in Erinnerung bleiben. Perfekt wird es dank der kleinen Besonderheiten, die es von der Masse der einfachen Logos abheben. Wir haben zu Ihrer Inspiration 40 pixel-frische Logo-Ideen gesammelt, auf dass Ihr nächstes Logo noch beeindruckender wird. Als kleines Extra liefern wir für Photoshopper noch den einen oder anderen Tipp zur Gestaltung mit.

BigCat

Autor: RCorrie

© RCorrie

Mit Verläufen gestalten

01 Grundformen anlegen

Das Logo BigCat besteht aus einzelnen Dreiecken mit Verläufen, die ein größeres Bild, einen stilisierten Löwen ergeben. Um diese Technik zu verstehen, bietet es sich an, zunächst nur zwei einfache Buchstaben mit Dreiecken nachzubilden. Schreiben Sie mit dem Textwerkzeug die Buchstaben vor. Erstellen Sie eine neue Ebene, etwa über Umschalt+Strg+N, und wählen Sie mit dem Polygon-Lasso-Werkzeug Dreiecke passend zur Buchstabenform aus.

Halten Sie dabei die Strg-Taste gedrückt, um gerade Linien ziehen zu können. Ist die Auswahl geschlossen und laufen die „Ameisen“, so füllen Sie die Fläche über Bearbeiten > Fläche füllen mit einem Grauton. Mit gleicher Technik formen Sie ganz grob die wichtigsten Bereiche der Buchstaben nach. Die einzelnen Dreiecke müssen allerdings auf jeweils eigenen Ebenen liegen.

02 Verläufe gestalten

Die Dreiecke sollen nun Verläufe erhalten. Bestimmen Sie die Farben über die Vorder- und Hintergrundfarbe, sowie den Farbwähler in der Werkzeugleiste und gehen Sie im Menü auf Ebene > Ebenenstil > Verlaufsüberlagerung. Über den Winkel regeln Sie die Richtung des Verlaufes. So erhalten alle Dreiecke Verläufe, mit etwas angepassten Farbtönen und Ausrichtungen. Ziel ist es, einen leichten 3D-Effekt umzusetzen. Auch der Hintergrund könnte einen Verlauf erhalten und der Name des Unternehmens geschrieben werden.

Inspiriert von Kite String Studio

Motorcycle

Autor: LookCreative

© LookCreative

Large Pizza

Autor: cpuentes23

© cpuentes23

The Key

Autor: johnny

© johnny

Digital Apple

Autor: LogoOpenStock

© LogoOpenStock

Tomatoboom

Autor: Godblesslogo

© Godblesslogo

syberian

Autor: linzafeldman

© linzafeldman

Social Link

Autor: andyme

© andyme

Formen als Grundlage

01 Form erstellen

In einem neuen Dokument, dessen Hintergrund über Bearbeiten > Fläche füllen mit der Farbe #440044 (RGB 68, 0, 68) gefüllt wurde, soll eine Grundform erzeugt werden. Wählen Sie dazu das Eigene-Form-Werkzeug an und gehen Sie in der Optionsleiste neben Form auf den kleinen, schwarzen Pfeil, der zur Auswahlliste für eigene Formen führt. Klicken Sie auf der rechten Seite auf den Pfeil und in der Auswahlliste auf Sprechblasen. Klicken Sie Anfügen und wählen Sie eine der Sprechblasen aus.

Zeichnen Sie die Form ein. Um von einer Form einen Bereich abzuziehen, wählen Sie in der Optionsleiste Vom Pfadbereich subtrahieren (-) an. So können Sie einen Bereich aus der Mitte ausstanzen. Mit dem Pfadauswahl-Werkzeug positionieren Sie die innenliegende Form.

02 Form mit Stil

Kopieren Sie die Ebene über Strg+J. Nach Bearbeiten > Transformieren > Horizontal spiegeln positionieren Sie die Kopie mit dem Verschieben-Werkzeug, gedrückter Strg-Taste und den Pfeiltasten zur rechten Seite. Weitere Formen sollen entstehen. Damit diese etwas interessanter wirken, aktivieren Sie die Ebenenstile > Verlaufsüberlagerung und Schlagschatten. Bei dem Schlagschatten regeln Sie den Abstand und die Größe, bei der Verlaufsüberlagerung die Farben über die Vorder- und Hintergrundfarbe.

Inspiriert von Social Link

Purple rats

Autor: gphoto

© gphoto

Plastic Whale

Autor: Brandberry

© Brandberry

Cloud 9 Design

Autor: drewSG

© drewSG

Coffee Maze

Autor: ancitis

© ancitis

Brain Box

Autor: 7gone

© 7gone

Geodetics symbol

Autor: tass

© tass

artebatey

Autor: Rincon

© Rincon

Match Up

Autor: roblack

© roblack

Dan Killam – smart. forensics.

Autor: Alexander

© Alexander

businesswan

Autor: Donot

© Donot

mail frog

Autor: NancyCarterDesign

© NancyCarterDesign

ModernHills

Autor: Jemza

© Jemza

Cat men

Autor: ragerabbit

© ragerabbit

Shoesfinder

Autor: MDS

© MDS

Ast design

Autor: eezo

© eezo

Cruncher

Autor: helvetic brands

© helvetic brands

reality media

Autor: nydesign

© nydesign

Eight

Autor: mariagroenlund

© mariagroenlund

TechBot

Autor: alx

© alx

Diamond falls

Autor: Manu

© Manu

TitanInk

Autor: TahiaDesign

© TahiaDesign

Elite

Autor: FairuzZainee

© FairuzZainee

music writer

Autor: razvaniordache

© razvaniordache

Go-ose

Autor: InspiraSign

© InspiraSign

eggsplosion

Autor: alexanderspliid

© alexanderspliid

Ants

Autor: Ecremmoce

© Ecremmoce

Green Source

Autor: revotype

© revotype

Organic Housewives

Autor: srihari

© srihari

Schnittmasken

01 Grundform kopieren

Innerhalb mancher Grundformen sind weitere Formen oder Muster erkennbar. Sehr einfach können Schnittmasken eingesetzt werden, um diesen Effekt zu erreichen. In diesem Beispiel wurde die Grundform des Fisches über Strg+J mehrfach kopiert. Der Ebenenstil > Farbüberlagerung sorgte dafür, dass die Kopien unterschiedliche Farben zeigen. Mit gedrückter Strg-Taste, dem Verschiebenwerkzeug und den Pfeiltasten wurden die Kopien jeweils etwas mehr nach links verschoben.

02 Schnittmasken generieren

Schnittmasken ermöglichen es, dass eine Ebene die Form stellt, eine oder mehrere andere Ebenen die Inhalte. Aktivieren Sie die erste Kopie und gehen Sie im Menü auf Ebene > Schnittmaske erstellen. Aktivieren Sie die Ebene mit der nächsten Kopie und wiederholen Sie diesen Schritt. So erhalten alle Kopien eine Schnittmaske und die ursprüngliche Form wird wieder sichtbar. Eine Abkürzung, um Schnittmasken zu generieren oder wieder zu entfernen: Klicken Sie im Ebenen-Bedienfeld mit gedrückter Alt-Taste auf die Linie der beiden Ebenen.

Inspiriert von Bigcolors

Logotipo UPSIGRANC

Autor: Anuik Graphic Project Studio

© Anuik Graphic Project Studio

Carribean Wine

Autor: Donatas Surgailis

© Donatas Surgailis

Robotiks

Autor: szende

© szende

Snapt

Autor: Fogra

© Fogra

(dpe)

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Inspiration Photoshop Showcases

Mal was anderes: 29 Websites im Wasserfarben-Design

Die Verwendung von grafischen Effekten, die nach Wasserfarben aussehen, ist nicht ungebräuchlich, wenn auch nicht sehr häufig anzutreffen. Auch aus diesem Grunde ist es einfach, mit Websites, die aussehen, wie mit Wasserfarben gemalt, Aufmerksamkeit zu erzielen. Tatsächlich ist es nicht sonderlich schwierig, gezielt Wasserfarben-Grafiken zu erstellen und einzusetzen. In der folgenden Sammlung haben wir einige besonders schöne Beispiele so gestalteter Websites zusammen gestellt.

Die Welt der Wasserfarben | Alle Websites im Überblick:

Die Links zu den hier gezeigten Websites finden Sie auf den jeweiligen Detailseiten zum Screenshot. Innerhalb der Galerie können Sie bequem von Beispiel zu Beispiel navigieren. Dazu klicken Sie entweder schlicht auf die Bilder oder verwenden die Navigationselemente unterhalb des Links zur jeweiligen Website.

Im morgigen Teil 2 dieses Beitrags stellen wir einige Tutorials zusammen, mit deren Hilfe Sie auch Ihrer Website einen Look verpassen können, der den hier gezeigten in nichts nachsteht.

Update: Und hier ist der Tutorial-Beitrag!

Kleine Ergänzung für Kunst-Affine: Wasserfarben verwenden wir hier als Oberbegriff für die verschiedenen Möglichkeiten, mit Wasser zu malen. Bei einigen der hier gezeigten Beispiele könnte man einwenden, diese seien mit reinen Wasserfarben, wie man sie aus dem Farbkasten der Schulzeit nicht zu erstellen gewesen. Das stimmt…

(dpe)

Kategorien
Design UI/UX

Usability-Desaster: Windows 8 ist eine einzige Enttäuschung

Jakob Nielsen wird nicht von jedermann gemocht, gehört jedoch unbestreitbar zu den größten Experten für nutzerfreundliches Design, die wir haben. Sein Werk „Designing Web Usability“ habe ich 1998 am Stück durchgelesen. In der Folgezeit kamen auch immer mal Einwürfe aus Richtung Nielsen, denen ich nicht stets so folgen konnte, aber im Großen und Ganzen macht man keinen Fehler, wenn man Nielsens Urteil zumindest Gehör schenkt. Ganz aktuell beschäftigte sich der Design-Experte mit Windows 8 und kam zu ganz klaren Aussagen.

Windows 8 ist weder für Neulinge, noch für Power-User brauchbar

Die Skepsis ist naheliegend. Auch ich kann mich nicht davon frei sprechen. Als Windows-Nutzer der ersten Stunde erscheint die völlige Abkehr von der bisherigen GUI wenig nachvollziehbar. Sicher, die Tablet-Variante des Redmonder Betriebssystems benötigt eine touch-freundliche Oberfläche, aber ich an meinem herkömmlichen PC doch nicht. Ist alles halb so wild, heißt es, der Desktop ist ja auch noch da. Dann wechselst du halt zwischen Modern UI und Desktop munter hin und her.

Auch Nielsen hielt diese doppelte Herangehensweise wohl spontan nicht für eine so gute Idee und machte daher die Probe aufs Exempel. 12 erfahrene PC-Nutzer lud der Experte in sein Usability-Labor ein. Diese sollten nun mit einigen gängigen Aufgaben konfrontiert werden. Dabei mussten sie sowohl ein Surface RT Tablet, wie auch einen konventionellen PC bedienen.

Das Fazit fällt vernichtend aus: So ist es den Testpersonen vielfach nicht gelungen, die gestellten Aufgaben zu lösen. Und dabei handelte es sich, man führe sich das noch einmal vor Augen, um versierte Anwender älterer Windows-Versionen. Nielsen identifizierte folgende Schwächen als maßgeblich für die schlechte Usability.

Desktop oder Start-Screen? Wenn man sich zwei Konzepte merken muss..

Es ist grundsätzlich schlecht, zwei grundlegend unterschiedliche Desktop-Umgebungen auf einem einzigen Gerät zu haben. Wohin muss ich gehen, um was zu erledigen? Ich muss einräumen, dass ich mich mit der Kritik voll identifizieren kann. Ich kämpfe seit etwas über einer Woche mit einem neuen Ultrabook mit Windows 8 und musste mir doch tatsächlich ein Buch kaufen, um einigermaßen produktiv mit Windows 8 in die Gänge zu kommen. Sicherlich, ich hätte auch rumprobieren können, aber, ich weiß ja nicht, wie sich Microsoft seine Nutzerschaft vorstellt, doch ich muss arbeiten. Ich habe keine Zeit, nach Funktionen zu suchen, von denen ich bislang im Schlaf wusste, wo sie zu finden sind. Auch Nielsens Testpersonen hatten massive Probleme mit dem Wechseln zwischen den Welten.

Als total ungünstig identifizierte Nielsen die Tatsache, dass Browser sowohl in der Modern UI, wie auch auf dem Desktop gestartet werden können. Auch das ist mir schon passiert. Der Haken an der Sache ist, dass jeder Browser als eigene Instanz mit seinem eigenen Set an Browser-Tabs läuft. Mir ist bislang nicht klar geworden, wie ich es überhaupt geschafft habe, zwei Browserinstanzen zu starten.

Natürlich komme ich mit der Desktop-Umgebung im Verhältnis besser klar. Denn hier hat sich die Bedienung zwar in der Tiefe, aber nicht an der Oberfläche geändert. Die Modern UI hingegen lässt mich regelmäßig fast verzweifeln. Eine inkonsistente Nutzerfahrung konstatiert entsprechend auch Nielsen.

Wo sind denn die Windows hin?

Nielsen schlägt vor, Windows 8 umzubenennen. Window 8 wäre ein sehr viel besserer Name. Denn in der Modern UI gibt es stets nur ein einziges Fenster, das den kompletten Bildschirm ausfüllt. Das ist sicherlich für Tablet-Nutzer auf dem Surface eine sinnvolle Herangehensweise. Wenn ich jedoch neben Word, Excel, Photoshop und Yammer noch einen Skype-Chat offen halten will, dann kann ich die Modern UI dafür nicht gebrauchen. Überhaupt erschließt sich mir der Vorteil nicht, den es haben könnte, wenn ich eine App, die bislang ein schmaler Streifen an der rechten Ecke meines zweiten Bildschirms war, vollflächig auf 1080p vor die Nase gesetzt bekomme.

Auch Nielsen und seine Tester konnten sich mit den Einschränkungen der Modern UI in dieser Frage nicht anfreunden. Die Desktop-Umgebung wurde bislang glücklicherweise nicht abgeschafft. Denn wäre das der Fall, würde Windows, so wie ich es bisher verwende, vollkommen unbenutzbar. Für Einsteiger dürfte es indes nicht so prima sein, wenn sie willentlich entscheiden müssen, welche Skype-App sie denn nun installieren wollen. Die aus dem Store für Modern UI oder die von der Website für den Desktop? Gleiches gilt für andere Anwendungen.

Flache Bedienelemente und eine niedrige Informationsdichte

Windows 8 verfügt über eine komplett flache Bedienoptik. Alle Icons sind platt, es wird nicht mit Dimensionalität gespielt wie man das ansonsten kennt. Ob ein Element klickbar ist oder nicht, wird optisch durch nichts signalisiert. Der folgende Screenshot präsentiert ein schönes Beispiel:

Gut, dass man die Icons vermutlich klicken kann, hätte ich mir schon noch gedacht. Aber, dass „Change PC Settings“ ebenfalls ein Bedienelement ist, darauf wäre ich ohne weiteres nicht gekommen. Es wirkt eher wie eine Art Label für die Icon-Gruppe. Auf dem Surface führte die Bezeichnung bei Nielsens Testern übrigens zu weiteren Problemen. Die identifizierten das Surface nämlich gar nicht erst als PC.

Übernommen von Windows Phone ist die Modern UI typografisch ein interessantes Projekt. Große Kacheln, große Schriften. Alles wirkt übersichtlich. Das geht allerdings zu Lasten der Informationsdichte. Sprich, auf dem Bildschirm ist kaum noch was zu sehen. Scrollen wird zur Haupttätigkeit moderner Windows-User. Nielsen hat einen Screenshot parat:


Schwache Informationsdichte, scrollen ist vorprogrammiert


Die Website zeigt eine Informationsdichte, mit der man arbeiten kann

Man erkennt, dass, verglichen mit der Website der LA Times deutlich weniger Inhalte auf einen Blick erfasst werden können. Im Ergebnis muss man entsprechend für den Konsum der gleichen Menge an Nachrichten bei Nutzung der Modern UI mehr Zeit einplanen. Aber, soll einen ein Computer nicht produktiver machen?

In die gleiche Kerbe schlägt das Design der neuen sogenannten Live Tiles. Auch hier wird ein im Ansatz ganz nützliches Konzept durch die konkrete Ausführung ad absurdum geführt. Ich versuche bereits, vollständig auf diese Tiles zu verzichten. Denn sie bieten durch ihre gleichartige Art der Darstellung keine schnellen Differenzierungsmöglichkeiten. Mit anderen Worten: Ich muss viel zuviel lesen, um zu erkennen, welcher Tile jetzt der gesuchte ist.

Windows Charms Bar: Suchen, statt finden

Wie man die Windows-Charms-Bar öffnet, habe ich bereits heraus gefunden. Windows-Taste + C öffnet die neue kontext-sensitive Hilfeleiste, die je nachdem, wo man sie aufruft, ganz unterschiedliche Features bereit hält.

Nielsen ist der Auffassung, dass eine versteckte Funktion schon ganz grundsätzlich eine schlechte Funktion ist. Im Falle der Charms-Bar kann aber, jedenfalls nach meiner Erfahrung, nicht von Unzumutbarkeit die Rede sein. Weniger schön ist, dass die Kontextbezogenheit nicht so weit geht, dass Features, die im Kontext nicht verfügbar sind, gar nicht erst angezeigt werden. Klassiker und auch von Nielsens Testern bemängelt: die Suchfunktion. Diese steht auch in Anwendungen zur Verfügung, die keinen Gebrauch davon machen. Die Benutzung führt zu einer Fehlermeldung. Grober Unfug.

Gesten mit hohem Verwechslungspotenzial

Es passiert mir alle Nase lang. Ich führe eine Geste aus, von der ich einen bestimmten Effekt erwarte und es passiert etwas ganz anderes. Am häufigsten springe ich per unbeabsichtigter Geste zwischen Modern UI und Desktopn hin und her. Irgendwann, wenn ich mal das Win8-Buch gelesen habe, werde ich genauer herausfinden, was ich da falsch mache.

Neben eigenen Fehlern sind Gesten in Windows nach Nielsens Meinung bereits viel zu fehleranfällig angelegt. Probates Beispiel ist das Swipen von rechts nach links, das im Grunde horizontales Scrollen initiieren soll. Befindet sich der Finger oder die Maus jedoch zu weit im rechten Bereich des Screens führt der gleiche Swipe zum Öffnen der Charms-Bar.

Schlussendlich gelangt Nielsen zu dem Ergebnis, dass Windows 8 auf Tablets noch eine Chance hat, wenn die angesprochenen Designmängel behoben werden. Auf PCs sieht er Windows 8 jedoch nachhaltig als das falsche Produkt und empfiehlt, bei Windows 7 zu bleiben und auf Windows 9 zu hoffen…

Links zum Beitrag:

Kategorien
JavaScript & jQuery Programmierung

UICloud: Neuer Dienst für Designer und Webentwickler bietet mehr als 25.000 Elemente für die UI-Entwicklung

UICloud ist ein ganz frisches Projekt. Erst im Juli 2012 gestartet, kann es bereits zum jetzigen Zeitpunkt mehr als 25.000 UI-Elemente in mehr als 1.000 Sets vorweisen. Der gesamte Bestand ist kostenlos nutzbar, auf individuelle Lizenzvorgaben ist aber zu achten. Hinter dem Dienst steckt Jack Cai, ein Freelancer, spezialisiert auf Icon- und GUI-Design, der zwar chinesische Wurzeln hat, sich aber dennoch in Southampton ganz wohl zu fühlen scheint. Mit UICloud legt Cai sein Meisterstück vor. Die Plattform ist einfach zu bedienen, intuitiv ist das richtige Wort. Auf UICloud zu stöbern macht regelrecht Spaß. Das Design ist modern und elegant, ie Inhalte übersichtlich angelegt. Genug Gründe also, sich die Plattform einmal näher anzusehen.

UICloud: Die Startseite kommt spontan bekannt vor

Mit einiger Wahrscheinlichkeit wird die Startseite die erste Seite sein, die Sie von UICloud zu sehen bekommen. Mein erster Gedanke war, ich wäre auf einem eben frisch relaunchten Google gelandet. Die Ähnlichkeiten sind offensichtlich: eine große Suchbox in der Mitte, eine dunkle Navigationsleiste am oberen Rand des Browserfensters, eine Schaltfläche mit der Aufschrift „Search“. Aber, warum auch nicht? Usability muss man nicht täglich neu erfinden. Das minimalistische Design, das für Google funktioniert, funktioniert ebenso gut für UICloud.

UIClouds Startseite

Ausgehend von der Startseite gibt es verschiedene Wege, sich dem enthaltenen Content zu nähern. Zunächst könnte man einen freien Suchbegriff verwenden, um zu schauen, welche Ergebnisse diese Vorgehensweise zu Tage fördert. Vorausgesetzt, es wird ein Ergebnis generiert, wäre das selbstverständlich der schnellste Weg zum Erfolg. Ich versuchte es mit dem Begriff „Metro“ und war durchaus zufrieden mit der Rückmeldung. Sowohl Metro UI CSS, wie auch das neue BootMetro Design-Framework ermittelte UICloud. Übrigens nutzte ich absichtlich ein eher spezielles Suchwort, um zu schauen, wie breit UICloud aufgestellt ist. Tippen Sie etwas generisches, wie „progress bar“, werden Sie sich vor Ergebnissen kaum retten können.

UICloud: So kann ein Suchergebnis aussehen

Verlässt man die Startseite, wandert die Suchbox an den oberen Bildschirmrand, wo sie in etwas kompakterer Ausführung von überall her verwendbar bleibt.

UICloud: Andere Wege, relevanten Content zu erreichen

Wenn Sie her zum Stöbern und weniger zum gezielten Suchen neigen, werden Sie von UICloud ebenso bedient. Die Funktion „Browse“ lädt Sie ein, den gesamten Bestand zu durchstöbern. Alle enthaltenen Sets werden in einer grafischen Liste mit lediglich den wichtigsten Informationen dargestellt. Jeweils 24 Inhaltselemente finden sich auf einer Matrix von 6 x 4 Screenshots. Inhalte lassen sich nach verschiedenen Kriterien sortieren. So ist es möglich, die neuesten Einreichungen, die bestbewerteten Pakete oder die populärsten nach Downloadzahlen anzeigen zu lassen. 45 Seiten mit rund 1.100 Sets gewährleisten, dass Sie schnell jede Menge Zeit verbrennen.

UICloud: Browsen durch die neuesten und populärsten Inhalte

Sie haben keine Zeit zu verleren oder suchen nach bestimmten Elementen, etwa Android UI-Elementen? Dann werden Sie wohl auf UIClouds Kategorieansicht zurück greifen. Diese Ansicht zeigt die Inhalte in strukturierter Form. Kategorien, wie Android, Apple, Windows, PSD und andere leiten Sie nicht in die Irre. Über die Wahl der vergebenen Kategorien könnte man streiten. Nicht alle sind offensichtlich sinnvoll.

UICloud: die Kategorieansicht

Unzweifelhaft nützlich ist die zweite Möglichkeit der Kategorie-Navigation. Hier sortiert UICloud Elemente nach ihren Anwendungsbereichen. Die Kategorien lauten Buttons, Forms, Sliders, Switches etc. und lassen wohl keinen Nutzer rätselnd zurück. Eine dritte Möglichkeit erlaubt die Suche nach Farb-Schemata. Das ist nützlich, wenn Ihnen noch das eine letzte Element in einer bestimmten Farbe fehlt.

Auf der Suche nach einer bestimmten Farbe?

UIClouds Einzelansicht: Alle wichtigen Fakten im Überblick

Egal auf welchem Weg man sich dem Gesuchten nähert, am Ende steht eine sehr informative, übersichtlich strukturierte Einzelansicht des UI-Sets.

UIClouds Einzelansicht bietet alle wesentlichen Informationen auf einen Blick

Die Einzelansicht zeigt einen oder mehrere große Screenshots des Elements oder Sets auf der linken Seite des Bildschirms. Bei mehreren Screenshots werden diese unterhalb des initial angezeigten Bildschirmfotos in Form einer Thumbnail-Galerie dargestellt. Rechts angeordnet finden sich die wichtigsten Informationen zum Produkt, darunter vor allem die zu beachtende Lizenz, sowie in welchen Formaten die Sets vorliegen und welche Dateien im Downloadpaket mitgeliefert werden.

Stellen Sie sicher, dass Sie in jedem Falle genau auf die Lizenz achten. Zwar sind alle gelisteten Elemente kostenfrei zu verwenden, allerdings kann es vorkommen, dass sie nicht zu jedem Zweck frei zu verwenden sind. Unser Beispielelement Metro UI CSS steht unter der lberalen MIT-Lizenz, aber andere Sets können teilweise nur für private oder nicht-kommerzielle Zwecke kostenlos verwendet werden.

Das allseits bekannte und bewährte Rating-System auf der Basis zu vergebender Sterne kommt für das Bewertungssystem zum Einsatz, das von den Besuchern des Dienstes ohne Registrierung benutzt werden kann. Die Anzahl der Downloads wird neben der Anzahl der Besucher des jeweiligen Sets angezeigt. Eine Vergabe von Tags ist ebenfalls vorgesehen und kann ebenfalls frei von jedem Besucher vorgenommen werden. In Anbetracht der Lustigkeit verschiedener Mitmenschen wird man sehen, inwieweit Jack Cai dieses Feature auf Dauer halten will.

Links zum Download, zu den Demos und zur Originalquelle des Sets finden sich unterhalb des Screenshot-Bereichs. Alle Ressourcen sind auf UICloud selber gehostet. Auf diese Weise ist das Angebot gut vor 404 und anderen Späßchen, die einem mit extern eingelinkten Inhalten widerfahren können, geschützt. Sollten Sie Zweifel an der Aktualität der hinterlegten Version haben, können Sie natürlich jederzeit auf der Originalquelle nachsehen.

Wie aus dem Blog-Umfeld bekannt, ist es auch auf UICloud möglich, Kommentare zu den angebotenen Elementen und Sets zu hinterlassen. Momentan ist der ommentarbestand insgesamt noch überschaubar. Aber Sie können natürlich jederzeit in die Vollen gehen und den nächsten Flamewar vom Zaun brechen.

UICloud: Jeder kann Sets einreichen

Das schnelle Wachstum der UICloud könnte allein durch die Arbeit einer einzelnen Person nicht erreicht werden. So ist es naheliegend, das Wachstum im Wege des Crowdsourcing zu generieren. Jeder Besucher kann UI-Sets über ein einfaches Formular zur Überprüfung einreichen. Alle Vorschläge durchlaufen einen redaktionellen Prozess, in dessen Verlauf sie geprüft, auf Eignung evaluiert und dann veröffentlicht werden. Da die Einreichung nicht über direkte Uploads, sondern das Posten des Links zur Originalquelle erfolgen muss, sind Urheberrechtsverletzung relativ unwahrscheinlich. Zumindest würden derartige Verletzungen mit hoher Wahrscheinlichkeit im Rahmen der redaktionellen Prüfung auffallen. UICloud wendet sich direkt an die Entwickler der Elemente und ruft sie dazu auf, etwaige Fehler in der Präsentation zu reklamieren oder auch die Entfernung der Sets aus der Plattform zu verlangen, wo sie das für erforderlich erachten.

Natürlich gibt es auch das obligatorische Kontaktformular für Menschen, die typischerweise solche Formulare verwenden…

UICloud: Button Builder – WYSIWYG-Generator für CSS-Buttons

UICloud begnügt sich nicht damit, eine großartige Ressource für das Finden von User Interface Elementen zu sein. Stattdessen bringt einen Baukasten für CSS-Buttons mit, den Button Builder. Hier kann man sich seinen Wunschbutton über eine intuitive grafische Benutzeroberfläche basteln. Es gibt etliche Standard-Vorschläge. Diese können jedoch in vollem Umfang auf die eigenen Bedürfnisse angepasst werden.

Der Button Builder wird Ihnen auf den ersten Blick vertraut vorkommen und stellt insichtlich seiner Bedienung niemanden vor Rätsel:

UIClouds Button Builder

Auf einem Canvas sehen Sie den Button in seiner vorkonfigurierten Darstellung. Wenn Sie jetzt Änderungen durchführen, werden diese unmittelbar auf dem Canvas angezeigt. Unterhalb des Canvas finden sich weitere vorkonfigurierte Button-Vorschläge. Oberhalb des Canvas befinden sich die Schaltflächen, mit deren Hilfe das korrespondierende HTML und CSS generiert wird. Die unscheinbar wirkende, rechts angeordnete Tabelle ist das eigentliche Herzstück des Button Builders. Hier liegt die Funktionalität zum Finetuning der zu erstellenden Buttons. Auf den ersten Blick mag man vermuten, es handele sich um eine statische Tabelle, die lediglich die Werte des angezeigten Buttons listet. Aber klicken Sie mal in die tabelle inein, jeder Wert kann auf einfache Weise angepasst werden.

UICloud: Feineinstellung für die CSS Buttons

Zwar können wir nicht wirklich eine Knappheit an Generatoren für CSS-Output im Web erkennen, ähnlich ausgerichtete Tools gibt es wie Bäume im Wald, aber UIClouds Button Builder hebt sich von der Masse ab und ist eine sehr intuitiv bedienbare Web App. Zumindest ist es die beste App für diesen Anwendungsfall, mit der ich bis jetzt gearbeitet habe.

UICloud: das generierte CSS

Jack Cai erzählte mir, dass der Button Builder nur der Anfang einer ganzen Serie von kleinen Generatoren sein wird. In naher Zukunft soll es auf UICloud möglich sein, auch Tabs, Menus, Fortschrittsbalken und einiges mehr generieren zu lassen.

Social Media: UICloud informiert auf mehreren Wegen über Neuzugänge im Bestand

Wollen Sie auf dem Laufenden bleiben, was sich bei UICloud so alles tut, so stehen Ihnen zu diesem Zweck mehrere Möglichkeiten zur Verfügung. Da wären erst einmal Twitter oder Facebook. Aber auch ein RSS-Feed, sowie eine Mailing-Liste – old-school par excellence – stehen zur Verfügung.

Welchen Weg Sie auch wählen, wählen Sie einen!

Links zum Beitrag: