Kategorien
Design JavaScript & jQuery Programmierung UI/UX

Delta – ein modernes, kostenloses Theme für jQuery UI

Das IT-Unternehmen Kiandra gehört zu den großen Vertretern seiner Art in Australien. In diesem Jahr konnte Kiandra die Auszeichnung Microsoft Partner Of The Year für sich verbuchen. Im Rahmen der eigenen Softwareentwicklung entstand ein Theme für jQuery UI, welches Kiandra auf den Namen Delta taufte. Nachdem es sich im Echtzeiteinsatz seit fast einem Jahr bewährt hatte, entschloss man sich, Delta unter MIT/GPL-Lizenz für die Allgemeinheit kostenfrei verfügbar zu machen.

Delta – Moderne Interface-Elemente erkennen das Client-OS

Die MIT/GPL-Lizenz erlaubt den völlig kostenfreien Einsatz des Themes zu jedem legalen Zweck, wovon auch der kommerzielle Einsatz abgedeckt ist. Die Tatsache, dass Kiandra das Theme seit längerer Zeit für die eigenen Projekte einsetzt und dabei verbessert, sowie die Tatsache, dass es sich bei Kiandra um einen namhaften Player auf dem australischen IT-Markt handelt, erweckt Vertrauen. Dieses Vertrauen wird nicht enttäuscht, wenn man auch konstatieren muss, dass Delta nicht der umfangreichste Vertreter seiner Art ist.


Delta in heller Optik

Delta definiert verschiebene Toggle und Slider, bringt eine Reihe verschiedener Buttons und modaler Dialog-Popups mit. Ebenfalls an Bord ist ein Datumspicker, sowie ein Content-Container mit Tab-basierter Navigation. Delta kann in Light, also auf weißem Hintergrund erscheinen. Per Toggle lässt sich jedoch jederzeit auch ein dunkler Hintergrund einstellen.


Delta in dunkler Optik

Sämtliche Elemente erfreuen sich eines zeitgemäßen Designs, das jeder modernen Anwendung, insbesondere in Smartphone Web-Apps gut zu Gesicht stehen wird. Die modalen Dialog-Popups erkennen mit Hilfe eines Modernizr-Tests das OS unter dem sie aufgerufen werden und sind so in der Lage, die Position des Schließen-Buttons und die Reihenfolge der übrigen Standard-Buttons automatisch anzupassen. In meinem kleinen Test funktionierte die Erkennung sowohl unter Windows wie auch unter Mac OS zuverlässig.

Delta steht auf GitHub bereit, wo sich auch eine funktionsfähige Demo findet.

Links zum Beitrag:

Kategorien
Design UI/UX

InspireUX: Blog inspiriert in Sachen Nutzererfahrung

Wie sollen Webseiten sein, wie sollen sie aussehen? Die Antwort kommt aus dem Begriff „User Experience“ selbst: Dabei wird auf die Erfahrung eines Benutzers mit einer Webseite eingegangen. Und diese Erfahrung, oder Erlebnis, man möge es nennen, wie man möchte, soll auf keinem Fall schlecht sein. Heute stellen wir Ihnen ein nützliches Blog vor, welches sich intensiv mit dem Thema User Experience beschäftigt.


InspireUx: ein Blog über User Experience

Was ist InspireUX?

InspireUX ist ein Blog, welches sich mit dem Thema UX Experience sehr intensiv beschäftigt. Das Blog wird von UX Experience-Designerin Cartiona Cornett betrieben. Cartiona bietet in Ihrem Blog zahlreiche Sachen an, welche nicht nur interessant und nützlich, aber auch mit einem Touch Entertainment, so wie beispielsweise Zitate verschiedener Webdesigner. Im Weiteren werde ich Ihnen einige Rubriken aus dem Blog von Catriona Cornett vorstellen, damit Sie sich selbst davon ein Bild machen können.

Rubrik „Articles“

In dieser Rubrik erscheinen zahlreiche Beiträge zum Thema UX Experience.Verschiedentlich finden sich hilfreiche Quellen zur vertieften Information.


Artikel: ein Ausschnitt aus der Rubrik

Rubrik „Quotes“

Diese Rubrik macht den Blog etwas philosophischer. Zahlreiche Zitate von verschiedenen Webdesignern werden präsentiert. Man kann sie hier nach Kategorien sortiert finden.


Rubrik „Quotes“: alle Zitate sind nach Themen sortiert


Accessibility (Zugänglichkeit): ein Ausschnitt aus allen Zitaten


Behaviour: ein Ausschnitt aus allen Zitaten

Neue Zitate werden übrigens drei mal pro Woche zu jeder Kategorie hinzugefügt.

Rubrik „Galerie“

Hier sind alle Zitate noch einmal dargestellt. Diesmal aber in schönen Screenshots!


Schöner Screenshot: Zitat von Steve Baty


Zitat von Kim Goodwin


Zitat von Julia Bleecker

Es ist auch möglich, Zitate vorzuschlagen. Nach einem Check werden diese eventuell für das Blog ausgewählt. Wichtig: die geschickten Zitate sollen über das Thema „User Experience“ sprechen.

Fazit

Meiner Meinung nach ist InspireUx eine gelungene Idee. Das Blog stellt eine gute Kombination aus Wissen und einer Zitatenkollektion, welche dazu noch schön gestaltet ist. Das Blog wirkt viel versprechend, wenn auch die Postingfrequenz stark zu wünschen übrig lässt. Ich empfehle Ihnen dennoch herzlichst, darin zu lesen, insbesondere wenn Sie die ersten Erfahrungen mit User Experience sammeln.

(dpe)

Kategorien
Apps Design Essentials Freebies, Tools und Templates Programmierung UI/UX Webdesign

Sketchkit, iOS Design Stencils, iOS 5 GUI PSD: Wireframes für iPhone-Apps schnell erstellen

Bevor man mit dem Design einer Webseite beginnt, wird normalerweise ein Wireframe erstellt. Ohne Wireframe geht man das Risiko ein, die ganze Arbeit wieder von Anfang an machen zu müssen, falls dem Kunden etwas nicht gefällt. Ist allerdings ein fertiger Prototyp vorhanden, ändert man im Idealfall nur ein paar Kleinigkeiten, um den Kunden zufrieden zu stellen. Heute stelle ich Ihnen drei interessante Möglichkeiten vor, die eine qualitative Erstellung von Wireframes für iPhone 4S-Applikationen erlauben.


(Bildquelle: baldiri auf Flickr | CC-BY-SA)

Wireframes mit Keynote erstellen? Ja, das geht!

Apple’s Keynote ist ein Supertool, um schöne Präsentationen zu gestalten. Alles, was man braucht, ist hier geboten: eine grosse Auswahl an Vorlagen, Tabellen, Diagrammen, Graphiken uvm. Die Erstellung einer Präsentation in Keynote ist bequem und funktioniert sehr schnell. Aber in diesem Post soll es nicht darum gehen, sondern um Sketchkit. Sketchkit ist eine Reihe von Vorlagen, welche herunter geladen und in Keynote verwendet werden können. Mit Hilfe dieser Vorlagen ist es möglich, Wireframes für iPhone zu erstellen. Dabei können alle Beschriftungen und Elemente beliebig bearbeitet und angepasst werden.


Sketchkit Wireframes: ein Ausschnitt

Im Sketchkit sind vorgezeichnete iOS-Elemente enthalten. Diese erlauben eine qualitative Wireframe-Erstellung für iPhone 4S-Applikationen. Navjot Pawera, der Entwickler von Sketchkit, bietet Vorlagen auf Gumroad an. Aber keine Panik: erstens funktioniert es hier nach dem System „pay what you want“ und zweitens bekommt man die Vorlagen per Email zugeschickt, auch wenn einfach eine Null eingetippt und die eigene Emailadresse eingegeben wird.


Das Sketchkit wird bequem per Email zugeschickt. Keine Sorge: es funktioniert nach dem „pay what you want“-Prinzip

iOS Design Stencils

iOS Design Stencils sind die sogenannten Schablonen zur Entwicklung von Wireframes für iPhone-, iPad- und iPod-Applikationen. iOS Design Stencils wurden von David Morford per Hand entwickelt. Alle diese Schablonen können problemlos skaliert und angepasst werden. Exportiert werden können sie in jedes Vektor-Format, welches von OmniGraffle unterstützt wird.


iOS Design Stencils: ein Ausschnitt

iOS 5 GUI PSD

Bei iOS 5 GUI PSD handelt es sich um Photoshop-Templates, welche bei Entwicklungen von Apps für iPhone 4S eingesetzt werden können. Die Entwickler dieser Templates haben eine große Arbeit geleistet und jedes Detail von iPhone 4S in Photoshop nachgebaut. So lassen sich die Apps viel bequemer und qualitativer entwickeln. iOS 5 GUI PSD-Templates stehen Ihnen zum kostenlosen Download bereit.


iOS 5 GUI PSD: coole Photoshop-Templates, welche die Entwicklung von iPhone-Apps enorm erleichtern

Fazit:

Heute habe ich Ihnen drei Möglichkeiten vorgestellt, Wireframes für iPhone 4S zu erstellen. Natürlich findet man im Netz weit mehr Tools, Photoshop-Templates, Schablonen und Weiteres. Diese drei hielt ich persönlich jedoch für besonders hilfreich und zum anderen sind sie kostenlos.

(dpe)

Kategorien
Design Essentials Icons & Fonts UI/UX

Kostenlose Icons und ein UI-Set für das nächste Webprojekt

Die Benutzerschnittstelle ist der Punkt, an dem der Benutzer mit dem Computer in Kontakt gerät. Die Kommunikation zwischen dem Menschen und der Maschine wird durch verschiedene Maßnahmen erleichtert. Die Verwendung von Symbolen zur Verbesserung der Interaktionsmöglichkeiten hat sich bewährt. Und auch wenn es ohne Icons geht, sind Bildzeichen doch bequemer, informativer und generell sympatischer als Textlinks. Das Netz ist voll von gebrauchsfertigen Varianten. Leider sind nicht alle qualitativ hochwertig.  Ich habe mich auf die Suche nach den Trüffeln begeben  und präsentiere meine Funde im folgenden Beitrag.


(Bildquelle: hansdorsch auf Flickr | CC-BY-SA)

Kostenlose Icons und UI-Sets von Designmodo

Zuerst möchte ich Ihnen ein cooles Inspirationsblog vorstellen: Designmodo. Hier habe ich „>einen guten Beitrag gefunden, der viele kostenlose Icons und UI-Sets für verschiedene Webdienste vorstellt. Klickt man auf ein vorgestelltes Freebie, beispielsweise auf ein Icon-Set, erscheint ein detaillierter Beitrag zu genau diesem Freebie.  Ein Beispiel:

Pandora UI Set für Benutzeroberfläche

Die komplette Information zu diesem Set befindet sich hier. Das Set ist kostenlos, es ist zur Entwicklung von iPhone- und iPad-Applikationen geeignet. Alle Icons sind im PSD-Format vorhanden.


Pandora UI-Set: ein Ausschnitt

Koloria: ein weiteres kostenloses Icon-Set

Dieses Set wurde von Andy Gongea kreiert. Es soll eine breite Nutzungspalette decken: man kann es sowohl zur Entwicklung von Apps verwenden, als auch zur Entwicklung von Portfolios, Produktseiten etc. Die Icons lassen sich im PSD-Format downloaden. Das Set beinhaltet Bildzeichen der Grösse 32 × 32 Pixel. Man kann Koloria sowohl privat als auch kommerziell verwenden, solange man auf die ursprüngliche Webseite verweist.

Koloria Icon-Set: ein Ausschnitt

Kategorien
Design UI/UX

Moodboards – das Design vor dem Design

Ein Moodboard kann zeitraubende Entwürfe und damit Geld sparen helfen. Es handelt sich um eine Collage, die dem eigentlichen Design-Prozess vorausgeht. Hier geht es darum, Stimmungen und Ideen zu sammeln, die für eine bestimmte Aufgabe in Frage kommen. Die Collage kann aus Ausschnitten, Ausrissen und Fotos bestehen und zum Beispiel auf eine Pappe geklebt werden. Auch geeignet sind Papier- (Flipchart) oder Korktafeln (Pinwand). Sie kann auch virtuell am Rechner entstehen.

Eine besondere Software braucht man dazu nicht, jedes Grafikprogramm genügt. Sie sollten in diesem Fall aber einen Farbdrucker ihr Eigen nennen und ihrem Kunden, beziehungsweise dessen Repräsentanten Ausdrucke an die Hand geben. Kunden mögen das und freuen sich über etwas, das man in die Hand und mit ins Büro nehmen kann.

Moodboards können für ganz verschiedene Aufgaben eingesetzt werden, etwa wenn es um die Einrichtung von Räumen geht, in der Mode oder eben im Webdesign. Wie das aussehen kann? Eine Bildersuche im Web oder bei Flickr spuckt jede Menge Beispiele aus.

Screenshot
Leo Chen: Moodboard für Yahoo

Hier geht es um Farben, um Designelemente, typografische Vorlieben, Hintergrundmuster, Illustrationen. In welche Richtung soll es gehen, welcher Stil wird bevorzugt? Das Moodboard wandelt abstrakte Begriffe in etwas Greifbares un. Das ist prima, wenn es darum geht, einem Kunden erste Vorschläge zu machen. Und besser als zuviel zu erzählen. Nicht selten weiß der Kunde ja selbst noch nicht, was er will, hat noch keine Vorstellung vor dem inneren Auge – wer kann es ihm verdenken…

Screenshot
Erica Edwards: Moodboard

In diesem frühen Stadium wird nichts designed oder ge-photoshopped, was letztlich Zeit, Geld und Nerven spart. Supergenaue Entwürfe, Webdesigner sind nicht selten Perfektionisten, braucht es nicht. Die Collage ist schnell zusammengeboßelt. Ihr Charme entsteht gerade durch den dahin geworfenen Charakter. Es können auch Design-Elemente und für das neue Projekt potenziell interessante Details anderer Webseiten einkopiert werden. Schließlich will man sich hier erst inspirieren lassen.


Video (Englisch): Creating a Mood Board

Es ist sinnvoll, mehrere Tafeln zusammenzustellen und beim Treffen vorzuzeigen. Farben und Stimmungen spielen, wie bereits erwähnt, eine besondere Rolle. Der Kunde kann sich spontan für eine Richtung entscheiden, was ihm wahrscheinlich sogar leicht fallen wird.

Auch für Projekte in eigener Sache kann man die Technik einsetzen, beispielsweise wenn man noch nicht sicher ist, wohin die Reise design-technisch überhaupt gehen soll.

Screenshot
Flickr Foto (CC)

Material zum Thema im Web

Mitmachen

Schon einmal für Kunden oder eigene Zwecke Moodboards erstellt? Zeigen Sie Ihr Werk der Designwelt. Senden Sie Screenshots oder Links an hallo(at)spamschutzbitteentfernendrweb.de – Das Dr. Web Magazin erstellt eine Galerie. ™