Kategorien
Design Essentials Freebies, Tools und Templates UI/UX

Pencil V3: Kostenloses Prototyping-Tool für jedermann

Prototyping kann man perfektionieren, detaillieren, übertreiben. Wenn du lediglich ein funktionsfähiges, also klickbares Mockup brauchst, könnte das Open Source Projekt Pencil für dich völlig ausreichend sein. Im Spätsommer erschien der RC der neuen Version 3.

screenshot-v300b1-thumb

Pencil V3: Grundlegende Mockup-Fähigkeiten

Was Pencil auf den ersten Blick attraktiv macht, ist natürlich der Preis. Das Produkt kostet keinen Cent und ist dennoch für Linux, Windows und macOS zu haben. UI-Sets für Android und iOS werden direkt mitgeliefert, Cliparts ziehst du bequem über die integrierte Schnittstelle zu OpenClipart.org. Neben nativen Apps für Smartphones und andere mobile Devices eignet sich das Tool auch für Web-Apps. Pencil gilt weithin als gute Alternative zu Balsamiq.

Mit Pencil erstellst du beliebig viele Seiten, die untereinander verlinkt sein können. Der gesamte Workflow funktioniert per Drag and Drop. Es ist dementsprechend nicht übertrieben, von einer intuitiv bedienbaren Lösung zu sprechen. Für Pencil existieren haufenweise Sammlungen mit Zusatzelementen aus der regen Community.

Zu den Ausgabeformaten zählt HTML, so dass du den Prototypen auch live im Netz präsentieren kannst. Für die Version 3 wurde Pencil komplett neu geschrieben und ist damit den Grenzen einer Firefox-Extension, die es bislang war, entwachsen.

Neben rohen und ausgefeilteren Mockups ist Pencil ebenso in der Lage, Flussdiagramme zu erstellen, anhand derer du die Programmlogik, die Customer Journey oder andere Abläufe logisch darstellen kannst.

Für den Einsatz in Teams eignet sich Pencil allerdings nicht. Es verfügt über keinerlei Kollaborationsfeatures. Ebenso gibt es keine Einbindung von Cloud-Anwendungen, wie etwa Dropbox. So kann es auch auf Dauer größere Lösung, wie InVision und andere nicht angreifen. Wenn du aber der typische freelancende Einzelkämpfer bist, spricht nichts dagegen, Pencil mal eine Chance zu geben und dein Portemonnaie zu schonen.

Pencil ist so einfach, dass es selbst der Meier aussem Marketing bedienen und der Chef verstehen kann. Vielleicht findet man auf diese Weise mal eine gemeinsame Sprache zur wechselseitigen Verständigung ;-)

Herunterladen kannst du dir den Release Candidate von dieser Seite. Für Windows wiegt der Download runde 62 MB. Die App funktioniert auch unter Windows 10 problemlos. Mach dir selbst ein Bild. Ich vermute, du bleibst dabei.

Kategorien
Essentials Fotografie Freebies, Tools und Templates Inspiration

Google liefert frische Wallpaper für Ästheten

Schon seit längerem zeigt Google ausgewählte Fotos aus Google+ als Bildschirmschoner auf den Chromecast-Geräten an. Jetzt bietet der Konzern aus Mountain View die schicken Hintergründe auch für macOS und Android.

googlewallpapers

Apps für macOS und Android

Wenn du möchtest, dass dein Foto eventuell im Hintergründe-Portfolio der Google-Apps berücksichtigt wird, musst du es nur öffentlich auf Google+ teilen. Größere Chancen wirst du indes haben, wenn du am Google Create-Programm teilnimmst. Alle Fotos werden unter Angabe des jeweiligen Urhebers verwendet.

Um dein macOS aufzufrischen, installierst du dir die entsprechende App, die mit rund 17 MB nicht allzu platzraubend ist. Installiert wird die App aus dem DMG heraus per Doppelklick. Die neuen Hintergründe für den Bildschirmschoner erreichst du dann, wie gewohnt, über die entsprechende Kategorie in den Systemeinstellungen. Dort wählst du “Google Featured” und schon bleibst du bildmäßig auf dem Laufenden.

googlewallpaper-macos

Im Play Store heißt die App “Hintergründe”. Einmal installiert erlaubt dir diese den Zugriff auf alle auf deinem Smartphone vorhandenen Hintergründe, eben auch auf jene aus der Google-Sammlung. Hier sind sie nochmal schön kategorisiert, etwa unter “Stadtansichten”, “Strukturen” und so weiter. Anstatt einen Hintergrund gezielt auszuwählen, kanst du die Funktion “Täglicher Hintergrund” wählen. Damit erhältst du jeden Tag eine frische Optik.

Ja, du hast Recht. Es ist schon seltsam, dass die Kombination der Apps aus macOS und Android besteht, während es sie nicht für Windows und iOS gibt. Ebenso merkwürdig ist, dass es die Bilder unter macOS nur als Bildschirmschoner gibt, während sie unter Android als normale Wallpaper bereit stehen. Aber, so ist es halt…

Kategorien
(Kostenlose) Services Essentials Freebies, Tools und Templates

StockJo: Umfangreiche Sammlung mit Sammlungen kostenloser Design-Elemente und Ressourcen

StockJo ist der Startpunkt zu einer gigantischen Vielfalt für Designer relevanten Contents. Denn es sammelt ausschließlich Sammlungen und ist damit so eine Art Supersammlung. Damit sparen sich gerade relative Neulinge im Design einen ganzen Haufen Zeit. Denn bei StockJo findest du Anlaufstellen für alles, was Herz oder Hirn begehren.

StockJo: Landing Page
StockJo: Landing Page

StockJo: Nüchterne Gestaltung, solide Inhalte

Du bist auf der Suche nach kostenlosen Fotos, Videos, Texturen, Mockups, Schriftarten, Soundfiles, Vektorgrafik und Illustrationen, Farbpaletten, kleinen Werkzeugen, Tutorials, HTML-Vorlagen und sonstigen Netz-Ressourcen? Dann ist StockJo eine gute Startseite für dich.

Erstellt und betrieben von der indischen Agentur Infiyo bietet das recht frische Angebot namens StockJo Zugriff auf alle Helferlein, die im Leben eines Designers von professionellem Interesse sein können.

Regelmäßige Leserinnen und Leser des Dr. Web Magazins wissen zwar, dass in den letzten Jahren geradezu ein Trend darin besteht, immer neue Sammlungen mit kostenlosen Inhalten zu erstellen; aber auch sie haben es bisweilen schwer, den Überblick zu bewahren. Bei der Gelegenheit will ich nochmal schnell auf unseren Sammelbeitrag mit 43 handverlesenen Diensten für kostenlose Fotos hinweisen, der sogar umfangreicher ist, als das, was StockJo zum Thema Fotografie anbietet.

Dafür ist StockJo insgesamt breiter aufgestellt und sammelt über das oben genannte, wesentlich umfangreichere Themenfeld. Damit kannst du bedenkenlos für jeden Bedarf erstmal bei StockJo vorstellig werden.

StockJo: Kategoriebeispiel
StockJo: Kategoriebeispiel

Der Zugang zu den gelisteten Ressourcen kann auf zwei verschiedene Arten erfolgen. Zum einen kannst du die Freitextsuche benutzen, deren Ergebnisse du in einem zweiten Schritt verfeinern kannst, indem du etwa die Resultate nochmal nach Lizenzen filterst. Zum anderen kannst du schlicht in den Kategorien stöbern. Das ist zum jetzigen Zeitpunkt eine gleichwertige Möglichkeit, da die Anzahl der gelisteten Sammlungen noch überschaubar ist.

In den Kategorien findest du Listen, deren Einträge jeweils direkt auf die Startseite der Sammlung verlinken und mit einem Zweizeiler kurz umreißen, was du dort zu erwarten hast. Tags mit Angaben zur Lizenz zeigen, welche Art von Inhaltsnutzung geboten ist. Über das klassische Herzchen-Icon kannst du einem Listeneintrag ein „Gefällt mir“ schenken.

StockJo: zusätzliche Tags geben Infos zur Lizenz
StockJo: zusätzliche Tags geben Infos zur Lizenz

Leider führen Klicks auf die genannten Tags zur 404. Gleiches geschieht, wenn du den in der oberen Navigation genannten Blog aufrufen willst. Da hat Infiyo noch ein paar Hausaufgaben unbearbeitet liegen. Gehen wir mal davon aus, dass es daran liegt, dass StockJo ein Work in Progress ist.

Abgesehen von den paar Unebenheiten ist StockJo einen Bookmark wert und gehört in den Werkzeugkasten nicht nur jeden Designers, sondern im Grunde jeden Seitenbetreibers. Es ist nicht das Universaltool für alle Lebenslagen, aber jedenfalls sehr nützlich. Schau selbst.

Kategorien
Essentials Freebies, Tools und Templates

85 kostenlose fotorealistische Mockups als PSD

Du hast es sicherlich schon gemerkt. Auf einem globalen Marktplatz mit Zillionen von Themes, Templates, interaktiven Designs, Apps und so weiter und so fort, fällt es selbst talentierten Designern schwer, sich gegen die Konkurrenz abzugrenzen. Eine auffällige Produktpräsentation kann da Wunder wirken. Setze also anstelle simpler Screenshots oder Ausdrucken deiner Werke auf die Darstellung selbiger im geplanten Verwendungsumfeld. Genau darum dreht sich unsere heutige Sammlung. Wer nun einwendet, dass es schwer sein könnte, sich mit vorgefertigten MockUps von der Konkurrenz abzusetzen, der sollte zweierlei bedenken. Erstens präsentieren sich die meisten Wettbewerber eben gerade nicht auf diese Weise und zweitens kannst du die MockUps natürlich auch als Inspirationsquelle sehen und deine eigene Kreation darauf basieren lassen…

Im heutigen Beitrag haben wir für dich die besten MockUps recherchiert und eine umfangreiche Liste mit 85 Elementen, die in unterschiedlichem Maße frei genutzt werden können, im Angebot.

Wie stets, solltest du die Lizenzen im Einzelfall, also bevor du ein Projekt damit beginnst, nochmal genau prüfen. Zwar haben wir das bereits getan, aber sicher ist sicher. Viel Spaß beim Stöbern!

Titel: Free PSD iMac Mockup

imac
Erstellt von/für: Sumit Sinha
Lizenz: frei bei Urhebernennung, erstellte Werke müssen zu den gleichen Bedingungen frei gegeben werden

Titel: Free PSD MockUp

closeup imac
Erstellt von/für: Allan Ingwersen
Lizenz: frei nur für nichtkommerzielle Zwecke, Urhebernennung erforderlich

Titel: 7 Smartphone & Notebook PSD MockUps

7 mockups
Erstellt von/für: Carlos Martínez
Lizenz: frei nur für nichtkommerzielle Zwecke, Urhebernennung erforderlich

Titel: Free PSD MockUp Vol. 2

retro psd mockup
Erstellt von/für: Allan Ingwersen
Lizenz: frei nur für nichtkommerzielle Zwecke, Urhebernennung erforderlich

Titel: 9+ Business Card | Tablet Free MockUps Vol. 2

9 mockups
Erstellt von/für: Tomasz Mazurczak
Lizenz: frei nur für nichtkommerzielle Zwecke, Urhebernennung erforderlich

Titel: Free PSD MockUp Download

imac mockup
Erstellt von/für: Premium Mockups
Lizenz: frei bei Urhebernennung, erstellte Werke müssen zu den gleichen Bedingungen frei gegeben werden

Titel: Free PSD MockUp Set

imac und ipad
Erstellt von/für: Premium Mockups
Lizenz: frei bei Urhebernennung, erstellte Werke müssen zu den gleichen Bedingungen frei gegeben werden

Titel: Free iPhone 6 MockUp Set – 6 PSDs

iphone6
Erstellt von/für: Premium Mockups
Lizenz: frei bei Urhebernennung, erstellte Werke müssen zu den gleichen Bedingungen frei gegeben werden

Titel: Free MockUp Set – 4 PSDs

4 mockups
Erstellt von/für: Premium Mockups
Lizenz: frei nur für nichtkommerzielle Zwecke, Urhebernennung erforderlich, erstellte Werke müssen zu den gleichen Bedingungen frei gegeben werden

Titel: iPhone 6 PSD MockUp – Free Download

iphone mockups
Erstellt von/für: Premium Mockups
Lizenz: frei nur für nichtkommerzielle Zwecke, Urhebernennung erforderlich

Titel: Free PSD MockUp Collection

brutal mockups
Erstellt von/für: Premium Mockups
Lizenz: frei bei Urhebernennung, erstellte Werke müssen zu den gleichen Bedingungen frei gegeben werden

Titel: 10 Free MockUps

10 free mockups
Erstellt von/für: Mucahit Gayiran und Mockup Zone
Lizenz: frei nur für nichtkommerzielle Zwecke, Urhebernennung erforderlich

Titel: Free iPhone 5S MockUp

pack of iphone mockups
Erstellt von/für: Mucahit Gayiran und Mockup Zone
Lizenz: frei nur für nichtkommerzielle Zwecke, Urhebernennung erforderlich

Titel: Hosoren – 10 Free Photorealistic iPhone 6 PSD MockUps

photorealistic iphone6
Erstellt von/für: Tran Mau Tri Tam
Lizenz: frei nur für nichtkommerzielle Zwecke, Urhebernennung erforderlich

Titel: Free Photorealistic iPhone 6 Plus PSD MockUp Templates

iphone6 mockups
Erstellt von/für: Tran Mau Tri Tam
Lizenz: frei nur für nichtkommerzielle Zwecke, Urhebernennung erforderlich

Titel: Hands on Laptop (Macbook Pro PSD MockUps)

imac mockup 2
Erstellt von/für: Tran Mau Tri Tam
Lizenz: frei für persönliche und kommerzielle Zwecke

Titel: Free Realistic MockUps

realistic mockup vol2
Erstellt von/für: Mostafa Amin und brandology .sa
Lizenz: frei nur für nichtkommerzielle Zwecke, Urhebernennung erforderlich

Titel: Flat MockUps

vector apple devices
Erstellt von/für: Oxygena Creative
Lizenz: frei bei Urhebernennung, erstellte Werke müssen zu den gleichen Bedingungen frei gegeben werden

Titel: Free PSD MockUps

flat mockups
Erstellt von/für: Applove
Lizenz: frei nur für nichtkommerzielle Zwecke, Urhebernennung erforderlich

Titel: Free Macbook PSD MockUp Creative

macbook mockup
Erstellt von/für: Mocup mockupdeals.com
Lizenz: frei nur für nichtkommerzielle Zwecke, Urhebernennung erforderlich

Titel: iMac MockUp

imac setting
Erstellt von/für: gibsondesigns
Lizenz: als „Free“ bezeichnet, keine dezidierte Lizenz angegeben

Titel: Macbook Pro Office MockUp Set

office mockup
Erstellt von/für: Katerina and Viktor Hanacek.
Lizenz: als „Free“ bezeichnet, keine dezidierte Lizenz angegeben

Titel: iPhone 5c 3D View (PSD Vector MockUp)

iphone 5c
Erstellt von/für: Perfect Pixels
Lizenz: als „Free“ bezeichnet, keine dezidierte Lizenz angegeben

Titel: iPhone 6 MockUp Template PSD

iphone 6
Erstellt von/für: KRISHNAN UNNI
Lizenz: Creative Commons by 4.0 (frei für persönliche und kommerzielle Zwecke bei Urhebernennung)

Titel: 15 iPhone 6 (Black & White) MockUps

16 iphone mockups
Erstellt von/für: Mocka
Lizenz: als „Free“ bezeichnet, keine dezidierte Lizenz angegeben

Titel: Mocka iPhone 6 Freebie

iphone6 in hand
Erstellt von/für: Mocka
Lizenz: als „Free“ bezeichnet, keine dezidierte Lizenz angegeben

Titel: Nokia Lumia

nokia lumia
Erstellt von/für: Kate und Christos
Lizenz: als „Free“ bezeichnet, keine dezidierte Lizenz angegeben

Titel: Free iPhone 6 Photorealistic MockUps

charging iphone6
Erstellt von/für: Kate
Lizenz: als „Free“ bezeichnet, keine dezidierte Lizenz angegeben

Titel: Free iPhone 6, 4.7-inch Template [PSD] by Ramotion

light iphone6
Erstellt von/für: Ramotion
Lizenz: frei nur für nichtkommerzielle Zwecke

Titel: Isometric App MockUp

isometric app mockup
Erstellt von/für: Khalid Hasan Zibon
Lizenz: als „Free“ bezeichnet, keine dezidierte Lizenz angegeben

Titel: Nexus6 800×600 by Perfect Pixels

3 nexus templates
Erstellt von/für: Perfect Pixels
Lizenz: als „Free“ bezeichnet, keine dezidierte Lizenz angegeben

Titel: iPhone6 Plus 3/4 view

iphone6 plus
Erstellt von/für: Perfect Pixels
Lizenz: als „Free“ bezeichnet, keine dezidierte Lizenz angegeben

Titel: iPad Air 2

ipad air 2
Erstellt von/für: Perfect Pixels
Lizenz: als „Free“ bezeichnet, keine dezidierte Lizenz angegeben

Titel: Free Nexus 6 Templates

6 nexus templates
Erstellt von/für: Gabe Will
Lizenz: als „Free“ bezeichnet, keine dezidierte Lizenz angegeben

Titel: Free Illustrated Nexus 5 MockUp

illustrated nexus
Erstellt von/für: Placeit
Lizenz: als „Free“ bezeichnet, keine dezidierte Lizenz angegeben

Titel: iPhone 6 Free mockUp

iphone6 template
Erstellt von/für: Darius Dan
Lizenz: als „Free“ bezeichnet, keine dezidierte Lizenz angegeben

Titel: Nexus 9 Lunar White MockUp

nexus 9
Erstellt von/für: Ben Johnson
Lizenz: als „Free“ bezeichnet, keine dezidierte Lizenz angegeben

Titel: Perspective App Design MockUp

perspective app design
Erstellt von/für: themeraid
Lizenz: als „Free“ bezeichnet, keine dezidierte Lizenz angegeben

Titel: iPhone 6 in Hand PSD MockUp

iphone6 in hand 2
Erstellt von/für: Nikola Randoman
Lizenz: frei für persönliche und kommerzielle Zwecke

Titel: iPhone5 MockUps

iphone5 mockups
Erstellt von/für: Shakuro
Lizenz: als „Free“ bezeichnet, keine dezidierte Lizenz angegeben

Titel: Macbook Pro Retina MockUp

macbook pro template
Erstellt von/für: Tran Mau Tri Tam
Lizenz: frei für persönliche und kommerzielle Zwecke

Titel: Free MacBook Pro (PSD)

free macbook pro
Erstellt von/für: Yogesh Dhiman
Lizenz: frei nur für persönliche Zwecke

Titel: My First MockUp

workplace
Erstellt von/für: Fabrice Fardeau
Lizenz: als „Free“ bezeichnet, keine dezidierte Lizenz angegeben

Titel: Free Poster MockUp

poster mockup
Erstellt von/für: Mike Delsing
Lizenz: frei nur für nichtkommerzielle Zwecke, Urhebernennung erforderlich

Titel: Magazine MockUp Pack

magazine mockup
Erstellt von/für: Mucahit Gayiran und Mockup Zone
Lizenz: frei nur für nichtkommerzielle Zwecke, Urhebernennung erforderlich

Titel: FREE Business Card MockUp

business card mockup
Erstellt von/für: Mucahit Gayiran und Mockup Zone
Lizenz: frei nur für nichtkommerzielle Zwecke, Urhebernennung erforderlich

Titel: Free Poster Design MockUp

poster on a wall
Erstellt von/für: Tim Easley
Lizenz: frei nur für nichtkommerzielle Zwecke, Urhebernennung erforderlich, keine Distribution abgewandelter Werke

Titel: Free Newspaper Advert MockUp

newspaper mockuo
Erstellt von/für: Samuel Ladlow
Lizenz: frei nur für nichtkommerzielle Zwecke, Urhebernennung erforderlich

Titel: Free A4-Bifold Brochure MockUp

brochure mockup
Erstellt von/für: Wassim Awadallah
Lizenz: frei nur für nichtkommerzielle Zwecke, Urhebernennung erforderlich

Titel: Free Roll-up MockUp

roll up mockup
Erstellt von/für: Wassim Awadallah
Lizenz: frei nur für nichtkommerzielle Zwecke, Urhebernennung erforderlich

Titel: Ultimate Business Card MockUps – Free Download

business card mockups
Erstellt von/für: Wassim Awadallah
Lizenz: frei nur für nichtkommerzielle Zwecke, Urhebernennung erforderlich

Titel: Square Magazine MockUp (PSD)

square mag
Erstellt von/für: Wassim Awadallah
Lizenz: frei nur für nichtkommerzielle Zwecke, Urhebernennung erforderlich

Titel: Free PSD Notepad & Magazine MockUp

notepad und mag
Erstellt von/für: Wassim Awadallah
Lizenz: frei nur für nichtkommerzielle Zwecke, Urhebernennung erforderlich

Titel: Trifold Brochure MockUp – Smart PSD

trifold brochure
Erstellt von/für: Wassim Awadallah
Lizenz: frei nur für nichtkommerzielle Zwecke, Urhebernennung erforderlich

Titel: Envelope MockUp (Free)

envelope mockup
Erstellt von/für: Wassim Awadallah
Lizenz: frei nur für nichtkommerzielle Zwecke, Urhebernennung erforderlich

Titel: 20+ Free Poster MockUps

20 poster mockups
Erstellt von/für: Wassim Awadallah
Lizenz: frei nur für nichtkommerzielle Zwecke, Urhebernennung erforderlich

Titel: CV Mockup | Simple DINA4 on Desk | PSD

cv mockups
Erstellt von/für: Holger Wurst
Lizenz: frei für persönliche und kommerzielle Zwecke, Urhebernennung erforderlich

Titel: Photorealistic Magazine MockUp

magazine mockup 2
Erstellt von/für: Mhd Muradi
Lizenz: frei nur für nichtkommerzielle Zwecke, Urhebernennung erforderlich

Titel: Free Poster MockUp

free poster mockup
Erstellt von/für: Zoki Design
Lizenz: frei nur für nichtkommerzielle Zwecke, Urhebernennung erforderlich

Titel: Magazine MockUp

mag mockup
Erstellt von/für: Daniel Zajc
Lizenz: frei nur für nichtkommerzielle Zwecke, Urhebernennung erforderlich

Titel: Free Brochure MockUp

brochure mockup 2
Erstellt von/für: Michael Wood
Lizenz: frei nur für nichtkommerzielle Zwecke, Urhebernennung erforderlich

Titel: Free PSD Mockup – Business Card Vol 2

b card mockup
Erstellt von/für: Alexandre Cardoso
Lizenz: frei nur für nichtkommerzielle Zwecke, Urhebernennung erforderlich

Titel: PSD Poster Mockups

poster2 mockup
Erstellt von/für: Vincent Wielders
Lizenz: frei für persönliche und kommerzielle Zwecke, Urhebernennung erforderlich

Titel: Free Book Cover PSD MockUp

book cover
Erstellt von/für: Zippy Pixels
Lizenz: frei nur für nichtkommerzielle Zwecke, Urhebernennung erforderlich

Titel: Creative Folder MockUp V.3

folder mockup
Erstellt von/für: techandall
Lizenz: frei für persönliche und kommerzielle Zwecke

Titel: FREE Logo MockUp

logo mockup
Erstellt von/für: Abdullah Muhammad Ishmam
Lizenz: als „Free“ bezeichnet, keine dezidierte Lizenz angegeben

Titel: Free Photo Frame PSD MockUp

frames
Erstellt von/für: layerform
Lizenz: als „Free“ bezeichnet, keine dezidierte Lizenz angegeben

Titel: Magazine + Cover

magazine plus cover
Erstellt von/für: madefordesigners
Lizenz: als „Free“ bezeichnet, keine dezidierte Lizenz angegeben

Titel: Magazine MockUp

magazine mockups
Erstellt von/für: Daniel Zajc
Lizenz: als „Free“ bezeichnet, keine dezidierte Lizenz angegeben

Titel: 8 Free Business Card MockUps

8 business cards
Erstellt von/für: blugraphic
Lizenz: als „Free“ bezeichnet, keine dezidierte Lizenz angegeben

Titel: Vintage Label MockUps

vintage label mockup
Erstellt von/für: pixelbuddha
Lizenz: frei für persönliche und kommerzielle Zwecke

Titel: Magazine MockUps

magazine template
Erstellt von/für: Mucahit Gayiran
Lizenz: frei für persönliche und kommerzielle Zwecke

Titel: Hand Drawn Sketch Mock-Ups

hand-drawn sketch
Erstellt von/für: Mockup Zone
Lizenz: als „Free“ bezeichnet, keine dezidierte Lizenz angegeben

Titel: Cup Mockup

cup mockup
Erstellt von/für: webvilla
Lizenz: als „Free“ bezeichnet, keine dezidierte Lizenz angegeben

Titel: Free Card Mockup – PSD

b card designs
Erstellt von/für: cursiveq
Lizenz: als „Free“ bezeichnet, keine dezidierte Lizenz angegeben

Titel: Watercolor Sketch Mock-Up

watercolor sketch
Erstellt von/für: Mucahit Gayiran
Lizenz: als „Free“ bezeichnet, keine dezidierte Lizenz angegeben

Titel: Free Falling Business Cards Mockup

falling business cards
Erstellt von/für: Rafi
Lizenz: frei für persönliche und kommerzielle Zwecke

Titel: Photo Frames PSD Mockups

psd frames
Erstellt von/für: Rafi
Lizenz: frei für persönliche und kommerzielle Zwecke

Titel: 2 Photorealistic T-Shirt MockUps

photorealistic t-shirt mockups
Erstellt von/für: Antonio Padilla
Lizenz: als „Free“ bezeichnet, keine dezidierte Lizenz angegeben

Titel: Outdoor Billboards Mockup Templates

outdoor billboard mockup
Erstellt von/für: Ahmed Adel
Lizenz: frei nur für nichtkommerzielle Zwecke, Urhebernennung erforderlich

Titel: PSD City Ooutdoor Billboard Mockups

billboard campaign
Erstellt von/für: FREE GOODIES FOR DESIGNERS
Lizenz: frei nur für nichtkommerzielle Zwecke, Urhebernennung erforderlich

Titel: Free Bag Mockup (PSD)

shopping bag mockup
Erstellt von/für: Wassim Awadallah
Lizenz: frei nur für nichtkommerzielle Zwecke, Urhebernennung erforderlich

Titel: Free Lamp Post Banner Mockup

lamp post mockup
Erstellt von/für: Samuel Ladlow
Lizenz: frei nur für nichtkommerzielle Zwecke, Urhebernennung erforderlich

Titel: Free Photoshop MockUps

outdoor mockups 2
Erstellt von/für: Andrew Pons
Lizenz: frei nur für nichtkommerzielle Zwecke, Urhebernennung erforderlich, erstellte Werke müssen zu den gleichen Bedingungen frei gegeben werden

Titel: T-Shirt MockUp

9 tshirt mockups
Erstellt von/für: Mucahit Gayiran und Mockup Zone
Lizenz: frei nur für nichtkommerzielle Zwecke, Urhebernennung erforderlich

(Der Beitrag erschien erstmals am 8. März 2015 und wurde von Nataly Birch und Dieter Petereit geschrieben. Seitdem wird der Beitrag regelmäßig aktualisiert. Fällt dir ein Fehler oder ein Änderungsbedarf auf, wäre es nett, wenn du uns unter redaktion@drweb.de darüber unterrichten würdest.)

Kategorien
Essentials Freebies, Tools und Templates

10 nützliche Tools für Webentwickler

Webentwickler haben nie genügend Werkzeug. Denn das Werkzeug entwickelt sich so rasant fort, dass du nie zu dem Punkt gelangst, an dem du aufhören könntest, zu optimieren. Dazu kommt, dass sich Trends ebenso rasch verbreiten. Zu rasch als dass es sich lohnen würde, tief einzusteigen. Nimm lieber ein Tool, dass dir die meiste Arbeit abnimmt, so dass du dich auf deine eigentlich Arbeit konzentrieren kannst. Zeit ist schließlich Geld. Einige solcher moderner Tools für Webentwickler stellen wir dir heute vor.

tools-1209764_640

Materia

Mit Materia baust du sowohl mobile als auch Web-Apps, die skalieren. Der Prozess ist visuell unterstützt. So behältst du stets den Überblick über dein Projekt.

materia
Erstellt von: Webshell
Lizenz: mitgelieferte Lizenz-Datei beachten

CSS Animate

CSSAnimate ist ein kleiner Generator für Keyframe-Animationen. Du brauchst kein CSS mit der Hand zu schreiben. Das Werkzeug gibt dir bequemen Zugriff auf alle Aspekte moderner Animation im Browser.

css animate
Erstellt von: CSSAnimate
Lizenz: Als „Free“ bezeichnet, keine echte Lizenz angegeben.

Mobile Editing

Mobile Editing ist ein quelloffener Pagebuilder, der dir ein komfortables WYSIWYG-Interface liefert, mit dem du deine Designs bauen kannst. Wie der Name verrät, liegt der Einsatzfokus auf mobilen Anwendungen.

mobile editing
Erstellt von: Ben Pines
Lizenz: Frei verwendbar für jeden Zweck

Elementor

Elementor ist ein funktionsreicher Pagebuilder für WordPress-Nutzer. Auch hier gilt, dass keinerlei manuelles Coding erforderlich ist, um beeindruckende Layouts zu erschaffen.

Elementor
Erstellt von: Ben Pines
Lizenz: Als „Free“ bezeichnet, keine echte Lizenz angegeben.

Simple CSS Media Queries

Mit dieser großen Sammlung an Media Queries kannst du dein Projekt gezielt an viele populäre und weniger populäre Geräte anpassen.

media queries
Erstellt von: Simplecss
Lizenz: Als „Free“ bezeichnet, keine echte Lizenz angegeben.

Reframe.js

Reframe.js macht nicht responsive Elemente responsiv. Erdacht für die Verwendung mit iFrames und Videos, belastet das lediglich 1,3 KB große JavaScript-Plugin die Ladezeit deiner Website nur unmerklich.

reframe.js
Erstellt von: Dollar Shave Club Engineering
Lizenz: Als „Free“ bezeichnet, keine echte Lizenz angegeben.

Wait! Animate

Dieses kleine Tool brauchst du nur, wenn du Einfluss auf den Ablauf der von dir erstellten Animationen dergestalt nehmen willst, dass sie benutzerdefinierten Pausen enthalten sollen. Ohne das Werkzeug sind Animationspausen auf den intialen Start der Animation beschränkt. Mit Wait! Animate erstellst du Verzögerungen an beliebiger Stelle.

wait! animate
Erstellt von: EggBox
Lizenz: Als „Free“ bezeichnet, keine echte Lizenz angegeben.

Tachyons

Tachyons ist eine Sammlung wiederverwendbarer Module für das Rapid Prototyping. Damit erstellst du sehr schnell moderne und voll responsive Interfaces, die funktionieren.

Tachyons
Erstellt von: Tachyons-css
Lizenz: Open Source, frei verwendbar für jeden Zweck.

Apostrophe

Apostrophe ist ein neues CMS auf der Basis von Node.js und MongoDB. Der frische Ansatz ist noch sehr rudimentär, aber dennoch mehr als einen kurzen Blick wert.

apostrophe CMS
Erstellt von: P’unk Avenue
Lizenz: Open Source, frei verwendbar für jeden Zweck.

Fontastic

Mit Fontastic generierst du Icon-Fonts aus deinem eigenen Material. Wenn du solches nicht hast, kannst du aus mehr als dreitausend über die Website frei verfügbaren Piktogrammen wählen.

fontastic
Erstellt von: Fontastic
Lizenz: Als „Free“ bezeichnet, keine echte Lizenz angegeben.

Kategorien
Essentials Freebies, Tools und Templates

Wireframes und Flowcharts – 20 nützliche Werkzeuge

Das Stadium des Wireframes finde ich stets am besten. Hier fließt Inspiration. Hier macht die Arbeit Spaß. Endlich nimmt eine reine Idee Formen an. Auch wenn manche Designkollegen Wireframes als reine Drahtmodelle geringschätzen, so sind sie für mich viel mehr als das. Wenn man einen Wireframe detailreich anlegt, kann es der entscheidende Erfolgsfaktor sein.

Natürlich ist es nicht schwer, haufenweise nützliche Tools zu finden, die das Versprechen geben, dir die Arbeit an Wireframes total einfach zu machen. Im Gegenzug sollst du bloß einen Haufen Geld auf die Theke legen. Sicherlich verfügen Boliden, wie Balsamiq, Axure, Visio und einige andere über einen ganzen Sack voll Features und lassen buchstäblich nichts zu wünschen übrig. Aber es geht auch anders, nämlich billiger und mit etwas mehr Handarbeit. Und ist nicht gerade Handarbeit das, was Design ausmacht?

In meinem heutigen Beitrag zeige ich dir kostenlose Sammlungen mit Elementen für Wireframes und Flowcharts. Ich habe sogar holzbasierende Werkzeuge aufgenommen, falls du mehr so der Old-School-Entwurfsdesigner bist. Viel Spaß beim Stöbern.

Titel: PSD Wireframes for Phones Reviews – Material Design

wirebase kit
Erstellt von: Abdulhameid Grandoka
Lizenz: als „Free“ bezeichnet, aber keine dezidierte Lizenz angegeben

Titel: Wirebase

bluish wirebase
Erstellt von: Patryk Zabielski
Lizenz: als „Free“ bezeichnet, aber keine dezidierte Lizenz angegeben

Titel: Wireframe Landing Page Free PSD file

landing page wireframe
Erstellt von: Dorin007
Lizenz: als „Free“ bezeichnet, aber keine dezidierte Lizenz angegeben

Titel: UX Flow Screens

ux flow sreens
Erstellt von: Mark Wilson
Lizenz: als „Free“ bezeichnet, aber keine dezidierte Lizenz angegeben

Titel: Material Design Wireframe Kit v_02 

material design ui
Erstellt von: Dan Shipley
Lizenz: als „Free“ bezeichnet, aber keine dezidierte Lizenz angegeben

Titel: Moon Wireframe Kit

moon wireframe kit
Erstellt von: George Frigo
Lizenz: als „Free“ bezeichnet, aber keine dezidierte Lizenz angegeben

Titel: iPhone Wireframes

iphone wireframes
Erstellt von: Phil Goodwin
Lizenz: als „Free“ bezeichnet, aber keine dezidierte Lizenz angegeben

Titel: Flowchart Kit for Sketch

flowchart kit
Erstellt von: Arthur Guillermin Hazan
Lizenz: als „Free“ bezeichnet, aber keine dezidierte Lizenz angegeben

Titel: UX Wireframe Set

wireframe set
Erstellt von: Michal Koczor
Lizenz: laut Ersteller für jeden Zweck frei verwendbar

Titel: Flat Wireframe Elements

flat wireframe
Erstellt von: Marek Dlugos
Lizenz: als „Free“ bezeichnet, aber keine dezidierte Lizenz angegeben

Titel: Wireframe for Apps

wireframe for apps
Erstellt von: madefordesigners
Lizenz: frei für private und kommerzielle Nutzung

Titel: Sketch Wireframe

sketch wireframe
Erstellt von: The Gentlemans Mustache
Lizenz: als „Free“ bezeichnet, aber keine dezidierte Lizenz angegeben

Titel: 38 Psd Cards for Flowcharts

psd charts
Erstellt von: Volodymyr Kurbatov
Lizenz: als „Free“ bezeichnet, aber keine dezidierte Lizenz angegeben

Titel: Wireframer Icon Pack

wireframer icon pack
Erstellt von: Eugene Dobrik
Lizenz: als „Free“ bezeichnet, aber keine dezidierte Lizenz angegeben

Titel: 15 eCommerce screens

ecommerce wireframe kit
Erstellt von: Material Mockups
Lizenz: als „Free“ bezeichnet, aber keine dezidierte Lizenz angegeben

Titel: Wireup the Web

wireup the web
Erstellt von: Bala
Lizenz: als „Free“ bezeichnet, aber keine dezidierte Lizenz angegeben

Titel: Free Mockup Of Web Design Sketch For Demo (PSD)

web design sketch
Erstellt von: UIUX Lab
Lizenz: als „Free“ bezeichnet, aber keine dezidierte Lizenz angegeben

Titel: Hand Drawn iPhone 6s Ui Kit

hand-drawn kit for iphone6
Erstellt von: Vladimir Carrer
Lizenz: frei für die private und kommerzielle Nutzung

Titel: Apple Watch Wireframe for SketchApp 

apple watch wireframe
Erstellt von: Rémi Fayolle
Lizenz: frei für private und kommerzielle Nutzung

Titel: Free Wireframe Asset EPS

printable wireframe asset
Erstellt von:  Ashley Porciuncula
Lizenz: als „Free“ bezeichnet, aber keine dezidierte Lizenz angegeben

Kategorien
Essentials Freebies, Tools und Templates

iPhone 7 und iOS 10 – 20 Mockups, Templates und UI-Kits

Wie jeden September rief Apple auch jüngst wieder an die Bildschirme, um die neueste Version des iPhones zu präsentieren. Das iPhone 7 kam so schlecht an, dass es schon wieder wochenlange Lieferzeiten aufweist. Zeit genug also, deine Präsentationen darauf anzupassen.

In meinem heutigen Beitrag stelle ich dir die dafür erforderlichen Mockups und Templates zusammen. Viel Spaß damit.

Kategorien
(Kostenlose) Services Essentials Freebies, Tools und Templates

Coverr: Über 300 kostenlose Videos für deine Website

Jeden Tag ein neues Video, respektive jeden Montag sieben neue Videos – das versprechen die Betreiber von Coverr. Und nachdem sie bislang schon über 320 Videos ins Angebot genommen haben, muss man an dem Versprechen beileibe keine Zweifel hegen. Wie der Name vermuten lässt, eignen sich die Videos am besten als Covers, also als Hero-Videos für den Webseiten-Background.

coverr-landing

Veed.me und CodersClan bauen Video-Plattform Coverr

Coverr wird betrieben von den Teams von Veed.me und dem dem CodersClan. Veed.me ist eine Plattform, auf der Kunden nach geeigneten Filmern für ihre Zwecke suchen und buchen können. Veed.me lebt von einer 15%igen Provision, die der Filmer zahlt, für den Kunden ist die Plattform kostenlos. Preise werden nicht mutwillig gedumpt, die Plattform gaukelt keine Billigheimer-Philosophie vor. Das finde ich schon mal sehr sympathisch.

Ähnlich verhält es sich mit dem CodersClan. Dabei handelt es sich um eine Community professioneller Entwickler, die nicht jeden aufnimmt. Stolz gibt man zu Protokoll, dass man nur sechs von 100 Bewerbungen akzeptiere. Wenn es denn der Qualitätssicherung dient, wird es den Kunden freuen. Ich hätte keine Bedenken, innerhalb einer solchen Vorauswahl anzufragen.

Coverr: Videos finden und downloaden ohne Umwege

Nun also baute der CodersClan die Website zu Coverr, während Veed.me die Videos beisteuerte. Wie zu erwarten war, kam dabei eine runde Sache heraus. Die Website präsentiert die inzwischen mehr als 320 Videos in einem endlos scrollenden Grid, das sich in Form von Kategorie-Tabs weiter thematisch filtern lässt.

Coverr: übersichtliche Präsentation als thematisches Grid (Screenshot: Dr. Web)
Coverr: übersichtliche Präsentation als thematisches Grid (Screenshot: Dr. Web)

Klickst du auf eines der Videos, öffnet sich selbiges in einem Popup. Hier wird dir das Video als solches gezeigt. Ebenso besteht an dieser Stelle die Möglichkeit, das Video herunter zu laden oder als Coverr, also als Hintergrund anzeigen zu lassen. Wählst du diese Option, wird das Hintergrundvideo der Coverr-Website gegen deine aktuelle Auswahl ersetzt, so dass du die Tauglichkeit recht gut einschätzen kannst.

Entscheidest du dich für den Download, bekommst du ohne Umschweife ein Zip auf deine Platte gelegt. Das Zip beinhaltet drei Ordner, in denen das Video jeweils als MP4, WEBM und als JPG-Screenshot enthalten ist.

Alle drei Varianten solltest du auf deiner Website einsetzen. Wie das geht, zeigen dir die Betreiber von Coverr ebenfalls. An dieser Stelle findest du drei Snippets in HTML, CSS und JS, die du nur leicht anpassen brauchst, um das entsprechende Video als Hero-Bereich in deiner Website zu verwenden.

Coverr ist Public Domain, kostenloser geht nicht

Wie bereits erwähnt, sind alle Kurzfilme kostenlos zu verwenden. Die gewählte Lizenz ist die maximal liberale, es handelt sich nämlich um CC Zero, auch als Public Domain bekannt. So lizenzierte Assets gelten als gemeinfrei, können also von jedermann zu jedem Zweck uneingeschränkt und kostenlos eingesetzt werden. Damit bist du auf der ganz sicheren Seite.

Kategorien
Essentials Freebies, Tools und Templates

Kickstart: 20 kostenlose Benutzeroberflächen für dein nächstes Projekt

Was bedarf es, einer Idee Leben einzuhauchen, sie von einem simplen Geistesblitz zu einem digitalen Prototypen zu verwandeln? Die Antwort ist einfach: einer ganzen Menge. Unter anderem bedarf es mehr oder weniger ausgeprägter Fertigkeiten in Designgrundlagen und der Verwendung eines entsprechenden Programmes, wie Photoshop oder Sketch. Außerdem benötigst du Zeit, vor allem Zeit. Schon klar, die ist knapp.

Womit sparst du am meisten Zeit? Genau, mit Templates und anderen vorgefertigten Elementen. Heute habe ich zwanzig sehr gute und auch noch kostenlose Benutzeroberflächen für dich, die du in unterschiedlicher Weise für deine Mockups und/oder Endprodukte verwenden kannst. Viel Spaß beim Stöbern!

Titel: GUACAMOLE 3-IN-1 UI KIT

Guacomole
Erstellt von: avocode
Lizenz: Als „Free“ bezeichnet, aber keine echte Lizenz angegeben

Titel: Deadline UI Kit

Deadline UI kit
Erstellt von: Rajesh Rajput
Lizenz: Frei für persönliche und kommerzielle, auch Kundenprojekte

Titel: Stella — Best Blog UI Kit

Stella
Erstellt von: Arsen Kolyba
Lizenz: Urhebernennung an geeigneter Stelle erforderlich; kommerzieller Einsatz nicht gestattet.

Titel: Sweety iOS UI Kit

Sweety UI kit
Erstellt von: Damir Bektilov
Lizenz: Urhebernennung an geeigneter Stelle erforderlich

Titel: Spot UI Kit

Spot UI Kit
Erstellt von: Arun
Lizenz: Attribution 4.0 International.

Titel: 20 Splash UI Kit Screens

20 splash screens
Erstellt von: Nick Parker
Lizenz: Als „Free“ bezeichnet, aber keine echte Lizenz angegeben

Titel: UI Tiles

UI Tiles - pack of flowcharts
Erstellt von: pixelbuddha
Lizenz: Als „Free“ bezeichnet, aber keine echte Lizenz angegeben

Titel: Wyre – Web Layout Flowcharts

Wyre - Web Layout Flowcharts
Erstellt von: Petr Knoll
Lizenz: Als „Free“ bezeichnet, aber keine echte Lizenz angegeben

Titel: iOS9 Kit

ios9 Kit
Erstellt von: ozzik
Lizenz: Als „Free“ bezeichnet, aber keine echte Lizenz angegeben

Titel: Kauf UI Web Kit

kauf ui web kit
Erstellt von: Yebo creative
Lizenz: Als „Free“ bezeichnet, aber keine echte Lizenz angegeben

 

Titel: Relate UI Kit

relate ui kit
Erstellt von: invisionapp
Lizenz: Als „Free“ bezeichnet, aber keine echte Lizenz angegeben

Titel: Puzzles – iOS UI Kit

puzzles - ui kit
Erstellt von: CARLOS & RAMON
Lizenz: Als „Free“ bezeichnet, aber keine echte Lizenz angegeben

Titel: Sign In Project

Sign In Project
Erstellt von: Jardson Almeida
Lizenz: Creative Commons 4.0.

Titel: Android M GUI Kit

Android M GUI Kit
Erstellt von: Hanii
Lizenz: Als „Free“ bezeichnet, aber keine echte Lizenz angegeben

Titel: iOS 9 UI Kit

iOS9 UI Kit by Facebook
Erstellt von: Facebook
Lizenz: Als „Free“ bezeichnet, aber keine echte Lizenz angegeben

Titel: iOS 9.3 iPhone UI Kit for Illustrator and Sketch

iOS9 UI Kit
Erstellt von: Rusty Mitchell
Lizenz: Als „Free“ bezeichnet, aber keine echte Lizenz angegeben

Titel: Platforma iOS and web wireframe kits

platforma ios screens
Erstellt von: platforma
Lizenz: Als „Free“ bezeichnet, aber keine echte Lizenz angegeben

Titel: Tilt – UI Kit

Tilt - UI Kit
Erstellt von: JARED LODWICK
Lizenz: Als „Free“ bezeichnet, aber keine echte Lizenz angegeben

Titel: Elton UI Kit

Elton UI Kit
Erstellt von: pixelbuddha
Lizenz: Als „Free“ bezeichnet, aber keine echte Lizenz angegeben

Titel: EarthShift — UI Kit

EarthShift UI
Erstellt von: Arsen Kolyba
Lizenz: Frei für persönliche und kommerzielle, auch Kundenprojekte

Kategorien
(Kostenlose) Services Essentials Fotografie Freebies, Tools und Templates Inspiration

Visual Hunt: Über 350 Millionen Fotos zur freien Verwendung

Bilder sagen mehr als Worte. Gerade als Grafik- und Webdesigner weiß man den Einsatz aussagekräftiger und professioneller Fotos zu schätzen. Auf der Suche nach den richtigen Motiven landet man nicht selten bei einem kommerziellen Anbieter. Denn häufig stimmen bei den kostenlosen Anbietern weder die Qualität der Fotos, noch die Auswahl. Visual Hunt stellt hier eine im wahrsten Sinne des Wortes große Ausnahme dar. Mit über 350 Millionen Fotos findest du für jedes Projekt sicher die richtigen Motive. Und auch die Qualität der Fotos kann sich mehr als sehen lassen.

Das Beste von Flickr und Co.

Dass Visual Hunt über 350 Millionen qualitativ hochwertiger Fotos anbietet, liegt daran, dass der Dienst das Beste an Creative-Common- und Public-Domain-Fotos sammelt, die es im Internet gibt. Aber keine Sorge: Der Dienst sucht sich nicht aus beliebigen Quellen das Material zusammen. Stattdessen setzt es auf Quellen wie Flickr und anderen Diensten, die eine hohe Reputation haben und für entsprechend gute Qualität stehen.

Suchergebnisse in Visual Hunt
Suchergebnisse in Visual Hunt

Zudem sind alle Fotos von Visual Hunt handverlesen, wurden gesichtet und mit Schlagworten versehen, um aussagekräftige Suchergebnisse gewährleisten zu können.

Über 60.000 Public-Domain-Fotos

Bei den Lizenzen, unter denen die Fotos bei Visual Hunt angeboten werden, unterscheidest du zwischen Creative-Commons- und Public-Domain-Fotos. Die Creative-Commons-Lizenz ist im Internet sehr verbreitet. Sie erlaubt es dir, Fotos kostenlos zu verwenden. Allerdings musst du den Urheber der Fotos nennen.

Ob ein Foto, das unter der Creative-Commons-Lizenz steht, bearbeitet oder kommerziell genutzt werden darf, ist ganz unterschiedlich. Die Lizenz erlaubt hier verschiedene Möglichkeiten. Aber was du konkret mit einem Foto machen darfst, wird dir sehr übersichtlich dargestellt.

Vorschau mit Angabe über Lizenz und Einschränkungen sowie Bedingungen
Vorschau mit Angabe über Lizenz und Einschränkungen sowie Bedingungen

Neben der Creative-Commons-Lizenz werden auch an die 60.000 Fotos angeboten, die unter der Public-Domain-Lizenz stehen. Diese Fotos darfst du ganz uneingeschränkt nutzen – auch ohne Nennung des Urhebers. Hierbei hast du also größtmögliche Freiheiten, wenngleich Visual Hunt es begrüßt, wenn du grundsätzlich bei allen Fotos den Urheber nennst.

Du kannst ganz gezielt nach Public-Domain-Fotos suchen, wenn du eine Nennung des Urhebers – beispielsweise aus gestalterischen Gründen – nicht wünschst.

Suche nach Schlagwörtern, Farben und Lizenzen

Wer Fotos in dieser Anzahl anbietet, muss vor allem eines haben: eine gute Suchfunktion. Und auch hier kann Visual Hunt punkten. Zunächst gibt es eine klassische Schlagwortsuche, mit der du nach passenden Motiven suchen kannst. Hierbei kombinierst du Suchbegriffe und kannst bestimmte Begriffe ausschließen.

Suche nach Bildern mit bestimmter Farbgebung
Suche nach Bildern mit bestimmter Farbgebung

So grenzt du die Fotos schon einmal sehr gut ein. Wenn du Fotos nicht zu redaktionellen, sondern eher zu gestalterischen Zwecken verwendest, spielt die Farbgebung der Bilder häufig eine wichtige Rolle. Hier ermöglicht dir Visual Hunt, die Ergebnisse auf eine bestimmte Farbe einzugrenzen. Aus elf vorgegebenen Farben wählst du jene aus, die deinen Vorstellungen am nächsten kommt.

Zu guter Letzt kannst du die Ergebnisse – wie bereits erwähnt –  auf bestimmte Lizenzen eingrenzen. Die Sortierfunktion hilft dir zudem dabei, Ergebnisse in verschiedene Reihenfolgen zu bringen. So lässt du dir zum Beispiel die relevantesten oder die neusten Fotos, die deinen Suchkriterien entsprechen, als erstes darstellen.

Herunterladen und Einbinden ohne Registrierung

Wer der Meinung ist, schon bei genügend Webdiensten registriert zu sein, wird Visual Hunt ebenfalls schätzen. Denn das Herunterladen der Fotos ist ohne Registrierung möglich. Dabei wählst du aus verschiedenen Auflösungen jeweils eine aus. Die Auflösungen werden in verschiedene Größen gruppiert.

Je nach Fotos sind diese von S (640Pixel Breite) bis 3XL verfügbar. Wie groß 3XL ist, hängt jeweils vom Foto ab. Aber zwischen 3.000 und 5.000 Pixel sind es in der Regel. Somit eignen sich die Fotos sogar für den Druck.

Herunterladen per Lightbox
Herunterladen per Lightbox

Suchst du nach mehreren Fotos, musst du diese nicht einzeln herunterladen. Stattdessen kannst du diese zu einer Lightbox hinzufügen und später herunterladen. So stöberst du erst durch das Angebot und fügst jedes Bild, welches du verwenden möchtest, der Lightbox hinzu. Die Bilder der Lightbox werden dir am unteren Rand der Seite dargestellt.

Anschließend wählst du eine einheitliche Größe für die Auflösung aus und lädst den kompletten Inhalt der Lightbox als einzelne ZIP-Datei herunter.

Statt Fotos herunterzuladen, stellt Visual Hunt dir auch die Möglichkeit zur Verfügung, Fotos per HTML-Quelltext in deine Website oder dein Blog einzubinden. Dabei schiebst du dir per Regler eine Auflösung zurecht und kopierst den HTML-Schnipsel einfach.

Fotos Einbinden statt herunterladen
Fotos Einbinden statt herunterladen

Angaben zum Urheber und zur Lizenz werden automatisch im Quelltext integriert. Auch die Ausrichtung des Bildes – linksbündig, zentriert oder rechtsbündig – wählst du aus. Eine Vorschau zeigt dir, wie das Bild anschließend aussieht.

Die Einbindung hat den Vorteil, dass du Fotos nicht erst herunterladen und wieder hochladen musst. Außerdem sparst du Webspace und Traffic.

Fotos hochladen und „liken“

Solltest du dich doch für eine Registrierung bei Visual Hunt entscheiden, kannst du selbst Fotos hochladen. Diese werden dann gesichtet und – falls sie den Qualitätskriterien entsprechen – unter der Public-Domain-Lizenz ins Angebot aufgenommen.

Aber Vorsicht: Sobald ein Foto hochgeladen wurde, gibt es kein Zurück mehr. Anders als bei vielen anderen Anbietern, kannst du deine Fotos nicht wieder aus dem Angebot entfernen.

Fotos hochladen
Fotos hochladen

Außerdem hast du als registrierter Benutzer die Möglichkeit, Fotos zu bewerten, indem du „Likes“ vergibst. So hilfst du, das Angebot von Visual Hunts zu verbessern, indem du besonders gute Fotos kennzeichnest.

Fazit

Auch wenn 350 Millionen Fotos schon ein beachtliches Angebot ist, so steigt die Anzahl der zur Verfügung stehenden Fotos kontinuierlich. Wer die Seite regelmäßig besucht, wird die stets zunehmende Anzahl an Fotos im Zähler wahrnehmen. Dieser verrät dir nicht nur die Gesamtanzahl der Fotos von Visual Hunt, sondern auch die Anzahl der Public-Domain-Fotos.

Aber nicht nur die Quantität der Bilder ist beeindruckend, die Qualität ist es auch. Daher ist Visual Hunt nicht nur etwas für Blogger und private Projekte. Für den professionellen Einsatz im Grafik- und Webdesign bietet sich Visual Hunt ebenso bestens an.

Kategorien
(Kostenlose) Services Essentials Freebies, Tools und Templates

Stocky.pro: Kostenlose Fotos, Musik, Videos und Grafiken für den kommerziellen Einsatz

Kann man jemals genug Websites kennen, die freies Material rausgeben? Ich glaube, nein. Der ganz junge Service Stocky.pro ist zudem noch insoweit etwas besonderes, als dort nicht nur Fotos und Grafiken zu finden sind, sondern auch Musikstücke und Videos zur freien Verwendung bereit stehen.

Stocky.pro: Die relativ schmucklose, aber zweckmäßige Startseite. (Foto: Dr. Web)
Stocky.pro: Die relativ schmucklose, aber zweckmäßige Startseite. (Foto: Dr. Web)

Stocky.pro: Einzelkämpfer aus dem Ural hat große Ambitionen

Stocky.pro wurde mir über Product Hunt in die Filterblase gespült. Erst vor kurzem ist die Seite online gegangen. Betrieben wird sie vom Einzelkämpfer Alexey Kokov aus Jekaterinburg im russischen Ural. Kokov hat sich zum Ziel gesetzt, alle Arten digitaler Medien, die jemals jemand für kommerzielle Zwecke gebrauchen könnte, frei und kostenlos über Stocky.pro anzubieten.

Das geht soweit, dass er aktiv seine Besucher auffordert, bestimmte Inhalte quasi zu bestellen. Er werde sich dann darum kümmern, genau solche Materialien auf Stocky.pro zu liefern. Das klingt altruistisch und ist es wohl, zumindest zur Zeit, auch noch. Nach eigenen Angaben arbeitet Kokov vorzugsweise nachts und am Wochenende an Stocky.pro, denn sein Hauptjob und seine Familie beanspruchen natürlich schon den Großteil seiner Zeit.

Vorschau auf einen thematischen Bild-Download. (Screenshot: Dr. Web)
Vorschau auf einen thematischen Bild-Download. (Screenshot: Dr. Web)

Kokovs Vision für Stocky.pro ist es, einen Content-Marketing-Hub zu betreiben, auf dem Firmen einerseits Inhalte frei zur Verfügung stellen, andererseits ebensolche Inhalte auch frei beziehen können. Werbung schließt er bislang aus. Premiumservices will er nicht verkaufen.

Für uns als Benutzer bedeutet das erstmal: Stocky.pro ist komplett kostenfrei und soll es auch bleiben. Die angebotenen Materialien können völlig frei für jeden legalen Zweck, sowohl privat, wie auch kommerziell und in Kundenprojekten verwendet werden.

Wie Kokov damit Geld verdienen will, habe ich noch nicht erkennen können. Immerhin betrachtet er Stocky.pro als sein Startup. Gut, warten wir es einfach ab.

Stocky.pro: Überschaubares Angebot mit beliebigem Themenfokus

Würde man einen solchen Service am Reißbrett entwerfen, würde man sicherlich nicht so vorgehen, wie es Kokov mit Stocky.pro tut. Auf Stocky.pro findest du derzeit zwar schon eine beachtliche Anzahl unterschiedlicher Ressourcen für die digitale Verwendung. Schwerpunkte ergeben sich allerdings rein beliebig dadurch, dass sich der Betreiber mit manchen Themen gestalterisch bereits beschäftigt hat und mit anderen eben nicht.

Du brauchst also eine gehörige Portion Glück, um auf Stocky.pro das zu finden, was du in deinem aktuellen Projekt gerade benötigst. Da hast du es bei größeren, quasi klassischen Stock-Anbietern weitaus leichter.

Dennoch muss man einräumen, dass die Elemente, die im Angebot sind, qualitativ gut bis sehr gut sind. Das betrifft die Vektordateien, aber auch die Fotos, Videos und die Musikstücke. Alles ist zwar sehr klein vom Sortiment her, aber teils doch recht fein.

https://www.youtube.com/watch?v=a1sRNsGolew

Stocky-Beispiel: Wenn du Nähblogger bist, könnte dir das Video nützlich sein…

Schön gelöst bei Musik und Videos ist die Vorschau. Kokov verwendet YouTube für die Videos und Soundcloud für Musik. So musst du nicht die Katze im Sack downloaden, sondern kannst zuvor testen, ob die Elemente inhaltlich und qualitativ deinen Ansprüchen genügen.

Thematische Einteilungen nach klassischen Kategorien gibt es (noch) nicht. Das Finden interessanter Elemente bewerkstelligst du entweder durch ausgiebiges Stöbern oder durch die Freitextsuche, die sich hinter einem Hamburgermenü versteckt. An jedem Element befindet sich zudem eine Auswahl an Tags, mit denen das Element charakterisiert ist. Ein Klick auf einen solchen Tag öffnet ein Grid mit allen Inhalten des gleichen Tags.

Apropos Grid, Stocky.pro erinnert schon recht deutlich an Pinterest und andere kartenbasierte Designs. Das ist ja bekanntlich gerade in Mode.

Fazit: Stocky.pro gehört auf jeden Fall, mindestens zur Beobachtung, in deine Bookmark-Sammlung. Denn kostenfreie Musik- und Videoquellen sind doch noch rar gesät.

Kategorien
Freebies, Tools und Templates

10 kostenlose Bootstrap PSD-Grids für ausgezeichnetes Webdesign

Die Webentwicklung kennt viele Faktoren, die die Arbeitsabläufe optimieren können. Denn es zählen längt nicht nur die Endergebnisse, die robust und responsive sein müssen, sondern auch die Zeit, die in die Entwicklung einer Website oder einer immer wieder nutzbaren Vorlage einfließen. Gute PSD-Grids sind heute für das Design einer Website unverzichtbar und gestalten Arbeitsabläufe effizienter. Daher zeigen wir dir heute einige kostenlose Bootstrap PSD-Grids für dein nächstes Projekt.

Kostenlose Bootstrap PSD Grids für ausgezeichnetes Webdesign

Effizientes Webdesign ist in der heutigen Zeit unverzichtbar. Es gibt viel Konkurrenz auf dem Markt und niemand kann es sich leisten, in die Entwicklung von Websites mehr Zeit als nötig zu investieren. Daher haben sich Front-End-Entwicklungs-Frameworks wie zum Beispiel Bootstrap durchgesetzt.

Der Mobile-First-Ansatz, die Unterstützung von Präprozessoren, vordefinierte HTML-Komponenten und jQuery-Plugins im Zusammenhang mit einer ständigen Aktualisierung sorgen für die Beliebtheit des Bootstrap-Frameworks. Wusstest du, dass bereits zwei Prozent aller Websites mit Bootstrap erstellt werden? Auf WordPress.org existiert gefühlt kaum ein Theme ohne Bootstrap-Fundament.

Warum also solltest nicht auch du das Framework nutzen und einen soliden Prototyp mit den folgenden Grids entwickeln?

1 – Bootstrap Responsive Grid by Michael Henning

bootstrap-grid-1

Mit diesem Paket können Website-Layouts in Photoshop für Desktop-, Tablet- und Smartphone-Ansichten entwickelt werden. Es ist kompatibel mit Bootstrap 3.

2 – Free 12 Column Bootstrap v3.0.0 Grid Pattern PSD

bootstrap-grid-2

Bootstrap-Liebhaber werden dieses Freebie von Himanshu Softtech zu schätzen wissen. Dieses 12-Column-Grid unterstützt dich bei der Entwicklung einer Bootstrap 3 Website.

3 – Free Bootstrap 3 PSD Grid System

bootstrap-grid-3

Das Free Bootstrap 3 PSD Grid System ist eine erweiterbare und aktualisierte Version des Vorgängers. Auch dieses Grid ist hervorragend für die Entwicklung von Mobile-First-Websites geeignet und erspart dir wertvolle Zeit.

4 – Bootstrap Grid PSD Templates by Benny Schuurman

bootstrap-grid-4

Diese Vorlagen sehen ein bisschen rau und kantig aus. Doch wenn du mal zwischen dem Design und dem Framework wechseln musst, kannst du diese Grids mit einer geringen Opacity nutzen, um Spalten und Reihen zu skizzieren und eine gut organisierte Struktur aufzubauen.

5 – Bootstrap 3 Responsive Grid PSD Template by Quentin Starr

bootstrap-grid-5

Das Bootstrap 3 Responsive Grid PSD Template hat eine totale Breite von 1170 Pixel und besitzt 12 Spalten, genau nach den Anforderungen von Bootstrap 3. Der Autor hat alle Proportionen und Größen berücksichtigt, so dass du diese Grids als Grundlage für jedes Projekt einsetzen kannst.

6 – Free Printable Bootstrap Wireframe Template

bootstrap-grid-6

Zusammen mit digitalen Lösungen gibt es papierbasierte Medien für das Prototyping von Bootstrap-Websites. Das Freebie könnte ein gutes Instrument darstellen, wenn es darum geht, mal eben seine Ideen auf Papier zu skizzieren. Man kann damit auch Versionen für den Desktop und die mobilen Ansichten visualisieren.

7 – Bootstrap 3 PSD

bootstrap-grid-7

Bootstrap 3 PSD kommt mit nützlichen Features wie einer Retina-Lösung, gut strukturierten Ebenen und einer hervorragend kommentierten PSD-Datei daher. Voll editierbar hilft es Entwicklern bei der Ausarbeitung von Website-Designs mit dem Bootstrap 3 Framework.

8 – Responsive Bootstrap Grids

bootstrap-grid-8

Responsive Bootstrap Grids kommt ohne überflüssige Extras daher. Die ordentliche, minimalistische Erscheinung lenkt dich nicht von deiner Arbeit ab. Du kannst mit diesem Grid schnell das Layout und das Interface designen, ohne großen Aufwand.

9 – Bootstrap Grid Template For Retina, 4k, 5k (PSD + GuideGuide)

bootstrap-grid-9

Das ultimative Grid-Template für das responsive Design mit Bootstrap. Das Template verschafft dir einen besseren Eindruck davon, wie dein Design auf den gebräuchlichsten Bildschirmauflösungen und Browsern aussehen wird.

10 – Bootstrap 3.0 Responsive Grid System PSD

bootstrap-grid-10

Der Autor entwickelt selbst einige Projekte mit Bootstrap 3 und schuf hierfür dieses responsive Grid-Template. Er empfiehlt die Nutzung von GuideGuide für Photoshop, wenn du deine eigenen Grids kreieren möchtest.

Fazit

Um die Arbeitsabläufe wirklich effizienter und kürzer zu gestalten, solltest du bereits in einer sehr frühen Phase der Entwicklung mit Bootstrap arbeiten. Konzept-Entwürfe sollten mit einem deutlichen Raster gestaltet werden, nach den Regeln des Frameworks. Der Schlüsselfaktor des Erfolgs ist hierbei ein passendes PSD-Grid-System. Denn, wenn im Layout-Vorgang bereits alles nach Bootstrap ausgerichtet ist, läuft die Front-End-Entwicklung schneller und effizienter ab.

(dpe)

Kategorien
Essentials Freebies, Tools und Templates Inspiration Showcases

Strukturiert: 20 kostenlose Texturen

Auch wenn der Flat-Trend sich als fast schon unumkehrbar erweist, bedeutet das nicht, dass in der Zukunft kunstvolle Gestaltungen ungefragt sein werden. Sicher, die Verwendung aufwändiger Hintergründe und kunstvoll gestalteter Pixel-Perfektion ist rückläufig. Dennoch gibt es nicht wenige Websites, die auf die Wärme realitätsnaher Texturen setzen und auf diese Weise eine sympathische Umgebung schaffen, in der sich der potentielle Kunde, Leser, Teilnehmer, Besucher einfach wohl fühlt.

Ich hoffe, ihr habt einige Freude an unserer heutigen Sammlung mit 20 kostenlosen Packs voller Texturen. Die jeweilige Lizenz haben wir angegeben und auch, wenn es keine ordentliche Lizenz gibt, haben wir das vermerkt.

Titel: 10 WaterColor Circle Textures

watercolor textures
Erstellt von: Rafi
Lizenz: Als „Free“ bezeichnet, keine richtige Lizenz angegeben

Titel: Free Cracked Earth Textures

earth textures
Erstellt von: Alex Zeppelin, Alex @Graphicdome
Lizenz: Attribution-NonCommercial-NoDerivatives

Titel: The Noise v.01 – FREE TEXTURE PACK

noise textures
Erstellt von: Hearted™ Design & Estratégia, Guilherme Mazzo
Lizenz: frei bei Urhebernennung

Titel: 36 Wood Textures

36 wood textures
Erstellt von: Krzysztof Bobrowicz
Lizenz: frei für den persönlichen und kommerziellen Gebrauch

Titel: 10 Free Dust & Dirt Overlay Textures

dust and dirty overlay textures
Erstellt von: Rafi
Lizenz: Als „Free“ bezeichnet, keine richtige Lizenz angegeben

Titel: 10 Textured Backgrounds

textured backgrounds
Erstellt von: FWStudio StockPhoto
Lizenz: Attribution-NonCommercial-NoDerivatives

Titel: Low Poly Background Texture

low-poly textures
Erstellt von: Rounded Hexagon
Lizenz: Als „Free“ bezeichnet, keine richtige Lizenz angegeben

Titel: 5 Free High-Resolution Paper Background Textures

paper bgs
Erstellt von: zippypixels
Lizenz: frei für den persönlichen und kommerziellen Gebrauch

Titel: Free Textures

b&w watercolor textures
Erstellt von: John Mata
Lizenz: Als „Free“ bezeichnet, keine richtige Lizenz angegeben

Titel: High Quality Wood Textures Pack

wood textures pack
Erstellt von: Design Lazy
Lizenz: Als „Free“ bezeichnet, keine richtige Lizenz angegeben

Titel: 20 Creative Abstract Photos

abstract photos
Erstellt von: deeezy
Lizenz: frei für den persönlichen und kommerziellen Gebrauch

Titel: The Free Texture Pack – 10 Beautiful Jute Fabric Textures

fabric textures
Erstellt von: ZippyPixels
Lizenz: frei für den persönlichen und kommerziellen Gebrauch

Titel: Icons, Backgrounds and Textures Pack

bundle with textures
Erstellt von: BIBI Arts, Designcuts
Lizenz: Als „Free“ bezeichnet, keine richtige Lizenz angegeben

Titel: Brayer Textures

brayer textures
Erstellt von: Ryan Duffy
Lizenz: Credit, wem Credit gebührt. Ich empfehle der Fairness halber eine Urhebernennung. Klar verlangt wird es nicht.

Titel: FREE SEAMLESS TEXTURES GENERATOR

seamless generator
Erstellt von: The Orange Box
Lizenz: Als „Free“ bezeichnet, keine richtige Lizenz angegeben

Titel: Free 10 Hires-Textures of Wood and Paint

wood and paint textures
Erstellt von: Cool Joe
Lizenz: Attribution-NonCommercial-NoDerivatives

Titel: Water Texture

water textures
Erstellt von: Pagan-Stock
Lizenz: frei bei Urhebernennung

Titel: Textures of Bark

tree bark texture
Erstellt von: Olha Kozachenko
Lizenz: Attribution-NonCommercial-NoDerivatives

Titel: 10 Free Watercolor Textures

bright watercolor textures
Erstellt von: Graphic Loot und Freepik.com
Lizenz: frei für den persönlichen und kommerziellen Gebrauch

Titel: Halftone Textures

halftone textures
Erstellt von: Simphiwe Mangole
Lizenz: Attribution-NonCommercial-NoDerivatives

(dpe)

Kategorien
Design Freebies, Tools und Templates Icons & Fonts Webdesign

Fontastisch: So findest du kostenlose und hochwertige Schriften

Die richtige Schrift für eine Gestaltung beziehungsweise ein Projekt zu finden, ist nicht immer einfach – trotz der Vielzahl kostenloser Schriften, die im Internet kursieren. Denn häufig ist die Qualität der Schriften, sowohl ästhetisch als auch bezüglich des Zeichensatzes und der OpenType-Features, eher bescheiden. Aber es gibt eine Reihe hochwertiger, gut ausgebauter, ästhetisch ansprechender und zudem kostenloser Schriften im Internet – und das jenseits von Google Fonts.

Ungewöhnliche Schriften bei Behance

Das Kreativnetzwerk Behance ist nicht nur eine gute Anlaufstelle, um sich inspirieren zu lassen. Viele Schriftdesigner nutzen Behance nicht bloß, um ihre Schriften zu präsentieren. Ganz häufig werden diese auch kostenlos zum Herunterladen angeboten.

Wer dort einfach mal nach Schriften sucht, wird schnell feststellen, dass Behance eine reichhaltige Vielfalt an Schriften hat. Da dort allerdings auch viele Entwürfe präsentiert sind, die es als „echte“ Schrift gar nicht gibt, muss man gegebenenfalls etwas mehr Zeit in die Suche investieren.

Kostenlose Schriften
„Mosk“

Dafür findest du dort aber auch viele unverbrauchte Schriften wie beispielsweise die „Mosk“, eine schicke serifenlose Schrift in neun Schnitten, die unter anderem auch deutsche Umlaute und Eszett enthält. Wer doch lieber etwas mit Serifen sucht, findet vielleicht Gefallen an der „Butler“, die eher an klassizistische Schriften erinnert. Sie gibt es in 14 Schnitten, darunter sieben Schablonenschnitte.

Kostenlose Schriften
„Butler“

Da Behance kein Schriftenportal ist, ist die Suche nicht sehr komfortabel. Anzahl der Schnitte und der Umfang des Zeichensatzes variieren sehr. Hier musst du also etwas Geduld mitbringen. Aber es lohnt sich.

So viel zahlen, wie man will, bei Lost Type

Lost Type gehört zu den eher kleinen Schrift-Foundrys. Daher sind die Schriften, die dort vertrieben werden, meist weniger bekannt. Wer also Wert legt auf unverbrauchte Typografie, wird dort fündig. Neben zahlreichen Schriften, die für Fließtexte geeignet sind wie die „Mission Gothic“, gibt es interessante Schriften für plakative Überschriften wie die Versalschrift „Liberator“.

Mission Gothic
„Mission Gothic“

Das Besondere an Lost Type ist, dass dort jeder einfach so viel bezahlt, wie er möchte – zumindest für den persönlichen Gebrauch. Nur wer eine Schrift kommerziell nutzen will, muss auch zwingend bezahlen. Alle anderen zahlen einen beliebigen Betrag – gegebenenfalls sogar gar nichts.

Liberator
„Liberator“

Nicht einmal eine Registrierung ist nötig. Gibst du schlicht eine Null ins Bezahlfeld ein, wird die Schrift ohne Umwege heruntergeladen.

Kostenlose Schriften bei MyFonts

MyFonts gehört zu den größten Anbietern von Schriften und hat zahlreiche Foundrys im Repertoire. Dazu zählen viele kleine und relativ unbekannte Foundrys, aber auch so große wie FontFont.

Miso
„Miso“

Zwar zahlst du bei MyFonts in der Regel, um Schriften zu erwerben. Es gibt aber eine Vielzahl von Schriftfamilien, die du teilweise kostenlos bekommst. So gibt es vier der sechs Schnitte der runden Grotestschrift „Miso“ für lau.

Auch in der beliebten „Museo“-Familie gibt es vereinzelt Schnitte, die kostenlos sind. So sind zwei der zehn Schnitte der „Museo Sans“ kostenlos erhältlich. Im Übrigen sind nicht nur die Desktopschriften kostenlos, sondern auch die Webfonts.

Museo Sans
„Museo Sans“

Du musst lediglich ein Konto bei MyFonts besitzen und den normalen Kaufprozess durchlaufen: Also Schriften in den Warenkorb legen und „bezahlen“. Hast du ausschließlich kostenlose Schriften im Warenkorb, bezahlst du natürlich nichts. Die Schriften werden dennoch wie alle anderen Einkäufe in deiner Bestellhistorie aufgelistet.

Alles kostenlos bei Font Squirrel

Zu guter Letzt darf natürlich auch Font Squirrel nicht fehlen. Dort findest du eine Vielzahl an Schriften für unterschiedliche Einsatzzwecke – und alle kostenlos. Viele Schriften, die dort angeboten werden, findest du auch bei Google Fonts. Der Unterschied ist der, dass du die Schriften bei Font Squirrel selbst hosten kannst.

Open Sans und Losbter
„Open Sans“ und „Losbter“

Mit dem eigenen Webfont-Generator erstellst du dir zudem die Webfonts aus den dort angebotenen Schriften selbst.

Zum Angebot von Font Squirrel gehören eher bekannte Schriften wie beispielsweise die „Open Sans“ oder die allseits beliebte „Lobster“.

(dpe)

Kategorien
(Kostenlose) Services Bilder & Vektorgrafiken bearbeiten Design Essentials Freebies, Tools und Templates Photoshop

Fontea: Nutze alle Google-Fonts in Photoshop

Die pfiffigen Tool-Bastler aus dem Hause Source sind wieder da. Mit Fontea veröffentlichten sie jüngst ein Photoshop-Plugin, das es dir ermöglicht, alle Google-Fonts direkt aus Photoshop heraus zu verwenden. Fontea funktioniert ab Photoshop 2015 und ist kostenlos. Eine entsprechende Erweiterung für Sketch ist bereits angekündigt.

Fontea: Nutze alle Google-Fonts in Photoshop

Google-Fonts bequem am Desktop nutzen

Schon vor Jahren stellte ich Möglichkeiten vor, wie man sich alle Google-Fonts auf die Platte zieht, damit man flexibel im Einsatz ist. Der Komplett-Download ist allerdings auch ein schwergewichtiges Thema und nicht nur von daher sicherlich für den einen oder anderen keine wirkliche Alternative. Der Vorteil ist, dass die Lösung komplett kostenlos ist.

Eine Alternative dazu ist das Tool Skyfonts, welches ich dir hier vorstellte. Damit kannst du selektiv einzelne Google-Fonts synchronisieren, also herunterladen. Der Haken dabei ist allerdings, dass die Fonts auf der Website des Dienstes anwählen musst. Erst danach kann synchronisiert werden. Skyfonts ist, soweit man nur Google-Fonts nutzen will, ebenfalls kostenlos.

Fontea vereinfacht die Schriftverwendung in Photoshop

Das neue Werkzeug namens Fontea funktioniert zwar nur mit Photoshop, während die beiden vorgenannten Lösungen auf der Betriebssystemebene arbeiten und somit Fonts für alle Programme zur Verfügung stellen. Ich habe allerdings bei mir selber festgestellt, dass ich die Fonts auch gar nicht in anderen Programmen brauche. In Photoshop erstelle ich die Prototypen. Da benötige ich Google Fonts, in Office verlangsamen sie mir nur die Schriftauswahl.

Fontea steht aktuell zum Download für Mac OSX und Windows zur Verfügung. Es funktioniert ab Photoshop 2015. Umgestiegene Designer werden sich freuen, dass es bald eine Version geben wird, die die Funktionalität auch in Sketch realisiert.

Download und Installation des weniger als 50 MB schweren Pakets funktionieren in gewohnter Weise. Fontea erkennt selbtständig den Installationspfad zu Photoshop, lässt sich aber auch manuell auf andere Pfade biegen.

Einmal installiert findest du Fontea in Photoshop unter Fenster > Erweiterungen > Fontea. Eines der gewohnten Schwebefenster positioniert sich rechtsseitig im Editor. Die Funktionsweise ist sehr simpel. Du markierst eine Textebene und klickst danach auf eine der Schriftarten im Fontea-Fenster. Nach kurzer Bedenkzeit wird der gewählte Text mit der gewählten Schriftart dargestellt. Das ist alles.

Um dir den Umgang mit den hunderten von Fonts zu erleichtern, hat Fontea mehrere Hilfsmittel an Bord. Zum einen kannst du die Auswahl auf eine von sechs Kategorien beschränken. Zum anderen kannst du per Freitext suchen. Die zuletzt verwendeten Schriften findest du hinter dem Icon „Recent“. Außerdem kannst du Fonts per Klick auf den Stern neben der Schrift als Favorit markieren und so dafür sorgen, dass er in die entsprechende Favoritenliste aufgenommen wird.

Fontea: Nutze alle Google-Fonts in Photoshop

Beachte bitte, dass für die Nutzung ein Source-Account erforderlich ist, den du bei der ersten Nutzung schnell und unkompliziert anlegen kannst. Für die OAuth-Authentifizierung kannst du Facebook, Twitter oider Github wählen. Willst du das nicht, nimmst du klassisch E-Mail plus Passwort her.

Fontea: klare Empfehlung

In meinem Test unter Windows 10 mit Photoshop 2015 funktionierte alles bestens. Die Reaktionszeit nach der Wahl des Font lag im absolut akzeptablen Rahmen von etwa zwei Sekunden – und das trotz meiner eher rückständigen Internetgeschwindigkeit.

Nachdem weder Fontea noch die eingesetzten Fonts etwas kosten und von daher ohnehin zu den meistgenutzten Fonts für das Webdesign gehören, spricht nichts gegen den Einsatz von Fontea. Probier es halt selbst aus. Wenn du Sketch-Nutzer bist, habe noch etwas Geduld. Fontea ist auch für dich schon in Arbeit.

Kategorien
Design Essentials Freebies, Tools und Templates Icons & Fonts UI/UX

Schriften kombinieren leicht gemacht (kostenloses E-Book)

Spätestens mit der Einführung der Webfonts steht auch Webdesignern die ganze Vielfalt der Typografie für ihre Projekte zur Verfügung. Richtige Schriften kombinieren fällt jedoch nicht allen leicht. Das kostenlose E-Book „Combining Typefaces“ hilft dir, passende und zueinander passende Schriften zu finden. Also, welche Schriften passen zu meinem Weblayout und welche Schriften harmonisieren gut miteinander? Das E-Book beantwortet diese und weitere Fragen auf über 60 Seiten.

Schriften kombinieren

Einführung in Grundlagen der Typografie

Alle, die sich zunächst einmal ein Grundlagenwissen anlesen wollen, finden im ersten Kapital von „Combining Typefaces“ viele allgemeine Informationen rund um Schrift und Typografie. So gibt das Kapitel einen Überblick über die Anatomie der Buchstaben, erklärt also unter anderem, was es mit Oberlängen, Unterlängen und Serifen auf sich hat. Wer diese Begrifflichkeiten bereits kennt, kann sich hier mit den englischen Bezeichnungen vertraut machen. Denn das E-Book ist in englischer Sprache verfasst.

Schriften kombinieren
Anatomie der Buchstaben

Überall dort, wo es sehr spezifisch wird, verweist das Buch auf Websites und Fachbücher, mit denen du dein Wissen weiter vertiefst. Auch die Klassifikation von Schriften – also die stilistische und historische Einordnung von Schriften – wird nur oberflächlich behandelt. Aber auch hier gibt es Verweise zu weiterer Literatur.

Schriften auswählen und kombinieren

In den übrigen Kapiteln geht es dann ums eigentliche Thema. Nach welchen Kriterien sollte man eine oder mehrere Schriftarten aussuchen? Was soll mit der Typografie erreicht werden? Es gibt viele Faktoren, die bei der Auswahl einer Schrift eine wichtige Rolle spielen. Da ist zum einen die Lesbarkeit. Aber Schrift kann auch so ausgewählt und angewendet werden, dass sie in erster Linie die Aufmerksamkeit der Lesers erregt.

Der eigentliche Schwerpunkt des Buches – nämlich die Kombination von Schriften – wird sehr ausführlich bearbeitet. Letztendlich ist die Kombination passender und harmonisch wirkender Schriften nicht immer einfach. Wer auf der sicheren Seite sein will, bleibt innerhalb einer Schriftfamilie und kombiniert zum Beispiel eine serifenlose Schrift mit einer Serifenschrift aus derselben Familie.

Das E-Book gibt aber auch viele nützliche Tipps, wie man außerhalb einer Schriftfamilie geeignete Schriften findet, die zueinander passen. So ist es beispielsweise hilfreich, sich zunächst für eine „Ankerschrift“ zu entscheiden – also eine Basisschrift, die du für Fließtexte verwendest und mit der somit der Großteil deiner Texte gesetzt ist.

Schriften kombinieren
Vergleich von Schriften

Zu dieser Ankerschrift solltest du dann eine passende Schrift auswählen, die beispielsweise für Überschriften in Frage kommt. Hier stellt „Combining Typefaces“ einige Kriterien vor, auf die du bei der Auswahl achten solltest. So hilft es zum Beispiel, die Proportionen der Schriften miteinander zu vergleichen. Vergleiche das Verhältnis der Großbuchstaben zu den Kleinbuchstaben, sowie die Buchstabenweite. Auf diese Weise findest du Schriften mit ähnlichen Proportionen, die somit gut mit deiner Ankerschrift harmonieren.

Schriften kombinieren: Gelungene Beispiele

Im letzten Kapitel werden noch einige gelungene Beispiele für gute Kombinationen von Schriften im Webdesign vorgestellt. Anhand konkreter Situationen wird erläutert, warum die Schriften zueinander passen und was sie auszeichnet beziehungsweise besonders macht.

Schriften kombinieren
Beispiel für kombinierte Schriften auf einer Website

Dabei gibt es zu allen vorgestellten Schriften Verweise zu den jeweiligen Foundrys. Auf diese Weise findest du womöglich noch die oder andere neue Schrift zur Inspiration und eventuell ja auch einen Schriftenanbieter, den du bislang noch nicht kanntest.

Insgesamt ist „Combining Typefaces“ ein umfangreiches und für typografische Anfänger sowie Fortgeschrittene interessantes und hilfreiches Buch. Wer des Englischen mächtig ist und einen fundierten Einstieg ins Thema Typografie und Kombinieren von Schriften sucht, wird hier sicher fündig.

Das gut 60 Seiten lange und zehn Megabyte große E-Book steht kostenlos als PDF-Datei bei Adobes Schriftendienst Typekit zum Download bereit.

(dpe)