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
Design HTML/CSS

HTML, CSS, PSD und mehr: 22 kostenlose Design-Ressourcen aus dem Dezember 2013

Design-Ressourcen werden aus verschiedenen Gründen stets gern genommen. Einige von uns verwenden sie als Bausteine für ihr nächsten Projekt. Andere nutzen sie lediglich, um sich eigenen Kreationen inspirieren zu lassen. Aber uns allen gemeinsam ist, dass wir diese Ressourcen sammeln. Der alte Jäger und Sammler in uns lässt sich halt nicht überlisten. In vollem Bewusstsein dieses Umstandes haben wir uns wieder durch die Tiefen des Netzes bewegt und sind mit der folgenden Liste voller HTML-, CSS- und PSD-Templates wieder aufgetaucht. Nehmen Sie sie mit zur Feuerstelle und hören das begeisterte Uga, Uga.

Eins noch vorab: Alle der folgenden Elemente können frei genutzt werden. Manchmal ist allerdings im Vorfeld des Download eine kostenlose Registrierung erforderlich…

Sektion #1: HTML-Vorlagen

Every Web Service: HTML-Template im Web-Service-Look

Every web service template

Erstellt von: Matt Boldt
Features: Minimalistisches Design, eher was für Unternehmen

Wijayakusuma: Landing-Page mit großem Countdown-Zähler

Wijayakusuma landing page

Erstellt von: Bagus Fikri
Features: Extrem prominenter Countdown

Hawthorne: Minimalistisch, mit schöner Typografie

Hawthorne HTML template

Erstellt von: Type and grids
Features: was für Minimalisten und Freunde durchdachter Typografie

Flat UI Components: Interaktive UI in HTML5 und CSS3

Flat HTML UI

Erstellt von: Javier Latorre López-Villalta
Features: Moderne HTML/CSS-Vorlage im aktuellen Designtrend

Sektion #2: PSD-Vorlagen und Elemente

The Depending Theme: Dunkles Grid-Template für Agenturen

The depending theme PSD

Erstellt von: Gennadiy Ukhanov
Features: grid-basiert

Swiss: Modernes Tumblr-Template

Swiss PSD template

Erstellt von: Niall MacFarlane
Features: gut strukturiert und minimalistisch

Delize: Newsletter-PSD-Template mit huter Layer-Organisation

Delize PSD template

Erstellt von: Michael Reimer
Features: sehr gut organisierte PSD-Datei

Startup: Flat Design mit vielfältigen Einsatzmöglichkeiten

Startup PSD template

Erstellt von: eWebDesign
Features: sehr vielseitig verwendbar und im aktuellen Flat-Trend

GerduKreatip: für das Agentur-Portfolio

GerduKreatip PSD template

Erstellt von: Andreansyah Setiawan
Features: mehrere Seiten im Template

Smart App: Minimalistische Landing-Page für App-Entwickler und andere

Smart App PSD template

Erstellt von: PsdBooster
Features: Minimalistisches, sehr modernes und ansprechendes Design

Church Website Template: Texturen, aufwändige Typografie, dennoch nicht überladen

Church Website PSD tempate

Erstellt von: FREEPSDFILES.NET
Features: PSD-Datei wohl-organisiert

Bloom: Flat Template für E-Commerce’ler

Bloom e-commerce PSD template

Erstellt von: Enes Danış
Features: durch das Flat Design entsteht ein starker Fokus auf die Produkte

Sektion #3: Elemente für grafische Benutzeroberflächen

Flat UI Final: Standard-Flat-Kit für Designer

Flat UI final

Erstellt von: Samsu
Features: Flat Widgets für mobile Apps

Instagram UI: Instagram Interface aus Vektoren

Instagram UI

Erstellt von: MarinaD
Features: Hübsches Instagram-Interface für Mockups

UI Kit: Flat Widgets-Kit für Web Apps

UI kit

Erstellt von: Simeon K.
Features: Flat Elemente für soziale Anwendungen im Web, sowie Dashboards

Dark Transparent UI Kit: Transparente Widgets für Soziale Apps

Dark transparent UI kit

Erstellt von: Lovi Joshi
Features: Dunkel, modern, mit verschiedenen Nutzerprofil-Elementen

iOS 7 Wireframe Kit: Nützlich für iOS-Entwickler

iOS7 wireframe kit

Erstellt von: Jay Visavadia
Features: 2 Themes enthalten

UI Set: Elemente für mobile Social Apps

UI Set

Erstellt von: Muharrem Şenyıl
Features: iOS7 lässt grüßen

Bootstrapee Dark UI: Dunkle Elemente für Web Apps

Bootstrapee Dark UI

Erstellt von: Bootstrapee
Features: 5 Menüs, 3 Drop-Down-Menus und viele weitere Elemente

Flat Design User Interface Elements: Frei skalierbare Elemente für jede Art von Projekt

Flat design user interface elements

Erstellt von: Marie Dehayes
Features: (Fast) alle Elemente, die man braucht für mobile Apps

Lucid UI Kit: Modern, klar, mit weichen Texturen und Verläufen

Lucid UI kit

Erstellt von: Lucid Site Designs
Features: Ausgewogene Farbwahl, sehr ansehnlich

Massive UI Kit: Auffälliges iOS7-Interface

Massive UI kit

Erstellt von: Max Silenkov
Features: schon im Stile von iOS7, aber dennoch recht auffällig gehalten

Weitere Teile unserer monatlichen Serie mit Design-Ressourcen

Haben Sie erst heute herausgefunden, dass wir die besten Design-Ressourcen regelmäßig zusammenschnüren und als Paket bereit stellen? Wollen Sie sehen, was wir in den vergangenen Monaten ausgegraben haben? Dann schauen Sie mal hier:

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
Essentials Freebies, Tools und Templates Inspiration Showcases

HTML, CSS, PSD und mehr: 25 kostenlose Design-Ressourcen aus dem November 2013

Ja. Hallo erstmal. Auch in diesem Monat melden wir uns wieder mit einer weiteren Ausgabe unseres monatlichen Komplettpakets der besten, frischesten Design-Ressourcen der letzten Wochen. Wenn Sie unsere regelmäßige Serie bereits kennen 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…

Sektion #1: HTML-Vorlagen

Fore: Minimalistisches HTML-Theme

Erstellt von: Jordan Bowman aka Papaya
Features: Responsives Template im aktuellen Onepager-Stil

Fore HTML template

Spotlight: Landing Page mit Konversionsdrang

Erstellt von: bestpsdfreebies.com
Features: Drei verschiedene Farbkombinationen, komplett mit PSD und DokumentationSpotlight HTML theme

Piccolo: Modern, klar, einfach

Erstellt von: Nathan Brown
Features: Basierend auf Bootstrap bietet dieses Theme 19 verschiedene Seitenlayouts.

Piccolo theme

Flat Ui: Benutzerinterface im Flat Design mit HTML/CSS

Erstellt von: Javier Latorre López-Villalta
Features: HTML/CSS Flat GUI

Flat UI HTML/CSS

Zeni : Responsives HTML5-Theme

Erstellt von: Luiszuno
Features: Responsives Template mit diversen Seitenlayouts

Zeni HTML theme

Wee: Professioneller One-Pager mit HTML5

Erstellt von: Egrappler
Features: verschiedene Seitenlayouts

Wee HTML theme

Sektion #2: PSD-Vorlagen und Elemente

Hexal: Portfolio-Template mit stark sechseckigem Einschlag

Erstellt von: Petrovski Marijan
Features: Flat Design mit vielen Ecken und Kanten ;-)

Hexla PSD template

Golden Gate: Portfolio-Theme, inspiriert vom goldenen iPhone

Erstellt von: Viktor Hanacek
Features: Gold is the new Black, könnte man sagen. Das iPhone 5s inspiriert jedenfalls.

Golden Gate PSD template

Travel Booking Website: PSD-Template für Reise-Sites

Erstellt von: vasiligfx
Features: Modernes, klares Design, dem Flat Trend folgend

Travel Booking PSD template

Selly: eine einfache Landing Page als PSD

Erstellt von: Michał Ptaszyński
Features: Einseitiges Template für Web-Wartehäuschen

Selly Landing Page

My Charity: Grid-basiertes, Flat Design Template

Erstellt von: cssauthor
Features: Wieso diese Vorlage ausdrücklich für mildtätige Zwecke geeignet sein soll ist unklar. Als Portfolio-Template über die volle Breite des Screens macht es sich ebenso gut.

My Charity PSD template

Aqual: ein weiteres minimalistisches Landing Page Template

Erstellt von: Ainar
Features: modernes Design, mehrere Seiten verfügbar

Aqual landing page PSD

Fooseshoes: Flat E-Commerce-Template

Erstellt von: Enzo Li Volti
Features: One-Pager in modernem Look

FooseShoes

Perth: Flat Landing Page Template mit sanfter Farbgebung

Erstellt von: blazrobar.com
Features: Onepager, fluffige Farben

Perth template

Rumors: Magazin- und News-PSD-Template

Erstellt von: herowp.com
Features: für Blogs, Nachrichtenseiten und Magazine geeignet

Rumors PSD template

Dexter’s Lab: und noch ein Landing Page Template

Erstellt von: Balkan Brothers
Features: Flat und modern

Lab template

Sektion #3: Elemente für grafische Benutzeroberflächen

Flat Ui Kit: An Behance erinnerndes User-Interface für mobile Anwendungen

Erstellt von: uipixels.com
Features: Social Media Widgets im Flat Design

Flat UI kit

Ubuntu GUI Template: Komplettes Set für Ubuntu-Fans

Erstellt von: DesignShock
Features: Linux-UI für echte Freunde des alternativen Betriebssystems

Ubuntu GUI template

UI Kit by Jamie Syke: Flach und rund und mit lebhafter Farbgebung

Erstellt von: Jamie Syke
Features: Dashboard-Widgets in zeitgemäßen Design

UI kit by Jamie Syke

Minimalistic Flat UI: Blau-dominiertes UI-Kit für mobile Apps

Erstellt von: superstoked
Features: Blau…

Minimalistic Flat UI

Flat UI Kit mit starkem Fokus auf das soziale Element

Erstellt von: Abhimanyu Rana
Features: Einfach und klar, flat und pastellig

Flat UI kit

Incoming Call Interface: Designvorschlag für eine Mobil-App

Erstellt von: Martijn Otter
Features: Sanfte Farbverläufe erinnern an ältere Apple-Designstandards und an das brandneue iOS 7 ;-)

Incoming Call UI kit

Flatty UI: mit viel Liebe zum Detail erstelltes Interface

Erstellt von: Mahmoud Baghagho
Features: detailreich und gut strukturiert

Flatty UI

Google Maps UI: detailgetreuer Nachbau der Google UI

Erstellt von: Victor Soussan
Features: Vektor-basierend und reichlich originalgetreu

Google Maps UI

Dribbble App Concept PSD: So könnte eine App wohl aussehen

Erstellt von: marekdvorak
Features: Gäbe es eine Dribbble-App, könnte sie so aussehen. Aber auch andere Apps könnte man mit diesem Kit dengeln.

Drible Concept PSD

Weitere Teile unserer monatlichen Serie mit Design-Ressourcen

Haben Sie erst heute herausgefunden, dass wir die besten Design-Ressourcen regelmäßig zusammenschnüren und als Paket bereit stellen? Wollen Sie sehen, was wir in den vergangenen Monaten ausgegraben haben? Dann schauen Sie mal hier:

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

AfterLogic WebMail Pro v7: Die Zukunft der Webmail-Frontends?

Ich wechselte schon vor Jahren zu Gmail. Ich tat das nicht etwa wegen der Features – teils schon wegen des Spamschutzes -, aber was mich wirklich rüberzog, war das Design. Ich hatte die Nase voll von Outlook und ich hatte die Nase gestrichen voll von den Webmail-Interfaces der Neunziger. Jeder Service da draußen war längst beim Look 2.0 angekommen, nur die Webmail-UIs, die verharrten gnadenlos barock. Hätte AfterLogic WebMail Pro v7 zur Zeit meines Wechsels bereits existiert, hätte ich mich womöglich eher für AfterLogic, denn für Google entschieden. Jedenfalls ist WebMail Pro v7 eine PHP-Lösung, die sich jeder ISP oder sonstiger Mailserver-Betreiber genau anschauen sollte.

afterlogic-landingpage

AfterLogic WebMail Pro v7: Arbeitet mit einer Reihe von Servern zusammen

Cloud-Dienste sind der letzte Schrei. Software as a Service rangiert vom Innovationsgrad her nur knapp hinter Bier in Dosen. Das Problem mit SaaS allerdings ist, dass ein guter Dienste-Programmierer nicht garantiert auch ein guter UI-Architekt ist. So kommt es vor, dass man tolle Dienste mit fürchterlichen Nutzerschnittstellen auf die Menschheit loslässt.

An dieser Stelle betritt AfterLogic WebMail Pro v7 die Bühne. WebMail Pro ist kein Mailservice, sondern lediglich eine Benutzeroberfläche für einen eben solchen. WebMail Pro v7 unterstützt eine ganze Reihe führender Mailserver, darunter Exim, Postfix, Courier, Dovecot, Sendmail, Qmail und viele andere unter Linux ebenso wie Microsoft Exchange, MailEnable, IceWarp, MDaemon, hMailServer,und viele weitere unter Windows. Zudem kann es sehr leicht in Hoster-Lösungen wie cPanel, Plesk oder DirectAdmin integriert werden.

WebMail Pro v7: Made with HTML5/CSS3

Nicht unwichtig, WebMail Pro v7 ist schön anzusehen – sauber und modern. WebMail Pro v7 peppt Ihren Mailserver aus den Neunzigern dermaßen auf, dass es Ihnen regelrecht Spaß machen wird, weiterhin mit den Sauriern der Frühzeit zu arbeiten. Das User-Interface wurde komplett unter Verwendung von HTML5/CSS3 erstellt und arbeitet in allen modernen Browsern schnell und zuverlässig. Eingebaute Fallbacks sorgen für Kompatibilität zu Browsern, die man nicht mehr nutzen sollte, die aber im Unternehmensumfeld und in Seniorenheimen noch auf eine große Anhängerschaft vertrauen dürfen. Ebenso unterstützt die Software eine breite Palette von Sprachen.

afterlogic-user-login

WebMail Pro v7 arbeitet dermaßen schnell, dass es sich anfühlt wie eine lokal installierte Software. Dieser Eindruck ist im Wesentlichen dem neuen Feature des “pre-caching” zu verdanken. Pre-Caching lädt Nachrichten direkt beim Start der App im Hintergrund nach und sorgt so für eine gefühlt verzögerungsfreie User-Experience. Gerade hier offenbart sich ein Riesenunterschied zu den bereits erwähnten Webmail-Interfaces der Frühzeit.

afterlogic-user-logged-in

WebMail Pro v7 beschränkt sich aber nicht darauf, Ihnen Zugriff auf Ihre Mails zu geben. Vielmehr wird ein ordentliches Adressbuch, sowie ein schicker Gruppen-Kalender direkt mitgeliefert. Der Verdacht liegt nahe, dass Gmail hier als Inspirator herhalten musste, aber wieso sollte man auch stets das Rad neu erfinden, wenn man doch von Best Practices lernen kann?

afterlogic-contacts

afterlogic-calendar

WebMail Pro v7 hebt sich so deutlich von der Masse ab. Und bietet zugleich den Charme, dass man seine bisherige Lösung nicht über Bord werfen muss, man zieht ihr lediglich einen anderen Mantel über. So bietet Ihnen die Software das Beste beider Welten. Dumm nur, dass der Normalnutzer darauf angewiesen ist, seinen ISP von der Lösung zu überzeugen. Betreiben Sie allerdings selbst einen oder mehrere Mailserver, dann ist WebMail Pro v7 nur eine halbe Stunde Aufwand weit entfernt.

Neben einem intuitiven Interface für Benutzer wartet WebMail Pro v7 auch mit einem sauberen und übersichtlichen Interface für Admins auf. Hier verwaltet man Nutzer, Server, Domains und einige andere Optionen. Sollte ich erwähnen, dass man mit mehr als einer Domain arbeiten kann?

AfterLogic WebMail Pro v7 als Client auf mobilen Devices

Sobald Sie einen Nutzeraccount in WebMail Pro v7 haben, ist es ein Klacks, all ihre Mail-Accounts in das Interface zu integrieren – zumindest solange ihre übrigen Mail-Anbieter IMAP unterstützen. POP3 wird nicht funktionieren.

afterlogic-add-account

WebMail Pro v7 bietet DAV-Synchronisation. Auf diese Weise lassen Kalender und Kontakte mit allen Geräten synchronisieren, die dieses Protokoll unterstützen, allen voran iOS-Devices.

WebMail Pro v7: Moderate Preisvorstellungen

AfterLogic WebMail Pro v7 ist zwar reich an Features, jedoch muss man nicht reich sein, um es zu erstehen. Zwei Lizenzmodelle stehen zur Wahl. Das eine basiert auf der Zahl der User, das andere auf der Zahl der Server. Die kleinste Lizenz erfordert die Zahlung eines Betrages von 99$ für 100 User oder einen Server. Das Prinzip ist klar. Je mehr Nutzer oder Server, desto höher steigt der Preis.

Der Preis bezieht sich stets auf ein Jahr und enthält Updates und Supports in diesem Zeitraum. Jedes weitere Jahr kostet erneut den identischen Betrag. Man könnte also von einem jährlichen Abo-Modell sprechen. Wer glaubt, er käme ohne Updates und Support nach Ablauf des ersten Jahres aus, muss indes nicht erneut zahlen. So betrachtet, ist es doch wieder eine Einmalzahlung. Man sollte sich allerdings, nicht zuletzt aufgrund des sehr moderaten Preises, genau überlegen, ob man sich tatsächlich vom Innovationszyklus abkoppeln will…

Fazit: Wenn Sie eine Chance sehen, die zuständigen Leute zum Einsatz von WebMail Pro v7 zu überzeugen, sollten Sie nicht zögern und es versuchen. Am Ende wird niemand enttäuscht sein. Versprochen…

Links zum Beitrag:

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
Webdesign

Designers Basisausstattung: 10 nützliche Freebies

Sicherlich, jedes Projekt ist anders, aber dann doch wieder ähnlich. Die Ähnlichkeit nimmt zu, je länger man im Designer-Geschäft tätig ist. Dadurch wird es bisweilen schwierig, sich stets auf’s neue hochkreativ zu zeigen, wenn der Kunde es erwartet. Die Problematik intensiviert sich im Laufe der Karriere. Das ist auch normal, denn man ist Mensch und lebt als solcher in seinen eigenen mentalen Grenzen. Als intelligenter Mensch ist man natürlich vorbereitet und hat sich Strategien zur Inspiration zurechtgelegt. Wildes Surfen, aber auch Bleistiftskizzen auf weißem Papier gehören zu den probaten Mitteln. Wenn man es etwas hemdsärmeliger angehen will, kann man sich auch gleich mit fertigen Elementen umgeben. Da sind Freebie-Sammlungen immer gern gesehen…

Die folgenden 10 Freebies sind Teil meines Basis-Baukastens geworden. Manche sind ganz frisch, andere fanden sicherlich schon ein halbes Dutzend Verwendungen. Vielleicht ist auch für Sie was dabei?

1. SEO-Icons im Flat Look

Das ist die neueste Ergänzung meines Werkzeugkastens. Diese 12 SEO Icons im Flat Design passen gut zum aktuellen Trend, besitzen aber genügend Eigenständigkeit, um nicht wie das nächste iOS7 zu wirken, auch die Farbpalette überzeugt. Und wenn iOS7 dann erstmal offiziell ist, werden viele Kunden nach genau so einem Stil fragen. Sie werden sehen…

flat-seo-icons

2. Texturen im Grunge-Look

Diese 25 Texturen habe ich mir ebenfalls erst kürzlich zugelegt. Sie kommen als JPG in 5.000 x 5.000 Pixeln bei 300 ppi und sind kompatibel zu jedwedem Bildbearbeitungsprogramm. Sinnvoll einsetzen lassen sie sich naheliegenderweise nur in Anwendungen, die mit Ebenen arbeiten oder eben im Web.

texture

3. PSD-Vorlage "Modus Versus"

Bootstrap ist beliebt, sehr beliebt sogar. Und wenn das auch bei Ihnen so ist, dann sollten Sie sich dieses Template näher ansehen. Modus Versus ist ein kostenloses Mehrzweck-PSD auf der Basis des 1.170 Grid Systems aus Bootstrap. Das prädestiniert es für den Gebrauch mit responsiven Frameworks, wie eben – Bootstrap…

website-template

4. Flat UI-Kit

iOS (seite neuestem), Windows Modern GUI und Android Jellybean befördern den Trend zu responsivem Design. Dieses Freebie hier hilft beim Einstieg in das Thema. Ob man nun Flat Design eher als eine Reduktion oder eher als einen eigenen Stil definieren will, in jedem Fall ist das Flat UI Kit zeitgemäß.

flat-ui-kit

5. "Media Black" UI-Kit

Das "Media Black" UI-Kit wartet in meinem Werkzeugkasten die meiste Zeit auf seinen Einsatz. Mit seiner dunklen Ausrichtung und den klar fokussierten Einsatzbereichen ist es eher der Ecke "Special Interest" zuzuordnen. Es beinhaltet grafische Elemente für jede Art von Media-Anwendung, also Audio- und Video-Player, liefert aber zusätzlich passende Navigationselemente mit. Das Kit ist auch kommerziell frei nutzbar.

black-media-kit

6. Visitenkarten-Vorlage im Retro-Look (PSD)

Diese Photoshop-Vorlage bereichert Ihren Werkzeugkasten um eine äußerst elegante und moderne Variante einer Visitenkarte, die zudem aufgrund ihres minimalistischen Stylings schnell und umfassend angepasst werden kann. Dieser Freebie besteht aus zwei separaten PSDs und kann sowohl privat, wie kommerziell frei genutzt werden.

business-card

7. Infografiken leicht gemacht mit dem Infographic Vector Kit

Infografiken sind der Knaller momentan. So ist es kein Wunder, dass Kunden auf die Idee kommen, statt langweiliger Powerpoint-Folien doch lieber schicke Infografiken erstellen zu lassen. In solchen Fällen verlasse ich mich zunächst auf das Infographic Vector Kit. Damit habe ich schon einmal die wichtigsten Elemente in einem Kit abgedeckt.

infographic-freeibies

8. Apple-Geräte-Icons

Dazu muss man wohl nicht viel sagen. In diesem Set versammeln sich 10 Darstellungen der Apple-Bestseller. Auf Detailtreue wurde Wert gelegt, geliefert werden PNGs und Illustrator-Dateien. Da das Set schon etwas älter ist, fehlt das iPhone 5. Aber gut, in Illustrator den oberen Ankerpunkt des 4s packen und etwas nach oben ziehen… Fertig ;)

apple-products-icons

9. Simplito: Kostenloses Set mit Social Icons

Aus 2011, aber erst jetzt richtig trendy, flat und so, kommt dieses Set von 24 Icons aus dem Social Media-Umfeld in Form von JPGs und PNGs daher. Ein PSD wird ebenfalls geliefert, so ist umfassende Anpassung möglich. Die Icons können sowohl privat, wie kommerziell unter den Bedingungen des mitgelieferten Lizenz-Files verwendet werden.

social-icons

10. Rahmen & Bänder im Retro-Style

Ich dachte nicht, sowas jemals zu benötigen. Meine Kundschaft sieht das in zunehmendem Maße anders. Der Trend geht auf der einen Seite zu Flat und auf der anderen Seite zu Retro. Und letzteres bedienen diese handgezeichneten Rahmen und Bänder ganz sicherlich. Alle 46 Elemente wurden zunächst auf Papier erstellt und dann digitalisiert und in das Vektor-Format überführt. Durch den comic-artigen Zeichenstil wirken sie fast schon wieder modern. Ich verwende sie gern im Umfeld von Printprodukten, die im weitesten Sinne mit Veranstaltungen zu tun haben.

ribbon

(wa/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 Design Essentials UI/UX

uiFaces: Neuer Platzhalterdienst für Avatare in Design-Mockups

Platzhalterdienste stellten wir in der Vergangenheit schon einige vor. Der heutige Service mit dem sprechenden Namen uiFaces reiht sich dabei nicht ein, denn er nimmt sich eines ziemlich speziellen, aber an Bedeutung in Zeiten von Social Media steigenden Themas an. Er bietet Avatare als Platzhalter für den Einbau in Design-Mockups an, in denen eben solche Avatare erforderlich sind. Dabei kann uiFaces flexibel angepasst werden.

uifaces-start

uiFaces: Von 10 bis 120 Pixel und von kantig bis rund

Caleb Ogden, Freelancer aus Silicon Valley, steckte nach eigenen Angaben neben der Idee nur etwas mehr als einen halben Tag Arbeit in die initiale Ausgabe des Dienstes uiFaces. Aber wie stets, sind es die einfachen Ideen, die am schwierigsten zu finden sind. Insofern darf man uiFaces nicht rein nach dem Aufwand seiner Erstellung beurteilen.

uiFaces besteht aus einer einzelnen Seite. Links sind manuell von Ogden ausgewählte Twitter-Avatare zu sehen, rechts befinden sich die Regler für die Anpassung der Optik selbiger. Wer übrigens glaubt, sein Avatar müsse unbedingt Ogdens App bereichern, kann den Entwickler per Tweet darauf hinweisen. Ich nehme an, dass umgekehrt auch Personen, die sich in der Übersicht nicht finden lassen wollen, dies ebenfalls auf friedlichem Wege werden durchsetzen können.

Per Schieberegler können die Avatare in Schritten von einem Pixel von 10 bis rauf zu 120 Pixeln skaliert werden. Der Abstand zwischen den Avataren kann ebenso von 0 bis 100 Pixeln eingestellt werden. Zudem ist es möglich, die User-Bildchen hinsichtlich ihrer Form anzupassen. Wiederum in Schritten von einem Pixel lassen sich die Bilder von komplett eckig bis rund verformen. Und das ist es auch schon gewesen, was uiFaces an Funktionsumfang anbietet.

uifaces-controls
Die übersichtlichen Anpassungs-Slider von uiFaces

Ist die Avatarübersicht so hinkonfiguriert, wie sie für das eigene Projekt benötigt wird, kann sie mittels eines herkömmlichen Screenshots als Grafik übernommen werden. Nutzern mit einem Mac bietet Ogden zwei Fadenkreuze oberhalb der Übersicht an. Diese entsprechen optisch exakt dem Fadenkreuz, das auf dem Bildschirm angezeigt wird, wenn man auf dem Mac mit Bordmitteln (Cmd + Shift + 4) einen Screenshot initiiert.

Alles in allem ist uiFaces ein kleines, aber sehr nützliches Tool, das in der Bookmarksammlung von Interface-Designern sicherlich einen Stammplatz erhalten wird. uiFaces ist einen knappen Monat alt und kann kostenlos verwendet werden.

Links zum Beitrag:

Kategorien
Essentials Freebies, Tools und Templates Icons & Fonts

Design Kindle: Neue Sammlung kostenloser Ressourcen für Webdesigner mit Icons, Templates, Texturen und noch mehr

Immer wieder ist man als Webdesigner auf der Suche nach Icons, Texturen oder Ideen für Websites. Im Idealfall sind diese dann noch kostenlos und dürfen ohne Einschränkungen für eigene Projekte verwendet werden. Design Kindle bietet genau das. Und obwohl alles kostenlos ist, sind die Ressourcen von durchaus guter Qualität und auch in professionellen Projekten zu gebrauchen.


Startseite von Design Kindle

Große Auswahl, vieles bearbeitbar

Die Auswahl von Design Kindle reicht von unterschiedlichen Icon- und UI-Sets, über Templates für Websites bis hin zu Texturen. Die Texturen sind zudem in hoher Auflösung vorhanden, sodass sie für Printprojekte taugen. Um den Überblick zu gewährleisten, ist alles in Kategorien sortiert.


Beispiel für eine Grafik: iUnits

Neben der obligatorischen Vorschau der Layouts verrät eine Infobox auch die Dateitypen und -größen. Während Texturen in der Regel als JPEG vorzufinden sind, sind Templates und Grafiken als Photoshop-Dateien erhältlich. Diese sind voll bearbeitbar und können den eigenen Bedürfnissen angepasst werden. Bei den Web-Templates sind neben der Photoshop-Datei mit dem zusammengebauten Layout auch HTML- und CSS-Dateien vorhanden – also alles, was nötig ist, um ordentlich damit arbeiten zu können.

Keine Anmeldung, keine Einschränkungen

Die Macher von Design Kindle haben eine sehr schöne Einstellung zum Thema Transparenz und persönliche Daten. Anders als bei vielen anderen Portalen ist hier keine Anmeldung für den Zugriff auf das Angebot erforderlich. Nicht einmal eine E-Mail-Adresse wird verlangt.


Web-Template: in Photoshop vollständig bearbeitbar

Auf einer Infoseite kann man sich zudem über die Designer, die – wie sie selbst über sich schreiben – aus Liebe zur Web-Design-Community die Seite betreiben und ihre Designs kostenlos zur Verfügung stellen, informieren.

Fazit: Tolle Seite mit sehr benutzerfreundlichem Ansatz und anspruchsvollen Grafiken und Layouts, die quantitativ noch Potenzial für Erweiterungen bietet.

(dpe)

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: