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
Best-of HTML/CSS/PSD-Ressourcen Essentials Freebies, Tools und Templates

Total Recall #2: Die 100+ besten kostenlosen GUI-Sets

Im ersten Teil unserer kleinen Serie „Total Recall“  zeigten wir dir die besten kostenlosen Website-Templates in HTML/CSS und PSD, die das Jahr 2013 hervorgebracht hat. Für diejenigen unter euch, die lieber Stein für Stein selber mauern, aber dennoch einer gewissen vorgefertigten Modularität nicht abgeneigt sind, haben wir heute eine weitere große Kollektion.

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Photoshop

Alles so schön bunt hier: 21 kostenlose Design-Ressourcen zum Herbstanfang 2013

Guten Morgen, Designer, Developer und übrige Netzbewohner. Wir sind zurück mit der neuesten Ausgabe unseres monatliches Rundumschlags mit den besten, frischesten Design-Ressourcen des vergangenen Monats. Wenn Sie unsere regelmäßige Serie bereits kennen, dann wissen Sie ja, was Sie erwartet. Wieder haben wir einen Sack voller HTML-, CSS- und PSD-Templates zusammengestellt und um die besten UI-Kits ergänzt. Alle der folgenden Elemente können frei genutzt werden. Manchmal ist allerdings im Vorfeld des Download eine kostenlose Registrierung erforderlich…

Megacorp: Minimalistisches Multi-Layout-Theme für Desktop- und Mobil-Geräte

megacorp

Erstellt von: HTML5Templates
Features: Minimalistisches UI-Design, ein- oder zweispaltig, sowohl für Desktop, wie auch Tablets und Smartphones geeignet

Moderne Open Source-Website im minimalistisches Designstil

slide one

Erstellt von: Start Bootstrap
Features: 17-seitiges Template auf der Basis von Bootstrap 3

Prologue: Template für Fotografie-Seiten im Flat Design

Prologue

Erstellt von: HTML5 UP
Features: Navigationsmenü im Mobil-Stil, Flat Design, responsiv und mit guter Social Integration

Zizurs: Einfaches Template für Coiffeure

Zizurs

Erstellt von: Free Website Templates
Features: Auch das gibt’s. Ein Template für Friseurinnen und Friseure. Es bietet einen minimalistischen Style und weiche Seitenübergänge.

Escape Velocity: Responsives Site-Template

Escape Velocity

Erstellt von: HTML5 UP
Features: Parallax-geeignet, mit schönen Hintergrundmustern und einem eleganten Glas-Effekt in den Menüs

Tapestry: Mehrspaltiges Blog-Design

Tapestry

Erstellt von: HTML5Templates
Features: Mehrspaltiges, responsives Design mit schickem Hintergrund, bild-zentriert

PSD-Template im Flat Style für App-Websites

app website PSD

Erstellt von: Tomas Laurinavicius
Features: UI-Komponenten für Websites zu mobilen Apps, fokussiert sich auf Fotografie

Business: PSD-Website-Template mit kräftigen Farben

Business

Erstellt von: Blaz Robar
Features: Flat Stil, starke Farben, responsives Layout.

STE.AM: Flat PSD-Templates für Event-Websites

STE.AM

Erstellt von: Subash Dharel
Features: PSD mit zwei Templates, auch wieder Flat Design, bemerkenswerte Illustrationen und gute Social Integration

Gusto: PSD-Template zur Erstellung erfolgreicher E-Mail-Newsletter

Gusto

Erstellt von: Michael Reimer
Features: Besonders interessant ist die Trennung von Bild-, Inhalts- und LInk-Containern. Werbeflächen sind vorgesehen.

Worx: Responsives, flexibles WordPress-Theme

Worx

Erstellt von: Cyberspace Builder
Features: flaches, responsives Einseiten-Theme

Thunder: Riesen-PSD-Website-Template

Thunder

Erstellt von: WP Explore!
Features: großes Template für WordPress-Sites mit PSD-Rohdaten.

Crisp UI Kit: Mengen von Web-Elementen

Crisp UI

Erstellt von: Michael Reimer
Features: Für Freunde des minimalistischen UI. Enthält verschiedene Arten von Schaltflächen, Auswahlmenüs, Slider, Fortschrittsbalken. Ganz in pastelligen Harmonietönen gehalten.

UI Kit 2: PSD-Kit im Flat Design

UI kit 2

Erstellt von: Aykut Yilmaz
Features: unzweifelhaft hübsches Kit im trendigen Flat Style mit Kommentarbereich, Slider, Fortschrittsbalken, etlichen Widgets und mehr

Flatilicious User Interface: Optimal für Wireframing

Flatilicious

Erstellt von: Patrick M
Features: Flat Interface mit verschiedenen Elementen, darunter ein Login- und Registrierungsoverlay und ein Widget zur Integration von Twitter

iOS7 GUI: Mehr als 1.000 Elemente für Ihre iOS-App

iOS 7 GUI

Erstellt von: IconShock
Features: iOS7 lässt grüßen, Retina-ready, minimalistische Icons und Elemente

UI Kit: PSD-Set für Fliesenleger ;-)

UI kit

Erstellt von: Rebecca Machamer
Features: ein bisschen Metro-Flair versprüht dieses Set im Flat Design, Windows 8 Enthusiasten vor

Schickes Web-User-Interface-Design-Kit als PSD

Putih Ijo UI kit

Erstellt von: Aryan Dhani
Features: Viele Elemente für den E-Commerce im Flat Design

Metro Vibes UI Kit: Kreative Design-Elemente sparen einen Haufen Arbeit

Metro Vibes

Erstellt von: Freebies Galleries
Features: Ein Füllhorn, unter anderem mit visuellen Kontrollelementen, Sliders, Icons, Schaltflächen und Besonderheiten, wie einer Preistabelle, ein Nachrichtenfeld, eine Wetteranzeige und mehr

Flatimus iOS UI Kit: Flacher als das flache iOS7

Flatimus

Erstellt von: Satys
Features: Retina-ready, Flat UI, Elemente als Positive wie Negative für helle oder dunkle Layouts

Hotel UI Kit: Reise-Apps und Websites bedienen sich bitte hier

Hotel UI kit

Erstellt von: pixelkit
Features: mit Ebenen versehene PSD-Dateien auf der Basis eines 960er Grids, kommerzielle Nutzung erlaubt, skalierbare Vektorgrafiken, kostenlose Updates, freie Schriftarten

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 XHTML-Themes.

(dpe)

Kategorien
Apps Programmierung

Schleifpapier im Lieferumfang? So unterscheiden sich Designs für iOS und Android aus App-Entwicklersicht

Im Oktober 2010, als das Samsung Galaxy Tab vorgestellt wurde, meldete sich Steve Jobs zu Wort, um seiner Meinung über 7“-Tablets Luft zu machen. Er bezeichnete diese Geräteklasse als ”dead on arrival“ – ”Totgeburt“ – und empfahl, jedem Gerät Schleifpapier beizulegen, um die Finger der Nutzer anzupassen. Nach Jobs Tod dann veröffentlichte auch Apple mit dem iPad mini ein Gerät der zuvor noch gescholtenen 7”-Klasse. Dass es sich bei der Geräteklasse offensichtlich nicht um eine Totgeburt gehandelt hat, wissen wir inzwischen. Mit dem Vorschlag der Anpassung der Nutzerfinger per Schleifpapier indes hatte der Apple-Gründer nicht ganz unrecht, zumal wenn es um die iOS-Geräte geht. Warum das so ist, will ich im folgenden Beitrag deutlich machen…

mobile-02

Vom Finger zum Touch Target

Zunächst stellt sich natürlich die Frage, wieso Steve Jobs nicht auch der Ansicht war, dem iPhone ebenso Schleifpapier mitliefern zu müssen? Immerhin ist ein (damals) 3,5 Zoll-, heute 4 Zoll-Display noch weit kleiner als die angesprochenen 7 Zoll.

Diese Frage lässt sich leicht beantworten, wenn man sich iOS einmal genauer anschaut. Dieses Betriebssystem wurde entwickelt, um auf einem 3,5 Zoll Display bei einer Auflösung von 480 x 320px mit dem Finger bedient werden zu können. Diese Eckdaten definierten die Größe der Arbeitsfläche. Diese Arbeitsfläche hängt bei einem Touch-Betriebssystem jedoch nicht nur von Werten ab, sondern auch vom “Eingabegerät”, in diesem Fall also den Fingern, genauer dem Zeigefinger und Daumen.

Finger haben eine bestimmte Größe und beanspruchen bei der Berührung des Displays eine bestimmte Fläche. Die so beanspruchte Fläche wird als “Touch-Target” bezeichnet. Die Größe des Touch-Targets beeinflusst, wie viele Bedienelemente auf der Arbeitsfläche angezeigt werden können. Apple gibt in seinen Richtlinien ein Touch-Target von mindestens 44 x 44px an, was einer Fläche von ca. 8 x 8mm entspricht.

hand-66631_640

Beim Wechsel auf die bekannte “Retina”-Auflösung hat Apple an diesem ganzen Konzept nichts geändert, stattdessen einen simplen und doch effizienten Trick angewandt. Ein Pixel wurde in 4 kleine Pixel aufgeteilt, die zusammen die Größe des ursprünglichen Pixel haben. Daraus ergibt sich genau die doppelte Auflösung auf jeder Achse: 960 x 640px. Dieses Vorgehen führt nicht zu mehr Platz auf dem Display, aber zu einer schärferen Darstellung.

Die Touch-Targets sind immer noch ca. 8 x 8mm groß, aber bestehen nun aus doppelt so vielen Pixeln (88 x 88px). Da iOS-Layouts nicht mit relativen, sondern mit absoluten Werten erstellt werden, hat diese Auflösungsänderung keine Auswirkung. Die Werte werden einfach nur verdoppelt, um das gleiche Ergebnis zu bekommen. Somit bleibt die Größe der Arbeitsfläche gleich, obwohl die Auflösung verändert wurde. Das iPhone 5 hat noch ein wenig mehr Veränderung gebracht, die aber nicht von großer Bedeutung sind und spielt daher in den weiteren Betrachtungen keine Rolle.

Der Unterschied beim iPad

Was hat sich nun beim iPad (2) geändert und was ist gleich geblieben? Verändert hat sich die Displaygröße auf 9,7 Zoll und die Auflösung auf 1024 x 768px. Das Eingabegerät ist jedoch gleich geblieben – der Finger. Er ist immer noch genauso groß wie zuvor, hat jetzt jedoch eine größere Fläche vor sich. Somit entsprechen die 8 x 8mm des Fingers ca. 44 x 44px auf dem Display. Durch den größeren Bildschirm passt nun aber mehr drauf. Dieses mehr an Platz definiert das Tablet-Layout.

Durch die vergrößerte Arbeitsfläche ist es möglich, mehr Inhalt darzustellen, welcher mit dem Finger immer noch bedienbar ist. Jedoch sollte man auf einem Tablet die Touch-Targets ein wenig größer gestalten, da das User Interface sonst schnell überladen wirkt und zu keiner angenehmen Erfahrung führt. Beim iPad 3 und 4 ist das Vorgehen (wie oben beschrieben) mit der Verdoppelung der Auflösung gleich.

hero_slide1-w640

Der Schleifpapier-Effekt

Kommen wir nun zum fiktiven Schleifpapier und wieso ein 7“-Tablet solches im Lieferumfang enthalten sollte, falls iOS das Betriebssystem der Wahl ist. Zuerst geht man davon aus, dass die Apps auf dem 7”-Tablet das Tablet-Layout benutzen sollen. Immerhin will man ja ein Tablet-Design und kein aufgeblasenes Telefon-Layout. An dieser Stelle entsteht die Schwierigkeit mit den pixelgenauen Layouts in iOS.

Man nimmt also ein Touch-Target (z.B. einen Button) mit der Größe von 44 x 44px, welches auf 9,7" zu einer realen Größe von 8 x 8mm führt, und verkleinert dieses auf ca. 70% dessen. Die Auflösung bleibt die Gleiche. Man erhält also ein Touch-Target, welches 5,6 x 5,6mm groß ist. Der Finger wird jedoch nicht kleiner, nur weil man sich ein kleineres Tablet gekauft hat. Somit bekommt man das Problem, die Touch Targets mit dem Finger nicht mehr so einfach treffen zu können.

medium_7995167940

Natürlich kann man durch Analyse der Berührungen auf dem Bildschirm versuchen, diese den kleineren Touch-Targets zuzuordnen. Jedoch muss das nicht immer zum Erfolg führen und kann bei Bedienelementen, die nahe zusammenstehen, zu unerwünschten Aktionen führen. Diese Fehleingaben verschlechtern die Benutzererfahrung mit dem Gerät bzw. der App.

Nun gibt es zwei Möglichkeiten dieses Problem zu lösen. Zum Einen kann man eine neue Auflösung und damit ein neues Layout definieren. Dieses Vorgehen führt jedoch dazu, keine kompatiblen Apps für diese neue Auflösung zu haben. Die Layouts müssten neu gedacht und erstellt werden. Was passiert, wenn das passiert, aber nicht passiert, sah man eine ganze Weile am neuen Display im iPhone 5 – Balken dominierten die zusätzliche Fläche.

Die zweite Möglichkeit ist eben das “Abschleifen” der Finger, um sie “präziser” zu machen (ein kapazitiver Stylus würde es wohl auch tun, aber das wäre ja nicht Sinn der Sache).

Die “Größe” des iPad Mini

thought_hero-w640

Apple entschied, das Display des iPad Mini auf 7,9“ zu verkleinern. So wurden aus den Touch-Targets mit 8 x 8mm nurmehr solche mit 6,5 x 6,5mm. Diese Maße wurden seitens der Apple-Ingenieure anscheinend als noch zumutbar erachtet. Es handelt sich hier ”nur" um Unterschiede im Millimeterbereich, was sich recht belanglos anhört. Jedoch merkt man bei der Bedienung eines Gerätes mit Toucheingabe schnell, wie wichtig Bedienelemente sind, die nicht zu klein ausfallen.

Doch keine Sorge. Die meisten Tablet-Apps sind auf dem iPad Mini noch gut bedienbar, da die Touch-Targets auf den 9,7“ Geräten selten die minimale Größe bekommen, sondern eher größer dimensioniert werden. Dies dient der erleichterten Bedienung. Beim iPad Mini führen diese größeren Bedienelemente zu ”genau der richtigen Größe" nach der Verkleinerung, kleinere jedoch zu Schwierigkeiten.

Android und die Vielfalt an Auflösungen

AndroidSlide3-w640

Kommen wir nun dazu, wie Android dieses Problem mit den verschiedenen Auflösungen und Displaygrößen handhabt. Wie kann bei dieser Fragmentierung die minimale Größe des Touch-Targets garantiert werden?

Android ist seit der Version 1.0 in der Lage auf verschiedenen Bildschirmgrößen und den dazugehörigen Auflösungen ein konsistentes Erlebnis zu bieten. Um als Programmierer nicht für jede Auflösung bei verschiedenen Displaygrößen Layouts erstellen zu müssen, wurde versucht, diese konkreten Variablen zu abstrahieren.

Zunächst führte man eine neue Einheit namens DIP (Density Indipendent Pixel) ein. Diese Einheit ist unabhängig von Auflösung bzw. Bildschirmgröße und liefert immer (ungefähr) die gleiche physikalische Größe auf dem Display.

So funktioniert es:

Definiert wird 1 DIP als 1 Pixel bei einer Pixeldichte von 160dpi (mdpi). Die Pixeldichte enthält die Bildschirmgröße und Auflösung im Verhältnis zueinander. Weiter werden Umrechnungsfaktoren definiert, um auch andere Pixeldichten abzudecken.

Bei der Verdoppelung der Pixeldichte auf 320dpi (xhdpi) wird ein Pixel eines 160dpi Display einfach nur in 4 kleinere Pixel unterteilt. Dieses Vorgehen gleicht dem bei iOS. Es ergibt sich der Umrechnungsfaktor 2. 1 DIP, bei einer Pixeldichte von 320dpi, entspricht also 2 Pixeln auf dem Display.

  • Bei einer Pixeldichte von 120dpi (ldpi) entspricht 1DIP = 0,75 Pixel.
  • Bei einer Pixeldichte von 240dpi (hpdi) entspricht 1DIP = 1,5 Pixel.
  • Seit Jelly Bean 4.1 wurde auch noch eine weitere Pixeldichte mit 480dpi (xxhdpi) eingeführt. Bei dieser entspricht 1DIP = 3 Pixel.
  • Beim 2012er Nexus 7 finden wir eine Pixeldichte von 217dpi (tvdpi). Dabei entspricht 1DIP = 1,33 Pixel. Das kommende Modell erhöht die Pixeldichte auf 323dpi, 1 DIP entspricht hier rund 2 Pixeln.

marquee_jb_4_3_flo-w640

Nun kann man also in den Layouts alle möglichen Elemente in DIP definieren und erhält auf jeden Bildschirm bzw. jeder Auflösung fast die gleiche physikalische Größe. Somit können Touch-Targets in der richtigen, weil bedienbaren Größe gehalten werden.

Und wo ist jetzt der versprochene Unterschied zwischen iPad Mini und Nexus 7?

Wir haben also festgestellt, dass ein iPad Mini die gleiche Arbeitsfläche hat wie ein 9,7" iPad und somit exakt das Gleiche darstellen kann. Es wird zwar alles kleiner, aber die Apps zeigen auf allen iPads den gleichen Inhalt.

Bei Android Tablets funktioniert die Bestimmung der Größe der Arbeitsfläche anders. Ich verdeutliche es mal an 2 Beispielen.

Nexus 7: Die Auflösung beträgt 1280x800px mit 7" Diagonale und führt zu einer Pixeldichte von 217dpi. Der Umrechnungsfaktor bei dieser Pixeldichte beträgt 1,33, da es sich um tvdpi handelt.

Wenn man nun die Auflösung durch diesen Faktor teil, erhält man die Größe der zur Verfügung stehenden Arbeitsfläche.

1280px / 1,33 = ca. 962dip | 800px / 1,33 = ca. 600dip

Die Arbeitsfläche beträgt also 962 x 600dip.

Google-Nexus-7-16GB-Tablet-PC

Nexus 10: Die Auflösung beträgt 2560 x 1600px mit 10,055" Diagonale und führt zu einer Pixeldichte von 300dpi. Damit fällt es in die Klasse xhdpi und der Umrechnungsfaktor beträgt hier 2.

2560px / 2 = 1280dip | 1600px / 2 = 800dip

Die Arbeitsfläche beträgt also 1280 x 800dip.

Dies ist genauso viel wie ein 10" Tablet mit 1280x800px (160dpi) Auflösung bis jetzt auch geboten hat. Dadurch müssen bei einer App für das Nexus 10 nur die Pixelgrafiken in der entsprechenden Auflösung neu hinterlegt werden. Das Layout bleibt das Gleiche.

Google_Nexus_10_16GB_271745.1

Wenn man sich die Arbeitsflächen jetzt anschaut und vergleicht, kommt man zu dem Schluss, dass das Nexus 7 eine kleinere Arbeitsfläche besitzt als ein 10" Android Tablet mit der gleichen Auflösung. Somit kann man eben nicht wie beim iPad die gleichen Apps mit den gleichen Layouts verwenden, da nicht genug Platz vorhanden ist.

Somit braucht das Nexus 7, wie auch andere 7“-Tablets, sein eigenes User Interface Layout und seine eigene Benutzerführung. Das ist der große Unterschied, wieso auf dem iPad Mini ”Tablet Apps" laufen und auf dem Nexus 7 ein eigenes Layout erstellt werden muss.

Vor- und Nachteile bei iOS

Pro:

  • Alle Apps des iPad bleiben mit dem iPad mini kompatibel.
  • Man kennt die Größe der Arbeitsfläche und hat nur 1 Layout als Entwickler zu erstellen. Das senkt die Entwicklungskosten für den Anbieter und den Anschaffungspreis für den User.
  • Bei der Verdoppelung der Auflösung müssen nur die Pixelgrafiken aktualisiert werden, was den Aufwand eines Updates minimiert.

Contra:

  • iOs ist “gefangen” in seinen Auflösungen oder dem Doppelten davon. Jedoch wird es schwierig werden, 2048 x 1536px oder 960 x 640px nochmals zu verdoppeln. Wir werden also für lange Zeit diese Auflösungen sehen und wohl auch keine anderen Größen bei Geräten.
  • Bei der Einführung einer neuen Auflösung werden alle vorhandenen Apps “nutzlos”. Man kann sie zwar noch ausführen, aber dies geschieht in einer “Letterbox”, wie beim iPhone 5 gut zu sehen ist (Schwarze Balken oben und unten).
  • Bei einfacher Verkleinerung der Bildschirmgröße ohne gleichzeitige Verkleinerung der Arbeitsfläche kann es zu Problemen mit den Touch Targets kommen, da sie zu klein ausfallen können -> kein konsistentes Nutzererlebnis.

Vor- und Nachteile bei Android

Pro:

  • Touch-Targets behalten immer die vorgesehene Größe.
  • Jede Auflösung und jede Bildschirmgröße ist möglich und führt zu einer Vielfalt von Geräten mit verschiedensten Formfaktoren.
  • Beim Programmieren muss man sich keine Gedanken über die Pixel machen, sondern nur über die verschieden großen Arbeitsflächen. Der Fokus kann auf die Nutzerführung und Ergonomie gelegt werden.
  • Das System kümmert sich darum, die richtigen Bilder und Layouts für das jeweilige Gerät darzustellen.

Contra:

  • Es müssen mehrere Layouts erstellt werden, was zu höheren Entwicklungskosten führt.
  • Layouts können nie pixelgenau sein, sondern müssen in der Höhe und Breite flexibel auf kleine Änderungen reagieren können. Dadurch kann man sich nie ganz sicher sein, wie das Layout beim User dargestellt wird.
  • Es besteht nicht nur ein höherer Aufwand beim Programmieren, sondern auch ein erhöhtes Fehlerpotential.

Sie sehen, beide Plattformen haben ihre eigene Vorgehensweise beim Umgang mit Auflösungen und Displaygrößen. Diese Vorgehensweisen haben Vor- und Nachteile, die sich sowohl auf das Nutzererlebnis, wie auch den Entwicklungsaufwand auswirken. Welches Konzept besser ist, kann nicht allgemeingültig und mit einfachen Worten definiert werden.

Am Ende ähnelt das Android-Konzept eher dem Konzept des modernen Web, in welchem pixelgenaue Layouts ebenfalls auf dem Rückmarsch sind, während iOS an die Glanzzeiten von Quark Xpress anknüpft. Der geringere Entwicklungsaufwand, nicht zuletzt wegen der überschaubareren Gerätezahl, liegt in jedem Falle bei iOS.

Über den Autor: Michael Panzer ist 28 Jahre alt und studiert Technische Redaktion an der HS Merseburg. In diesem Studiengang lernt man technische Sachverhalte einfach und verständlich wieder zu geben. Als kleine Übung verfasst er ab und an Artikel. Seit gut 1,5 Jahren programmiert für die Android-Plattform.

photo credit: dcysurfer / Dave Young via photopin cc

(dpe)

Kategorien
Best-of HTML/CSS/PSD-Ressourcen Bilder & Vektorgrafiken bearbeiten Design Essentials Photoshop

Best of Juli 2013: 30+ frische HTML/PSD-Themes und UI-Elemente

Im zweiten Teil unserer neuen monatlichen Serie mit frischen HTML/PSD-Themes und UI-Elementen stellen wir Ihnen Ressourcen vor, die sämtlich im Juli 2013 entstanden sind. Wir liefern Ihnen mit über 30 verschiedenen Werken ein breites Set an vorgefertigten Themes, Templates und sonstigen Elementen. In vielen Fällen werden die Rohdaten zur Bearbeitung mit Ihrem favorisierten Bild- oder Vektorbearbeitungsprogramm direkt mitgeliefert. Da sollte für jedermann was dabei sein…

Elegante HTML- und CSS-Themes

Wenn Sie nach Web-Templates suchen, für die Sie nicht erst Photoshop oder Illustrator anwerfen müssen, sind Sie mit der folgenden Liste gut bedient:

Gardentruck: Free Responsive HTML5 Template

Erstellt von: Templatemonster

GardenTruck Html5 Template

Avenir: Clean and Modern “Coming Soon” Page Template

Erstellt von: Wegraphics.Net

Free Coming Soon HTML Template

Caprice: Simple and Beautiful HTML Template

Erstellt von: Elemisfreebies.com

simple and beautiful HTML template

Telephasic: Minimalistic and Responsive Site Template

Erstellt von: HTML5 UP

responsive site template

zAgroPlus: Responsive Dark WordPress Theme

Erstellt von: Templatemonster.com

Responsive Dark WordPress

Simplistic: Simple and Minimalistic HTML5 Template

Erstellt von: Css3templates.co.uk

minimalistic HTML5 and CSS3 template.

ZCorPoRate: Blue and White Responsive HTML5 Theme.

Erstellt von: Zerotheme.com

Blue and White Theme.

PSDs zu Inspirations- und anderen Zwecken

Die folgenden PSDs enthalten Themes mit teils mehreren Layoutvarianten. Sie dienen zu Inspirationszwecken, können aber natürlich auch direkt genutzt werden, wenn man Lust und Fähigkeit zu umfangreichen Anpassungen hat.

Seabird: Elegant Homepage Multipurpose PSD Template

Erstellt von: Elemisfreebies.com

Seabird Free Homepage PSD

Motion: Single Page PSD Web Template

Erstellt von: Mahmoud Baghagho

single page PSD web template.

About Us Page: Minimalistic “About Us” Landing Page

Erstellt von: Chris Allen

About Us Page

Modus Versus: Free Multi-purpose PSD Template for Designers

Erstellt von: Dimitar Tsankov

multi-purpose PSD template

Black Sea: Flat Style Business Template PSD

Erstellt von: Css Author

Clean website design template PSD

Skybox: Minimalistic White PSD Home Page Template

Erstellt von: Elemisfreebies.com

Skybox Free Homepage PSD

Pinball: Responsive Grid Style Blog PSD

Erstellt von: CSS Author

responsive grid style blog PSD

Display: Complete and Elegant Website Template

Erstellt von: Bestpsdfreebies.com

elegant website template

Calm: Free PSD Portfolio Containing a Page for the Home and Another One for the Blog

Erstellt von: Salah Elimam

creative simple portfolio & blog PSD

Bluebox: Flat Website PSD Templates Design

Erstellt von: Adam Engledow

BlueBox: Flat Website PSD

Aditii: Premium Ecommerce Website Template in PSD

Erstellt von: CSS Author

clean e-commerce template.

Coole GUIs zur Entwickler-Entlastung

Mobiles Design entwickelt sich rasant und ist unumgänglich. Kein Wunder also, dass sich mehr und mehr Entwickler in diesen Bereich vorwagen. Zum leichteren Einstieg haben wir folgend eine umfangreiche Liste mit PSD-basierten Interfaces zusammengestellt. Die meisten dieser GUIs sind vollständig.

Modern Touch: Flat and Complete Set of UI Elements in PSD Format

Erstellt von: Pixelkit.com

Modern Touch UI Kit

Light UI Kit: Clean and Deep Collection of UI Elements for Your Web

Erstellt von: Andrewspixels.com

Light and Deep UI Kit

iOS 7 GUI: Fantastic Set of GUI Elements for iOS 7 iPad

Erstellt von: Kim Ruelo

iOS-7 iPad GUI

Dark UI Kit: Simple and Flat Set of UI Elements

Erstellt von: Max Denisov

Dark UI Kit

Fantastic iOS 7 GUI: Spectacular and Useful Resource for Web Designers & Developers

Erstellt von: DesignShock.com

Fantastic iOS 7 GUI

Pop Songs:  Flat Music Player UI Widget

Erstellt von: Pele Chaengsavang

flat music player UI widget.

Flat UI Kit: Nice Set for Flat UIs

Erstellt von: Pixelsdaily.com

Flat UI Kit Free

Marble UI Kit: Simple and Useful GUI Kit in PSD Format

Erstellt von: Jian Wei

Marble UI kit

Dashboard UI: Beautiful Set of Dashboard UI Design PSD

Erstellt von: CSS Author

Dashboard UI

Chubby Stacks: Complete and Elegant UI Kit for Your Next Project

Erstellt von: Pixelkit

Chubby Stacks UI Kit

UI Kit: Modern UI Kit for Web Designers in PSD Format

Erstellt von: Aykut Yılmaz

UI kit for web designers

Flat GUI Kit: Fantastic and Useful Flat GUI Kit in PSD File

Erstellt von: Freepik

Flat GUI Kit

Infographic GUI: Info Graphic PSD Templates Designed in Simple and Clear Style

Erstellt von: Free PSD Files

Infographic PSD Templates

Wooden GUI Set: More Than 1,000 Design Elements for Your Next Web/Software Project!

Erstellt von: DesignShock

Wooden GUI Set

Dark Flat GUI: Cool UI Kit That Includes a Set of Beautiful Components

Erstellt von: Graphicburguer

Flat Design UI Components

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
Essentials Freebies, Tools und Templates Icons & Fonts

Icons in Massen: 50 ungewöhnliche, kostenlose Sets, die auch kommerziell genutzt werden dürfen

Der kleinste Bestandteil einer grafischen Benutzeroberfläche ist wohl das Icon. Wir zeigen diese kleinen Kunstwerke in aller Pracht in dieser Kollektion von mehreren hundert einzelnen Icons, oftmals zu Themen in Sets im gleichen Stil kombiniert. Hier pocht das Grafikerherz gleich schneller. Von minimalistisch und flach, bis hin zu fotorealistisch und dreidimensional sind alle Farben und Formen vertreten. Zwischen den Icons finden Sie noch einige Photoshop-Tipps zur Modifikation und Erweiterung der Sets…

Fliraneo Icon Pack

Website: lazycrazy.deviantart.com
Urheber: LazyCrazy
Frei für: Kommerzielle / Private Anwendungen
iconset1

© LazyCrazy

Gentle Romantic Icons

Website: lazycrazy.deviantart.com
Urheber: LazyCrazy
Frei für: Kommerzielle / Private Anwendungen
iconset2

© LazyCrazy

Currency Stock Icons

Website: antialiasfactory.deviantart.com
Urheber: antialiasfactory
Frei für: Private Anwendungen
iconset3

© antialiasfactory

Lovely Website Icons Pack 1

Website: lazycrazy.deviantart.com
Urheber: LazyCrazy
Frei für: Kommerzielle / Private Anwendungen
iconset4

© LazyCrazy

Lovely Website Icons Pack 2

Website: lazycrazy.deviantart.com
Urheber: LazyCrazy
Frei für: Kommerzielle / Private Anwendungen
iconset5

© LazyCrazy

Gifts Icons Pack 1

Website: miniartx.deviantart.com
Urheber: Miniartx
Frei für: Kommerzielle / Private Anwendungen
iconset6

© Miniartx

Cute Critters Free Icon Pack

Website: tutorial9.net
Urheber: Elio Rivero
Frei für: Kommerzielle / Private Anwendungen
iconset7b

© Elio Rivero

Icecream Icon Set

Website: miniartx.deviantart.com
Urheber: Miniartx
Frei für: Kommerzielle / Private Anwendungen
iconset8

© Miniartx

Gifts Icons Pack 2

Website: miniartx.deviantart.com
Urheber: Miniartx
Frei für: Kommerzielle / Private Anwendungen
iconset9

© Miniartx

So sweet

Website: i-love-icons.deviantart.com
Urheber: i-love-icons
Frei für: Kommerzielle / Private Anwendungen
iconset10

© i-love-icons

Free Set of Photography Icons

Website: vandelaydesign.com
Urheber: Iconshock
Frei für: Kommerzielle / Private Anwendungen
iconset11

© Iconshock

[Freebie] “Webcons” High Quality Web Icon Set

Website: hongkiat.com
Urheber: Rafi
Frei für: Kommerzielle / Private Anwendungen
iconset12

© Rafi

The Ultimate Free Web Designer’s Icon Set – 750 icons, incl. PSD sources

Website: smashingmagazine.com
Urheber: Oliver Twardowski
Frei für: Kommerzielle / Private Anwendungen
iconset13b

© Oliver Twardowski

Web Designer’s Icons

Website: vandelaypremier.com
Urheber: iconshock
Frei für: Kommerzielle / Private Anwendungen
iconset14b

© iconshock

Free Credit card icons

Website: iconshock.com
Urheber: iconshock.com
Frei für: Kommerzielle / Private Anwendungen
iconset15

© iconshock.com

Free Portfolio Icon Set Designed

Website: vandelaydesign.com
Urheber: iconshock
Frei für: Kommerzielle / Private Anwendungen
iconset16

© iconshock

Free Set of Hand-Drawn Icons

Website: vandelaydesign.com
Urheber: Damian Watracz
Frei für: Kommerzielle / Private Anwendungen
iconset17

© Damian Watracz

Payment Method Icons Set Vol 1

Website: pixeden.com
Urheber: pixeden.com
Frei für: Kommerzielle / Private Anwendungen
iconset18

© pixeden.com

Freebie: Professional E-Commerce Icons Set (20 Icons)

Website: smashingmagazine.com
Urheber: WebIconSet.com
Frei für: Kommerzielle / Private Anwendungen
iconset19

© WebIconSet.com

Free E-Commerce Icons from IconShock

Website: designm.ag
Urheber: IconShock
Frei für: Kommerzielle / Private Anwendungen
iconset20

© IconShock

Photoshop-Tipp #1: Farben ändern

01 Auswahl erzeugen

Möchten Sie die Farben eines Icons etwa an die Farben eines Unternehmens anpassen, so müssen Sie diese zunächst auswählen. Gehen Sie dazu im Menü auf Auswahl > Farbbereich. Klicken Sie mit der Pipette die Farbe an, die Sie verändern möchten. Über die Toleranz regeln Sie, wie weit ähnliche Farbtöne in die Auswahl mit einbezogen werden. Bestätigen Sie über OK.

icon-farbaenderung1

02 Farbe anpassen

Die Auswahl steht. Gehen Sie im Menü auf Bild > Korrekturen > Farbton/Sättigung. Verschieben Sie den Regler Farbton, bis die gewünschte Farbe sichtbar wird. Bestätigen Sie über OK und drücken Sie Strg+D, um die Auswahl aufzuheben.

icon-farbaenderung2

Free Medical Icons Set (60 Icons)

Website: smashingmagazine.com
Urheber: User Interface Design Agentur-Centigrade GmbH
Frei für: Kommerzielle / Private Anwendungen
iconset21b

© User Interface Design Agentur-Centigrade GmbH

Socializic

Website: wegraphics.net
Urheber: WeGraphics
Frei für: Kommerzielle / Private Anwendungen
iconset22

© WeGraphics

Vintage Social Stamps

Website: designinstruct.com
Urheber: John Negoita-PSDDude
Frei für: Kommerzielle / Private Anwendungen
iconset23

© John Negoita-PSDDude

Free Gadget Icon Set from IconShock

Website: vandelaydesign.com
Urheber: IconShock
Frei für: Kommerzielle / Private Anwendungen
iconset24

© IconShock

Eldorado Mini

Website: icojam.com
Urheber: icojam.com
Frei für: Kommerzielle / Private Anwendungen
iconset25

© icojam.com

Freebie PSD – Flat Icons

Website: dribbble.com
Urheber: Alberto
Frei für: Kommerzielle / Private Anwendungen
iconset26

© Alberto

Apple flat devices – Episode#2 (PSD)

Website: dribbble.com
Urheber: Pierre Borodin
Frei für: Kommerzielle / Private Anwendungen
iconset27

© Pierre Borodin

50 Food Icon Set (PSD)

Website: psdblast.com
Urheber: psdblast.com
Frei für: Kommerzielle / Private Anwendungen
iconset28

© psdblast.com

Thermometer Free Psd

Website: dribbble.com
Urheber: Stanislava Stojanovic
Frei für: Kommerzielle / Private Anwendungen
iconset29

© Stanislava Stojanovic

Retina-Ready iOS App Icon Templates (PSD)

Website: graphicsfuel.com
Urheber: Rafi
Frei für: Kommerzielle / Private Anwendungen
iconset30

© Rafi

Photoshop-Tipp #2: Icon-Sets erweitern

Gerade bei Social Media-Icons haben wir in Deutschland oftmals das Problem, dass deutsch-sprachige Dienste wie etwa Xing in der Sammlung nicht enthalten sind. Da hilft kein Jammern und Schreien, da muss man selbst Hand anlegen und das Set erweitern. Relativ leicht geht das, wenn es sich um einfache 2D-Icons handelt, so wie hier zu sehen. Schnell mit dem Abgerundeten-Rechteck-Werkzeug die Grundform in einer passenden Farbe aufziehen und darüber das Logo einfügen. Fertig! Bei komplexen 3D-Logos ist weitaus mehr Kreativität gefragt.

icon-anpassung

Othericons

Website: othericons.com
Urheber: Luboss Volkov
Frei für: Kommerzielle / Private Anwendungen
iconset31

© Luboss Volkov

Stack Site Icons

Website: lambda.deviantart.com
Urheber: lambda
Frei für: Kommerzielle / Private Anwendungen
iconset32

© lambda

E-Commerce Icon Set

Website: webiconset.com
Urheber: WebIconSet.com
Frei für: Kommerzielle / Private Anwendungen
iconset33b

© WebIconSet.com

Autumn Breeze Icons

Website: da-flow.deviantart.com
Urheber: da-flow
Frei für: Kommerzielle / Private Anwendungen
iconset34

© da-flow

Freebie: Academic Icon Set (10 Icons + PSD Source)

Website: smashingmagazine.com
Urheber: PixelsDaily
Frei für: Kommerzielle / Private Anwendungen
iconset35b

© PixelsDaily

Social Media Icon Set

Website: 365psd.com
Urheber: 365psd.com
Frei für: Kommerzielle / Private Anwendungen
iconset36

© 365psd.com

Smashing Royal Icon Set

Website: smashingmagazine.com
Urheber: Artua Design Studio
Frei für: Kommerzielle / Private Anwendungen
iconset37

© Artua Design Studio

Furniture Illustrations

Website: sklp.deviantart.com
Urheber: sklp
Frei für: Kommerzielle / Private Anwendungen
iconset38

© sklp

20 Popular Social Media Icons – PSD & PNG

Website: graphicsfuel.com
Urheber: Rafi
Frei für: Kommerzielle / Private Anwendungen
iconset39

© Rafi

IsoIcons – Workspace

Website: artdesigner.lv
Urheber: artdesigner.lv
Frei für: Private Anwendungen
iconset40

© artdesigner.lv

Battery PSD & Icons

Website: graphicsfuel.com
Urheber: Rafi
Frei für: Kommerzielle / Private Anwendungen
iconset41

© Rafi

6 Blue Icons

Website: nick7even.deviantart.com
Urheber: Nick7Even
Frei für: Kommerzielle / Private Anwendungen
iconset42

© Nick7Even

Prostor Icons

Website: tit0.deviantart.com
Urheber: TIT0
Frei für: Kommerzielle / Private Anwendungen
iconset43

© TIT0

Icon for Transformers

Website: ypf.deviantart.com
Urheber: ypf
Frei für: Kommerzielle / Private Anwendungen
iconset44

© ypf

Nes Icons Pack

Website: ahuri.deviantart.com
Urheber: Ahuri
Frei für: Kommerzielle / Private Anwendungen
iconset45

© Ahuri

AllGN Robots Icons

Website: lambda.deviantart.com
Urheber: lambda
Frei für: Kommerzielle / Private Anwendungen
iconset46b

© lambda

Archigraphs Porcelain Icons

Website: cyberella74.deviantart.com
Urheber: Cyberella74
Frei für: Kommerzielle / Private Anwendungen
iconset47

© Cyberella74

AccBox

Website: tit0.deviantart.com
Urheber: TIT0
Frei für: Private Anwendungen
iconset48

© TIT0

Bee Mac Icon

Website: artbees.deviantart.com
Urheber: artbees
Frei für: Kommerzielle / Private Anwendungen
iconset49

© artbees

Minimal Colors Icons

Website: deep3sh.deviantart.com
Urheber: deep3sh
Frei für: Kommerzielle / Private Anwendungen
iconset50

© deep3sh

(dpe)

Kategorien
(Kostenlose) Services E-Business Essentials Workflow

Web Developer Checklist und Userium: Zwei nützliche Helfer für vergessliche Web-Entwickler

Gut, man muss nicht notwendigerweise vergesslich sein, um einen Nutzen aus den beiden Diensten zu ziehen, die ich im folgenden Beitrag vorstellen werde. Immerhin ist es kein einfaches Unterfangen, alle wichtigen Aspekte eines modernen und sauberen Webdesigns vollständig abzudecken. Jeder von uns wird sich im Laufe der Jahre seine eigenen Checklisten angelegt haben. Bei mir waren es stets die schmerzhaften Erfahrungen, die meine Checklisten nach und nach verfeinern halfen. Mit Userium und der Web Developer Checklist können sich angehende, aber auch durchaus schon erfahrenere Web-Entwickler einiges an Schmerzen ersparen.

checklists-f1

Userium – Usability-Unterstützung aus Finnland

Nina Patkai und ihre Firma aus dem finnischen Helsinki legen mit Userium eine umfangreiche Online-Checkliste zum Thema Usability auf Websites vor. Ziel ist es, die gebräuchlichsten Fehler bereits vor der Testphase auf Nutzerseite abzufangen. Userium basiert auf den Guidelines des W3C, integriert aber auch Erkenntnisse aus den vielfältigen Veröffentlichungen der Nielsen Norman Group und einigen anderen. Insofern darf man sicher sein, dass man auf jeden Fall keinen Fehler begeht, wenn man sich an Userium orientiert.

usability-checklist
Userium in seiner Online-Variante

Übersichtlich in Kategorien gegliedert, liefert Patkai vielfach Tipps und Hinweise, die man spontan als trivial bezeichnen möchte, die aber bei tieferem Nachdenken durchaus sinnvoll in eine Checkliste integriert gehören. Denn häufig sind es gerade die einfachen Dinge, die vergessen werden, etwa einen ordentlichen Kontrast zwischen Text und Hintergrund vorzusehen.

Userium kann online verwendet werden, ist aber zusätzlich als Printversion auf 7 A4-Seiten druckbar. So haben etwaige interne Tester auch gleich einen Aufgabenzettel, anhand dessen es sich leichter prüfen lässt. Userium steht kostenlos zur Verfügung.

Prädikat: Empfehlenswert

Web Developer Checklist – Work in Progress mit weiteren Verweisen

Vom Ansatz her umfangreicher angelegt als Userium, kommt die Web Developer Checklist von Sayed Ibrahim Hashimi und Mads Kristensen dennoch weniger umfangreich daher. Hier handelt es sich um den Beginn einer Checkliste für Web-Entwickler, der mehr Substanz gut zu Gesicht stehen würde. Lediglich die Basics sind derzeit grob abgedeckt.

web-developer-checklist
Web Developer Checklist – Interessanter Ansatz, aber erweiterungsbedürftig

Dafür verfolgt die Checkliste insofern einen interessanten Ansatz, als sie zu jedem Punkt weiterführende Links zu nützlichen Diensten oder Grundlagen, wie entsprechenden Guidelines, und ähnliche Infos anbietet. Das Projekt steht auf Github unter Apache-Lizenz zur kostenlosen Nutzung und vor allem auch zur tätigen Mitwirkung bereit.

Links zum Beitrag:

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: