Kategorien
Design Design-News Inspiration Showcases

Project Muze: Schrei vor Glück?

Das neue Mode-Experiment Project Muze, das in Kooperation der Firmen Zalando und Google entstand, ist wirklich sehenswert. Zwar wird es nicht dem Slogan „Schrei vor Glück“ aus den Hause Zalando gerecht. Geschrien habe ich aber trotzdem.

Project Muze: Da ist selbst die Muse erstaunt. (Foto: Pixabay.com)
Project Muze: Da ist selbst die Muse erstaunt. (Foto: Pixabay.com)

Kann die Maschine deinen Bekleidungsstil inspirieren?

Auf einer akademischen Ebene betrachtet, mag Project Muze ganz großartig sein. Google will hier ein Beispiel angewandten Machine Learnings zeigen. Das Projekt soll eine Art Muse für deine Bekleidungs-Inspirationen sein.

So ist der Weg zum eigenen Klamottendesign einigermaßen unkonventionell. Du beantwortest dem Algorithmus nämlich lediglich ein paar Fragen, die nur periphär etwas mit Bekleidung zu tun haben. Verständlich ist noch die Frage nach dem Geschlecht, wenn sich die Antwort darauf auch nicht unbedingt im Ergebnis erkennen lassen wird. Aber das weiß ich zu diesem Zeitpunkt noch nicht.

Im weiteren Verlaufe des „Design-Prozesses“ muss ich meine Stimmung einordnen, meinen Musikgeschmack benennen und meine favorisierte Kunstrichtung angeben. Am Ende meint Google dann, genügend Informationen zu haben, um einen auf mich zugeschnittenen Bekleidungsvorschlag unterbreiten zu können.

Und das ist dabei herausgekommen:

Das soll mein neuer Look sein? Interessant. (Screenshot: Dr. Web)
Das soll mein neuer Look sein? Interessant. (Screenshot: Dr. Web)

Schrei vor Überraschung: Das kann ich doch nicht annehmen!

Ja, sach ma. Der Dieter mit femininer Schlafanzughose, im Prinzip oben ohne und mit schwarzen Kristallen übersät? Im Ernst jetzt? Sowas denkt sich ja nicht mal der progressivste Regisseur für die Wagner-Festspiele aus. Und die sind schon häufig abseitig genug drauf.

Möglicherweise bin ich einfach schwer einzuordnen, denke ich so bei mir und schaue durch die Galerie bereits vorhandener Entwürfe anderer Musen-Befrager. Und, was soll ich sagen? Da ist es nicht besser. Schau selbst:

Der jüngste Trend zeigt, man trägt wieder Schild. (Screenshot: Dr. Web)
Der jüngste Trend zeigt, man trägt wieder Schild. (Screenshot: Dr. Web)

Zwei grüne klavierlackierte Schilde schweben frei vor und hinter dem Oberkörper, während ein waberndes Muster Shirt und Hose wie eine Kolonie linksdrehender Bakterien, quasi ein Activia der Oberbekleidung, wirken lässt. Ein kleines bisschen erinnern mich die angebrachten Schilde an die Glanzzeit der Guillotine. Robespierre lässt grüßen.

Oder, schau dir diesen Entwurf hier an:

Wie soll man es nennen? Einen großzügigen Entwurf? (Screenshot: Dr. Web)
Wie soll man es nennen? Einen großzügigen Entwurf? (Screenshot: Dr. Web)

Das könnte aus einer Gender-Mainstreaming-Version der Avengers stammen. Aber freiwillig würde sich doch keiner sowas anziehen. Der pluderige Bodysuit mag sich im Feierabend auf der Couch noch ganz bequem ausmachen. Vor allem ohne Unterwäsche wird man ein ungeahntes Maß an Freiheit empfinden. Was dabei allerdings der seltsame Umhang soll, der noch dazu in der Lage ist, frei zu schweben, erschließt sich mir auch bei längerem Nachdenken nicht.

Muss man eigentlich alles, was geht, auch machen?

Entweder bin ich einfach viel zu wenig in der Welt der modernen Fashion beheimatet, was durchaus sein kann. Oder dieses Google-Experiment ist wirklich schlichtweg Mist.

Sicher, Project Muze basiert auf Googles TensorFlow, einer Bibliothek für Machine Learning und ist bestimmt technisch hochanspruchsvoll. Zalando trug mit insgesamt 600 Modeexperten mutmaßlich deutlich zu den prädiktiven Entscheidungen auf Basis aktueller Trends bei. Und der Agentur Stinkdigital, die ebenfalls an der Umsetzung der Website beteiligt war, kann man unter technischen Aspekten wahrscheinlich auch keine Vorwürfe machen.

Was bei dem ganzen Aufwand rausgekommen ist, ist halt einfach überflüssig und ein gutes Beispiel dafür, dass man nicht alles nur aus dem alleinigen Grund machen sollte, weil man es kann.

Du wirst sicher Verständnis dafür haben, dass ich mich – in unser aller Interesse – nicht von Project Muze zum Umdenken in Bekleidungsfragen „inspirieren“ lassen werde.

Kategorien
Boilerplates & andere Tools Inspiration Programmierung Showcases

20 Codeschnipsel für moderne Kontaktformulare

Ein paar benannte Textfelder und ein deutlicher Call-to-Action am Ende – genau so sieht ein gewöhnliches Kontaktformular aus. Na ja, das kann ja kein Problem sein. Macht man mit links. Freu dich nicht zu früh, es gibt einige Stolperfallen. Soll dein Feedback-Formular responsiv, angetrieben durch Bootstrap oder komplett benutzerdefiniert sein? Du wirst auf jeden Fall mit CSS-Styles, JavaScript-Bibliotheken und modernen HTML-Funktionen rumspielen, um das perfekte Formular zu erstellen.

feedback-1213042_640

Glücklicherweise gibt es eine Reihe von guten und verlässlichen vordefinierten Lösungen im Internet, die dir einen Teil der Arbeit abnehmen oder zumindest einen perfekten Start bereiten können. So sparst du viel Zeit. Heute haben wir 20 Codepens versammelt, die klare, elegante und problemlose Kontaktformulare enthalten. Einige von ihnen können und müssen schnell oder auch umfangreich angepasst werden, während andere mit ihren speziellen Layouts oder begleitenden Effekten ihren Platz in deinen Projekten auch ohne größere Änderungen finden können.

E-Formular aus deutscher Herstellung

Schön dezentes, DSGVO konformes kostenloses Formular
Erstellt von: Michael Knothe, kontaktformular.com

Fullscreen Form Interface

Full-screen contact form
Erstellt von: Mary Lou

Responsives Kontaktformular mit Karte

contact form with map
Erstellt von: Lentie Ward

Responsives Kontaktformular im Material Design

responsive material design form
Erstellt von: Nikhil Krishnan

Simples Kontaktformular

clean contact form
Erstellt von: nick haskell

Elegantes Kontaktformular

elegant contact form
Erstellt von: Mark Murray

Responsives Kontaktformular mit Bootstrap 3 und Google Maps API

responsive contact form
Erstellt von: Craig Wheeler

Sass Flip Kontaktformular

sass flip form
Erstellt von: Danny Beton

Klassisch inspiriertes Kontaktformular

vintage form
Erstellt von: David Fitas

Einfaches Flat-Kontaktformular

flat contact form
Erstellt von: Zach Saucier

Kontaktformular

envelope style form
Erstellt von: Iulian Savin

Drop-Down Kontaktformular

drop-down form
Erstellt von: Greg Sweet

Kontaktformular HTML + CSS

diagonal style form
Erstellt von: Trevor L.J.M. McIntire

Feedback-Formular

light contact form
Erstellt von: CrocoDillon

Minimalistisches Formular

minimalistic form
Erstellt von: Matheus Marsiglio

Responsives Formular im Flat Style

flat responsive form
Erstellt von: And Studio

Persönliche Website

contact form in personal website
Erstellt von: Tim Robert-Fitzgerald

Kontaktformular im Tafel-Look

blackboard form
Erstellt von: Greg Sweet

CSS only, Responsives Modalformular

responsive modal form
Erstellt von: Daryll Doyle

Kontaktformular

contact form animation
Erstellt von: Peter Kullmann

Maritimes Kontaktformular

under the sea form
Erstellt von: Geert-Jan Hendriks

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
Inspiration Showcases

Modern präsentieren: 20 animierte Interfaces

Ein Konzept zu präsentieren ist eine hohe Kunst. Früher war es üblich, kleine Logos auf große Kartons zu kleben und mit überschwänglicher Gestik vorzuführen. Und auch heutzutage gibt es sie noch, die holzverliebten Turnväter Jahn der Präsentation. Dabei haben sich in den letzten Jahren digitale, möglichst noch bewegte Formen der Visualisierung mehr als durchgesetzt. Gerade, wenn es um Interfaces geht, geht kaum etwas über bewegte Darstellungen der wichtigsten Features. Dafür gibt es verschiedene Lösungen, am einfachsten sind die sogenannten Animated-Gif-Walkthroughs. Die erfordern keine Interaktion, zeigen stattdessen, was passieren würde, wenn man interagierte. Zudem laufen sie ohne zusätzliche Software. In meinem heutigen Beitrag zeige ich euch zwanzig Konzepte animierter Interfaces, die mich besonders überzeugen. Lasst euch inspirieren.

Titel: Gif for Sport App

gif for sport app
Erstellt von: Sergey Valiukh for T U B I K

Titel: City Intro Animation

city intro
Erstellt von: Vasjen Katro for Fabric

Titel: Speedcam App Animation

speedcam app gif
Erstellt von: Jakub Antalík

Titel: Weather Dashboard / Global Outlook 

weather dashboard
Erstellt von: Studio–JQ

Titel: Android Wear – Clock App

android wear gif
Erstellt von: Ramotion

Titel: Madvad Landing Page

landing page
Erstellt von: Hoang Nguyen

Titel: Time Tracking App

productivity chart
Erstellt von: Hanna Jung

Titel: Star Wars App Concept

star wars concept
Erstellt von: Konstantine Trundayev for Yalantis

Titel: Strada Cafe App

strada - cafe app
Erstellt von: Nick Buturishvili for Leavingstone

Titel: UX Pattern – Gif Hints

ux pattern
Erstellt von: Virgil Pana

Titel: Bob Web Player

web player
Erstellt von: Pivotal

Titel: Moves App for Watch

moves app for iwatch
Erstellt von: Jakov for Unity

Titel: Weather Rebound

weather app
Erstellt von: Chris Slowik

Titel: Ramen Ninja App Animation

ramen app
Erstellt von: Walker Reed

Titel: Mood Control Animation

mood control app
Erstellt von: Veronika Bass for Cleveroad

Titel: Plastique Mobile Launch

plastique mobile app
Erstellt von: Rachel Blank

Titel: Portfolio Website Redesign

portfolio redesign
Erstellt von: David Moore

Titel: Dribbble App for Apple Watch

dribbble app for apple watch
Erstellt von: Artem

Titel: Tapdaq – Creative Template Process

tapdaq
Erstellt von: Jan Losert

Titel: UI8 Wireframe Kit

wireframe kit
Erstellt von: Creativedash

(dpe)

Kategorien
Inspiration Showcases Webdesign

Particle Animation: 20 Beispiele aus Codepen

Mit den richtigen Tools und ein bisschen JavaScript-Magie bringt man einfache Punkte dazu, sich chaotisch geordnet über den Screen zu bewegen. Sie springen, tanzen, reagieren auf Schwerkraft, bilden unterschiedliche Formen und interagieren mit Nutzereingaben. Lässt man dann noch WebGL, Three.js oder TweenMax auf sie los, erzeugt man regelrechte Kunstwerke, die auf jeden Fall Aufmerksamkeit auf sich ziehen werden. Die Rede ist von Particle Animations.

Schau dir mal Deutser, Activation Nodeplus oder Void an und du wirst feststellen, das alle drei Beispiele particles-inspirierte Designelemente haben, die nicht nur optische Qualitäten haben, sondern die Nutzererfahrung verbessern. Für mich sind das drei Best Practices, wie ich das Web heutzutage gern öfter sehen würde. Daher habe ich mich auf Codepen umgesehen und bin mit einem Haufen schöner Exemplare wieder aufgetaucht.

Ich habe mich bei der Auswahl der Beispiele um eine möglichst breite Vielfalt verschiedener Ansätze bemüht, damit du einen Eindruck davon bekommst, wie vielseitig Particle Animation sein kann.

Titel: Fluid Simulation

fluid simulation
Entwickler(in): Jeff Thomas

Titel: gl particle sns icons

gl particles icons
Entwickler(in): Kenji Saito

Titel: WebGL Particle Head

head made of particles
Entwickler(in): Robert Bue

Titel: Particle Fountain

particles fountain
Entwickler(in): Shawn G.

Titel: CSS Particle Animation 

pure css particles animation
Entwickler(in): Nate Wiley

Titel: JavaScript Particles Animation

javascript particles animation
Entwickler(in): Roshin Jose

Titel: Particles.js – Javascript Library

particles plugin
Entwickler(in): Vincent Garreau

Titel: Particles in Space

particles in space
Entwickler(in): Dean Wagman

Titel: Text Particle

text particle
Entwickler(in): Gthibaud

Titel: Particles Snow

particle snow
Entwickler(in): Nat aliya Sayenko

Titel: Particle Swarm

particle swarm
Entwickler(in): Bas Groothedde

Titel: Particle Galaxy

particle galaxy
Entwickler(in): Sebastian Schepis

Titel: Vibrating Particles

vibrating circles
Entwickler(in): Prayush S

Titel: Giphy: Particles

particles gifs
Entwickler(in): Giphy

Titel: Particles.js: Stars Version

starry sky
Entwickler(in): Johan

Titel: Particle Button made with Canvas and HTML5 

particle button
Entwickler(in):  Ignacio Correia

Titel: Simple Particles Animation

simple particles animation
Entwickler(in): Alexander

Titel: 40k Particles Animated

40k particles animated
Entwickler(in): Robert Lemon

Titel: Dynamic 3D Confetti Text Effect

dynamic 3d confetti
Entwickler(in): Rachel Smith

Titel: Particle Orb CSS

particle orb css
Entwickler(in): Nate Wiley

(dpe)

Kategorien
Fotografie Inspiration Showcases

Das sind die Bildtrends des Jahres 2016

Scott Braut muss es wissen. Er ist Head of Content bei Adobe Stock und Fotolia und steckt damit tiefer in Bildtrends als die meisten anderen Menschen, die den Planeten bevölkern. Scott nahm sich nun die Daten des Jahres 2015 vor und analysierte Keyword-Suchanfragen, Downloads und Uploads aller Nutzer weltweit. Auf der Basis dieser Erkenntnisse stellte er die sieben Bildtrends des Jahres 2016 zusammen. Bis du also auf der Suche nach Stockmaterial, das frisch und modern wirkt, ist dieser Beitrag definitiv lesepflichtig.

Das sind die Bildtrends des Jahres 2016

Trend 1: Technik ist nicht länger nur für Nerds

Wer hat nicht das Bild vom dicken, pickeligen Pizzakonsumenten vor Augen, wenn er an Technik, zumindest ans Programmieren, denkt? Technik war früher was für die Nerds, die keine Mädels abbekommen haben und zu keiner Party eingeladen wurden. Heutzutage ist Technik cool. Jobs in Tech-Unternehmen sind begehrt, und die Attraktivität des Themas sollen aktuelle Fotos auch zum Ausdruck bringen.

Color shot of a young woman looking through a cardboard, a device with which one can experience virtual reality on a mobile phone.

Trend 2: Vintage ist wieder modern

Der Hipster-Look ist wohl das beste Beispiel für einen Trend, mit dem niemand gerechnet hatte. Bärte, Retrolook, monochrome Darstellungen – das ist alles wieder im Kommen. Hätte man noch vor zehn Jahren Bildmaterial mit diesem Fokus für total veraltet erklärt, kannst du dieser Tage damit wieder richtig Staat machen.

Teamwork. Three young architects working on a project

Trend 3: Komplexe Porträts

Der Selfie-Boom ist in vollem Gange. Nichts scheint der heutige Netzbewohner lieber zu sehen als Gesichter. Dabei ist das reine Selfie allerdings für Illustrationszwecke etwas zu eindimensional. Der Trend geht hin zu Porträtaufnahmen, die ganze Szenerien einfangen. Der Betrachter fühlt sich wie in einem Kurzfilm ohne Film.

Young Black Man with Digital Tablet in a Cafe

Trend 4: Starke Farben, flächige Darstellung

Glaubt man den Farbexperten von Pantone sind die Trendfarben des Jahres 2016 die eher sanften “Serenity” und “Rose Quartz”. Andere bezeichnen klar Weiß als Trendfarbe 2016. Egal welche konkrete Farbe nun tatsächlich die Trendfarbe des Jahres ist, deutlich wird, dass starke Farben in flächiger Darstellung auf Stockmotiven bevorzugt gewählt werden. Als Marke kann man das sehr gut nutzen, um entsprechend seinem Markenauftritt farblich aktiv zu werden. Unabhängig von der Bildbotschaft sieht das schon mal sehr gut aus.

Marienplatz underground station in Munich, Germany

Trend 5: Luftaufnahmen auf Steroiden

Luftaufnahmen waren in der Vergangenheit relativ selten und vor allem kostspielig. Heutzutage kann sich jeder eine Drohne leisten und diese auf Erkundungsflug schicken. So entstehen potenziell großartige Bilder in weitaus höherer Zahl als je zuvor. Dabei werden wir Regionen zu Gesicht bekommen, die zuvor keiner fotografiert hat. Nachdem Landschaftsaufnahmen schon immer zu den beliebteren Illustrationsmotiven gehörten, ist das sicher eine gute Nachricht.

Aerial-view highway junction at night in Tokyo, Japan

Trend 6: Tagesaktuelle Motivik

Im Zeitalter von Social Media ist jede neue Nachricht im nächsten Augenblick schon wieder passé. Der Puls der Welt rast. Wer hier mithalten will, verlässt sich auf Motive, die in dieser Sekunde das Zeitgeschehen widerspiegeln. Das funktionierte etwa im letzten Jahr besonders gut, als die gleichgeschlechtliche Ehe in den USA legalisiert wurde und das Regenbogenmotiv die sozialen Kanäle flutete.

LGBT rainbow lock

Trend 7: Low-Poly-Minimalismus

Designern ist der Low-Poly-Stil natürlich nicht neu. Wir erfreuen uns schon seit Jahren an diesen kleinen geometrischen Kunstwerken. Mit der steigenden Bedeutung des Minimalismus als allgemeinem Trend greift Low Poly jetzt auch in den Mainstream. Das ist durchaus zu begrüßen und in Verbindung mit Trend 4 sicher eine großartige Sache.

Grey cat with orange eyes - polygonal style.

Kategorien
Inspiration Showcases

Inspiration: 20 Websites mit großer Typografie

Webdesigner(in) ist ein sehr kreativer Beruf. Neue, möglichst aufregende Designs müssen immer wieder neu erschaffen werden. Um das sicherstellen zu können, bedarf es neben eines soliden Knowhows sehr viel Inspiration. Hier hat es sich bewährt, die Arbeiten anderer Designer anzuschauen. Um dich inspirierend zu unterstützen, stelle ich in diesem Beitrag die meines Erachtens 20 schönsten Websites mit großer Typografie zusammen.

Inspiration: 20 Websites mit großer Typografie

1 – BigDrop

Big Drop

2 – University of Sydney

University-of-Sydney

3 – Gelateria del Biondo

Gelateria-del-Biondo

4 – Oribe

Oribe

5 – Benjamin Guedj Designer

Benjamin-Guedj

6 – True Digital

True-Digital

7 – EVS

EVS

8 – Le 28

Le-28

9 – Because Recollection

Because-Recollection

10 – Formula1Data

Formula1Data

11 – Webflow

Webflow

12 – Olympic Story

Olympic-Story

13 – Space Needle

Space-Needle

14 – Ante Meridiem

Ante-Meridiem

15 – HLK

HLK

16 – Paul Woods

Paul-Woods

17 – Lander

Lander

18 – Brand Aid

Brand-Aid

19 – Visage

Visage

20 – We are Nation

Nation

Weitere Artikel zum Thema

(dpe)

Kategorien
Best-of HTML/CSS/PSD-Ressourcen Essentials Inspiration Showcases

Best of 2015: 100 kostenlose HTML- und CSS-Themes

Eine Website aus dem Nichts zu erschaffen, ist eine Aufgabe, die Spaß machen kann, aber nicht nur Freude zu bereiten imstande ist. Einigen wir uns einfach auf die Formulierung, dass es eine Herausforderung ist. Du brauchst die kombinierten Fähigkeiten eines Designers und eines Entwicklers gleichermaßen, damit du etwas wertvolles erschaffen kannst, was sowohl aktuelleren Trends als auch den individuellen Anforderungen gerecht werden kann. Ein solcher Workflow ist zeit- und arbeitsintensiv. Leider gibt es Projekte, bei denen ein solcher Aufwand gar nicht gerechtfertigt zu betreiben ist. Hier braucht es eine Basis, auf die man zurückgreifen kann. Ein flexibles, gut gestaltetes Template kann da helfen.

Best of 2015: 100 kostenlose HTML- und CSS-Themes

In unserem heutigen Beitrag zeige ich dir die 100 nach meiner Meinung besten HTML- und CSS-Templates des Jahres 2015. Es ist wirklich alles dabei, von persönlichen Portfolios über Blog-Layouts bis hin zu eCommerce-Templates.

Titel: Serati – Free Html Resume Template

resume template
Erstellt von: Wassim Awadallah
Lizenz: keine kommerzielle Nutzung, Urhebernennung und keine Abwandlungen des Ursprungswerks erlaubt (zur Distribution)

Titel: “Land.io” UI Kit + Landing Page Template (HTML)

land.io
Erstellt von: Peter Finlan und Taty Grassini.
Lizenz: CC BY-NC 4.0.

Titel: “Boxify” One Page Website Template

boxy template
Erstellt von: Peter Finlan
Lizenz: frei für persönliche und kommerzielle Nutzung (keine Redistribution)

Titel: “Forkio” One Page Website Template

forkio app
Erstellt von: Pixel Buddha und PSD2HTML
Lizenz: frei für persönliche und kommerzielle Nutzung (keine Redistribution)

Titel: “Sedna” One Page Website Template (HTML5, Sketch)

sedna template
Erstellt von: Peter Finlan
Lizenz: frei für persönliche und kommerzielle Nutzung (keine Redistribution)

Titel: Notes- Coming Soon Theme

notes theme
Erstellt von: Themefisher
Lizenz: Vom Ersteller als „kostenlos“ bezeichnet, aber nicht mit einer echten Lizenz versehen

Titel: DribbbleFoliov2- Dribbble Portfolio HTML Template

dribbblefolio
Erstellt von: Vineeth Gopal S
Lizenz: Vom Ersteller als „kostenlos“ bezeichnet, aber nicht mit einer echten Lizenz versehen

Titel: Free Dribbble Feed Portfolio Landing Page 

portfolio landing page
Erstellt von: Visual Soldiers
Lizenz: Vom Ersteller als „kostenlos“ bezeichnet, aber nicht mit einer echten Lizenz versehen

Titel: Snow – A Free Bootstrap Landing Page

landing page
Erstellt von: Visual Soldiers
Lizenz: GPL.

Titel: THOMSOON – Free responsive Portfolio Theme

clean portfolio
Erstellt von: Tomasz Mazurczak
Lizenz: CC BY-NC 4.0..

Titel: FREE Landing Website

corporate one page
Erstellt von: Tomasz Mazurczak
Lizenz: CC BY-NC 4.0.

Titel: I-AM-X Freebie Web Resume Template

web resume
Erstellt von: Nasir Uddin
Lizenz: frei für die persönliche und kommerzielle Nutzung

Titel: UniqueBiz Corporate Template

corporate template
Erstellt von: Nasir Uddin
Lizenz: frei für die persönliche und kommerzielle Nutzung

Titel: Bodo – Free Responsive HTML Personal Template

bodo template
Erstellt von: Muhamad Reza Adityawarman
Lizenz: Vom Ersteller als „kostenlos“ bezeichnet, aber nicht mit einer echten Lizenz versehen

Titel: Landing Page Pack

landing page pack
Erstellt von: Script Eden
Lizenz: Vom Ersteller als „kostenlos“ bezeichnet, aber nicht mit einer echten Lizenz versehen

Titel: The Spicy Octo Free Responsive Template

spicy octo
Erstellt von: Vanessa Šerka
Lizenz: CC BY-NC 4.0.

Titel: Smiley – Responsive Bootstrap Template

smiley template
Erstellt von: Mohammad Shaifuddin
Lizenz: Vom Ersteller als „kostenlos“ bezeichnet, aber nicht mit einer echten Lizenz versehen

Titel: Skyblue – Corporate Bootstrap Template

skyblue template
Erstellt von: Mohammad Shaifuddin
Lizenz: frei für die persönliche und kommerzielle Nutzung

Titel: E-Market – Responsive eCommerce Website Template

e-market theme
Erstellt von: Mohammad Shaifuddin
Lizenz: Vom Ersteller als „kostenlos“ bezeichnet, aber nicht mit einer echten Lizenz versehen

Titel: Landing Page Mockup #1

landing page 2
Erstellt von: Elite Design
Lizenz: Vom Ersteller als „kostenlos“ bezeichnet, aber nicht mit einer echten Lizenz versehen

Titel: Clean – One Page Personal Portfolio Template

personal resume
Erstellt von: Alex
Lizenz: Vom Ersteller als „kostenlos“ bezeichnet, aber nicht mit einer echten Lizenz versehen

Titel: Optimus – Clean Corporate Bootstrap Template

bright theme
Erstellt von: Script Eden
Lizenz: Vom Ersteller als „kostenlos“ bezeichnet, aber nicht mit einer echten Lizenz versehen

Titel: Cupid – Single Page Bootstrap Template

cupid theme
Erstellt von: Script Eden
Lizenz: Vom Ersteller als „kostenlos“ bezeichnet, aber nicht mit einer echten Lizenz versehen

Titel: Team Lite – Creative Business Portfolio Template

business portfolio
Erstellt von: Shahriar
Lizenz: Vom Ersteller als „kostenlos“ bezeichnet, aber nicht mit einer echten Lizenz versehen

Titel: E-Shop

eshop
Erstellt von: Jewel
Lizenz: Vom Ersteller als „kostenlos“ bezeichnet, aber nicht mit einer echten Lizenz versehen

Titel: Bright Heaven

bright heaven
Erstellt von: Jewel
Lizenz: Vom Ersteller als „kostenlos“ bezeichnet, aber nicht mit einer echten Lizenz versehen

Titel: Expose

corporate theme
Erstellt von: Script Eden
Lizenz: Vom Ersteller als „kostenlos“ bezeichnet, aber nicht mit einer echten Lizenz versehen

Titel: Diamond Sound

diamond sound theme
Erstellt von: uniquecrown
Lizenz: Vom Ersteller als „kostenlos“ bezeichnet, aber nicht mit einer echten Lizenz versehen

Titel: Chemcode Theme

business theme
Erstellt von: uniquecrown
Lizenz: Vom Ersteller als „kostenlos“ bezeichnet, aber nicht mit einer echten Lizenz versehen

Titel: Dark Joe – Responsive One Page Personal Website Template with Bootstrap

portfolio theme
Erstellt von: Technext Limited
Lizenz: Vom Ersteller als „kostenlos“ bezeichnet, aber nicht mit einer echten Lizenz versehen

Titel: Mobirise – Free Bootstrap One Page Multipurpose Template

mobirise
Erstellt von: Mobirise
Lizenz: Vom Ersteller als „kostenlos“ bezeichnet, aber nicht mit einer echten Lizenz versehen

Titel: Conference – A Free Responsive Event Planning HTML5 Template

event template
Erstellt von: Technext Limited
Lizenz: Vom Ersteller als „kostenlos“ bezeichnet, aber nicht mit einer echten Lizenz versehen

Titel: Healthcare – Medical Hospital Responsive Templates with HTML5 and Bootstrap 3

healthcare theme
Erstellt von: Technext Limited
Lizenz: frei für die persönliche und kommerzielle Nutzung

Titel: Lifetracker – Free Responsive Bootstrap App Landing Page Template

app landing page
Erstellt von: Theme Fisher
Lizenz: frei für die persönliche und kommerzielle Nutzung

Titel: Timer

timer theme
Erstellt von: themefisher
Lizenz: frei für die persönliche und kommerzielle Nutzung

Titel: App Plus

app plus theme
Erstellt von: themefisher
Lizenz: frei für die persönliche und kommerzielle Nutzung

Titel: Navigator

navigator theme
Erstellt von: themefisher
Lizenz: frei für die persönliche und kommerzielle Nutzung

Titel: Airspace

airspace theme
Erstellt von: themefisher
Lizenz: frei für die persönliche und kommerzielle Nutzung

Titel: NOA – Bootstrap Jewellery Website Template

noa theme
Erstellt von: IMRAN KHAN
Lizenz: Vom Ersteller als „kostenlos“ bezeichnet, aber nicht mit einer echten Lizenz versehen

Titel: IRONMAN – Bootstrap Landing Page Template

ironman theme
Erstellt von: themesell
Lizenz: Vom Ersteller als „kostenlos“ bezeichnet, aber nicht mit einer echten Lizenz versehen

Titel: CREATIVO – One-Page Responsive Template

creative portfolio
Erstellt von: Carlotta Govi und Themesell Team
Lizenz: Vom Ersteller als „kostenlos“ bezeichnet, aber nicht mit einer echten Lizenz versehen

Titel: PEX – Responsive Landing Page Template

responsive landing page
Erstellt von: BLAZ ROBAR
Lizenz: Vom Ersteller als „kostenlos“ bezeichnet, aber nicht mit einer echten Lizenz versehen

Titel: LEGUNA – Responsive Bootstrap HTML Template

responsive template
Erstellt von: Shaikat
Lizenz: Vom Ersteller als „kostenlos“ bezeichnet, aber nicht mit einer echten Lizenz versehen

Titel: ‚Take‘ – a free HTML One-Pager Template

taka theme
Erstellt von: Blaz Robar
Lizenz: Vom Ersteller als „kostenlos“ bezeichnet, aber nicht mit einer echten Lizenz versehen

Titel: Dribbble Portfolio Template

dribbble portfolio
Erstellt von: Miheiz
Lizenz: Vom Ersteller als „kostenlos“ bezeichnet, aber nicht mit einer echten Lizenz versehen

Titel: Passion – HTML Responsive Email Template

passion html
Erstellt von: Pixel Hint
Lizenz: Vom Ersteller als „kostenlos“ bezeichnet, aber nicht mit einer echten Lizenz versehen

Titel: Capture – Free Responsive Bootstrap App Landing Page Theme

capture theme
Erstellt von: Pixel Hint
Lizenz: Vom Ersteller als „kostenlos“ bezeichnet, aber nicht mit einer echten Lizenz versehen

Titel: ActiveBox HTML Template

activebox template
Erstellt von: Kamal Chaneman
Lizenz: Vom Ersteller als „kostenlos“ bezeichnet, aber nicht mit einer echten Lizenz versehen

Titel: WHITE: One-Page HTML Theme

white theme
Erstellt von: Eva Theme
Lizenz: Vom Ersteller als „kostenlos“ bezeichnet, aber nicht mit einer echten Lizenz versehen

Titel: Light Bootstrap Dashboard

dashboard theme
Erstellt von: creative tim
Lizenz: frei für die persönliche Nutzung

Titel: Portfolio Template PSD HTML

portfolio template
Erstellt von: Ganesh Krishnan R
Lizenz: keine kommerzielle Nutzung, Urhebernennung und keine Abwandlungen des Ursprungswerks erlaubt (zur Distribution)

Titel: Immovable – Real Estate Category Flat Bootstrap Responsive Web Template

immovable theme
Erstellt von: w3layouts
Lizenz: Namensnennung 3.0 Deutschland (CC BY 3.0 DE)

Titel:

Titel: Tempo – Free One Page Creative Template

tempo theme
Erstellt von: templategarden
Lizenz: frei für die persönliche und kommerzielle Nutzung

Titel: Syntaxis – Free One Page Parallax Template

syntaxis theme
Erstellt von: templategarden
Lizenz: frei für die persönliche und kommerzielle Nutzung

Titel: Strata – Free One Page Bootstrap Template

strata theme
Erstellt von: templategarden
Lizenz: frei für die persönliche und kommerzielle Nutzung

Titel: Maxima – Free Bootstrap Business HTML Template

maxima theme
Erstellt von: shapebootstrap
Lizenz: frei für die persönliche und kommerzielle Nutzung bei Nennung des Urhebers

Titel: Meetup – Free Responsive Bootstrap Template

event theme
Erstellt von: Akash Bhadange
Lizenz: Vom Ersteller als „kostenlos“ bezeichnet, aber nicht mit einer echten Lizenz versehen

Titel: Treviso – Clean Portfolio Bootstrap theme

treviso theme
Erstellt von: moozthemes
Lizenz: Apache License v2.0.

Titel: Sanza

sanza theme
Erstellt von: moozthemes
Lizenz: Apache License v2.0.

Titel: Lattes

lattes theme
Erstellt von: moozthemes
Lizenz: Apache License v2.0.

Titel: Nantes

nantes template
Erstellt von: moozthemes
Lizenz: Apache License v2.0.

Titel: Renda

renda theme
Erstellt von: moozthemes
Lizenz: Apache License v2.0.

Titel: Free Responsive Corporate Template

responsive template 2
Erstellt von: templatemonster
Lizenz: Vom Ersteller als „kostenlos“ bezeichnet, aber nicht mit einer echten Lizenz versehen

Titel: Ultra-Modern Free Responsive Design Agency Theme

agency theme
Erstellt von: templatemonster
Lizenz: Vom Ersteller als „kostenlos“ bezeichnet, aber nicht mit einer echten Lizenz versehen

Titel: Restaurant Free Theme

restaurant theme
Erstellt von: templatemonster
Lizenz: Vom Ersteller als „kostenlos“ bezeichnet, aber nicht mit einer echten Lizenz versehen

Titel: Aries – Free HTML Bootstrap Template

aries theme
Erstellt von: wow themes
Lizenz: Vom Ersteller als „kostenlos“ bezeichnet, aber nicht mit einer echten Lizenz versehen

Titel: Layana – Free HTML Bootstrap Template

layana theme
Erstellt von: wow themes
Lizenz: frei für die persönliche und kommerzielle Nutzung

Titel: Multiverse

multiverse theme
Erstellt von: html5up
Lizenz: Creative Commons.

Titel: Solid State

solid state theme
Erstellt von: html5up
Lizenz: Creative Commons.

Titel: Future Imperfect

blog template
Erstellt von: html5up
Lizenz: Creative Commons.

Titel: Hyperspace

hyperspace theme
Erstellt von: html5up
Lizenz: Creative Commons.

Titel: Eventually

eventually theme
Erstellt von: html5up
Lizenz: Creative Commons.

Titel: Fractal

fractal theme
Erstellt von: html5up
Lizenz: Creative Commons.

Titel: Lens

lens theme
Erstellt von: html5up
Lizenz: Creative Commons.

Titel: Identity

identity theme
Erstellt von: html5up
Lizenz: Creative Commons.

Titel: Spectral

spectral theme
Erstellt von: html5up
Lizenz: Creative Commons.

Titel: Photon

photon theme
Erstellt von: html5up
Lizenz: Creative Commons.

Titel: Run Charity Lite – Free One-Page HTML Bootstrap Template

charity theme
Erstellt von: wowthemes
Lizenz: Vom Ersteller als „kostenlos“ bezeichnet, aber nicht mit einer echten Lizenz versehen

Titel: Quasar – Free One Page HTML Bootstrap Template

quasar theme
Erstellt von: wowthemes
Lizenz: Vom Ersteller als „kostenlos“ bezeichnet, aber nicht mit einer echten Lizenz versehen

Titel: Agency Portfolio Bootstrap 3 Web Template

agency template
Erstellt von: bypeople
Lizenz: frei für die persönliche Nutzung

Titel: Ameliorat: Medical Category Flat Bootstrap Responsive Web Template

medical theme
Erstellt von: w3layouts
Lizenz: Namensnennung 3.0 Deutschland (CC BY 3.0 DE)

Titel: Charion: Charity Category Flat Bootstrap Responsive Web Template

charion theme
Erstellt von: w3layouts
Lizenz: Namensnennung 3.0 Deutschland (CC BY 3.0 DE)

Titel: News Times

new theme
Erstellt von: w3layouts
Lizenz: Namensnennung 3.0 Deutschland (CC BY 3.0 DE)

Titel: Steel Industry

industry theme
Erstellt von: w3layouts
Lizenz: Namensnennung 3.0 Deutschland (CC BY 3.0 DE)

Titel: Tradeaux: Corporate Business Flat Bootstrap Responsive Web Template

dark corporate theme
Erstellt von: w3layouts
Lizenz: Namensnennung 3.0 Deutschland (CC BY 3.0 DE)

Titel: Free PSD+HTML Template – Draco

draco theme
Erstellt von: Afnizar Nur Ghifari
Lizenz: Vom Ersteller als „kostenlos“ bezeichnet, aber nicht mit einer echten Lizenz versehen

Titel: Emrah Demirag: One-page Portfolio Web Bootstrap Template

b&w theme
Erstellt von: w3layouts
Lizenz: Namensnennung 3.0 Deutschland (CC BY 3.0 DE)

Titel: Bootstrap 4 Theme

bootstrap 4 theme
Erstellt von: mobirise
Lizenz: Vom Ersteller als „kostenlos“ bezeichnet, aber nicht mit einer echten Lizenz versehen

Titel: Bootstrap Blog Template

bootstrap blog theme
Erstellt von: mobirise
Lizenz: frei für die persönliche und kommerzielle Nutzung

Titel: Theme with Video Background

mobirise theme
Erstellt von: mobirise
Lizenz: frei für die persönliche und kommerzielle Nutzung

Titel: Theme with a Slider

theme with a slider
Erstellt von: mobirise
Lizenz: frei für die persönliche und kommerzielle Nutzung

Titel: One Page Template

one page template
Erstellt von: mobirise
Lizenz: frei für die persönliche und kommerzielle Nutzung

Titel: Alabanda Business Theme

aristo theme
Erstellt von: aristotheme
Lizenz: frei für die persönliche und kommerzielle Nutzung

Titel: Free PHPStorm Atom Theme 

phpstorm theme 10
Erstellt von: Cam Runcie
Lizenz: Vom Ersteller als „kostenlos“ bezeichnet, aber nicht mit einer echten Lizenz versehen

Titel: Sertin – Free Bootstrap Template Onepage

sertin theme
Erstellt von: Rachid Lajmi
Lizenz: Vom Ersteller als „kostenlos“ bezeichnet, aber nicht mit einer echten Lizenz versehen

Titel: Porte – Minimal Portfolio

minimal portfolio theme
Erstellt von: Laza Themes
Lizenz: Vom Ersteller als „kostenlos“ bezeichnet, aber nicht mit einer echten Lizenz versehen

Titel: Squadfree – Free Bootstrap Template for Creative

creative template
Erstellt von: LAZA THEMES
Lizenz: Vom Ersteller als „kostenlos“ bezeichnet, aber nicht mit einer echten Lizenz versehen

Titel: AKAD – Free PSD & HTML Template

theme for creative agency
Erstellt von: Amine Akhouad
Lizenz: Vom Ersteller als „kostenlos“ bezeichnet, aber nicht mit einer echten Lizenz versehen

Titel: Olonkar – Free eCommerce Bootstrap Template

ecommerce template
Erstellt von: DevItems LLC
Lizenz: Vom Ersteller als „kostenlos“ bezeichnet, aber nicht mit einer echten Lizenz versehen

(dpe)

Kategorien
Inspiration Showcases

Best of 2015: 100+ kostenlose fotorealistische Mockups motzen deine Header und Präsentationen auf

Bei uns Menschen geht es immer um den ersten Eindruck. Wir vertrauen unseren Instinkten. Also warum sollten wir dieses Wissen nicht nutzen, um unsere Ziele zu erreichen? Wenn du ein Produkt verkaufen, oder die Konversionsraten deiner Website erhöhen möchtest, ist es eine gute Idee, sich um deren Aufmachung zu kümmern. Jeder Service und sämtliches digitales Merchandise benötigt ein passendes Umfeld, um die Aufmerksamkeit des Lesers zu gewinnen. Wenn es sich um eine mobile Anwendung handelt, dann brauchst du sicherlich einige realistische iPhone-, sowie andere Smartphone-Mockups. Wenn es um ein WordPress-Theme geht, dann wirken ein paar schicke Fotos mit deinem Theme als MIttelpunkt eines Arbeitsplatzes Wunder.

Best of 2015: 100+ Kostenlose fotorealistische Mockups motzen deine Header und Präsentationen auf

Heute haben wir für dich die besten Mockups aus 2015 zusammengestellt. Darunter finden sich etliche Elemente, die mit Leichtigkeit das i-Tüpfelchen setzen können, wenn es darum geht, Header-Bereiche zu verbessern.

Macbook Pro Mockup

macbook pro
Erstellt von: Mark Finn
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

Mockup iPad Pro Brainstorming

tablet mockup
Erstellt von: Mocup
Lizenz: Privatgebrauch.

The New MacBook Minimalist Vector Mockup

macbook minimalist
Erstellt von: MAX BRUNEL
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

PSD Retro Screen Mockups

retro screen mockups
Erstellt von: designsrazzi
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

Realistic Mockups of Popular Devices

realistic mockups of popular devices
Erstellt von: FACEBOOK DESIGN RESOURCES
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

iPhone 6 Perspective Vector Mockup

iphone perseptcie view
Erstellt von: MIKE CIARLO
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

6 Realistic iPhone 6 Mockups

6 realistic mockups
Erstellt von: DMITRY KURASH
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

Minimalist Chrome Browser Mockup

minimalistic chrome browser
Erstellt von: THEMERAID
Lizenze: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

Floating iPhones PSD

floating iphones
Erstellt von: Joshua Söhn
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

Apple MacBook Mockup PSD

apple mac
Erstellt von: samirbitt
Lizenz: Urhebernennung erforderlich, nicht für kommerzielle Zwecke, außerdem ist das Erstellen von Derivaten nicht erlaubt.

iPhone Perspective App Screen Mockup

perspective screens for app
Erstellt von: zippypixels
Lizenz: Frei für private und kommerzielle Zwecke.

Apple iPhone 6S PSD Mockups

iphone 6s
Erstellt von: zippypixels
Lizenz: Frei für private und kommerzielle Zwecke.

Beautiful Free Perspective Website Mockup

perspective view for wd
Erstellt von: zippypixels
Lizenz: Frei für private und kommerzielle Zwecke.

Free PSD Android Mockups – HTC One M8

htc mockup
Erstellt von: zippypixels
Lizenz: Frei für private und kommerzielle Zwecke.

4 Free Flat Vector Apple Device Mockups

vector devices
Erstellt von: zippypixels
Lizenz: Frei für private und kommerzielle Zwecke.

Free iPhone 6S Mockup with 7 Unique Gestures and 8 Holding Positions

iphone with gestures
Erstellt von: zippypixels
Lizenz: Frei für private und kommerzielle Zwecke.

Macbook Pro Mockups

macbook pro 2
Erstellt von: HeyBundle
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

The Ultimate Mobile Devices Pack

mobile device pack
Erstellt von: Stanislav Hristov
Lizenz: Für private und kommerzielle Zwecke.

MacBook Air PSD Mockup

macbook air
Erstellt von: Konstantin Shcherbina
Lizenz: Für private und kommerzielle Zwecke.

iPhone 6 Mockup

iphone 6 with business look
Erstellt von: Andrej Zitnik
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

Free Black and White Office Mockup

office mockup
Erstellt von: Nikita Zhitenev
Lizenz: Urhebernennung.

10+ T-Shirt Mockups (Free – PSD)

t-shirt mockup
Erstellt von: Wassim
Lizenz: Urhebernennung erforderlich, nicht für kommerzielle Zwecke, außerdem ist das Erstellen von Derivaten nicht erlaubt.

Elegant Vector Kit

vector set
Erstellt von: Nasti Funny
Lizenz: Frei für private und kommerzielle Zwecke.

Mall Ad Mockup

mall ad mockup
Erstellt von: Isoarts
Lizenz: Für private und kommerzielle Zwecke.

Amazing Workspace Mockup

workspace mockup
Erstellt von: Dmitriy Markov
Lizenz: Für private und kommerzielle Zwecke.

5 Signs & Facades

5 mockups
Erstellt von: Vadim Sherbakov
Lizenz: Für private und kommerzielle Zwecke.

Flying iPad Pro Mockup

flying ipad
Erstellt von: Design Lazy
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

LG Android Phone Mockup

lg mobile phone
Erstellt von: Md. Shamsuddin
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

iPhone 6 / Android Mockup

mockup with gestures
Erstellt von: LazyCrazy
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

2 Hip Desktop Mockups

hipster desktops
Erstellt von: Vadim Sherbakov
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

iPhone 6 Vector Mockups

iphone 6 vector
Erstellt von: Dmitry Kovalenko
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

Creative Scene Generator

creative scene generator
Erstellt von: All Design Talk
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

Free Photo Realistic Apple Device Mockups

apple device
Erstellt von: Kaja Swierczynska
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

12+ Free iPhone 6 PSD Mockups

12 mockups
Erstellt von: Tristan Gerrard
Lizenz: Frei für private und kommerzielle Zwecke.

Device Mockups PSD

device mockups
Erstellt von: Shahen Algoo
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

iPad Photo Mockup

ipad mockup
Erstellt von: Creative Studio Form
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

Stationery Device Mockups

stationery device mockups
Erstellt von: Mocup team
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

35 Free Apple Watch PSD Mockups

iwatch template
Erstellt von: Marijana
Lizenz: Frei für jegliche private oder kommerzielle Zwecke.

Android Device Mockups

android device
Erstellt von: Wassim
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

Galaxy S6 Edge

galaxy phone
Erstellt von: Gunno
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

Apple TV Mockup Shots

apple tv
Erstellt von: Jens Kreuter
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

Wallderful: Free Frame Mockups

poster on a wall
Erstellt von: Vadim Sherbakov
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

Iso. Art Scene Generator Free

art scene generator
Erstellt von: Mockup Zone
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

9 Business Cards Mockups

branding mockup
Erstellt von: Tomasz Mazurczak
Lizenz: F+r private und kommerzielle Zwecke.

Apple Watch Mockup (PSD)

iwatch mockup
Erstellt von: Anders Jildén
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

iPhone 6S Free Mockup (4 Colors, 4 Angles of View)

iphone 6s mockups
Erstellt von: Julia Bondarenko
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

3 in 1 Mockup PSD

3 in 1 mockup
Erstellt von: Jameson McMaster
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

iPad Perspective Mockup

ipad perspective mockup
Erstellt von: William Iven
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

Free Apple Devices Perspective Mockup

apple devices perspective
Erstellt von: William Iven
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

Android L / iPhone 6+ Perspective App Mockup

android l perspective view
Erstellt von: Khalid Hasan Zibon
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

Freebies

pack for presentation
Erstellt von: Graphicsoulz
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

Web Page PSD Mockup

web page mockup
Erstellt von: graphberry
Lizenz: Frei für private und kommerzielle Zwecke.

Flying Business Cards Mockup Vol.12

flying b-cards
Erstellt von: graphberry
Lizenz: Frei für private und kommerzielle Zwecke.

Free Samsung Galaxy S6 Mockup

samsung galaxy s
Erstellt von: graphberry
Lizenz: Frei für private und kommerzielle Zwecke.

Free iPad PSD Mockup

ipad template
Erstellt von: graphberry
Lizenz: Frei für priavte und kommerzielle Zwecke.

Business Card Mockup In Binder Clip

b-card in a clip
Erstellt von: graphberry
Lizenz: Frei für private und kommerzielle Zwecke.

Free iPhone & iPad Photo MockUp

retro apple devices
Erstellt von: Ferman Aziz
Lizenz: Urhebernennung erforderlich, nicht für kommerzielle Zwecke, außerdem ist das Erstellen von Derivaten nicht erlaubt.

Perspective Mockup – 100% Free

perspective web mockup
Erstellt von: Sayed A
Lizenz: Nutze es wo immer du möchtest ohne jegliche Einschränkungen.

Free Mockup Bundle

bundle mockup
Erstellt von: Nishanth kunder
Lizenz: Urhebernennung erforderlich, nicht für kommerzielle Zwecke, außerdem ist das Erstellen von Derivaten nicht erlaubt.

Free High-Quality Poster Mockup PSD File

poster mockup
Erstellt von: Zee Que
Lizenz: Urhebernennung erforderlich, nicht für kommerzielle Zwecke, außerdem ist das Erstellen von Derivaten nicht erlaubt.

Free iPad Mini Mockup Valentine

ipad on a wood
Erstellt von: mockupdeals
Lizenz: Spezielle Lizenz-Einigung.

Free iPhone 6 Mockup Food

food iphone
Erstellt von: mockupdeals
Lizenz: Spezielle Lizenz-Einigung.

Devices

collection of devices
Erstellt von: Dean Hudson
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

Diverse Device Hands

iphone in a hand
Erstellt von: Facebook
Lizenz: Frei für private und kommerzielle Zwecke.

Devices

blue devices
Erstellt von: Tim Parker
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

Flat Mobile Devices

flat mobile devices
Erstellt von: Bas Dobbelaer
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

LG Nexus 5 in Sketch

nexus 5
Erstellt von: Abinash Mohanty
Lizenz: Frei für private und kommerzielle Zwecke.

Yotaphone 2 White PSD

yotaphone mockup
Erstellt von: Chaotic
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

Free Version of Fancy Items Scene Generator

fancy scnee generator
Erstellt von: Ruslan Latypov
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

Wooden Unusual Mockups

wooden mockup
Erstellt von: Ruslan Latypov
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

Header Image Design

header image
Erstellt von: Ali Sayed
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

Apple Devices Mockup Presentation

apple devices presentation
Erstellt von: Roberts Ozolins
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

Free Apple Watch Mockup

apple watch device
Erstellt von: Tomas Jasovsky
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

Day 029 — Clock

dark clock
Erstellt von: Hezy
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

PSD from 360 Apple Watch Mockups

dark iwatch
Erstellt von: 360 Mockups
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

Apple Watch Free Vector (Illustrator)

silver apple watch
Erstellt von: Gavin Simpson
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

Free PSD iWatch Template

iwatch close-up
Erstellt von: Ana Rebeca Perez
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

Apple Watch Flat Mockup

apple watch vectorErstellt von: Epic Pxls
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

Flat Chrome Browser Free

flat chrome browser
Erstellt von: Manos Hatzidakis
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

Flat Browser PSD

flat browser
Erstellt von: Youri Klijn
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

Wide Screen Browser Mockup

wide screen browser
Erstellt von: Khalid Hasan Zibon
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

Chrome Browser Freebies PSD

chrome browser
Erstellt von: Wassim
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

Safari Toolbar For OS X El Capitan (Sketch Template)

safari tollbar
Erstellt von: Manny Larios
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

Browser Flat Kit Photoshop & Sketch Template

browser kit
Erstellt von: MENO
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

7 Free Web & Mobile Browser Mockups

7 vector browsers
Erstellt von: ZippyPixels
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

Free Stationery Mockup Scene Generator

stationery generator
Erstellt von: zippypixels
Lizenz: Frei für private und kommerzielle Zwecke.

8 Free Urban iPhone Mockups

8 urban mockups
Erstellt von: COBE
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

Photo Frames on the Shelf

phot frames
Erstellt von: GraphicsFuel (Rafi)
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

9 Free Apple Watch Mockup

9 iwatch templates
Erstellt von: Selina Wu
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

Lenovo P90 Mock-up

lenovo 90
Erstellt von: Barin Cristian
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

App Screens Mockup

app mockups
Erstellt von: Rafi
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

Sony Xperia Z5 Mockup

sony experia
Erstellt von: Barin Cristian
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

Nexus 5x Free PSD

nexus 5x
Erstellt von: Tyler Gough
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

LG G3 Nature Mockup

lg g3
Erstellt von: Barin Cristian
Lizenz: Lizenz ist in einem Zip-Paket enthalten.

Apple Devices Mockup PSD

4 devices
Erstellt von: Rafi
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

Photo Frame Mockup

photo frames
Erstellt von: Kaja Swierczynska
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

Macbook Air PSD Mockups

macbook workspace
Erstellt von: Rafi
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

Free Macbook Workspace Mockup

workspace mockup 2
Erstellt von: Bruno Marinho
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

Free Nexus 5X mockups

nexus 5x mockup

Erstellt von: Gabe Will
Lizenz: Frei für private und kommerzielle Zwecke.

9 Free PSD Responsive Browser Mockups

browser mockup
Erstellt von: designsrazzi
Lizenz: Als kostenlos ausgewiesen, keine dedizierte Lizenz angegeben.

(dpe)

Kategorien
Design Icons & Fonts Inspiration Showcases

TheHungryJPEG: Ungewöhnliche und anspruchsvolle Schriften für wenig Geld

Schriften spielen für Grafik- und Webdesigner eine wichtige Rolle. Neben klassischen Schriften und den großen Foundrys wie Monotype, Adobe und FontFont gibt es aber auch zahlreiche kleine Anbieter und viele hochwertige Schriften, die es für wenig Geld gibt. Einer dieser kleineren Anbieter ist das relativ neue TheHungryJPEG gibt. Zwischen einem und 65 Dollar zahlst du hier für komplette Schriftfamilien.

Ungewöhnliche und anspruchsvolle Schriften für wenig Geld

TheHungryJPEG bietet Designern die Möglichkeit, dort neben Schriften auch Themes, Templates, Fotos und Grafiken zu verkaufen. Hier können also Schriftgestalter, die nicht bei einem der großen Foundrys unter Vertrag sind, ihre Schriften anbieten. Auch wenn einige Schriftenfamilien für über 100 Dollar verkauft werden, ist der Großteil für deutlich weniger Geld zu haben. Eine Auswahl besonderer Fonts, die sich für plakative, dekorative und Fließtexte eignen, soll dir einen Eindruck des Angebotes aus den über 900 Typefaces geben, die bei TheHungryJPEG zu finden sind.

Dekorative und handgeschriebene Schriften

Ob mit feiner Feder gezeichnet oder mit fettem Pinsel gemalt – handgeschriebene Schriften werden immer gerne eingesetzt. Gut ausgebaute Schreib- und Handschriften haben oft alternative Zeichen und zusätzliche Ornamente. So entstehen eindrucksvolle und individuelle Überschriften.

Die „Maestro“ ist eine sehr verspielte Pinselschrift mit sehr unterschiedlicher Strichstärke und gewollt ungleichmäßiger Linienführung. Die Schrift gibt es für 13 Dollar. Sie enthält einen zusätzlichen Schnitt mit schwungvollen Linien und Ornamenten zur Verzierung. Die Schrift ist als OpenType sowie Webschrift vorhanden.

thehungryjpeg_maestro
„Maestro“

Wer es eher kalligraphischer mag, sollte sich die „Amelia“ ansehen. Sie besticht durch feine und schwungvolle Linien und besitzt zahlreiche zusätzliche Schwünge, die am Anfang oder Ende eines Wortes für das besondere Flair sorgen. Diese Schwünge sind nicht als eigener Schnitt vorhanden, sondern als alternative Zeichen, die per OpenType-Features angewendet werden.

Neben der „Fine Version“ gibt es die „Amelia“ als „Draft Version“, bei der die Linien nicht ganz so filigran gezeichnet sind. Die Schriften sind für 16 beziehungsweise 18 Dollar zu haben und enthalten sowohl OpenType- als auch Webschriften. Jede der beiden Schriften besitzt über 1.400 Zeichen.

thehungryjpeg_amelia
„Amelia“

Handgeschrieben, aber alles andere als kalligraphisch ist die „Immogen Agnes“. Die Schrift erinnert an ausdrucksstarke Unterschriften mit ausladenden Großbuchstaben und ist bestens geeignet, um Namen mit besonderer Note eindrucksvoll darzustellen. Die Schrift kostet 16 Dollar und ist nur als OpenType- und TrueType-Schrift vorhanden.

thehungryjpeg_imogen-agnes
„Immogen Agnes“

Plakative und auffällige Schriften

Wenn es mal alles andere als dezent sein soll, muss es häufig mehr sein, als eine massive Schrift in auffälliger Farbe zu setzen. Die „Vidiz Pro Typeface“ ist eine sehr serifenbetonte Schrift, die dank verspielter Schwünge gleichzeitig etwas filigranes mitbringt, wodurch die Schrift an sich schon sehr auffällt.

Dank zahlreicher Ligaturen und Alternativzeichen ergeben sich sehr individuelle Schriftbilder. Die Schrift ist als OpenType-, TrueType- und Webschrift vorhanden und kostet 14 Dollar.

thehungryjpeg_vidiz-pro-typeface
„Vidiz Pro Typeface“

Ebenfalls speziell für Überschriften und plakative Texte gedacht, ist die „Stampbor Typeface“, die ausschließlich Versalien besitzt. Dafür sind vier Schnitte enthalten, welche die Schrift unterschiedlich darstellen. Neben „Clean“ und „Rounded“ mit abgerundeten Ecken gibt es den Schnitt „Grunge“, der für einen Stempeleffekt sorgt. Außerdem gibt es den Schnitt „Lines“, bei der die Flächen liniert statt flächig ausgefüllt sind, sowie „Dotted“ mit gepunkteter Füllung.

Die komplette Familie als OpenType- und Webfont gibt es für 14 Dollar.

thehungryjpeg_stampbor-typeface
„Stampbor Typeface“

Ebenfalls nur aus Versalien besteht die Schrift „Sovereign Typeface“. Die massiven Buchstaben eignen sich prima für plakative und klare Überschriften. Die abgerundeten Ecken der Schrift federn die Massivität der Buchstaben etwas ab und sorgen für ein nicht allzu hartes Schriftbild.

Die Schrift gibt es als OpenType- und TrueType-Schrift. Sie ist für 10 Dollar zu haben.

thehungryjpeg_sovereign-typeface
„Sovereign Typeface“

Hochwertige Schriften für Fließtexte

Die bisher vorgestellten Schriften sind wenn, dann nur bedingt für Fließtexte zu gebrauchen. Aber auch hierfür hat TheHungryJPEG Einiges zu bieten, zum Beispiel die „Quincy CF font family“.

Diese Schrift ist eine klassische Serifenschrift. Sie besitzt Ligaturen, unterstützt neben dem lateinischen auch das kyrillische Alphabet und ist in zehn Schnitten vorrätig – fünf verschiedene Stärken mit je einer passenden Kursiven dabei. Die komplette Schrift, die als OpenType- und TrueType-Schrift vorhanden ist, gibt es für 15 Dollar.

thehungryjpeg_quincy-cf-font-family
„Quincy CF font family“

Wesentlich moderner ist die „Albory Sans-Serif“, die ebenfalls das lateinische und kyrillische Alphabet unterstützt. Die Schrift gibt es als OpenType- und Webschrift und kostet 10 Dollar.

Dafür erhältst du drei Schnitte – einen regulären Schnitt, sowie einen „Light“- und „Thin“-Schnitt.

thehungryjpeg_albory-sans-serif
„Albory Sans-Serif“

Ebenfalls serifenlos ist die dritte Schrift im Bunde der Fließtextschriften. Die „Pontiac“ ist eine geometrische Serifenlose, die an die „Akzidenz Grotesk“ erinnert, aber wesentlich moderner ist. Insgesamt sind acht Schnitte vorhanden – von „Light“ bis „Black“ mit je passendem Kursivschnitt.

Die Schrift ist nur als OpenType-Schrift vorhanden und kostet 39 Dollar für alle Schnitte zusammen.

thehungryjpeg_pontiac
„Pontiac“

Stilvolle Vintage-Schriften

Vintage-Stil wird immer wieder gern verwendet. So gibt es bei TheHungyJpeg mit der „West End“ eine sehr verschnörkelte Schrift, wie man sie zu Beginn des 20. Jahrhunderts kannte. Die Schrift steht in drei Schnitten bereit: einfach, mit Dekor sowie mit Dekor und Schatten.

Zusätzlich gibt es die dezentere „Stout Roughen“ als Bonus dazu. Beide Schriften lassen sich gut miteinander kombinieren. Die Schriften sind als OpenType vorhanden und kosten zusammen 15 Dollar.

thehungryjpeg_west-end
„West End“

Die „Celestial Vintage“ geht noch einmal 100 Jahre weiter zurück in der Geschichte – und zwar in die viktorianische Zeit und die dort entstandenen Schriften. Die Schrift ist sehr verspielt und eignet sich ebenfalls für schicke Vintage-Designs.

Für 15 Dollar gibt es die Schrift als OpenType- und TrueType-Format.

thehungryjpeg_celestial-vintage
„Celestial Vintage“

Als letzte Schrift sei noch die „Absinthe label typeface“ erwähnt. In Anlehnung an das verbotene Getränk ist diese floral wirkende Schrift entstanden. Es sind sechs Schnitte vorhanden, die sich übereinander legen lassen, um Schatten und einen zusätzlichen Schein in verschiedenen Farben darstellen zu können.

Die komplette Familie ist als OpenType- und Webschrift vorhanden und kostet 15 Dollar.

thehungryjpeg_absinthe-label-typeface
„Absinthe label typeface“

Die hier vorgestellten Schriften stellen nur einen kleinen Ausschnitt dessen dar, was TheHungryJPEG zu bieten hat. Es lohnt sich auf jeden Fall, durch die Seiten zu stöbern, neues zu entdecken und auch das ein oder andere Angebot mitzunehmen.

Ähnlich ausgesprochener Schnäppchenplattformen bietet TheHungyJPEG ebenfalls Deals mit massivem Sparpotenzial an. Beispielhaft sei auf den Deal des Monats März hingewiesen, der sich vor seinen Wettbewerbern aus dem Schnäppchenlager nicht zu verstecken braucht.

(pot/dpe)

Kategorien
Inspiration Showcases

15 Best Practices für das Marketing mobiler Apps

Design in Zeiten mobiler Geräte ist schwieriger geworden. Kleine Bildschirme verlangen eine intelligente und kompakte Anordnung mit einer optimalen Balance zwischen Text und Medien. Das gilt umso mehr, wenn es darum geht, für Produkte zu werben. Der Ansatz des Mobile First geht davon aus, dass Apps, die mit dem Fokus auf Smartphones und Tablets erstellt wurde, auf verschiedensten Plattformen und Bildschirmen gut aussehen und funktional zu überzeugen wissen. Apps müssen natürlich aus der unüberschaubaren Masse, die die App Stores bevölkert, hervorstechen. Dafür sind am besten eigene Präsentations-Websites geeignet. Um deine Fantasie diesbezüglich etwas anzuregen, wirfst du am besten einen Blick auf unsere heutige Sammlung exzellenter Beispiele für das App-Marketing per Website. Viel Spaß dabei.

15 Best Practices für das Marketing mobiler Apps

Mylo

Mylos Landing Page strahlt ein Bild von Eleganz und Modernität aus. Durch helle Farbgebung und viel Whitespace kann man schnell die Prioritäten erkennen. Daher sind CTA-Buttons und aufmerksam animierte Gifs einer App-Routine, eingerahmt von einer stilvollen, hochrealistischen weißen iPhone-Attrappe, natürliche Blickfänger.

1-Mylo

Moovris

Das erste, was ins Auge fällt, ist ein Mobilgerät mit einem integrierten, dynamischen Walkthrough. Durch die lebendige, schöne Farbgebung und das Flat Design verstärkt die Startseite die Markenidentität und bietet ein raffiniertes, komplexes Erscheinungsbild.

2-Moovris

Coop

Coop hat sich für einen professionell gestalteten Cartoon-Stil entschieden. Jeder Teil dieses parallax-basierten Projektes beinhaltet fantastische Illustrationen und wird durch skizzenhafte Objekte und handgeschriebene Typografie ergänzt.

3-Coop

Smarpshare

Smarpshare versucht, seinen Slogan ‚Marken vermenschlichen‘ mit einem cleveren Foto im Hintergrund, einer geschäftsmäßigen Atmosphäre und einem starken, menschlichen Touch zu unterstützen. Flat Style und mäßige Farbgebung, unaufdringliche Typografie und ein Gefühl von Freiheit unterstützen diese Zielsetzung recht gut.

4-Smarpshare

Smart Codes

Smart Codes ist keine App, sondern ein professionelles Team, das sich mit solchen Themen gut auskennt. Trotzdem ist ihre Website in bester Tradition mobiler App-Landing-Pages gestaltet. Das unterstützt die Markenidentität und vermittelt sofort ein Gefühl von Sachverstand.

5-Smart Codes

DeeMe

DeeMe hat eine herrliche, urbane Stimmung erschaffen und diese mit einem gewissen Retro-Gefühl versehen. Pastellfarben, Typografie mit einem Grunge-Touch, flache Grafiken, modernes Layout, aufgeräumtes Aussehen und eine fröhliche Stimmung heben diese Landing Page von anderen ab.

6-DeeMe

Urban Walks

Urban Walks sieht einfach großartig und aufsehenerregend aus. Hier wurde das urbane Gefühl durch schöne Illustrationen, die subtile, ultraschmale Schrift, die einen besonderen Charme versprüht, und schicke Grafiken realisiert. Animierte Walkthroughs, die immer wieder auf der Seite auftauchen, vermitteln die Idee hinter der App und machen sie so zugänglicher für alltägliche Nutzer.

7-Urban Walks

BrainUp

BrainUp begeistert mit seinem hellen, fast schon heißen Farbschema, in welchem sattes Gelb den Ton angibt. Die dunkle Oberfläche einer App, die von einem realistischen iPhone-Modell umschlossen ist, ist ein Blickfang und zieht auf natürliche Weise die Aufmerksamkeit auf sich. Außerdem ist jeder Aspekt belebt durch moderne Ladeanimationen die stark zur visuellen Erfahrung beitragen.

9-BrainUp

Hype

Hype verwendet ein bewährtes horizontales Streifenlayout, welches ziemlich geschickt alle Daten aufhübscht, die dem Nutzer präsentiert werden sollen. Es gibt im Grunde hier nichts besonderes oder innovatives: simples, mäßiges Farbschema, saubere Hintergründe, flache Grafiken und gewöhnliche Schrift. Trotzdem ist es die Atmospäre, die deine Aufmerksamkeit verdient.

10-Hype

JibJab Messages

JibJab Messages zielt darauf, etwas Spaß in deine Nachrichten zu bringen, weshalb es keine Überraschung ist, dass die Werbe-Website versucht, eine positive und fröhliche Stimmung zu verbreiten. Einige lustige Zeichnungen und kursive Schrift frischen die Optik auf.

11-JibJab Messages

Zazn Meditation

Zazn Meditation zielt auf Einfachheit. Deshalb setzt die Website auf Whitespace, um ein offenes, geräumiges, nicht einengendes und präsentes Klima zu erzeugen.

12-Zazn Meditation

Tasty Club

Tasty Club verlässt sich auf eine harmonische Symbiose zwischen einem Bildhintegrund für die Kopfzeile und einem komplett illustrierten Design für den Rest der Seite.

13-Tasty Club

Duo

Die Nutzung von komplett illustrierten Layouts mit künstlerischem Charisma ist eine beliebte Herangehensweise, die Duo offensichtlich beherrscht. Die Startseite besteht aus vier Bereichen, von denen jeder helle Flat-Style-Zeichnungen zur Schau stellt. Sie präsentieren die Informationen perfekt und leiten die Aufmerksamkeit unauffällig auf Schlüsselaspekte.

14-Duo

Trippeo

Ähnlich dem vorherigen Beispiel, verlässt sich auch Trippeo stark auf eine Wirkung, die durch lebendige Illustrationen erreicht wird. Diese geben der Seite eine freundliche Atmosphäre, welche nötig ist, um eine gute Beziehung zu Online-Besuchern zu erzeugen. Subtile Bewegung findet sich in fast jedem Bereich und fügt Schwung und Dynamik hinzu.

15-Trippeo

03 July

03 July folgt aktuellen Trends in verschiedenen Aspekten. Die Startseite ist responsiv und präsentiert sich mit mutiger Farbgebung. Dekorative Elemente im Retro-Stil, geniale Typografie und kleine Animationen verleihen der Website einen Hauch von Bewegung.

16-03 July

FeltApp

FeltApp demonstriert, wie man große Mengen Bilder vernünftig präsentiert, ohne die Nutzer zu überfordern. Die Seite sieht aufgeräumt, geräumig und schick aus. Konturenreiche Grafiken und eine großzügige Menge Whitespace machen ihren Job, den Nutzern gute Lesbarkeit und eine exzellente Nutzererfahrung zu vermitteln, sehr gut.

17-FeltApp

TVSmiles

TVSmiles ist ein großartiges Beispiel für ein dunkles Design, das auf natürliche Weise Schlüsselelemente hervorhebt und Interesse weckt. Es bietet einen hohen Kontrast zwischen Hinter- und Vordergrund, wodurch die eigentlichen Inhalte deutlich fokussiert werden.

18-TVSmiles

Noizio

Noizio sieht komplex und stilvoll aus und bringt eine Menge frischen Wind ins Geschäft. Der elegante Farbverlauf betont einige Elemente und Teile des Designs und bringt so Abwechslung in das schlichte Aussehen der Website. Jeder Inhaltsblock ist auffällig und deutlich abgehoben, damit die Seite schnell gelesen werden kann.

19-Noizio

Cutest Paw

Cutest Paw ist eine Multimedia-App. Die Website glänze mit vielen Screenshots und halbrealistischen Geräteattrappen, nützlichen Informationen, Beschreibungen und CTA-Buttons.

20-Cutest Paw

Fazit

Eine Landing Page sollte prägnant und generell so kurz wie möglich sein, um deine zukünftigen Produkte ins bestmögliche Licht zu rücken. Weniger ist mehr, egal ob du ein Spiel oder eine Wettervorhersage-App bewerben möchtest. Lebhafte Screenshots und Walkthroughs bereichern die Erfahrung, vermitteln eine Idee besser und bringen den Nutzer näher an das Produkt. Du hast weniger Arbeit, weil du dich auf die zentralen Aspekte konzentrierst und die Besucher gewinnen schneller einen Eindruck. Win-Win.

(dpe)

Kategorien
Inspiration Showcases Webdesign

Design: 46 coole Blog-Header zu deiner Inspiration

Viele Menschen vertreten die Meinung, dass es nicht so wichtig sei, welches Design der eigene Blog hat. Man besorgt sich ein kostenloses Theme, installiert es und fertig. Denn schließlich geht es ja um den Inhalt – Content is King. Das höchste der Gefühle ist noch ein eigenes Logo. Doch ganz so einfach sollten wir es uns nicht machen. Denn das Design eines Blogs ist nicht unwichtig. Es geht um den Wiedererkennungseffekt, um eine eigene Identität. Jeder halbwegs professionell geführte Blog sollte daher ein individuelles, unverwechselbares Design besitzen.

Design: 46 coole Blog-Header zu deiner Inspiration

Natürlich könnte man jetzt auf die Idee kommen, ein professionell erstelltes Premium-Theme zu kaufen. Sicher, das ist oftmals eine gute Grundlage, auf der aufgebaut werden kann. Und wenn du eher weniger Erfahrung in der Entwicklung tauglicher Designs hast,  solltest du das auch tun. Schaffe dir auf jeden Fall ein unverwechselbares Blog-Layout – so oder so. Entwerfe ein richtig cooles Logo und habe den Mut, etwas anders zu machen als die Masse. Dann erinnern sich deine Besucher nicht nur an dich, weil du richtig gute Inhalte schreibst, sondern weil du einen insgesamt unverwechselbaren Blog besitzt. Um es dir etwas leichter zu machen, haben wir hier zu deiner Inspiration 46 coole Blog-Header-Designs. Los gehts:

1 – I Love Typography

ilovetypography

2 – Beauty is Boring

Beauty-Boring

3 – My Baking Addiction

My-Baking-Addiction

4 – 24 Ways

24-ways

5 – Book Cover Archive

Book-Cover-Archive

6 – The Car Crush

The-Car-Crush

7 – The Chronicles of Her

TCOH

8 – Decor 8

decor8

9 – Deaf Pigeon

Deaf-Pigeon

10 – The Local Palate

The-Local-Palate

11 – The Rivet Press

The-Rivet-Press

12 – The Thirsty Wench

The-Thirsty-Wench

13 – Vintage Revivals

Vintage-Revivals

14 – This Is Glamorous

This-Is-Glamorous

15 – Between Red & Toe

Between-Red & Toe

16 – Storyboard

Storyboard

17 – Designtripper

Designtripper

18 – Little Green Notebook

Little-Green-Notebook

19 – Panic Blog

Panic-Blog

20 – Nice

Nice

21 – Maiedae

Maiedae

22 – Mine Is Yours

Mine is Yours

23 – La Dolce Vita Blog

La-Dolce-Vita-Blog

24 – Interior Design Lauren Liess

Interior-Design-Lauren-Liess

25 – Lust for Life

Lust-for-Life

26 – Harper and Harley

Harper-and-Harley

27 – Homey Oh My

Homey-Oh-My

28 – Defringe

Defringe

29 – Floret Flowers

Floret-Flowers

30 – Good Design

Good-Design

31 – Freunde von Freunden

Freunde-von-Freunden

32 – Friends of Type

Friends-of-Type

33 – Five O Clock Cocktail Blog

Five-O-Clock-Cocktail-Blog

34 – GOODMOODS

GOODMOODS

35 – Keiko-Lynn

Keiko-Lynn

36 – Lark & Linen

lark-linen

37 – i am a food blog

i-am-a-food-blog

38 – Joy the Baker

Joy-the-Baker

39 – One Hungry Mama

One-Hungry-Mama

40 – PremiumPixels

Premium Pixels

41 – The Socialite Family

The-Socialite-Family

42 – The Wanderlust Project

The-Wanderlust-Project

43 – VOTD.tv

VOTD

44 – Trent Walton

Trent-Walton

45 – 52 Weeks of UX

52-Weeks-of-UX

46 – The Everywhereist

The-Everywhereist

Kategorien
Inspiration Showcases Webdesign

Total nervig oder inspirierend? Sound im modernen Webdesign (Best Practice)

Musikalische Hintergrund-Beschallung im Webdesign ist ja total out, könnte man meinen. Eigentlich glaubten wir Webdesigner und Entwickler, diese anachronistische Art des »Erheischens von Aufmerksamkeit« schon seit den Anfangstagen des standardgerechten Webdesigns hinter uns gelassen zu haben. Doch weit gefehlt. Denn Sound, in Form von Effekten oder musikalischer Unterstreichungen der einzelnen Bereiche einer Website, kommt so langsam wieder in Mode. Grund genug für uns, diesem Trend einmal auf den Zahn zu fühlen.

Total nervig oder inspirierend? Sound im modernen Webdesign (Best Practice)

Toneffekte im modernen Webdesign – einfach nur total nervend?

Wer kennt das nicht? Da besucht man nichts ahnend eine Website und diese macht mit einem laut eingespielten Hintergrundsound auf sich aufmerksam. Zudem fehlt zumeist auch noch das Bedienelement, um die Beschallung schnell abschalten zu können. Die Reaktion der meisten Besucher ist ganz klar: mit einem kurzen Klick wird der betreffende Tab des Browsers geschlossen. Es wird einfach auf den Besuch einer Website verzichtet, die aber vielleicht genau die Informationen birgt, die man dringend suchte. Und all das nur, weil das Konzept der Website nicht stimmte.

Vielleicht hat sich der Webentwickler bei der Erstellung der Website zu sehr vom Kunden hereinreden lassen und konnte sich nicht durchsetzen. Wie auch immer, das Ergebnis bleibt dasselbe. Potenzielle Besucher, vielleicht gar Kunden, verschwinden von der Website, weil sie total genervt von der musikalischen Untermalung sind. Oftmals erhält man den Eindruck, dass die Musik nicht als Untermalung – als Unterstützung – des visuellen Bereichs der Website dient, sondern eher als Selbstzweck technikverliebter Nerds angesehen wird. Das wird verständlicherweise kein Besucher honorieren. Daher drängt sich die Frage auf, ob es nicht auch anders geht.

Multimediales Webdesign – die Herausforderung für die Zukunft

Der Trend geht eindeutig in Richtung des multimedialen Webdesigns. Alles fing mit den sogenannten Hero-Bildern an, die vollflächig den Sichtbereich des Browsers ausfüllen. Vielen Entwicklern war dies jedoch zu statisch und ebenfalls zu Oldschool, denn mit vollflächigen Hintergrundbildern arbeitete man schon recht lange. Der einzige Unterschied zu den Hero-Bildern war nur die Füllung des gesamten Bildschirms, statt des sichtbaren Bereichs (Viewport).

Der neueste Trend geht daher zum Einsatz von Hintergrundvideos anstatt der Hero-Bilder. Denn gut gemachte Websites mit Hintergrundvideos brauchen wesentlich weniger Text, um ihre Nachricht zum Nutzer zu transportieren. So ist es nur logisch, dass es mittlerweile nicht nur Dienste für frei zu verwendende Fotos gibt, sondern ebenfalls solche für Hintergrundvideos.

Soundeffekte und Hintergrundmusik als perfekte Unterstützung multimedialen Webdesigns

Gut und sparsam eingesetzte Soundeffekte und sogar Hintergrundmusik könnten eine perfekte Unterstützung für das moderne Webdesign sein. Die Arbeit mit unterstützenden Hintergrundvideos wäre dabei nur der erste Schritt. Mehr und mehr werden die Entwickler weitere multimediale Elemente in ihre Websites integrieren wollen.

Die Integration von Soundeffekten – eine logische Weiterentwicklung

Hier bieten sich interessant gemachte und sparsam verwendete Soundeffekte geradezu an. Dem Nutzer einer Website kann über einen Soundeffekt deutlich gemacht werden, dass eine Interaktion mit der Website funktioniert hat. Der Klick auf einen Call-to-Action-Button oder das Absenden eines Formulars kann so akustisch einen Erfolg oder Misserfolg vermitteln.

Neuland wird durch diese akustischen Untermalungen natürlich nicht betreten. Computer-Betriebssysteme und Spiele nutzen diese Effekte schon lange und mit Erfolg. Was wäre das Leeren des Papierkorbs unter Windows und OS X ohne den berühmten und passenden Sound zu dieser Tätigkeit? Was wären Spiele, wie das berühmte Moorhuhn, ohne Soundeffekte? Viel können wir Entwickler von den Erschaffern der Betriebssysteme und Spiele lernen. Man kann sich durchaus daran orientieren und darauf aufbauen. Die von dir gestalteten Websites können dadurch nur gewinnen.

Nicht übertreiben. Soundeffekte sind kein Selbstzweck

Gerade Websites, die Geld verdienen müssen, wie zum Beispiel Online-Shops, können profitieren. Doch auch Unternehmens-Websites mit klaren Call-to-Action-Bereichen wären ein guter Bereich zur Integration von Soundeffekten. Bei aller Coolness neuer Funktionen, ist immer zu beachten, dass man sie sparsam einsetzen sollte.

Ein perfektes Beispiel für interessante Toneffekte. Victoria Nine Webdesign und Entwicklung.
Victoria Nine Website

Sound im Webdesign kann durchaus sehr inspirierend sein

Eine Hintergrundmusik einzusetzen, ist durchaus kein leichtes Unterfangen. Natürlich geht die Implementierung recht schnell und einfach. Doch passen will die musikalische Untermalung nicht immer. Daher sollte man gut überlegen, auf welchen Websites – oder auf welcher Art von Websites – eine Hintergrundmusik eine Bereicherung darstellen kann. Da gibt es durchaus viele gute Beispiele, wo es absolut passend wäre. Die Website der Stadt New York könnte zum Beispiel leise Frank Sinatras „New York, New York“ abspielen – was natürlich Geschmackssache ist und der Klärung der Lizenzen bedürfte.

Die Website des HSV wäre etwa prädestiniert für Lotto King Karls „Hamburg, meine Perle“. Auf diese Weise finden sich sicherlich viele Beispiel-Websites, für die eine passende Hintergrundmusik eine Bereicherung darstellen könnte.

Musik muss eine Aussage darstellen und sich schnell abschalten lassen

Eine Hintergrundmusik sollte stets eine Aussage darstellen oder eine solche unterstreichen. Dann dürfte sie höchstwahrscheinlich nicht mehr als nervend wahrgenommen werden, sondern als inspirierende Bereicherung. Denn dann dient sie einem bestimmten Zweck. Natürlich wird nicht jeder Besucher der Website diesen Zweck sehen und vor allem hören wollen. Um keine Besucher zu verlieren, muss in einem sofort sichtbaren und auffallenden Bereich der Website ein Ton-Kontroll-Button untergebracht sein, mit dem der Besucher die Website stumm schalten kann.

Das gut sichtbar integrierte Kontrollelement für den Ton.
Die Kontrollelemente für den Ton der Website

Denn es werden etliche Besucher die betreffende Website lieber stumm und tonlos anschauen wollen, oder, je nach Lokation des Besuchers, auch müssen. Unterstützende Soundeffekte beim Klick auf einen Button oder einer ähnlichen Situation jedoch sollten dann erhalten bleiben, denn sie können durchaus einer erhöhten Benutzerfreundlichkeit dienen.

Die folgenden Websites dürfen als gute Beispiele gelungener Medienintegration dienen. Viel Spaß beim Entdecken!

14 Beispiele guter Websites mit Sound

1 – Google Ideas

Google-Ideas

2 – Amy Movie

Amy Movie

3 – John Iacoviello

MY-STATIC-SELF

4 – Fornasetti

Fornasetti

5 – Calvin Harris

Calvin Harris

6 – Hashima Island

Hashima-Island-A-Forgotten-World

7 – The Build Film

The Build Film

8 – Jakob de Boer

Jakob de Boer

9 – Janis Breslin

Janis Breslin

10 – Brightley Preflight Nerves

Preflight Nerves from We are Brightley

11 – Conoce Valencia de una forma diferente

Conoce Valencia

12 – Black Negative by Ralph Lauren

Black Negative by Ralph Lauren

13 – Jam mit Chrome

JAM mit Chrome

14 – Dubfire

Dubfire Official Website

Kategorien
Inspiration Showcases

Weihnachtsstimmung 2015: 20+ festliche Websites

Bist du schon in Weihnachtsstimmung? Noch nicht? Dann haben wir hier über zwanzig coole Websites, die dich von deiner Alltagsroutine wegziehen werden. Das Internet versteckt eine Menge interessanter Dinge. Um dich, wie im schon im letzten Jahr, in die richtige Stimmung zu versetzen, wollen wir dich unterhalten, dir einige interessante Dienste anbieten und sogar dein Wissen erweitern. Wir hoffen, das die folgenden Projekte fröhliche Atmosphäre verbreiten und deinen Tag mit positiven Emotionen füllen können.

Weihnachtsstimmung 2015

Übrigens, diese Artikel aus dem letzten Jahr sind immer noch einen Blick wert:

Nun entspann dich und blättere durch unsere festliche Zusammenstellung.

Das beste Weihnachtsspielzeug

1-The Best Christmas Toys

Diese Website ist ein toller nostalgischer Ausflug. Sie begleitet dich sanft durch die Vergangenheit, die mit wundervollen Illustrationen und subtilen Bewegungen zum Leben erweckt wurde. „The Best Christmas Toys“ deckt die letzten 35 Jahre ab und stellt das beliebteste Spielzeug dieser Jahre vor.

Christmas Express von Milka

2-Christmas Express by Milka

Die Seite möchte dich dazu bringen, einen fröhlichen Brief zu schreiben und diesen an die zu schicken, die dir am Herzen liegen. Das Projekt bietet spektakuläre Winterumgebungen in den Milka-Markenfarben. Entspannte, heitere und fröhliche Stimmung dominiert hier.

GangstaClaus

3-GangstaClaus

Dieses Team hat das Online-Publikum schon mit drei großartigen Projekten gesegnet: ‚Santa or Scrooge‘ in 2013, ‚Chittin Santa!‘ in 2014 und dieses Jahr mit ‚GangstaClaus‘. Dabei handelt es sich um ein kleines, aber fesselndes 8-bit Browser-Spiel mit einer Hardrock-Atmosphäre und einer Bestenliste, die immer auf dem neusten Stand ist.

Weihnachten mit Freude

4-Christmas with Joy

Diese Seite erlaubt dir, eine beliebte volkstümliche Person zu wählen, die deinen Freunden Weihnachtsgrüße sendet. Das Team hat einige Weihnachtshelden aus verschiedenen Ländern nominiert: Pere Noel aus Frankreich, das deutsche Christkind, La Befana aus Italien und ein paar andere, die ich nicht kannt ;-)

Ist Weihnachten abgesagt?

5-Is Christmas Cancelled

Die Website lockt Besucher mit einer hübschen, eine Geschichte erzählenden Erfahrung. Sie wird per Scrolling gesteuert und verbindet auf diese Weise viele zusammenhängende Illustrationen, die die Stimmung des bevorstehenden Ereignisses wecken sollen.

Der Weihnachtsunterstützer

6-The Christmas Endorser

Dieser Service soll dein LinkedIn-Profil so verbessern, dass deren Betrachter vor Neid erblassen. Es gibt fast vierzig Optionen, die von Quantenmechanik, über Modellstehen bis hin zu Jonglieren und Standup-Comedy reichen.

Frohe Weihnachten wünscht Central England

7-Merry Christmas by Central England

Diese Agentur hat eine Art Geschenk für ihre treuen Kunden und Leser vorbereitet. Es gibt eine Seite mit weihnachtlicher Atmosphäre und heiterem Design, die nicht nur allen Besuchern beste We ihnachtstage wünscht, sondern auch ganz handfest spezielle Angebote, Adventskalender und Gutscheine enthält.

Der polnische Weihnachtsführer

8-Polish Christmas Guide

Dieser herrliche, interaktive Führer leitet dich durch die polnischen Weihnachtstraditionen. Du wirst über zwölf Gänge, Tiere mit menschlichen Stimmen, Weihnachtslieder und andere Traditionen aufgeklärt. Fantastische Illustrationen, animierte SVG-Grafiken und passende Klänge unterstützen das Erlebnis.

Der Strumpf-Baukasten

9-Stocking Builder

Der Stocking Builder ist ein kleiner Generator, der dir erlaubt, deinen eigenen Weihnachtsstrumpf zu erstellen. Du kannst die Größe und die Ausrichtung bestimmen, Designs anbringen und ihn mit deinem Namen oder deinen Initialen personalisieren. Speichere das Ergebnis und das Team hinter der Seite wird dir deinen Strumpf für kleines Geld zusenden.

Kultwerk

10-Kultwerk

Die Agentur Kultwerk lässt das eigene Team auf originelle und amüsante Weise Weihnachts- und Neujahrsgrüße aussprechen. Jedes Teammitglied hat eine eigene Seite mit einem kurzen Video.

Weihnachtsexperimente

11-Christmas Experiments

So ähnlich wie beim Stocking Builder kannst du bei dieser interaktiven Setzmaschine allerdings nicht etwa einen Strumpf, sondern deine eigene Weihnachtskugel gestalten. Du kannst sie bis ins Detail verändern, indem du die Farbe der Kugel, die Farbe der Muster und obere, mittlere und untere Muster auswählst.

Frohe Weihnachten wünscht FP Creative

12-Merry Christmas from FP Creative

Diese Website lockt mit eine wundervollen Winterszenerie, aufgebrezelt mit Bewegungen und einigen Effekten, die zu überraschen wissen. Klick auf die Blase und schau, was das Team für dich vorbereitet hat.

Pixelgyar

13-Pixelgyar

Begib dich in dieses vollständig illustrierte Abenteuer mit Santa Claus und begleite ihn auf seinem Weg vom Mond bis zur Erde. Diese kleine Reise sprüht vor Freude und Spaß.

Der PNC-Weihnachtspreisindex

14-The PNC Christmas Price Index

Diese Website wurde dafür gebaut, eine lebensgroße Bank aus Lebkuchen während der ‚Twelve Days of Christmas‘ zu bauen. Durchstöbere die Galerie, guck dir fesselnde Videos an und scrolle durch den Preis-Index.

Christmas Gifs

15-Christmas Gifs

Diese Seite ist eine Sammlung von animierten GIFs zu weihnachtlichen Themen. Auch wenn das ganze Klickibunti auf den ersten Blick ein bisschen chaotisch und erdrückend wirkt, bleibt es doch eine fantastische Gelegenheit, einige lustige Animationen anzusehen.

Merry Pixmas

16-Merry Pixmas

Diese Web-App erlaubt dir, einen individuellen Santa Claus zu bauen, der Amazons Danbo ziemlich ähnlich ist. Mithilfe einer intuitiven 3D-Umgebung kannst du Kopf, Körper, Boden, Farben und Hintergrundfarben definieren, sowie das Model vertikal und horizontal drehen. Das Projekt macht optisch nicht unbedingt eine Riesenfreude, dafür ist es ausschließlich mit HTML5, CSS3 und JS erschaffen worden.

Santa Tracker von Google

17-Santa Tracker

Hier kannst du Santas Dorf erkunden, ein kleines Browser-Spiel mit Rudolph spielen und von Elfen einiges über Weihnachsttraditionen anderer Länder erfahren. Außerdem gibt es eine Schwesterseite namens Santa Selfie.

Digital Santa von Ebola

18-Digital Santa

Du willst deine Lieblingsseiten mit Dekorationen weihnachtlich aufpeppen? Dann ist diese kleine Browsererweiterung genau richtig für dich. Ein Klick und der 8-bit-Santa wird das User-Interface eigenhändig dekorieren. Suche dir eine Option aus und schaue dem roten Mann beim Arbeiten zu.

How Santa Are You?

19-How Santa are You

Dieses Projekt lädt dich ein, tief in ein interaktives Video, in dem du der Held bist, einzutauchen. Den meisten Spaß wirst du haben, wenn du die Lautsprecher anschaltest und die gestellten Fragen ehrlich beantwortest.

Santa Drop

21-Santa Drop

Santa Drop ist ein weiteres Browser-Spiel in unserer Liste, in welchem Santa Claus der Protagonist ist. Benutze deine Tastatur oder die Tasten, die extra für Touch-Geräte auf dem Bildschirm angezeigt werden, um so viele Geschenke auszutragen wie möglich. Dabei gilt es, Hindernissen auszuweichen.

Happy New Year

22-Happy New Year

Mit dieser Web-App kannst du eine unvergessliche digitale Grußkarte verschicken, welche durch eine helle, dynamische 3D-Szenerie gekennzeichnet ist. Innerhalb der Grußkarte kannst du dich frei bewegen, auch eine Panoramaansicht ist möglich. Wer mag, wirft virtuelles Konfetti.

Weihnachten ist nah und es ist an der Zeit, frohe Stimmung zu verbreiten. Wir hoffen, unsere Sammlung an unterhaltsamen, festlichen Seiten hilft dir dabei. Viel Glück. Die Zeiten sind ernst genug. Frohe Weihnachten!

P.S.: Wenn du ähnliche Seiten kennst, teile sie mit uns in den Kommentaren.

(dpe)

Kategorien
Inspiration Showcases Webdesign

Flat Christmas: Kreative Weihnachtsgrüße auf Behance entdecken

Wer Geschäftspartner, Kunden oder Freunde noch mit einem individuellen Weihnachtsgruß beglücken möchte, sollte sich beeilen. Dass weihnachtliche Gestaltung auch anspruchsvoll und ohne Kitsch und Zuckerguss auskommt, beweisen die vielen Weihnachtskarten, welche Designer im Kreativnetzwerk Behance präsentieren. Einige der schönsten und ungewöhnlichsten Weihnachtsgrüße von dort stellen wir heute vor.

Flat Christmas: Behance

Flat Design auch zu Weihnachten

Anspruchsvolle Gestaltung zeichnet sich dadurch aus, dass sie auf das Wesentliche reduziert ist und dieses möglichst prägnant wiedergibt. Ob Kitsch nun zum Wesentlichen einer weihnachtlichen Gestaltung dazugehört, mag sich jeder selbst beantworten. Dass weihnachtliche Stimmung auch per Flat Design möglich ist, zeigt zum Beispiel die US-amerikanische Gestalterin Yiwen Lu mit ihrer geometrischen und auf wenige Farben reduzierten Illustration mit typischen Weihnachtsmotiven.

weihnachten-behance_yiwen-lu
Holiday Greeting Card von Yiwen Lu

Ebenfalls flach – im wörtlichen Sinne – fallen die Weihnachtskarten der serbischen Agentur Pure Solution aus. Viel Weißraum, einfache Icons als Konturen und Pastellfarben lassen ausgelassene Weihnachtsstimmung aufkommen, ohne dass es kitschig oder traditionell sein muss.

weihnachten-behance_puresolution
Christmas and New Year’s Greeting Cards von PureSolution

Da vor allem Icons im Flat Design beliebt sind, gibt es auf Behance freilich auch eine Menge von weihnachtlichen Iconsets. So bietet die ukrainische Gestalterin Olha Filipenko ein Set mit knapp 80 weihnachtlichen Icons an, die alle als einfache Konturen erstellt sind. Elche, Engel und Weihnachtskugeln sind einige der Motive, die eigentlich alles abdecken, was mit Weihnachten zu tun hat.

weihnachten-behance_olha-filipenko
Free Christmas Icon Set von Olha Filipenko

Ausgefallene Gestaltung für auffällige Weihnachtsgrüße

Neben kitschiger und eher zurückhaltend stilvoller Gestaltung gibt es auch vieles, was sich durch Ausgefallenheit von der Masse der Weihnachtsgrüße abhebt. Wer es also lieber ungewöhnlich mag, findet auch dazu auf Behance viel Inspirierendes.

So hat die portugiesische Designer Julio Ferreira eine sehr auffällige Weihnachtskarte gestaltet, bei der eine aus schwarzen und weißen Konturen zusammengesetzte amorphe Form eine Art Weihnachtsbaum ergibt. Erst die dezent gesetzten Schneeflocken und Sterne lassen den saisonalen Anlass der Karte erkennen.


Greetings Card for Tux&Gill von Julio Ferreira

Auch die dänische Gestalterin Ema Rogobete hat eine Vorliebe für ungewöhnliche Weihnachtsgestaltung. Ihre Weihnachtsbäume, Kugeln und Sterne sind aus einfachen geometrischen Formen zusammengesetzt. Dabei geizt sie nicht mit unterschiedlichen Farbtönen, die dennoch sehr gut miteinander harmonieren.

weihnachten-behance_ema-rogobete
Christmas Cards von Ema Rogobete

Freunde gepflegter Typografie dürften ihre Freude an den sehr reduzierten, typografischen Weihnachtskarten des Italieners Luca Milani haben. Sein Weihnachtsbaum besteht aus übereinander angeordnet liegenden geschwungenen Klammern, sein Weihnachtsstern aus einem kleinen X und der Schneemann schlicht aus einer Acht.

weihnachten-behance_luca-milani
Fontlove Christmas Edition von Luca Milani

Traditionell und dennoch stilvoll

Wem das alles doch zu ungewöhnlich und unweihnachtlich ist, findet natürlich noch viel mehr traditionell-klassische Ideen für Weihnachtskarten, die dennoch stilvoll sind und sich vom Allerlei gewöhnlicher Motive abheben.

Die britische Gestalterin Claire Vincent hat traditionelle Weihnachtsillustrationen – abgeleitet vom englischen Weihnachtslied „The Twelve Days of Christmas“ – mit einer zeitgemäßen serifenlosen Schrift kombiniert. Entstanden ist eine schöne Mischung aus klassisch-weihnachtlicher und ungewöhnlich-zeitgemäßer Gestaltung.

weihnachten-behance_claire-vincent
Seasons Greetings von Claire Vincent

Auch die Karten der rumänischen Gestalterin Tania Macarenco sind mit ihrem Retrolook klassisch-traditionell. Allerdings verzichtet sie auf alles Kitschige dabei und verlässt sich auf reduzierte Illustrationen und eine im Vordergrund stehende Typografie in typisch weihnachtlichen Farben.

weihnachten-behance_tania-macarenco
Retro/Vintage Christmas Card Pack von Tania Macarenco

Fazit

Egal, ob du es eher sachlich-schlicht, ungewöhnlich-auffallend oder traditionell-stilvoll magst – auf Behance findest du viele Anregungen für anspruchsvolle Weihnachtsgrüße. Welche Ideen gefallen dir am besten?

(dpe)

Kategorien
Inspiration Showcases Webdesign

28 inspirierende Beispiele für gutes responsives Webdesign (Showcase)

Responsives Webdesign ist bereits seit längerer Zeit in aller Entwickler Munde. Eine responsive Website gilt sozusagen als die eierlegende Wollmilchsau, denn sie funktioniert auf jedem Ausgabegerät und mit jeder denkbaren Bildschirmauflösung. Egal, ob Sie eine Website auf einem Smartphone, einem Tablet oder einem Desktop-Rechner anschauen, überall wird der Inhalt optimal lesbar dargestellt. Selbstverständlich ist bei einer modernen Website heute nicht nur die Lesbarkeit auf allen Geräten wichtig, sondern immer auch vor allem noch das ansprechende Design. Daher zeigen wir Ihnen in diesem Beitrag eine Auswahl von wirklich gut gelungenen, responsiven Websites zu Ihrer Inspiration.

28-responsive-websites-teaser_DE

Beispiele von gut umgesetzten responsiven Webdesign

In diesem Artikel haben wir für Sie nur wirklich gut umgesetzte Designs von professionellen Designern und Agenturen aus der ganzen Welt zusammengesucht. Manche bieten Ihnen zusätzlich noch interessante Bedienkonzepte und gut umgesetzte Effekte und Animationen. Daher bietet es sich an, die einzelnen Websites zu besuchen und sich die Konzepte näher anzusehen.

Zu jeder Website haben wir Ihnen die responsiven Ansichten auf allen Ausgabegeräten verlinkt. Dort, wo Sie keine zusätzliche responsive Abbildung finden, ließ sie sich mit dem Tool Am I Responsive leider nicht herstellen. Mobile Ansichten sind bei den betreffenden Websites nur über die Geräte direkt aufrufbar.

1. Fabrik

getfabrik

beispiele-fuer-responsives-webdesign

2. Inside Abbey Road

Inside-Abbey-Road

3. Beagle – Better proposals

Beagle

beagle

4. Giorgio Armani – Frames of Life

Giorgio-Armani

armani

5. HBM FiberSensing

HBM-FiberSensing

fibersensing

6. Web Design London

Web-Design-London

webdesign.london

7. Carmichael Lynch

Carmichael-Lynch

carmichael-lynch

8. Estudio NK

Estudio-NK

estudio nk

9. Welcome Spring Festival 2015

Welcome-Spring-Festival-2015

spring-festival

10. Marie – Creative Agency Portfolio Template

MARIE-Multipurpose-Creative-Portfolio

marie

11. Masi Tupungato

Masi-Tupungato

masi

12. Cofamedia Inc

COFA-Media

cofa

13. Fornasetti

Fornasetti

forsanetti-responsive

14. OuiSurf in Africa

OuiSurf.tv

15. Chris Niedenthal

Chris-Niedenthal

16. Alexander Engzell Portfolio

Alexander-Engzell

Alexander-Engzell

17. Bav Tailor

BAVTAILOR

BAVTAILOR

18. Trading Culture

Trading-Culture

Trading-Culture

19. RGB Media

RGB-MEDIA

RGB-MEDIA

20. Unfollowhance

Unfollowhance

Unfollowhance

21. Diego Sivori

Diego-Sivori

Diego-Sivori

22. RC Comunicação

RC-Comunicaco

RC-Comunicaco

23. 555 Chabanel

555-Chabanel

555-Chabanel

24. BrainBox

BRAINBOX

BRAINBOX

25. Ello

ello

Ello

26. Mage Developers

mage-developers

27. Futuramo Icons

FUTURAMO-ICONS

FUTURAMO-ICONS

28. jeferson winter

www.jefersonwinter.com

www.jefersonwinter.com

 Fazit

Diese 28 guten Exemplare responsiven Webdesigns machen Hunger auf mehr, man möchte sich fast augenblicklich hinsetzen und eine responsive Website selbst entwickeln. Inspiration dürfte dieser Beitrag genug gegeben haben. Mir persönlich gefällt die Website der Mage Developers (26) sehr gut, da der Hero-Bereich wirklich ansprechend gestaltet worden ist und schöne Fotos Verwendung fanden.

(dpe)