Kategorien
Design E-Business E-Commerce Inspiration Showcases

Bessere Geschäfte: Sechs E-Commerce-Design-Trends für 2015

Wie das „normale“ Webdesign unterliegt auch das E-Commerce-Design gewissen Trends. Wenn bei Ihnen in diesem Jahr turnusmäßig ohnehin ein neues Design für Ihren Online-Shop ansteht, dann kommt das genau zum richtigen Zeitpunkt. Denn die diesjährigen Trends können Ihnen eine wirklich wunderschöne E-Commerce-Webseite bescheren. Nutzen Sie unsere Beispiele gern für die Meetings mit Ihrem Designer, denn mit den Trends für 2015 werden Sie auch für die kommenden zwei bis drei  Jahre gut gerüstet sein. Die Trends befassen sich ganz eindeutig nicht nur mit „Schönheit“, sondern gehen vor allem auch Richtung Benutzerfreundlichkeit und mobile Nutzbarkeit.

Die 5 E-Commerce Design Trends für 2015

1. – Vollflächige Hintergrundbilder

Wenn Sie schon an wirklich guten Produktfotos gearbeitet haben, dann sind Sie auch bereit für vollflächige Hintergrundbilder. Gute Produktfotos können nicht nur als Bilder in einen Slider eingebunden werden, sondern wirken besonders gut auch als vollflächiger Hintergrund in sogenannten Hero-Bereichen. Suchen Sie Ihre besten Fotos aus und lassen sich überraschen, wie plastisch schön ein solches Design-Konzept wirken kann. Hier einige sehr gute Beispiele:

Suncoo

suncoo

Basus

Basus

Couteaux – TB Groupe

Couteaux - TB Groupe

The New World Order NYC

The New World Order - NYC

April 77

April 77

BIMBA Y LOLA

BIMBA Y LOLA

2. – Flat und Material Design in angenehmen Farben

Bereits 2014 war das Jahr des Flat-Designs und dieses Jahr wird es weiterhin im Trend liegen. Allerdings geht – inspiriert durch das neue Android-Design – der Trend mehr in Richtung Material Design. Flat-Design überzeugt durch seinen einfachen und klaren Stil ohne unnötige Spielereien. Material Design geht noch einen Schritt weiter und sorgt für die richtigen – nicht überladenen – farblichen Akzente. Mutiges Material-Design überzeugt durch seine klaren Strukturen und helle Farben und erscheint besonders für junge Marken vorteilhaft. Ein wirklich gutes Beispiel für die gelungene Umsetzung von Material-Design ist PA Design.

Boutique M Moustache

Boutique M Moustache

Loobow

Loobow

Bioseptyl

Bioseptyl

PA Design

PA Design

Wichtige Links

3. – Card-Design – Design mit Karten

Das Card-Design dürfte einer der wichtigsten im Kommen begriffenen Trends sein, denn es bietet nicht nur in Sachen Design große Vorteile. Benutzerfreundlichkeit wird hier ganz groß geschrieben, weil der Besucher alle relevanten Informationen auf einen Blick zu sehen bekommt. Diese Karten enthalten im Wesentlichen kurze Texte, ein Bild und/oder einige Share-Buttons, sowie die wichtigsten Informationen zu einem Produkt. So kann der potenzielle Kunde bereits auf einen Blick entscheiden, ob das Produkt für ihn in Frage kommt. Ein hervorragendes Beispiel ist The Verge, dort ist das Card-Design besonders informativ und gut umgesetzt.

The Verge

The Verge

Adidas

Adidas

Zalando

Zalando

 

Housen Deco

Housen Deco

 

4. – Parallax-Scrolling und Hintergrund-Effekte

Wahrscheinlich werden Ihnen bereits Webseiten begegnet sein, die Parallax für gewisse „Aha“-Effekte einsetzen. Richtig eingesetzt, können diese Effekte sehr eindrucksvoll wirken. Allerdings lenken sie auch sehr schnell vom Wesentlichen ab, daher sollten sie stets mit Bedacht und Sorgfalt implementiert werden. Parallax-Effekte sind nur dann zu empfehlen, wenn sie den eigentlichen Inhalt – also Ihre Produkte – unterstreichen. Ditto setzt den Effekt noch zaghaft ein, während er bei IWC Schaffhausen schon deutlicher ist. Ergänzend habe ich noch 2 branchenfremde Webseiten hinzugefügt, die den Effekt professionell einsetzen. L’unità nutzt den Parallax Scroll-Effekt und The Royal British Legion animiert fast die gesamte Webseite.

DITTO

DITTO

IWC Schaffhausen

IWC Schaffhausen

Branchenfremde Beispiele

The Royal British Legion

The Royal British Legion

L’unità

L'unità

5. – Minimalistische Buttons (Ghost Buttons)

Minimalistische, sogenannte Ghost Buttons sind schon in 2014 im Trend gewesen und dieser Trend wird sich 2015 noch ausweiten. Der Grund dafür ist relativ einfach: Sie können perfekt als Call-to-Action (zur Handlung auffordernd) Buttons auf Slidern oder vollflächigen „Hero“-Hintergrundbildern eingesetzt werden, ohne dass sie zu sehr vom Hintergrund und seiner Aussage ablenken. Minimalistische Buttons fügen sich perfekt in moderne, frische Designs ein.

Zeina Alliances

Zeina Alliances

Oelwein

Oelwein

Daniella Draper

Daniella Draper

Gladz Footwear

Gladz Footwear

6. – Für mobile Geräte optimiert

Immer mehr Menschen gehen dazu über, das Internet fast ausschliesslich mobil per Smartphone oder Tablet zu nutzen. Wenn Sie auch in Zukunft gute Geschäfte mit Ihrer E-Commerce Webseite erzielen wollen, dann empfehle ich Ihnen dringend, über eine Optimierung Ihrer Webseite für die mobile Ansicht nachzudenken. Hier gibt es zwei Wege, die Sie einschlagen können: Den guten und den besseren Weg. Der gute Weg ist es, die Webseite responsiv zu gestalten. Das heisst, dass sich die Webseite jeder Bildschirmauflösung optimal anpasst. Noch zileführender dürfte das Anbieten einer App sein, denn immer mehr Menschen bevorzugen Smartphone- oder Tablet-Apps, um sich zu informieren oder eine Bestellung aufzugeben. Der beste Rat ist: Tun Sie das eine, ohne das andere zu lassen. Also ergänzen Sie Ihre responsive Website um eine professionelle App, wenn Sie es sich leisten können.

Responsive Beispiel-Shops

Kershaw Knives

Kershaw Knives

A Book Apart

A Book Apart

E-Commerce Shops mit Apps

Amazon

Amazon

Die Amazon-App für: iPhone • iPad und iPad mini • Android Phone • Android Tablets • Windows Phone

Tchibo

Tchibo

Die Tchibo-App für: Tablets • Smartphones

TLDR: Zusammenfassung für Eilige

Flat-Design wird auch in 2015 einer der großen Trends im E-Commerce Design bleiben. Material Design wird sich aller Voraussicht nach in 2015 durchsetzen und belohnt die Shop-Besitzer mit schlichten und doch außergewöhnlichen Designs, die in den Köpfen der Besucher bleiben werden. Vollflächige Hintergrundbilder machen richtig Lust auf mehr und minimalistische Buttons unterstützen sie dabei, weil sie nicht zu sehr von der Aussage der Bilder ablenken. Parallax-Effekte setzen sich mittlerweile auch in E-Commerce-Webseiten durch und wirken am besten, wenn sie fast nicht zu bemerken sind. Parallax-Effekte sollten mit Bedacht eingesetzt werden, da sie sehr leicht vom Wesentlichen ablenken. Responsives Design und das Anbieten von mobilen Apps sind nicht nur kurzlebige Trends, sondern – man darf es wohl so pathetisch sagen – die Zukunft.

Links zum Beitrag

(dpe)

Kategorien
Inspiration Showcases

Designs der Welt, heute: Ukraine

Von Sewastopol bis Kiew, von Lwiw bis Donetsk – die Ukraine ist ein großes Land mit einer langen, bewegten Geschichte, aber auch mit dramatischen Landschaften und Küsten. In ihren Grenzen leben verschiedenste ethnische Gruppen mit einem breiten und vielfältigen kulturellen HIntergrund. Die Ukraine, oder besser gesagt die Ukrainer haben definitiv etwas vorzuweisen.

Die Ukraine ist das Mutterland verschwenderisch aufwändiger Stickereien, bemerkenswerter traditioneller Trachten und des hochdekorativen Kunstgewerbes und Handwerks. So ist es natürlich kein Wunder, dass wir in der Ukraine hochtalentierte Virtuosen finden, die sich nicht nur in den traditionellen Kunstzweigen des Landes aufgehoben sehen, sondern sich auch der modernen Kunst, also dem Webdesign, der App-Programmierung, dem Schriftendesign und anderen zeitgenössischen Ausdrucksformen zuwenden. Die Ukrainer sind beeinflusst sowohl von west-, wie auch osteuropäischen Wurzeln und können so als Land zwischen den Kulturen meisterlich beide mischen. Sie präsentieren sich im globalen Wettbewerb und haben keine Mühe, auf hohem Level zu konkurrieren.

Heute wollen wir Ihnen einige talentierte Designer und Design-Firmen aus der Ukraine zeigen, denen es gelungen ist, auch außerhalb ihres Heimatlandes wahrgenommen zu werden. Für uns repräsentieren diese Arbeiten den Stand des Designs in der Ukraine unserer Tage.

Web- und App-Design

VKRAINA

vkraina
Urheber: GRAPE.

Google Glass

google-glass
Urheber: ELEKS, Ltd.

Digital Production Portfolio

agl
Urheber: Denis Kucevalov.

Portfolio of Roman Kirichik

portfolio-of-roman-kirichik
Urheber: Roman Kirichik.

Speed Motion

speed-motion
Urheber: Aleksandr Romanukha.

Yep!

yep-app
Urheber: Keepa.

Polecat

polecat
Urheber: Polecat and Keepa.

HPPR Agency

hppr
Urheber: CB T .

Xbox Live Points

xbox-live-points
Urheber: Aleksandr Romaniukha.

Dreamtrip

richdreamtrip
Urheber: Yuri Lence.

Sponge Digital & Design

sponge
Urheber: Sponge.

W3

w3
Urheber: W3.ua.

Fresh Design Studio

fresh-design
Urheber: Aliona Voitenko, Popova Aleksandra and Kandalova Olga.

Kresko

kresko
Urheber: Territory.

VGNC

vgnc
Urheber: VGNC.

Concept address book in iOS 8

address-book
Urheber: Ron Evgeniy.

Tap to Tell

tubik-manufactory
Urheber: Ludmila ShevchenkoTubik ManufactorySergey Valiukh

Overcolor Pro app

overcolor-pro
Urheber: Irene Shkarovska

iPhone 6 Free PSD

iphone6
Urheber: Vladislav Litvin.

Talentierte Künstler eher traditioneller Design-Felder

A Book About Tomorrow

book-about-tomorrow
Urheber: Sevilya Ibrahim.

Lights

lights
Urheber: Vasya Kolotusha.

Emotive Portraits

emotive-portraits
Urheber: Oleg Oprisco

Carpathian Alcohol Collection

packaging-design
Urheber: Yaroslav Shkriblyak

Sevastopol Military Tattoo

military-tattoo
Urheber: Anton Yermolov.

Pulpy

pulpy
Urheber: uDAV Dmitriy_AksonovArtem KASPositive PicturesAleksandr Zhadan.

Three Hops

3-hoops
Urheber: Aleksandr Kuskov

Eraser

eraser
Urheber: Dima TsapkoRoman DavydyukTough Slate Design.

White Stripes UI Kit – Free PSD

white-stripes
Urheber: Heyllow Lab

Cafe-bakery „Galician Strudel“

cafe-bakery
Urheber: Olena Fedorova.

New Year Postcard — Make it a Happy Year

new-year-post-card
Urheber: Olga Protasova.

Designs der Welt: unsere neue Welt-Serie startet hier

„Designs der Welt“ ist eine neue Serie, die wir mit unserer englischsprachigen Schwester Noupe entwickelt haben. Dabei werden wir uns den Stand des Designs in den unterschiedlichen Ländern unserer Erde ansehen. Denn auch wenn Design eine globale Sprache ist, sind doch nicht alle Designs gleich, ähnlich oder auch nur vergleichbar. Die Idee zu dieser Serie entstand bei der Lektüre der „Make Me Beautiful„-Challenge von Esther Honig. Nicht zuletzt daran sieht man, wie bunt die Welt ist. Ich hoffe, Sie haben bei dieser Serie so viel Spaß beim Schauen, wie wir beim Erstellen.

(dpe)

Kategorien
Essentials Freebies, Tools und Templates Inspiration Showcases

Corporate Design leicht gemacht: 30 kostenlose Vorlagen für die wichtigsten Geschäftsmaterialien

Die eigene Unternehmung in der realen und virtuellen Welt zu etablieren, ist ein wichtiger Schritt auf dem Weg zum Erfolg. Während im Internet Websites, Profile in den sozialen Medien und Apps für die mobile Generation ein gutes Stück dazu beitragen, sind die Wege in der realen Welt nicht so eindeutig und geradlinig. Dennoch gibt es auch hier eine breite Auswahl an Möglichkeiten. Sinnvoll könnte Print- oder auch Fernsehwerbung sein, andere öffentlichkeitswirksame Kampagnen sind denkbar. Allerdings, bevor man so etwas angeht, ist es wichtig, eine eigene Corporate Identity nebst passendem Corporate Design zu erschaffen. Und da kommen wir auch heutzutage an gedruckten Materialien nicht vorbei. Im folgenden Beitrag wollen wir Ihnen für Ihre eigene oder die Firma Ihres Kunden etwas Inspiration, aber auch handfeste Vorlagen an die Hand geben…

Mit einem ganzen Haufen professioneller Visitenkartenvorlagen konnten wir Sie erst kürzlich ausstatten. Heute gehen wir den nächsten Schritt und widmen uns den übrigen Geschäftsunterlagen, zu denen nicht nur die Visitenkarte, sondern Briefbögen, Umschläge, Schreibutensilien, Notizbücher, Aufkleber und sonstige unterstützende Giveaways gehören.

Allerdings sollte man nicht sklavisch jedes denkbare Element auch umsetzen. Die folgende Sammlung repräsentiert lediglich den rahmen des Machbaren. Was letztlich sinnvoll ist, hängt von Ihnen und Ihrer Firma im Konkreten ab. Schauen Sie einfach mal, was so alles vorstellbar ist…

Mockup Stationery

mockup-stationary
Erstellt von/für: Juan Tran
Lizenz: frei für die nicht-kommerzielle Nutzung mit Urhebernennung

Stationery Presentation Mockup

white-mockuo
Erstellt von/für: Mikolaj Podlasek
Lizenz: frei für die nicht-kommerzielle Nutzung mit Urhebernennung

GemGfx Corporate Identity Mockup Part 5

corporate-identity
Erstellt von/für: Everard McBain
Lizenz: frei für die nicht-kommerzielle Nutzung mit Urhebernennung

PSD Corporate Identity Mockup Part 2

corporate-identity-part2
Erstellt von/für: Everard McBain
Lizenz: frei für die nicht-kommerzielle Nutzung mit Urhebernennung

Stationery Mockup

b&w-mockup
Erstellt von/für: Wassim Awadallah
Lizenz: frei für die nicht-kommerzielle Nutzung mit Urhebernennung

Free Mockup (Ipad, iphone5s, business card, book)

mockup-with-devices
Erstellt von/für: Dmitry Eremin
Lizenz: frei für die nicht-kommerzielle Nutzung mit Urhebernennung

Free Stationery Mockup (Smart Object & Layered)

stationery-mockup
Erstellt von/für: lesago
Lizenz: frei für die nicht-kommerzielle Nutzung mit Urhebernennung

Branding / Stationery Mock-Up

branding-mockup
Erstellt von/für: Raul Taciu
Lizenz: frei für die nicht-kommerzielle Nutzung mit Urhebernennung

Flat Mockups – Stationery Items

flat-mockups
Erstellt von/für: graphicburger
Lizenz: als “Free” bezeichnet; keine klare Lizenz vergeben

Branding / Identity MockUp Vol.9

branding-identity
Erstellt von/für: graphicburger
Lizenz: als “Free” bezeichnet; keine klare Lizenz vergeben

Branding / Identity MockUp Vol.8

brand-identity-vol8
Erstellt von/für: graphicburger
Lizenz: als “Free” bezeichnet; keine klare Lizenz vergeben

Stationery MockUp – Wood Edition

wooden-stationery
Erstellt von/für: graphicburger
Lizenz: als “Free” bezeichnet; keine klare Lizenz vergeben

Stationery

black-stationery
Erstellt von/für: qeaql
Lizenz: als “Free” bezeichnet; keine klare Lizenz vergeben

Stationery

stationery-collection-13
Erstellt von/für: qeaql
Lizenz: als “Free” bezeichnet; keine klare Lizenz vergeben

Stationery

stationery-with-ipad
Erstellt von/für: qeaql
Lizenz: als “Free” bezeichnet; keine klare Lizenz vergeben

Branding Mock-up

branding-mockup2
Erstellt von/für: Mohamed Magdy
Lizenz: frei für die nicht-kommerzielle Nutzung mit Urhebernennung

Stationery Mock Up Collection Xi

dark-stationery
Erstellt von/für: Rubayath R
Lizenz: frei für die nicht-kommerzielle Nutzung mit Urhebernennung

Stationery Mock up PSD

grey-mockup
Erstellt von/für: techandall
Lizenz: als “Free” bezeichnet; keine klare Lizenz vergeben

Book And Business Card 2

book-and-card
Erstellt von/für: alienvalley
Lizenz: frei für die persönliche und kommerzielle Nutzung

Identity Mock-Up Vol.1

clean-mockup
Erstellt von/für: pixelbuddha
Lizenz: als “Free” bezeichnet; keine klare Lizenz vergeben

Flat Stationery Items

flat-stationery
Erstellt von/für: alienvalley
Lizenz: frei für die persönliche und kommerzielle Nutzung

Free Mockup

mockup
Erstellt von/für: Matheus Corseuil
Lizenz: frei bei Urhebernennung

8 Free Photorealistic Stationery Branding PSD Mockups

colorful-mockup
Erstellt von/für: zippypixels
Lizenz: als “Free” bezeichnet; keine klare Lizenz vergeben

Branding Mock Up Free

wodden-branding-2
Erstellt von/für: Edris Advertising Center
Lizenz: frei für die nicht-kommerzielle Nutzung mit Urhebernennung

Stationery Branding Mock Up

vector-mockup
Erstellt von/für: Tibor Brink
Lizenz: frei für die nicht-kommerzielle Nutzung mit Urhebernennung

Collection 5 – Free & Premium Mock Ups

white-mockup
Erstellt von/für: Qeaql
Lizenz: frei für die nicht-kommerzielle Nutzung mit Urhebernennung

Modern Graphic Stationery Design Template

vibrant-mockup
Erstellt von/für: Muhammad Zahid
Lizenz: frei für die nicht-kommerzielle Nutzung mit Urhebernennung

White Corporate Identity Template

white-corporate-identity
Erstellt von/für: Muhammad Zahid
Lizenz: frei für die nicht-kommerzielle Nutzung mit Urhebernennung

Blue Corporate Identity Template

blue-identity
Erstellt von/für: Muhammad Zahid
Lizenz: frei für die nicht-kommerzielle Nutzung mit Urhebernennung

Blue Corporate Identity Template with Round Elements

business-mockup
Erstellt von/für: Muhammad Zahid
Lizenz: frei für die nicht-kommerzielle Nutzung mit Urhebernennung

(dpe)

Kategorien
Design Essentials Freebies, Tools und Templates Inspiration Showcases UI/UX

Spätsommerlich: 30 kostenlose PSD-Sets mit frischen UI-Elementen für mobile Apps

Der Herbst klopft ziemlich laut an des Entwicklers Tür. Im Grunde ist das nicht schlecht, schließlich zieht das Geschäft im Frühjahr und im Herbst erfahrungsgemäß jeweils deutlich an. Geldverdienen ist angesagt. Bald drubbelt sich wieder Projekt an Projekt und auch wenn man ein Freund radikaler Handarbeit ist und alles am liebsten immer wieder vom Fundament zum Dach einzeln hochmauert, muss man sich doch bald einer zeitsparenderen Variante bedienen. Zumindest teilweise werden wir dann wieder auf Bausteine, Module, Blockbausätze setzen. So schließen wir Projekte schneller ab und verdienen in der gleichen Zeit mehr Geld. Was spräche dagegen?

Im vergangenen Sommer setzten sich dankenswerterweise wieder etliche Interface Designer hin und klöppelten schicke Element-Sätze zusammen. In unserer Sommer-Edition 2014 finden Sie diesbezüglich sowohl Basis-Kästen mit allen möglichen brauchbaren Elementen, wie auch Konzepte individueller Interfaces. Wie immer setzen wir auf Inspiration einerseits und Fertigbausätze andererseits.

Schauen Sie, was talentierte Designer diesen Sommer über so erschaffen haben. Die meisten PSD-Sammlungen sind als „Free“ gekennzeichnet, haben aber keine dezidierte Lizenz beigegeben. Wenn Sie diese Bausteine kommerziell nutzen wollen, sprechen Sie sicherheitshalber den Erschaffer vorher an. Meist vergessen kreative Köpfe im Überschwang ihrer Schaffenskraft so „lapidare“ Fragen wie die Nennung einer verlässlichen Lizenz einfach ;-)

Mobile UI Kit

mobile-ui
Erstellt von: NAS
Lizenz: als “Free” bezeichnet; keine klare Lizenz vergeben

Android L GUI KIT

android-l-kit
Erstellt von: Ruban Khalid
Lizenz: als “Free” bezeichnet; keine klare Lizenz vergeben

Mobile UI Blueprint

mobile-ui-blueprint
Erstellt von: chrometaphore
Lizenz: als “Free” bezeichnet; keine klare Lizenz vergeben

Blog + Article App UI

blog-and-article-ui
Erstellt von: Oliver
Lizenz: als “Free” bezeichnet; keine klare Lizenz vergeben

Small Media UI Kit

dark-ui-kit
Erstellt von: Robert Berki
Lizenz: als “Free” bezeichnet; keine klare Lizenz vergeben

PSD Flat Ui Kit

psd-flat-ui-kit
Erstellt von: Andrew McKay
Lizenz: als “Free” bezeichnet; keine klare Lizenz vergeben

Awesome UI Kit for Mobile

ui-kit-for-mobiles
Erstellt von: Mohsin Khan
Lizenz: als “Free” bezeichnet; keine klare Lizenz vergeben

Flat UI Kit

flat-ui-kit
Erstellt von: Marcel Akiyama
Lizenz: als “Free” bezeichnet; keine klare Lizenz vergeben

Flat UI kit

iphone-ui-kit
Erstellt von: Jardson A.
Lizenz: als “Free” bezeichnet; keine klare Lizenz vergeben

Android L Contacts UI PSD

android-l
Erstellt von: Roberts Ozolins
Lizenz: als “Free” bezeichnet; keine klare Lizenz vergeben

UI Kit

ui-kit
Erstellt von: KINGLY
Lizenz: als “Free” bezeichnet; keine klare Lizenz vergeben

Minimal UI Kit

minimal-ui-kit
Erstellt von: psdbooster
Lizenz: als “Free” bezeichnet; keine klare Lizenz vergeben

iOS8 GUI PSD

ios8-gui
Erstellt von: BullzArtDesign
Lizenz:  als “Free” bezeichnet; keine klare Lizenz vergeben

Flat App UI Full Project (Free PSD File)

flat-app
Erstellt von: Kada pps
Lizenz: als “Free” bezeichnet; keine klare Lizenz vergeben

Blue App for iPhone

ui-for-iphone
Erstellt von: graphicsbay
Lizenz: frei für die persönliche und kommerzielle Nutzung

Taxi iOS App Template

taxi-ios-app
Erstellt von: andrixdesign
Lizenz: als “Free” bezeichnet; keine klare Lizenz vergeben

Insane – 9 Screens Mobile UI

9-screens-of-ui
Erstellt von: Graphics Bay Team
Lizenz: frei für die persönliche und kommerzielle Nutzung

Quest: Free iOS7 App

quest-app
Erstellt von: Olia Gozha
Lizenz: frei für die persönliche und kommerzielle Nutzung

PSD Summer UI Kit

summer-ui-kit
Erstellt von: Graphics Bay Team
Lizenz: frei für die persönliche und kommerzielle Nutzung

Car Navigation

car-app-ui
Erstellt von: Uiwork
Lizenz: als “Free” bezeichnet; keine klare Lizenz vergeben

IOS Music Player Free PSD Files

ios-music-player
Erstellt von: kada ayoub
Lizenz: als “Free” bezeichnet; keine klare Lizenz vergeben

Material Design Audio Player

voyager-app
Erstellt von: Zach Buechler
Lizenz: als “Free” bezeichnet; keine klare Lizenz vergeben

Message Screen

message-ui
Erstellt von: Rick Karens
Lizenz: frei für die persönliche und kommerzielle Nutzung

Android L Gmail User Interface

android-l-gmail
Erstellt von: Roberts Ozolins
Lizenz: als “Free” bezeichnet; keine klare Lizenz vergeben

Planner & Meteo UI Kit for iPhone

planner-and-meteo-ui
Erstellt von: Graphics Bay Team
Lizenz: frei für die persönliche und kommerzielle Nutzung

Weather iOS App Template PSD Freebie

ios-app
Erstellt von: zappdesigntemplates
Lizenz: als “Free” bezeichnet; keine klare Lizenz vergeben

Android Settings Screen

android-screen
Erstellt von: Fuxxo Works
Lizenz: als “Free” bezeichnet; keine klare Lizenz vergeben

Message App Freebie

message-app-ui
Erstellt von: Andrée Afonso
Lizenz: frei für die persönliche und kommerzielle Nutzung

Football App

football-app
Erstellt von: stonesun
Lizenz: als “Free” bezeichnet; keine klare Lizenz vergeben

Login & Register Freebie

login-screen-ui
Erstellt von: Evan Brand
Lizenz: als “Free” bezeichnet; keine klare Lizenz vergeben

(dpe)

Kategorien
Essentials Icons & Fonts Inspiration Showcases

Echt antik: 40 freie Retro-Fonts für den Vintage-Fan

Der Vintage-Stil ist voll im Trend – nicht erst seit dem Hipster-Look – und so gibt es derzeit zahlreiche, echt sehenswerte und vor allem einsetzbare Fonts zu entdecken, die mal nur für private, manchmal gar für kommerzielle Zwecke freigegeben sind. Wir haben diese gesammelt und genau mit dieser Info ausgestattet. Viel Spaß beim Installieren der zahlreichen Retro-Schriftarten.

Vintage-Fan? Zeitreise: 40 Retro- und Vintage-Effekte in Photoshop, die uns alt aussehen lassen

Streetwear (Free Font)

Frei für: Private/Kommerzielle Zwecke
Urheber: Artimasa
Deutsche Umlaute: Nein
retrofont1b

© Artimasa

Hand Shop Typography C30

Frei für: Private Zwecke
Urheber: fontscafe
Deutsche Umlaute: Nein
retrofont2

© fontscafe

Bazar

Frei für: Private/Kommerzielle Zwecke
Urheber: Olinda Martins
Deutsche Umlaute: Nein
retrofont3

© Olinda Martins

staravenue

Frei für: Private Zwecke
Urheber: Andrew Hart
Deutsche Umlaute: Nein
retrofont4

© Andrew Hart

Blessed Day font

Frei für: Private Zwecke
Urheber: Billy Argel
Deutsche Umlaute: Nein
retrofont5

© Billy Argel

Bobber Free Typeface

Frei für: Private Zwecke
Urheber: Lucas Almeida und Dmitry Goloub
Deutsche Umlaute: Nein
retrofont6

© Lucas Almeida und Dmitry Goloub

Free Font: Sabo

Frei für: Private/Kommerzielle Zwecke
Urheber: Philippe Moesch
Deutsche Umlaute: Nein
retrofont7

© Philippe Moesch

Mensch

Frei für: Private Zwecke
Urheber: Morgan Knutson
Deutsche Umlaute: Nein
retrofont8

© Morgan Knutson

CANDY INC. font

Frei für: Private Zwecke
Urheber: Billy Argel
Deutsche Umlaute: Nein
retrofont9

© Billy Argel

Budmo

Frei für: Private/Kommerzielle Zwecke
Urheber: Typodermic Fonts
Deutsche Umlaute: Ja
retrofont10

© Typodermic Fonts

Super Retro M54 font

Frei für: Private Zwecke
Urheber: justme54s
Deutsche Umlaute: Nein
retrofont11

© justme54s

LT Oksana 6.0

Frei für: Private Zwecke
Urheber: nymphont
Deutsche Umlaute: Ja
retrofont12

© nymphont

Governor

Frei für: Private Zwecke
Urheber: Riley Cran
Deutsche Umlaute: Nein
retrofont13

© Riley Cran

Matchbook Typefaces

Frei für: Private Zwecke
Urheber: One By Four
Deutsche Umlaute: Nein
retrofont14

© One By Four

ZEBRAZIL FONT (FREE FONT)

Frei für: Private Zwecke
Urheber: zarni ni
Deutsche Umlaute: Nein
retrofont15

© zarni ni

Akura Popo Free Font

Frei für: Private/Kommerzielle Zwecke
Urheber: Twicolabs Design
Deutsche Umlaute: Nein
retrofont16

© Twicolabs Design

Alpha Ruler

Frei für: Private/Kommerzielle Zwecke
Urheber: kallegraphics.com
Deutsche Umlaute: Nein
retrofont17

© kallegraphics.com

Blanch

Frei für: Private Zwecke
Urheber: Atipus
Deutsche Umlaute: Nein
retrofont18

© Atipus

Glasoor

Frei für: Private Zwecke
Urheber: Sergiy Tkachenko
Deutsche Umlaute: Nein
retrofont19

© Sergiy Tkachenko

Homestead

Frei für: Private Zwecke
Urheber: Luke Lisi
Deutsche Umlaute: Nein
retrofont20

© Luke Lisi

American Captain

Frei für: Private Zwecke
Urheber: Fontry
Deutsche Umlaute: Nein
retrofont21

© Fontry

Rispa Regular Typeface

Frei für: Private/Kommerzielle Zwecke
Urheber: Konrad Bednarski
Deutsche Umlaute: Nein
retrofont22

© Konrad Bednarski

London Typeface

Frei für: Private/Kommerzielle Zwecke
Urheber: antoniorodriguesjr.com
Deutsche Umlaute: Ja
retrofont23

© antoniorodriguesjr.com

Ranger

Frei für: Private Zwecke
Urheber: Evan Huwa
Deutsche Umlaute: Nein
retrofont24

© Evan Huwa

DecoTech

Frei für: Private Zwecke
Urheber: Justin Callaghan
Deutsche Umlaute: Ja
retrofont25

© Justin Callaghan

Duke

Frei für: Private Zwecke
Urheber: James T. Edmondson
Deutsche Umlaute: Nein

retrofont26

© James T. Edmondson

Muncie

Frei für: Private Zwecke
Urheber: Riley Cran
Deutsche Umlaute: Nein
retrofont27

© COPY

Rocket Script

Frei für: Private Zwecke
Urheber: Stuart Sandler
Deutsche Umlaute: Nein
retrofont28

© Stuart Sandler

Free Typeface: VINCENT

Frei für: Private/Kommerzielle Zwecke
Urheber: Ben Suarez
Deutsche Umlaute: Nein
retrofont29

© Ben Suarez

Canter free fonts

Frei für: Private Zwecke
Urheber: Fontfabric und Christopher J. Lee
Deutsche Umlaute: Nein
retrofont30

© Fontfabric und Christopher J. Lee

Say it fat

Frei für: Private/Kommerzielle Zwecke
Urheber: Timo Titzmann
Deutsche Umlaute: Nein

retrofont31

© Timo Titzmann

Airstream

Frei für: Private/Kommerzielle Zwecke
Urheber: Nick’s Fonts
Deutsche Umlaute: Ja
retrofont32

© Nick’s Fonts

Grogy free font

Frei für: Private/Kommerzielle Zwecke
Urheber: Serge Shi
Deutsche Umlaute: Nein
retrofont33

© Serge Shi

Antique Book

Frei für: Private/Kommerzielle Zwecke
Urheber: Adazing Design
Deutsche Umlaute: Nein
retrofont34

© Adazing Design

Geomancy Typefaces

Frei für: Private/Kommerzielle Zwecke
Urheber: onebyfourstudio.com
Deutsche Umlaute: Nein
retrofont35

© onebyfourstudio.com

KanKin free font

Frei für: Private/Kommerzielle Zwecke
Urheber: Alex Frukta
Deutsche Umlaute: Nein

retrofont36

© Alex Frukta

Mister Sinatra

Frei für: Private Zwecke
Urheber: Mario Arturo
Deutsche Umlaute: Ja
retrofont37

© Mario Arturo

Silverfake free font

Frei für: Private/Kommerzielle Zwecke
Urheber: MRfrukta
Deutsche Umlaute: Nein
retrofont38

© MRfrukta

Weston free font

Frei für: Private/Kommerzielle Zwecke
Urheber: Pavel Pavlov
Deutsche Umlaute: Nein
retrofont39

© Pavel Pavlov

JustOldFashion

Frei für: Private/Kommerzielle Zwecke
Urheber: Manfred Klein
Deutsche Umlaute: Nein
retrofont40

© Manfred Klein

(dpe)

Kategorien
Design Essentials Freebies, Tools und Templates Inspiration Showcases UI/UX

Initiative „Schöneres Backend“: 20 kostenlose Dashboard UI Mockups

Administrationsoberflächen sind für manch moderne Website unabdingbar. Da diese aber nur von verhältnismäßig wenigen Personen überhaupt jemals angesehen werden, neigen Designer dazu, möglichst wenig Aufwand in deren Gestaltung zu stecken. Das ist zwar einerseits verständlich, andererseits aber zu kurz gedacht. Denn der Kunde wird mit diesen Panels eventuell jahrelang arbeiten müssen. Es wäre vernünftiger, ihm ein Werkzeug an die Hand zu geben, mit dem er auf Dauer zufrieden ist, weil es ihn in jeder Hinsicht gut unterstützt. Denn es ist bekanntlich viel einfacher, neue Aufträge von Bestandskunden zu bekommen als von Neukunden. Von daher, lassen Sie uns gemeinsam etwas für Ihre Kundenbindungsstrategie tun. Das sogenannte Backend wird heute unser Thema sein. Wir haben 20 der besten diesbezüglichen Ressourcen zusammengestellt, die wir finden konnten…

Unsere Sammlung ist ein Mix aus gut gemachten, sauber organisierten Dashboard-Templates in PSD, die über verschiedene wesentliche Backend-typische Elemente verfügen, darunter Tabellen, Grafiken, Charts, Statistikmodule und vieles mehr.

Favo Dashboard

favo
Erstellt von: Jekin Gala
Nutzungsbedingungen: als „Free“ (kostenlos) deklariert, keine dezidierte Lizenz angegeben

Dashboard PSD

dashboard
Erstellt von: Aaron Sananes
Nutzungsbedingungen: als „Free“ (kostenlos) deklariert, keine dezidierte Lizenz angegeben

Velo Dashboard

velo
Erstellt von: Jekin Gala
Nutzungsbedingungen:  als „Free“ (kostenlos) deklariert, keine dezidierte Lizenz angegeben

Dashboard UI

dashboard2
Erstellt von: Muharrem Senyl
Nutzungsbedingungen:  als „frei für jeden Zweck“ bezeichnet, keine dezidierte Lizenz angegeben

Admin Panel

tdw
Erstellt von: Asif Aleem
Nutzungsbedingungen: frei für persönliche und kommerzielle Zwecke

Dark Dasboard UI

dark
Erstellt von: Aykut Yilmaz
Nutzungsbedingungen: als „Free“ (kostenlos) deklariert, keine dezidierte Lizenz angegeben

Sanctions GUI PSD Dashboard

sanc
Erstellt von: Alexander Kutuzov
Nutzungsbedingungen: als „Free“ (kostenlos) deklariert, keine dezidierte Lizenz angegeben

Dashboard

light
Erstellt von: Qamar Loop
Nutzungsbedingungen: frei für persönliche und kommerzielle Zwecke

Analytics Dashboard

analytics
Erstellt von: Martin Broder
Nutzungsbedingungen: als Freebie deklariert, keine dezidierte Lizenz angegeben

Infinite Admin

infinite
Erstellt von:  victorsosea
Nutzungsbedingungen: frei für persönliche und kommerzielle Zwecke

Flat Dashboard

flat
Erstellt von: prowebdesign
Nutzungsbedingungen: frei für persönliche und kommerzielle Zwecke

Dashboard Graphs and Calendar

ui
Erstellt von: themedesigner
Nutzungsbedingungen: frei für persönliche und kommerzielle Zwecke

Circle Diagram

circle
Erstellt von: Joan Højberg
Nutzungsbedingungen: als „Free“ (kostenlos) deklariert, keine dezidierte Lizenz angegeben

Piggy Balance

piggy
Erstellt von: Vlad Dusa
Features: tables, panel
Nutzungsbedingungen: als Freebie deklariert, keine dezidierte Lizenz angegeben

PrasastiEnom

parasite
Erstellt von: Andreansyah Setiawan
Nutzungsbedingungen: Attribution, nicht kommerziell

UI Freebie

ui2
Erstellt von: Eldar Burnashe
Nutzungsbedingungen: Attribution, nicht kommerziell

Flat Dashboard UI Kit

flat-ui
Erstellt von: Ahmed Abbas
Nutzungsbedingungen: als „Free“ (kostenlos) deklariert, keine dezidierte Lizenz angegeben

Admin Panel Template

brown
Erstellt von: blugraphic
Nutzungsbedingungen: als Freebie deklariert, keine dezidierte Lizenz angegeben

Data Analysis

data
Erstellt von: Jana de Klerk
Nutzungsbedingungen: als Freebie deklariert, keine dezidierte Lizenz angegeben

Dark Analytics Dashboard

dark2
Erstellt von: Davide Pacilio
Nutzungsbedingungen: als Freebie deklariert, keine dezidierte Lizenz angegeben

(dpe)

Kategorien
Design Inspiration Showcases UI/UX

Frische Brise: 29 kostenlose User-Interface-Mockups für mobile Designs

Smartphones sind das interessanteste Zielgebiet für Webdesigner. Die Nutzung nimmt stetig zu. Erst auf der eben abgelaufenen Google I/O gab der Suchmaschinenriese bekannt, dass die Zahl von rund 26 Millionen Chrome-Mobilusern im letzten jahr inzwischen auf über 300 Millionen gewachsen ist. Ein Ende dieses Trends ist derzeit nicht absehbar. Es ergibt daher massiv Sinn, sich in sachen Webdesign stark auf mobile Geräte zu fokussieren, jedenfalls sicherzustellen, dass das in Mache befindliche Design auch auf den kleinen Begleitern ordentlich laufen wird. Um das Umparken im Kopf nicht nur automobil, sonder auch designmobil voran zu treiben, haben wir hier einen Haufen kostenlose User-Interface-Mockups für mobile Designs für Sie vorbereitet.

Inspiration im Quadrat – hier entlang.

UI Kit Re-app

ui kit
Erstellt von/für:  Anton Skugarov
Lizenz:  Kostenlos für private Zwecke einsetzbar

Marvel Resources

marvel
Erstellt von/für:  Murat Mutlu
Lizenz:  Kostenlos für private Zwecke einsetzbar

Ero UI

ero
Erstellt von/für:  Radek Jedynak
Lizenz: Attribution, nicht kommerziell

Mobile UI Kit

mobile
Erstellt von/für:  NIMIUS
Lizenz:  Kostenlos für private Zwecke einsetzbar

iPhone Gold UI Kit

gold
Erstellt von/für:  Tintins
Lizenz:  Kostenlos für private Zwecke einsetzbar

UI

ui
Erstellt von/für:  Eldar Burnashev
Lizenz:  Kostenlos für private Zwecke einsetzbar

Online Store Design

online store
Erstellt von/für:  Shab Majeed
Lizenz:  Kostenlos für private Zwecke einsetzbar

Mobile Wireframe Kit

wireframe
Erstellt von/für:   PixPivot
Lizenz:  Attribution, nicht kommerziell

Dribbble IOS App

dribbble
Erstellt von/für:   Creative Boxx
Lizenz:  Kostenlos für private Zwecke einsetzbar

Facebook Messenger for iOS 7

facebook
Erstellt von/für:  Sanjay Patel
Lizenz:  Kostenlos für private Zwecke einsetzbar

Music Player

music
Erstellt von/für:  Anton Skugarov
Lizenz:  Kostenlos für private Zwecke einsetzbar

iOs7 App Design Concept

map
Erstellt von/für: Hector Pinkman
Lizenz:  Kostenlos für private Zwecke einsetzbar

iPhone Vector Wireframing Toolkit

wireframe2
Erstellt von/für: Michelle
Lizenz:  Kostenlos für private Zwecke einsetzbar

Flat Mobile App

flat
Erstellt von/für:  Asgar khan
Lizenz:  Attribution, nicht kommerziell

Flybi App

flybi
Erstellt von/für:   Moe Saad
Lizenz:  Attribution, nicht kommerziell

Paul McCartney ‚New‘ Inspired Free App UI

paul
Erstellt von/für:  Ruaridh Currie
Lizenz:  Attribution, nicht kommerziell, keine Derivate

iOs App for Like Shop

fashion
Erstellt von/für:  Lokesh Dave
Lizenz:  Attribution Non-commercial

Travely iOS Mobile

travely
Erstellt von/für:  Alberto Valentin
Lizenz:  Kostenlos für private Zwecke einsetzbar

iBeacon App

ibeacon
Erstellt von/für:  Jana de Klerk
Lizenz:  Kostenlos für private Zwecke einsetzbar

Shopping App Notification Screen

shopping
Erstellt von/für:  Fuxxo Works
Lizenz:  Kostenlos für private Zwecke einsetzbar

Music Application

music2
Erstellt von/für:  Charline Bestard
Lizenz:  Kostenlos für private Zwecke einsetzbar

Checkout Reimagined

checkout
Erstellt von/für:  George Vasyagin
Lizenz:  Kostenlos für private Zwecke einsetzbar

Instagram for iOS Concept

instagram
Erstellt von/für:  Karl O’Brien
Lizenz:  Kostenlos für private Zwecke einsetzbar

Social App

social
Erstellt von/für:  Alberto Valentin
Lizenz:  Kostenlos für private Zwecke einsetzbar

Flat UI Kit

flat ui
Erstellt von/für:  Willy Masrur
Lizenz:  Attribution, nicht kommerziell

Soccer App

soccer
Erstellt von/für:  sm-artists
Lizenz:  Kostenlos für private und kommerzielle Zwecke einsetzbar

iOs UI Kit

ios
Erstellt von/für:  Georgian-Sorin Maxim
Lizenz:  Kostenlos für private Zwecke einsetzbar

Notify Login

notify
Erstellt von/für:    CreativeWings
Lizenz:  Kostenlos für private Zwecke einsetzbar

Online Store iPhone App Design

store
Erstellt von/für:   Ramotion
Lizenz:  Kostenlos für private Zwecke einsetzbar

(dpe)

Kategorien
Design Inspiration Showcases

Starke Marken: 10 Kleinunternehmen mit kraftvollem Corporate Design

Gerade Kleinunternehmen haben desöfteren das Problem, nicht genügend Mittel in die Entwicklung eines aussagefähigen Corporate Design stecken zu können. So verpassen sie die Chance, eine starke Marke zu kreiieren. Dabei wäre es gerade für Kleinunternehmen doch besonders wichtig, einen positiven Markeneindruck zu hinterlassen. Betrachten wir es positiv. Dadurch, dass die meisten Kleinunternehmen die Chance verpassen, und stattdessen konventionelle Schriftarten, langweilige Logos, ein umgebautes WordPress-Theme und billige Stockfotos verwenden, stehen die wenigen Unternehmen, die sich der Mühe unterziehen, viel leichter im Rampenlicht. Ein positives Markenimage hält sie noch dann im Gedächtnis der Konsumenten, wenn die Wettbewerber schon lange in Vergessenheit geraten ist.

Ob Sie nun ein Kleinunternehmen betreiben oder Designer auf der Suche nach Beispielen gelungenen Markendesigns sind, ist egal. Der folgende Beitrag wird Sie so oder so inspirieren. Wir haben uns 10 Kleinunternehmen und deren besonders ausdrucksstarkes Corporate Design angesehen. Sind Sie ein Kleinunternehmer und gefällt Ihnen, was Sie sehen, dann nehmen Sie doch einfach zu einer der genannten Agenturen Kontakt auf. Sind Sie ein Designer (was hier bei Dr. Web wahrscheinlicher ist ;-)), dann nehmen Sie die gezeigten Werke ganz schamlos zu Inspirationszwecken her und entwickeln Ihre eigene Designvariante.

Kunde: Honeysuckle Oyster Farm, Agentur: Bluerock Design

Gelegen in der Katama Bay in Martha’s Vineyard findet sich die Honeysuckle Oyster Farm von Nic Turner. Turner konzentriert sich mit seiner kleinen Farm auf eine nachhaltige Produktion bei einer gewissen Exklusivität. Die von ihm beauftragte Agentur Bluerock Design ging vor, wie es nur noch wenige Agenturen heutzutage tun. Sie schickten ihre Designer zu Nic auf die Farm. Dort ließen sie sich Turners Vision erläutern und bildeten sich an einem ganz normalen Arbeitstag einen eigenen Eindruck der Farm. Das Ergebnis kann sich wirklich sehen lassen. Das blaugraue Farbschema reflektiert den Himmel und den Ozean, das Logo mit der Auster in der Mitte lässt wenig Raum für Interpretation. Dazu kommt eine klare Typografie, die Stabilität und Differenzierung suggeriert. Da kann man Bluerock Design keinen Vorwurf machen.







Kunde: Mexout, Agentur: Bravo Company

Mexout ist ein Anbieter frischer mexikanischer Speisen, der sich ungern dem Establishment zurechnen lassen möchte und auf seine Andersartigkeit großen Wert legt. Deshalb suchte Mexout nach einer etwas weniger traditionell wirkenden Umsetzung, sowohl für das Markendesign, wie auch in Sachen Inneneinrichtung. Die Agentur Bravo Company kreiierte einen Look, der zu den Jungprofis der mexikanischen Küche perfekt passt. Dabei wurde moderner Minimalismus zum Zuge gebracht. Wände aus rohem Beton, gestrichene Böden, rohhölzerne Tische und Stühle, ausgenudelte Ledersofas, all das wirkt sehr ursprünglich, dabei aber dennoch modern und frisch. Anstatt sich auf ein Logo zu fixieren, erstellte die Bravo Company derer 20, die nun im Rotationsverfahren auf den diversen Kommunikationsmedien von Mexout zum Einsatz kommen. Trotz großer Unterschiede in der Gestaltung der einzelnen Logos ist ihnen doch der grob gezeichnete Look gemein. Übrigens wurde keines der grafischen Elemente mit einem Computer erstellt, alles ist handgezeichnet auf konventionellem Papier.







Kunde: Roots & Bulbs, Agentur: Robot Food

Roots & Bulbs ist Londons erste Bar, in der es ausschließlich kaltgepresste Säfte gibt. Um das unmissverständlich zu kommunizieren, wurde ein ungewöhnlicher Markenauftritt beauftragt. Das Projekt, betreut von Robot Food, beinhaltete die Markenentwicklung, sämtliche Druckerzeugnisse, Verpackungsdesign, sowie sämtliche Kommunikation innerhalb des Ladens. Sarah Cadji, die Geschäftsführerin von Roots & Bulbs, zeigte sich sehr zufrieden mit dem Ergebnis. Man habe genau die unkomplizierte, moderne und minimalistische Grundhaltung des Unternehmens abbilden können. Und die Säfte sprechen ohnehin für sich selbst…

Treadwell, Agentur: Perky Bros

Treadwell beauftragte Perky Bros mit dem Komplettpaket des Marktauftritts: Name, Logodesign, Website und mehr. Als Bodenhersteller mit Spezialisierung auf haltbaren Beläge wollte Treadwell eine Assoziation zum Aufrechtstehen in seine Marke integriert wissen. Das sollte Kunden die Sicherheit vermitteln, stets das beste Produkt gewählt zu haben. Dunkle, kräftige Farben und ein Büffel als geometrische Line-Sketch-Grafik sollen den Markeneindruck transportieren. Treadwell ist zufrieden und wirkt auf jeden Fall sehr modern und außergewöhnlich.







Kunde: Aviso Rechtsanwälte, Agentur: Holy Sheep

Diese kleine Rechtswaltskanzlei beauftragte Holy Sheep ebenfalls mit dem Komplettpaket einer brandneuen Corporate Identity, sogar der Name war Teil des Kreativauftrags. Holy Sheep schlug den Namen Aviso vor, er bedeutet „Information“ oder auch „Beratung“. In der verwendeten Schriftart sind das A und das V kreuzend gestaltet, so dass sich fast schon natürlich ein Logo ergibt. Das gesamte Design ist zurückgenommen, aber elegant und passt außerordentlich gut zum Berufsfeld eines Rechtsanwalts. Dabei ist die Farbwahl mit schwarz, rot und weiß durchaus als ungewöhnlich zu bezeichnen. Im Webdesign entschied man sich für echte Fotos aus der Kanzlei und einen Videohintergrund, was sowohl sehr modern, wie auch sehr authentisch wirkt.

Kunde: Live Beautifully, Agentur: Insania Evidens

Auch sehr kleine Geschäfte benötigen ein unterscheidbares, erinnerbares Markendesign. So auch dieser kleine Online-Shop hier. Insania Evidens erstellte ein Markendesign, das dem Laden den Look und Feel eines alten Antiquitätenlädchens vermittelt. Sehr aufwändig wurde ein vertrauenerweckender Markeneindruck auf der Basis traditioneller Werte erschaffen.

Kunde: Sumber Waras, Agentur: Nero Graphic

Wie es sich für ein Geschäft für traditionelle, chinesische Medizin gehört, konzentriert sich Sumber Waras mit seinem Angebot auf alles, was man aus chinesischen Kräutern herstellen kann. Dabei sollte der Shop einerseits Traditionalität widerspiegeln und klar die Herkunft zeigen, andererseits wollte sich Sumber Waras als modernes Unternehmen positioniert sehen. Die eingesetzte Agentur Nero Graphic entschied sich für die Bildsprache der Ming Dynastie. Die Ginseng-Wurzel im Logo steht für Gesundheit, Stärke und Ausdauer, wobei die Silhouette auch Ähnlichkeiten zu einem menschlichen Wesen oder einem freischwebenden Geist nahelegt.



Kunde: Desce Mais Uma, Agentur: Isabela Rodriques

In Brasilien sagen die Menschen „desce mais uma“, wenn sie „noch ein Bier“ bestellen. Und das ist mithin ein guter Name für einen Bier-Lieferservice. Das zugehörige Design kreierte das Isabela Rodriques Sweety Branding Studio entsprechend modern, aber mit einem erdigen Touch. Das Logo erinnert an andere, erfolgreiche Biermarken, ohne wie eine Kopie zu wirken.




Kunde: Suzi Zutic, Agentur: Maurizio Pagnozzi

Suzi Zutic, Juwelier und Gemmologe aus Melbourne, handarbeitet Schmuck aus Juwelen, wertvollen Metallen und Edelsteinen. Maurizio Pagnozzi erstellte nicht nur ihr Logo, sondern auch die Verpackungsmaterialien und Geschäftspapiere. Dabei setzte Pagnozzi auf den gleichen Handarbeitscharakter, den sich auch Zutic auf die Fahne geschrieben hat. Purer Luxus.



Kunde: Notio Olive Oil, Agentur: The Comeback Studio

Dieses Olivenöl von Notio Goods wird im griechischen Dörfchen Agios Floros gewonnen. The Comeback Studio legten bei Ihrem Design Wert darauf, die griechischen, südeuropäischen Wurzeln des Produkts herauszuarbeiten. Um das Vorurteil zu verstärken, in Südeuropa gingen die Uhren stets etwas anders, arbeiteten die Designer mit der Schrift und ließen sie aussehen, als wäre der Text nicht ordentlich gesetzt. Erst bei näherenm Hinsehen wird deutlich, dass die Buchstaben sogar perfekt an einer Achse ausgerichtet sind.


(dpe)

Kategorien
Inspiration Showcases

26 kostenlose HTML-Bewerbungsvorlagen für Ihren nächsten Top-Job

Vor ein paar Wochen stellten wir Ihnen bereits einen ganzen Schwung schicker Bewerbungsvorlagen vor. Unser Beitrag „26 kostenlose Bewerbungsvorlagen für Ihren nächsten Top-Job“ erfreute sich schnell großer Beliebtheit. Die vorgestellten Bewerbungsvorlagen basierten indes alle auf PSD, AI oder PDF. Lediglich ein Exemplar lag als HTML-Variante vor. Verschiedene Leserinnen und Leser wiesen uns in der Folgezeit auf diesen „Mangel“ hin. Von einem Online-Magazin könne man ja wohl auch Online-Bewerbungsvorlagen erwarten, wenn schon darüber geschrieben würde, so der einhellige Tenor. Das konnten wir natürlich nicht auf uns sitzen lassen, zumal die Wahrheit der Aussage nicht abzustreiten ist. Also begab sich Nataly Birch noch einmal in die Tiefen des Weltennetzes und forschte nach Bewerbungsvorlagen für Onlinebewerbungen.

Dabei fand sie etwas über 20 kostenlose HTML-Bewerbungsvorlagen und eine Handvoll Onlinedienste, mit deren Hilfe Sie ebenfalls Onlinebewerbungen erstellen können. Hier sind die Ergebnisse:

HTML Resume Template

html resume
Erstellt von:  elemisfreebies
Lizenz:  Frei für die persönliche Nutzung

Simple C. Vitae – Free HTML/CSS template

sheldon
Erstellt von:  Christophe Hermann
Bemerkenswert: Mobile Version
Lizenz:  Frei für die persönliche Nutzung

Coding a Responsive Resume in HTML5/CSS3

jake
Erstellt von:   Jake Rocheleau
Bemerkenswert:  Responsiv
Lizenz:  Frei für die persönliche Nutzung

Responsive HTML/CSS3 CV Template

thomas
Erstellt von: Thomas Hardy
Bemerkenswert:  Responsiv
Lizenz:  Frei für die persönliche Nutzung

Open source resume

iduo
Erstellt von:  Iduo
Lizenz:  Frei für die persönliche Nutzung

Resume

jugal
Erstellt von:  nuterian
Lizenz:  Frei für die persönliche Nutzung

One Page Web Resume Template

web resume
Erstellt von:  wegraphics
Lizenz:  Frei für die persönliche Nutzung

One Page Responsive HTML Resume Template

one page
Erstellt von:  Sunny Luthra
Bemerkenswert:  Responsiv
Lizenz:  Frei für die persönliche Nutzung

Minimal HTML Resume

minimal
Erstellt von: madazulu
Lizenz:  Frei für die persönliche Nutzung

Creative and Professional CSS3 CV Resume Template

sarfr
Erstellt von:  Sarfraz Shoukat
Lizenz:  Frei für die persönliche Nutzung

How to Create an HTML5 Microdata Powered Resume

resume2
Erstellt von:  Janet Wagner
Bemerkenswert:  Nicht nur eine Vorlage, sondern auch eine Anleitung
Lizenz:  Frei für die persönliche Nutzung

Resume (HTML)

resume3
Erstellt von:  Luis Zuno
Lizenz:  Frei für die persönliche Nutzung

HTML Resume Template

simple resume
Erstellt von:   alexking
Lizenz:  Frei für die persönliche Nutzung

Sample Resume Template

jonathan
Erstellt von:   Thingsthatarebrown
Lizenz:  Frei für die persönliche Nutzung

Personal Resume

resume4
Erstellt von:  Louisa Barrett
Lizenz:  Frei für die persönliche Nutzung

HTML CSS Responsive Web design template assignment

sara
Erstellt von:    webtrainingcentre
Lizenz:  Frei für die persönliche Nutzung

Resume in HTML

updated resume
Erstellt von:   Keith Kelleher
Lizenz:  Frei für die persönliche Nutzung

Professional HTML5 CV/Resume Template

the resume
Erstellt von:   Sarfraz
Bemerkenswert:  13 CSS-Designs
Lizenz:  Frei für die persönliche Nutzung

Portfolio/Resume HTML Template

donga
Erstellt von:   Sarfraz
Lizenz:  Free for personal use

One Page Résumé Site

thulhu
Erstellt von:   Chris Coyier
Lizenz:  Frei für persönliche und kommerzielle Nutzung

My CV

resume-codepen
Erstellt von:  Deep Laxman Sukhwani
Lizenz:  Frei für die persönliche Nutzung

Rails Resume Builder

rails resume
Erstellt von:   krb.heroku
Bemerkenswert:  Onlinedienst zur Erstellung von Bewerbungsunterlagen
Lizenz:  Kostenlos

CVmaker

cvmaker
Erstellt von:   CVmaker
Bemerkenswert:  Onlinedienst zur Erstellung von Bewerbungsunterlagen in PDF und HTML
Lizenz:  Kostenlos

Resume Builder

cvstash
Erstellt von:   CVstash
Bemerkenswert:  Onlinedienst zur Erstellung von Bewerbungsunterlagen in PDF und HTML
Lizenz:  Kostenlos

Online CV

online cv
Erstellt von:  onlinecvgenerator
Bemerkenswert:  Onlinedienst zur Erstellung von Bewerbungsunterlagen in PDF und HTML
Lizenz:  Kostenlos

Lebenslauf.com

online cv
Erstellt von:  XING / Thomas Bachem
Bemerkenswert:  Onlinedienst zur Erstellung von Bewerbungsunterlagen in PDF und HTML, Vorstellung bei Dr. Web
Lizenz:  Kostenlos

(dpe)

Kategorien
Essentials Icons & Fonts Inspiration Showcases Webdesign

UI mit Hui-Faktor: 40 hochwertige Schaltflächen und PSD-Tipps für eigene Buttons

Der Button ist ein kleines, doch recht wichtiges Designelement einer Website. Oftmals soll er eine Aktion des Besuchers als „Call-To-Action“ auslösen, muss also gut sichtbar und selbsterklärend sein. Wir haben gleich 40 sehr gute Photoshop-Tutorials zusammengestellt, die zu eleganten, minimalistischen und manchmal auch verspielten Ergebnissen führen. So gelangen Sie zu Buttons, die etwas abgewandelt sofort für eigene Projekte eingesetzt werden können. Wie gewohnt, haben wir unsere Sammlung um einige eigene Tipps für den Photoshopper ergänzt…

Quick Tip: Design a Pretty Dropdown Button in Photoshop

Designer: Patrik Larsson
Website: webdesign.tutsplus.com

photoshop-buttons1

© Patrik Larsson


Photoshop Calculater Button Logo Icon

Designer: adobeperson.com
Website: adobeperson.com

photoshop-buttons2

© adobeperson.com

Create an icon of the short message in several simple steps (Original Tutorial)

Designer: 4-designer.com
Website: 4-designer.com

photoshop-buttons3

© 4-designer.com

Glossy-Style Carbon Fibre Navigation Buttons

Designer: Photoshop Star Staff
Website: photoshopstar.com

photoshop-buttons4

© Photoshop Star Staff

Photoshop For Beginners: Creating buttons for web

Designer: Sebastiano
Website: wegraphics.net

photoshop-buttons5

© Sebastiano

Learn To Make Photo-Realistic Volume knob in Photoshop

Designer: Shaina
Website: tutorialized.com

photoshop-buttons6

© Shaina

Deep Analysis on How to Create a High-precision Button

Designer: 4-designer.com
Website: 4-designer.com

photoshop-buttons7

© 4-designer.com

Design a Delicious, Shining Circle Play (Web) Button in Photoshop

Designer: psdvault.com
Website: psdvault.com

photoshop-buttons8

© psdvault.com

Create beautiful buttons in Photoshop

Designer: thethemefoundry.com
Website: thethemefoundry.com

photoshop-buttons9

© thethemefoundry.com

Glossy buttons tutorial

Designer: AlonDiviX
Website: alondivix.deviantart.com

photoshop-buttons10

© AlonDiviX

 

Dr.Web Buttontrend #1: Wie gezeichnet

Eine Option, wie ein Button mal ganz anders wirken kann, ist diesen von Hand zu zeichnen oder die Zeichnung in Photoshop oder Illustrator zu simulieren. In Photoshop erstellen Sie einen Pfad, den Sie mit einer passenden Werkzeugspitze nachzeichnen lassen. Dazu gehen Sie im Pfadbedienfeld unten auf die Schaltfläche Pfadkontur mit Pinsel füllen.

buttontrend1

 

Design a Beautifully Detailed Web Button

Designer: Liam McCabe
Website: webdesign.tutsplus.com

photoshop-buttons11

© Liam McCabe

Clean White Navigation Bar

Designer: James Hewett
Website: photoshoptutorials.ws

photoshop-buttons12

© James Hewett

Professional Menu Button

Designer: Photoshop Star Staff
Website: www.photoshopstar.com

photoshop-buttons13

© Photoshop Star Staff


Create a Nice Stylish Glossy Button in Photoshop

Designer: coregfx.org
Website: coregfx.org

photoshop-buttons14

© coregfx.org

Blue on Black Navigation Bar

Designer: James Hewett
Website: photoshoptutorials.ws

photoshop-buttons15

© James Hewett

Create a Wii Web Header in Photoshop

Designer: originmaker.com
Website: originmaker.com

photoshop-buttons16

© originmaker.com

Glass Button
Photoshop Tutorial

Designer: yourphotoshopguide.com
Website: yourphotoshopguide.com

photoshop-buttons17

© yourphotoshopguide.com

Principles for Successful Button Design

Designer: Pete Orme
Website: webdesign.tutsplus.com

photoshop-buttons18

© Pete Orme

Create a Realistic Telephone Keypad Using Layer Styles

Designer: Jim Nielsen
Website: design.tutsplus.com

photoshop-buttons19

© Jim Nielsen

Photoshop Buzline Button Logo Icon

Designer: goodbus
Website: tutorialagent.com

photoshop-buttons20

© goodbus

 

Dr.Web Buttontrend #2: Grundform

Ein leichter Weg hin zum eigenen Button führt über eine Grundform, die Sie etwa über das Abgerundete-Rechteck-Werkzeug aufziehen. Die Farbe bestimmen Sie über die aktuelle Vordergrundfarbe, die Rundung in der Optionsleiste unter Radius. Leicht können Sie Ihre Schaltfläche beschriften und mit weiteren Formen kombinieren, für einen schönen 2D-Look im Flat-Design.

buttontrend2

 

Web Button Making Tutorial 1

Designer: easydisplayname
Website: easydisplayname.deviantart.com

photoshop-buttons21

© easydisplayname

RSS button

Designer: adobetutorialz.com
Website: adobetutorialz.com

photoshop-buttons22b

© adobetutorialz.com

Design a Textured Button in Photoshop

Designer: Caleb Kimbrough
Website: bittbox.com

photoshop-buttons23

© Caleb Kimbrough

Perfect Shine Button or Icon

Designer: boon
Website: boonage.pjss2.net

photoshop-buttons24

© boon

Design panic button logo icon in photoshop

Designer: gnews
Website: adobeperson.com

photoshop-buttons25

© gnews

Quick Tip: Create a Round Switch Button in Photoshop

Designer: Paul Flavius
Website: design.tutsplus.com

photoshop-buttons26

© Paul Flavius

Stylish Metallic Button in Photoshop

Designer: abduzeedo
Website: abduzeedo.com

photoshop-buttons27

© abduzeedo

Glossy Web 2.0 Button

Designer: avivadirectory.com
Website: avivadirectory.com

photoshop-buttons28

© avivadirectory.com

How to Design an Inset Button in Photoshop

Designer: paper-leaf.com
Website: paper-leaf.com

photoshop-buttons29

© paper-leaf.com

Nice ‘n’ Simple Subscribe Badges

Designer: Photoshop Star Staff
Website: photoshopstar.com

photoshop-buttons30

© Photoshop Star Staff

 

Dr.Web Buttontrend #3: Buttonserie

Sehr praktisch ist auch die Buttonserie. Wir sparen uns Zeit bei der Umsetzung und gehen sicher, dass alle Buttons gut zusammen passen. Eine Grundform wird dazu unterteilt und mit einigen Icons ausgestattet, die komplexer sein können oder wie hier, eher minimalistisch. Selbst einen Mouseover-Zustand können Sie schön in Photoshop simulieren.

buttontrend3

 

Photoshop Tutorials for Beginners – How To Create Simple Flat Button

Designer: Dropcolors Studio
Website: youtube.com

photoshop-buttons31

© Dropcolors Studio

Photoshop Tutorial: Interface Style – Indented Rim

Designer: Stratzeh
Website: youtube.com

photoshop-buttons32

© Stratzeh

Animated Glowing Button in Photoshop CS6 | IceflowStudios

Designer: Howard Pinsky
Website: youtube.com

photoshop-buttons33

© Howard Pinsky

Photoshop Tutorial: Create a Glossy Button

Designer: RiverCityGraphix
Website: youtube.com

photoshop-buttons34

© RiverCityGraphix

Create a Simple Record Button — Photoshop Tutorial

Designer: tutvid
Website: youtube.com

photoshop-buttons35

© tutvid

Photoshop Tutorial #179 – Creating a shiny button with inset text

Designer: Art Starter
Website: youtube.com

photoshop-buttons36

© Art Starter

Adobe Photoshop Tutorial – Interface And Orb Tutorial – FPST

Designer: FlewDesigns – Photoshop Tutorials
Website: youtube.com

photoshop-buttons37

© FlewDesigns – Photoshop Tutorials

Cable/Tube – Photoshop-Tutorial

Designer: Grufix-Board.de – Dein Tutorial-Kanal
Website: youtube.com

photoshop-buttons38

© Grufix-Board.de – Dein Tutorial-Kanal

Create Slick Web Tags — Photoshop CS5 Tutorial

Designer: tutvid
Website: youtube.com

photoshop-buttons39

© tutvid

Photoshop: Carbon Fiber Power Button | IceflowStudios

Designer: Howard Pinsky
Website: youtube.com

photoshop-buttons40

© Howard Pinsky

(dpe)

Kategorien
Essentials Freebies, Tools und Templates Inspiration Showcases

Sketch 3: Webdesign-Schnellstart mit diesen 30 kostenlosen Templates

Ob Sie nun tatsächlich davon besessen sind, komplexe User Interfaces oder einzelne Widgets zu bauen oder ob Ihre Lieblingstätigkeit schlicht das Erstellen von Icon-Packs oder das Prototyping von Websites ist, ist im Grunde unwesentlich. Sollte eines oder mehreres davon zutreffen, haben Sie vermutlich schon einmal von Sketch App gehört. Diese schlanke Software für Mac OS X wurde von Bohemian Coding geschickt als Rivale wesentlich leistungsstärkerer Pakete, wie Adobe Photoshop und Illustrator entworfen. Aufgrund der vergleichsweise geringen Größe mag das zunächst überraschen. Tatsächlich aber ist Sketch zielgenau auf Webdesigner zugeschnitten. Konsequenterweise bietet es daher ausschließlich Instrumente und Plugins, die für diese Zielgruppe nützlich und relevant sind. So betrachtet, ist Sketch nicht wirklich funktionsschwächer als andere Lösungen, sondern lediglich sehr viel stärker fokussiert und nicht mit unnötigem Ballast aufgebläht.

Sketch 3 und das Featureset

Sketchs Featureset ist schon recht beeindruckend:

  • Skalierbarkeit der Designs sorgt für schnelle Anpassbarkeit an unterschiedliche Auflösungen;
  • Komplexe Formen, gepaart mit einfachem Handling von Pfaden und Ebenen;
  • eine durchdachte Dokumentenorganisation mit der Möglichkeit, schnell und effizient zu suchen;
  • leistungsstarke Eigenschaftendialoge, die die passgenaue Konfiguration von Positionen. Ebenentransparenz und vielem mehr erlauben;
  • Ein-Klick-Export für schnelles Prototyping ohne detaillierte Konfiguriererei (letztere ist aber auch möglich);
  • Schnelles Wiederholen von Elementen mit einer Re-Use-Funktion;
  • Boolesche Vektor-Operationen;
  • extrem einfaches Interface.

Zu den wichtigsten Instrumenten gehören

  • Text Styles;
  • Grids und Hilfslinien;
  • Bitmaps;
  • mehrseitige Dokumente;
  • Pixelgenaues Layout mit Snap-Feature und vieles mehr.

Manche halten Sketch für einen durchdachten Verschnitt aus Photoshop und Illustrator, eine Essenz quasi. Es ist völlig frei von überflüssiger Funktionalität und konzentriert sich ganz eindeutig auf Webdesign.

Kennen Sie Sketch bislang nicht, laden Sie sich bei Bohemian Coding die kostenlose Trial-Version herunter. Erst, wenn Sie vollkommen überzeugt sind, nehmen Sie die vergleichsweise schmalen 80 Dollar (= rund 60 Euro) in die Hand und erwerben die Vollversion.

Heute bieten wir Ihnen einige Einblicke in das stetig wachsende Sketch-Universum. Die Community ist sehr aktiv und veröffentlicht Ressource um Ressource. Wir haben die frischesten und unserer Auffassung nach besten im folgenden Beitrag zusammengefasst. Alle der folgenden Templates, GUIs, Mockups und mehr wurden mit und für Sketch 3 erstellt.

Twitter for Yosemite

twitter-for-yo

Erstellt von:  Dmitry Novikov
Lizenz:  Frei für die persönliche Nutzung.

Yosemite

yosemite

Erstellt von:  Danny Giebe
Lizenz:  Frei für die persönliche Nutzung.

Blueprint

blueprint

Erstellt von:
 rojcyk
Lizenz:  Frei für die persönliche Nutzung.

Safari OS X Yosemite

safari

Erstellt von:  Kuswanto
Lizenz:  Frei für die persönliche Nutzung.

Dark UI Kit

dark ui

Erstellt von:  Alexander Haniotis
Lizenz:  Frei für die persönliche Nutzung.

Twitter profile

twitter profile

Erstellt von:  Benny Chew
Lizenz:  Frei für die persönliche Nutzung.

Marvel Resources

marvel

Erstellt von:  Murat Mutlu
Lizenz:  Frei für die persönliche Nutzung.

wireframe template V1

wireframe

Erstellt von:  John Menard
Lizenz:  Frei für die persönliche Nutzung.

Music Player

music

Erstellt von:  Andreea Nicolaescu
Lizenz:  Frei für die persönliche Nutzung.

Profile Screen

profile

Erstellt von:  Reza Selçuk Saydam
Lizenz:  Frei für die persönliche Nutzung.

Login Screen

login

Erstellt von:  Reza Selçuk Saydam

Lizenz:
  Frei für die persönliche Nutzung.

iPhone 5c

iphone

Erstellt von:  Jisi Guo
Lizenz:  Frei für die persönliche Nutzung.

iPhone 5/5s Wireframe

iphone2

Erstellt von:  Tariq Abuirshaid
Lizenz:  Frei für die persönliche Nutzung.

iPad App Showcase Template

ipad

Erstellt von:  Clifton Lin
Lizenz:  Frei für die persönliche Nutzung.

iPhone 5c mockup

iphone3

Erstellt von: brilliantsketch
Lizenz: Frei für die persönliche Nutzung.

Circlecons Vol1

circle

Erstellt von:  Onur Oztaskiran
Lizenz:  Frei für die persönliche Nutzung.

iOS 7 Icons

ios7

Erstellt von:  Erica Jaclyn Stein
Lizenz:  Frei für die persönliche Nutzung.

Linies

linies

Erstellt von:  Norm
Lizenz:  Frei für die persönliche Nutzung.

Sketch icons

rect

Erstellt von:  Christian
Lizenz:  Frei für die persönliche Nutzung.

GUI Content Views for iOS 7

mobile

Erstellt von:  Erica Jaclyn Stein

Lizenz:  Frei für die persönliche Nutzung.

iPhone GUI for Sketch (iOS7)

gui

Erstellt von:  teehanlax

Lizenz:  Frei für die persönliche und kommerzielle Nutzung.

Akilli Vatandas

gui2

Erstellt von:  Reza Selçuk Saydam
Lizenz:
  Frei für die persönliche Nutzung.

Dark UI Kit

ui2

Erstellt von:  Armand Chakhalyan

Lizenz:  Frei für die persönliche Nutzung.

Nexus 5 Wireframe UI

nexus

Erstellt von:  Tristan Remy
Lizenz:  Frei für die persönliche Nutzung.

iPhone 5S Wireframe

iphone4

Erstellt von:  Gavin Anthony
Lizenz:  Frei für die persönliche Nutzung.

Flat UI Kit

ui3

Erstellt von:  medialoot
Lizenz:  Frei für die persönliche Nutzung.

Yosemite Safari

browser

Erstellt von:  Nishank Khanna
Lizenz:  Frei für die persönliche Nutzung.

Nexus 5

nexus2

Erstellt von:  Tristan Remy
Lizenz:  Frei für die persönliche Nutzung

Chrome

chrome

Erstellt von:  Octavian Rosca

Lizenz:
  Frei für die persönliche und kommerzielle Nutzung.

Car Rent Design

car

Erstellt von:  Gideon Heilbron
Lizenz:  Frei für die persönliche Nutzung.

(dpe)

Kategorien
Inspiration Showcases

Oozled: Schnell wachsende Ressourcen-Sammlung für Designer und andere Webworker

Da soll nochmal einer sagen, Listenbeiträge wären langweilig und die Leser hätten solches längst satt. Im November 2013 veröffentlichte der Design-Freelancer Dan Edwards auf Medium einen Beitrag, den er schlicht „Resources“ nannte. Darin listete er 80 Angebote auf, die er für den Designer für unabdingbar hielt. Die Liste bekam einige Aufmerksamkeit und wuchs beständig an. Schließlich entschloss Edwards sich dazu, eine „richtige“ Web-App daraus zu machen. Seit knapp zwei Wochen nun ist Oozled, so der erstaunliche Name der Web-App, online…

oozled-landing-page

Oozled: Simples Verzeichnis für Tools aller Art

Fokussierte sich Edwards anfangs noch vollkommen auf Ressourcen für Designer, so öffnete er Oozled für den gesamten breiten Bedarf moderner Webworker. Mit über 625 Ressourcen im Verzeichnis hat sich selbiges in zwei Wochen mehr als verdoppelt. Dafür sorgt sicherlich die zwischenzeitlich freigeschaltete Möglichkeit, eigene Vorschläge zur Aufnahme in das Directory einzubringen. Mehr als 40 Kategorien sorgen für die einigermaßen übersichtliche Sortierung der diversen Angebote.

Von der Medium-Liste zur Web-App brachte Dan Edwards die Ressourcen-Sammlung nicht alleine. Vielmehr konnte er den ebenfalls aus dem Vereinigten Königreich stammenden, designenden Entwickler Ryan Taylor zur Mitarbeit bewegen. Gemeinsam formen Sie nun das TeamOozled.

Oozled: Metro lässt grüßen

Oozled selber verfügt über ein responsiv gelayoutetes, recht einfaches Design, das sich mit Smartphones ebenso gut wie mit großen Bildschirmen verwenden lässt. Es erinnert aufgrund seiner bunten, flächigen Kacheloberfläche wohl nicht zufällig an die Windows Modern UI. Oozleds Bedienkonzept ist ebenfalls sehr einfach.

Von der Startseite klickt man sich in eine der, nach meinem Geschmack zu vielen, Kategorien. Innerhalb der jeweiligen Kategorie werden die einzelnen Ressourcen, seien es Icons, Templates, Web-Apps, Bücher, Videos oder Beiträge, dann wieder als einzelne Kacheln gezeigt.

oozled-category-example

Diese Kacheln beinhalten auf der Vorderseite Titel-Informationen, sowie nötigenfalls Preise und ein Fragezeichen-Icon rechts unten an jeder Kachel. Klickt man dieses Fragezeichen dreht sich die Kachel um und man erfährt in wenigen Worten, womit sich die gewählte Ressource befasst. Klickt man auf der Vorderseite irgendwo anders hin als auf das Fragezeichen, wird man ohne Umschweife zur Website der entsprechenden Ressource geleitet. Gleiches passiert, wenn man auf der Rückseite irgendwo anders hin klickt auf das X-Icon, welches wieder die Vorderseite aufrufen würde.

Oozled: Maßgeschneiderte RSS-Feeds für registrierte Nutzer

Neben der einfachen Verwendung von Oozled als bei Bedarf zu konsultierendes Verzeichnis, ist eine fortgeschrittene Möglichkeit vorgesehen. Registrieren Sie einen Nutzeraccount, können Sie Kategorien abonnieren. Sie erhalten eine maßgeschneiderte Landing-Page mit eigener Subdomain und einen eigenen RSS-Feed, den Sie in Ihren Lieblingsreader einspeisen. Fortan werden Sie über Neuerscheinungen in den von Ihnen abonnierten Kategorien auf dem Laufenden gehalten. Leider lässt sich die Meta-Kategorie „The Latest 50“ nicht auf diese Weise abonnieren.

oozled-dieters-feed
Mein Feed als Beispiel (auch per URL konsumierbar, etwa via Feedly)

Sie sehen schon, im Vergleich zur bisherigen Liste auf Medium hat sich einiges getan. Im Vergleich zu anderen Ressourcensammlungen ist Oozled eher so ein Zwischending aus Liste und Service. Weitergehende Informationen erhält man nicht, wesentlich mehr als ein Link ist nicht im Angebot.

Die Idee mit den kategoriebasierten RSS-Feeds hat natürlich was und ein schnelles, abgespecktes Verzeichnis für Leute, die im Grunde wissen, was sie suchen, klingt auch nicht völlig abwegig. Die Kollegen jedenfalls haben schon mit den Füßen abgestimmt und reichen fleißig Ressourcen zur Aufnahme ein. Mal sehen, wann die Freitext-Suchfunktion beginnt, schmerzlich zu fehlen ;-)

Ganz sicher ist Oozled eine weitere sinnvolle Ergänzung des Webworker-Werkzeugkastens. Rein in die Bookmark-Sammlung und glücklich sein…

Übrigens: Dan Edwards hat versprochen, auch Einblicke in den Entwicklungsprozess der Web-App zu geben. Solche Studien am realen Projekt sind ja immer gut. Wir bleiben für Sie dran.

Bevor ich es vergesse: Geld verdienen wollen Edwards und Taylor zunächst nicht – jedenfalls nicht mit diesem Projekt.

Kategorien
Inspiration Showcases

Elegant oder langweilig? Die Farbe Grau im Website-Design

Wussten Sie, dass das menschliche Auge in der Lage ist, rund 500 Schattierungen der Farbe Grau zu unterscheiden? Dabei liegt die Grauzone genau zwischen den beiden Nichtfarben Weiß und Schwarz. Je dunkler der Grauton, desto näher am Schwarz, je heller, desto näher am Weiß ist er angesiedelt. Je nach Schattierungen wurde Grau schon immer mit diversen Stimmungen in Verbindung gebracht. Helle Schattierungen von Grau sind sehr neutral, gut für das Hintergrund-Design geeignet. Helles Grau erzeugt keine negativen Gefühle, wirkt sogar bisweilen kalt und gefühllos. Dunkles Grau hingegen vermittelt starke Gefühle. Trauer, Depression, Ausweglosigkeit – Wann immer jemand eine extrem negative Situation inszenieren will, wird er auf sehr dunkle Grautöne setzen. Dabei ist es gerade die Vielseitigkeit der Graupalette, die es berechtigt erscheinen lässt, hier von derjenigen Farbe zu sprechen, die am universellsten und unvorhersehbarsten einsetzbar ist.

Elegant Gray Cat
Elegante graue Katze

Die verschiedenen Wahrnehmungen von Grau

Natürlich gib es weitere Stereotype. Grau ist die Farbe der Business-Kasper, jener sich mit Anzügen uniformierenden Kaste der Besserverdiener. Blaue Anzüge werden auch noch akzeptiert, aber grau ist da schon sehr weit vorne. So ist es kein Wunder, dass der geneigte Betrachter die Farbe GRau gern auch mit Formalismen und Langeweile verbindet.

Während also manche die Farbe Grau mit Langeweile und Gefühllosigkeit assoziieren, empfinden andere, allen voran die genannten Anzugträger, sie als hochelegant. In der Tat dürfen Anzüge wohl als etablierte Kleidungsstücke gewisser Eleganz in den entsprechenden Kreisen gelten.

Boring Gray Landscape?
Langweilige graue Landschaft?

Es ist ja nicht neu, Farben sind extrem wichtig im Webdesign und können, falsch eingesetzt, Ihr nächsten Projekt komplett zerstören. So ist es kein Wunder, dass Grau als potentiell neutrale Farbe gern für das Design von Websites verwendet wird. Mindestens in der Form der Akzentuierung können graue Elemente fast jedes Webdesign aufwerten und ihm Klasse verleihen.

Hier sind die Hauptgründe für den Einsatz von Grau:

  • Grau als Hintergrundfarbe ist unaufdringlich. Stattdessen unterstreicht der richtige Grauton die eigentliche Botschaft des Designs.
  • Grau ist gut geeignet für Navigationsmenüs. Mit Bildern kombiniert, können Sie so eine elegante UI schaffen. Auch beliebt ist grau als Hintergrund für Suchboxen.
  • Verschiedene geometrische Formen strukturieren eine Website und sind dabei häufig in grauer Farbe umgesetzt. So werden sie zwar wahrgenommen, wirken aber nicht dominant.
  • Graue Schriften, was halten Sie davon? Kombiniert mit Pink sprechen Sie Frauen an, kombiniert mit grünen oder blauen Akzenten erreichen Sie die Herren der Schöpfung.

Nun lassen Sie uns gemeinsam ein paar Dutzend Beispiele anschauen. Es handelt sich um meine Favoriten zum Thema. Vielleicht finden Sie ja ebensoviel Inspiration wie ich:

Jay Fram: Profi-Fotograf

Jay Fram Web Design

Tyler Copeland: Designer

Tyler Copeland Website

Monday Music: Musik entdecken

Monday Music Website

Trust Reviews: Bewertungsdienst

Trust Reviews Website

Heartbeat: Ladenausstatter

Retail Store Website

H Furniture: ungewöhnliche Möbel

H Furniture Website

PFD: Design-Agentur

PFD Web Design

Bird Boutique: exklusiv Shoppen

Bird Boutique Website

One Space Media: Agentur für digitale Medien

One Space Media Website

Sunaj Official Store

Sunaj Website Design

Strekstore: ungewöhnliche Items, analog und digital

Strecstore Website

Provekjore

Provekjore Web Design

Doris Research: Beratung für Designer

Doris Research Web Design

Tickera Ticketing System

Tickera Website

Capullo: Hairstylisten

Capullo Website

Uppercase: Agentur für digitale Medien

Uppercase Website

Tommy Graphics: Grafikdesigner und Fotograf

Tommy Graphics Site

Lee Jeans: Markenwebsite

Lee Jeans Site

Olaf Hussein: Noch eine Markenwebsite

Olaf Hussein Web Design

Authentic: Weinverkäufer

Wine Website

Michele Mazzucco: Markendesign

Michele Mazzucco Gray Site

Juicymo: App-Hersteller

Juicymo Site

Mike Seehagel: Fotograf

Mike Seehagel Portfolio

Photo Portfolio Website Design: Template für MotoCMS

Portfolio Web Design

Boggi Roeselare: Männermode

Boggi Roeselare Site

Graf von Faber Castell: Schreibutensilien

Graf von Faber Gray Site

Cereal Magazine

Cereal Magazine Gray Design

Bold & Noble: handgefertigte Produkte

Bold & Noble Gray Web Design

Allure: Architekten

Allure Architecture Site

Schneider Electric: Elektrogeräte

Schneider Electric Site

Masseria Gialli: Ferien-Resort

Masseria Gialli Site

Edge Magazine

Edge Magazine Gray Design

The Pragmatic Lab: Bildungseinrichtung

Pragmatic Lab Site

Arsova Salon: High-Society-Stylisten

Arsova Salon Site

Gray Designer’s Portfolio: WordPress-Theme

Design Portfolio Theme

Mega: Art-Director und Illustrator

Mega Illustrations Web Design

VROY Communications: Werbeagentur

VROY Website

Songes: Innenarchitekten

Interior Design Site

Anyi Lu Shoes: Markenwebsite

Shoes Brand Site

Crocon: Schiffsbauer

Crocon Site

Magnetic Zero: Interaktives Design und Entwicklung

Magnetic Zoo Website

The 2014 Lavazza Calendar Website

Lavazza 2014 Site

Herbal Bises: Naturkosmetik

Herbal Bises Web Design

Framelab: Grafik-Design + Direction

Framelab Site

Squad: Design-Agentur

Squad Design Site

Ink & Spindle: Fair handelnder Stoffladen

Ink & Spindle Web Design

So weit, so gut. Haben wir was tolles vergessen? Sagen Sie es uns in den Kommentaren.

(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
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)