Kategorien
Best-of HTML/CSS/PSD-Ressourcen Essentials Icons & Fonts Inspiration

Konturiert: 30 kostenlose GUI, Icons und Website PSD-Templates

Trends im Webdesign kommen und gehen wie in der Modewelt. Gute Designer stürzen sich nur auf solche Trends, die Substanz und Wert haben. Dieser Tage unumgänglich ist das Flat Design. Microsofts Metro UI startete den Trend, aber erst durch Apples iOS7 erhielt er einen mächtigen Schub. Seitdem präferieren Designer rund um den Erdball flache Formen, einfache Illustrationen, minimale Farben, starke Typografie und verzichten dafür auf alles, was irgendwie pompös wirken könnte. Flat Design zieht sich durch alle Bereiche. Nicht nur Icons, das gesamte Interface erstrahlt im flachen Glanze.

Der Trend hin zu den sogenannten Ghost-Buttons gehört ebenfalls in diese Kategorie. Diese Art, Schaltflächen zu gestalten, verzichten auf jeden plastischen Effekt und stellt Buttons im Grunde als umrandete Textboxen dar, die sich on hover subtil verändern. Und obwohl diese Schaltflächen zumeist transparente oder semi-transparente Hintergründe aufweisen, fügen sie sich gut auch in Videos oder vollillustrierte, farbenfrohe Websites ein. Zusätzlich ist Typografie hier ein wesentliches Element.

Unsere heutige Sammlung widmet sich den genannten Trends. Wir haben drei Hauptbereiche gefüllt, nämlich grafische User-Interfaces, Icons und komplette Website-Layouts. Viel Spaß beim Stöbern…

The White Stripes UI Kit 

white stripes

Erstellt von/für: Valik Boyev
Lizenz: Frei für die persönliche und kommerzielle Nutzung

Elegant Outline GUI Set part 1 

outline ui

Erstellt von/für: Land-of-web
Lizenz: Frei für die persönliche und kommerzielle Nutzung

ios7 style ui kit 

ios7

Erstellt von/für: Mahmoud Fahim and Mohamed Marakshy
Lizenz: Attribution, nicht-kommerziell

Reach UI Kit 

reach ui

Erstellt von/für:Piotr Makarewicz
Lizenz: Frei für die persönliche Nutzung

Flat Style & iOS 7 Line Style UI Kit

flat ui

Erstellt von/für: Graphicsfuel
Lizenz: Frei für die persönliche und kommerzielle Nutzung

Simple UI Pack 

simple ui

Erstellt von/für: Samuel James Oxley
Lizenz: Attribution, nicht-kommerziell

Mobile Wireframe Kit 

mobile ui

Erstellt von/für: CssAuthor
Lizenz: Frei für die persönliche und kommerzielle Nutzung

Flatimus iOS 

flatimus

Erstellt von/für: Satys
Lizenz: Frei für die persönliche Nutzung

Flat + Transparent UI 

transparent

Erstellt von/für: Monkee-boy
Lizenz: Frei für die persönliche und kommerzielle Nutzung

Vector Wireframe Kit & Symbol Library

vector wireframe

Erstellt von/für: Giles Newman
Lizenz: Attribution Share Alike.

Basiliq 

basiliq

Erstellt von/für: CloudCastleGroup
Lizenz: Frei für die persönliche und kommerzielle Nutzung

Line and Vector UI

line

Erstellt von/für: Saqib Ahmad
Lizenz: Attribution, nicht-kommerziell

Free Agency Web Template 

agency

Erstellt von/für: CssAuthor
Lizenz: Frei für die persönliche und kommerzielle Nutzung

Minimalist PSD Landing Page Template 

minimal

Erstellt von/für: Techandall
Lizenz: Frei für die persönliche Nutzung

Moose Free Homepage 

moose

Erstellt von/für: Elemisfreebies
Lizenz: Frei für die persönliche Nutzung

Elegant Coming Soon Page 

coming

Erstellt von/für: Land-of-web
Lizenz: Frei für die persönliche und kommerzielle Nutzung

One Page Portfolio 

one page

Erstellt von/für: Techandall
Lizenz: Frei für die persönliche Nutzung

BrandaLoka 

banda

Erstellt von/für: Andreansyah Setiawan
Lizenz: Attribution, nicht-kommerziell

Treehouse 

treehouse

Erstellt von/für:Freebiesxpress
Lizenz: Frei für die persönliche Nutzung

Simple Line Icons 

simple line

Erstellt von/für: Mirko Monti
Lizenz: Frei für die persönliche Nutzung

Icons

squared

Erstellt von/für: Martin J.Berthelsen
Lizenz: Frei für die persönliche Nutzung

iOS7 Vector Icons 

ios7 icons

Erstellt von/für: Streamlineicons
Lizenz: Frei für die persönliche Nutzung

Pictograms Giveaway 

picto

Erstellt von/für: Jamila Hodges
Lizenz: Attribution, nicht-kommerziell

Nasty Icons 

funny

Erstellt von/für: Nastyicons
Lizenz: Frei für die persönliche Nutzung

Stripes & Co – A Line-Styled Icon Set 

speckyboy

Erstellt von/für: Speckyboy
Lizenz: Frei für die persönliche und kommerzielle Nutzung

Simple Weather Icons 

weather

Erstellt von/für: Dan Vierich
Lizenz: Lizenzfrei

Vector Outline Icon Set 

icons2

Erstellt von/für: Techandall
Lizenz: Frei für die persönliche Nutzung

Gicons

gicons

Erstellt von/für: Designbeep
Lizenz: Lizenzfrei

Icon Square Ilepixeli Set

squared3

Erstellt von/für: Piotr Makarewicz
Lizenz: Frei für die persönliche Nutzung

Thin Rounded Icons 2 

round

Erstellt von/für: Sebastien Gabriel
Lizenz: Frei für die persönliche Nutzung

(dpe)

Kategorien
Apps Inspiration Programmierung Showcases

Mockups: 50+ kostenlose Design-Ressourcen für deine Präsentation

Du kennst das. Du hast eben begonnen, an der Kunden-Website zu arbeiten, da will der Kunde schon mal sehen, wie das so aussehen wird, am besten auch gleich auf mehreren Geräten. Und natürlich so, dass er sich darunter was vorstellen kann.

Oder will dein Chef die App, an der du gerade die ersten Umsetzungsschritte vornimmst, jetzt schon aussagekräftig vermarkten? Ober benötigst du gar selber für deine tolle Idee zu einem Kickstarter-Projekt ein Mockup deiner App, das die Leute überzeugt und zum Investieren animiert? Egal, ob diese oder ähnliche Szenarien, du benötigst etwas, das es noch gar nicht gibt. Zauberei. Das ist ein Fall für Dr. Web.

Wir haben uns in die Weiten und die Tiefen des Webs begeben und unsere Netze ausgeworfen. Hängen geblieben sind fast 60 Dienste und Vorlagen auf Foto- oder Vektorbasis, mit denen deine Präsentation zumindest potenziell ein Erfolg werden kann. Sagen wir es so: Wenn du trotz unserer Hilfe keinen Erfolg haben solltest, lag es an was anderem ;-)

Abschnitt #1: Dienste

Placeit

placeit
Erstellt von/für:   placeit

Device Art Generator

device-art-generator

Erstellt von/für:   Android Developers

Mockuphone

mockuphone

Erstellt von/für:   mockuphone

ShapeItApp

shapeitapp

Erstellt von/für:   shapeitapp

Am I Responsive

am-i-responsive

Erstellt von/für:   responsivedesign

Abschnitt #2: Fotorealistische PSD-Mockups

iPhone Mockups

iphone-mockups-by-regy-perlera

Erstellt von/für:   Regy Perlera

iPad & iPhone 5s Mockups

ipad-&-iphone-5s-mockups-by-regy-perlera

Erstellt von/für:   Regy Perlera

iPhone 5s Mockup in Gold

iphone-5s-mockup-gold-by-christoph-gromer

Erstellt von/für:   Christoph Gromer

Flat iPhone 5S Mockup

flat-iphone-5S-mockup-by-george-vasyagin

Erstellt von/für:   George Vasyagin

iPad Mini

ipad-mini-by-kenny-sing

Erstellt von/für:   Kenny Sing

Nexus 5 Mockup

nexus-5-mockup-by-kreativa-studio

Erstellt von/für:   Kreativa Studio

Xperia Mockup

xperia-mockup-by-josé-polanco

Erstellt von/für:   José Polanco

Notemockup2

notemockup2

Erstellt von/für: webvilla

Surface 2

surface-2-by-sam-withey

Erstellt von/für:   Sam Withey

iPhone 5 Foto-Mockup

iphone-5-photo-mockup-by-brandon-brown

Erstellt von/für:   Brandon Brown

Notemockup3

notemockup3

Erstellt von/für:   webvilla

iPhone & MacBook Pro

iphone&probook-by-anpsthemes

Erstellt von/für:   anpsthemes

iPad 3

ipad-3-by-brandon-brown

Erstellt von/für:   Brandon Brown

Nexus 5

nexus-5-by-vector-square

Erstellt von/für:  Vector Square

Nokia Lumia 2520

nokia-Lumia-2520-by-andrii-sydorov

Erstellt von/für:   Andrii Sydorov

Iphone 5S & 5C Mockup

iphone-5s-&-5c-mockup-by-gwénolé-jaffrédou

Erstellt von/für:   Gwénolé Jaffrédou

iPhone 5

iphone-5-by-paul-flavius-nechita

Erstellt von/für:   Flavius Nechita

iPad Mockup

ipad-mockup-by-petter-berg

Erstellt von/für:   Petter Berg

Macbook Mockup

macbook-mockup-by-petter-berg

Erstellt von/für:   Petter Berg

MacBook Air Mockup

macBook-air-mockup

Erstellt von/für:   ninetofive

MacBook Air Mockup

macBook-air-mockup-1

Erstellt von/für:   ninetofive

The Desk Template

the-desk-template

Erstellt von/für:  Jérémy Paul

iPhone 5 schwebend

iphone-5-levitation

Erstellt von/für:   Jérémy Paul

iPhone 5 3D

iphone-5-3d

Erstellt von/für:   Jérémy Paul

iPhone 5s

iphone-5s-mockup

Erstellt von/für:   graphicburger

Macbook Air Screen

macbook-air-screen

Erstellt von/für:   pixeldima

iPhone5 fotorealistisch

iphone5-photo-realistic-mockup

Erstellt von/für: Tomas Korosi

Desktop-Ständer

phone-Holder

Erstellt von/für: Danny Johnson Junior

3D iPhone

3d-iphone

Erstellt von/für: nickmurphy

Abschnitt #3: Vektor-basierte PSD-Mockups

Ipad Air Mockup

ipad-air-mockup

Erstellt von/für:   blugraphic

iPhone

iphone-by-graph-concepts

Erstellt von/für:   Graph Concepts

Minimal Flat Iphone5

minimal-flat-Iphone5-by-rahul-dass

Erstellt von/für:   Rahul Dass

Samsung Galaxy S4 

samsung-galaxy-s4

Erstellt von/für:   Valentin Scholz

Simple Flat iPhone 5S Vektor

simple-flat-iphone-5s

Erstellt von/für:   Alberto Ziveri

Nexus 5 

nexus-5-by-greg-moore

Erstellt von/für:   Greg Moore

Samsung Mobile 

samsung-mobile-by-monkeytempal

Erstellt von/für:   monkeytempal

iPhone und Android 

iphone-and-android-by-billy-kiely

Erstellt von/für:   Billy Kiely

Apple-Armada im Flat Design

flat-apples-devices

Erstellt von/für:   Michal Jakobsze

BlackBerry Z10

blackberry-z10

Erstellt von/für:   graphicburger

Smartphones

smartphones

Erstellt von/für:   Jérémy Paul

Nexus 5 in Flat

nexus-5-flat

Erstellt von/für:   Christian Björkman

Flat Showcase mit mehreren Geräten

flat-showcase-presentation

Erstellt von/für:   victorsosea

 Illustrator-Vorlage mit verschiedenen Geräten

mobile-devices-illustrator-template

Erstellt von/für: uxkits

Diverse Mobilgeräte im Flat Design

flat-mobile-devices

Erstellt von/für: Herr Henning

HTC One

htc-one

Erstellt von/für: Ben Mildren

iPhone 5c, gewohnt farbenfroh

iphone-5c-colorful

Erstellt von/für: Anton Kudin

Nexus 7

nexus-7

Erstellt von/für: Tim Gale

(Der Beitrag wurde im April 2019 zuletzt geprüft und um tote Links bereinigt.)

Kategorien
Apps Programmierung

HTML5 Device Mockups: Populäre Geräte als Rahmen für Live-Webinhalte auf der eigenen Site nutzen

Das hier macht Freude. Wir kennen Finnland ja bereits für eine ganze Reihe toller Dinge, etwa Gummistiefel und – äh – Helsinki. Die Entwickler Angelos Arnis und Tomi Hiltunen wollen diesem famosen Portfolio finnischer Bekanntheit eine weitere Facette hinzufügen. Sie veröffentlichten vor wenigen Tagen auf Basis von PNG und HTML5/CSS3 einen Satz an Mockups verschiedener populärer, vor allem mobiler Geräte, nebst der Möglichkeit, den Viewports dieser Geräte echte Webinhalte, nicht etwa nur Screenshots, zu implementieren. Das ist ideal, wenn man demonstrieren will, wie das eigene Portfolio, etwa als Entwickler mobiler Web-Apps, auf verschiedenen Geräten angezeigt werden wird. Ich bin sicher, die Lösung von Arnis und Hiltunen wird schnell Freunde finden…

html5-device-mockups-w640

Pures CSS oder HTML5 Data-Attribute steuern das Look & Feel

Aktuell besteht das Set von HTML5 Device Mockups aus acht populären und verbreiteten (mit Ausnahme des Lumia 920 und des Surface-Tablets) Geräten. Es gibt das iPhone5 und das iPad in Hoch- und Querformat, jeweils in weiß und schwarz. Desweiteren steht ein iMac und ein MacBook Pro bereit. Die Android-Fraktion freut sich über das Galaxy S3 in blau und weiß und verschiedenen Ausrichtungen, sowie ein Nexus 7. Last und auch least ist es möglich, Webinhalte zusätzlich in den Viewport eines Lumia 920, sowie eines Surface-Tablet zu stecken. Schön am Lumia, es ist in gelb implementiert…

Neben den für die Darstellung erforderlichen PNGs mit Alpha-Transparenz liefern Arnis und Hiltunen die PSD-Dateien zu den einzelnen Geräten mit. Auf diese Weise kann man die Mockups auch für Druck-Präsentationen, Flyer und ähnliches nutzen.

Der Motor des Projekts, das auf Github gehostet wird, besteht aus zwei CSS-Dateien. Beide erledigen die gleiche Aufgabe. Der Unterschied besteht darin, dass die Datei device-mockups.css mit zusätzlichen CSS-Klassen arbeitet, während die Datei device-mockups2.css das gleiche Ergebnis unter Verwendung von HTML5 Data-Attributen erzielt.

Das folgende Beispiel arbeitet auf der Basis der zweiten Variante, aber greifen wir nicht zu weit vor. Als erstes bauen wir das entsprechende CSS in unsere Website ein:

Dann verwenden wir die mitgelieferte Mockup Device Generator.html, indem wir sie in einem Browser unserer Wahl aufrufen, alternativ verwenden wir den Generator der Demo-Site. Jetzt klicken wir das gewünschte Mockup zusammen und lassen uns den korrespondierenden Code anzeigen. Per Copy & Paste übernehmen wir diesen in unsere Website.

Ich wählte entsprechend ein weißes iPhone im Querformat. So sieht das aus:

white-iphone5-landscape-w640

Und dieser Code gehört dazu:

Wie Sie sehen, erfolgt die Definition des entsprechenden Geräts komplett mittels Data-Attributen. Die andere Variante hätte zusätzliche CSS-Klassen verwendet.

Der wichtigste Teil innerhalb dieses kleinen Code-Schnipsels findet sich als das div mit der Klasse screen. Hier können Sie den gewünschten Inhalt einfügen. Dieser Inhalt kann im Grunde alles sein, was man auch ansonsten auf Websites präsentieren würde, also beispielsweise Medien, wie Videos und Bilder, oder JavaScript-Anwendungen oder was auch immer man in einen iframe packen kann. Das div mit der Klasse button erlaubt es, dem Home-Button eine Funktionalität zuzuweisen. Kann man machen, oder man entfernt das Div komplett.

embedded-content-w640
Beispiele von der Projekt-Website

Viel Fantasie bedarf es nicht, den Nutzen der Lösung zu erkennen. Der offensichtlichste Anwendungsfall dürfte wohl der sein, für mobile Geräte konzipierte Lösungen auch außerhalb dieser Geräte auf der eigenen Website zu zeigen.

Die HTML5 Device Mockups, so der offizielle Projekt-Name, stehen kostenfrei, sowohl zur privaten, wie kommerziellen Nutzung zur Verfügung. Auch die Modifikation ist erlaubt, wie mir einer der beiden Entwickler eben per E-Mail bestätigte..

Was halten Sie von dem Projekt? Lassen Sie es mich wissen.

Links zum Beitrag

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: