Kategorien
Design Design-News

Wiedererkennungswert mit Biss: Deutscher Agenturpreis 2018 ging an die Münsteraner Agentur DREiKON

Corporate Identity ist ein beliebtes Schlagwort, wenn es um die Vereinheitlichung von bestimmten Merkmalen eines Unternehmens geht. Das vorrangige Ziel ist dabei nicht, Logo und Briefpapier in derselben Farbe zu gestalten. Welche Bedeutung Corporate Identity tatsächlich hat, zeigt der im Oktober des Vorjahres verliehene Deutsche Agenturpreis 2018. In der Kategorie „Corporate Identity“ erhielt die Agentur DREIKON bereits zum dritten Mal in Folge diese wichtige Auszeichnung.

Kategorien
Editoren Webdesign

Kostenlose HTML-Editoren: Die 11 Besten für Webentwickler unter macOS

Auch Webdesigner und Webentwickler, die mit macOS arbeiten, finden einige kostenlose HTML-Editoren am Markt. Nicht alle sind gleich gut. Bei einigen gilt das alte Prinzip von „was nix kostet, taugt auch nix”. Das gilt indes längst nicht für alle Editoren. Wir sagen dir, welcher sich eignet, welcher nicht.

Kategorien
Design E-Business SEO & Online-Marketing UI/UX

Gute Texte reichen nicht: So gestaltest du Online-Inhalte interessant und auffindbar

Dass die Inhalte – und damit ist in erster Linie Text gemeint – entscheidend zum Erfolg einer Website beitragen, weiß inzwischen jeder. Weniger einhellig ist die Meinung darüber, wie diese Inhalte für das Medium Internet optimal aufbereitet werden, so dass sie gut und komfortabel lesbar und vor allem auch zu finden sind. Wie du Texte für Mensch und Suchmaschine richtig strukturierst und mit anderen Elementen wie Podcasts, Fotos oder Videos anreicherst und damit das Anwendererlebnis steigerst, erfährst du hier.

Kategorien
Design E-Business SEO & Online-Marketing Social Media UI/UX

Das Märchen von der Relevanz, oder: Die Mehrheit schweigt

Reaktionen auf deine Netzaktivitäten sind viel wert? Du bedauerst, dass deine Beiträge so selten kommentiert werden? Derlei Reaktionen werden häufig überschätzt. Warum das so ist, erfährst du im folgenden Beitrag.

Kategorien
Design UI/UX Webdesign

Website fertig? Die ultimative Checkliste für dein Web-Projekt

Die Entwicklung von Websites kann ein langwieriger und mühsamer Prozess sein. Besonders, wenn du einen Klienten erwischt, der keine klare Vorstellung vom Projekt hat. Du könntest jetzt in die Versuchung geraten, die Website auf Biegen und Brechen online zu bringen. Das könnte dir jedoch ordentlich aufs Butterende schlagen.

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Webdesign

Design Best Practice: Darauf musst du beim Einsatz von Stockphotos achten

Fotos spielen eine wichtige Rolle im Grafik- und Webdesign. Sie lockern auf, vermitteln Stimmungen und Eindrücke und regen zum Lesen an. So sind Fotos in Websites ein unverzichtbares Mittel der Kommunikation. Da man nicht immer das passende Bild zur Hand hat und dieses oft auch nicht selbst schießen kann, gibt es Stockphotos. Aber was gilt es beim richtigen Einsatz des Materials aus fremder Linse technisch zu beachten?

Kategorien
HTML/CSS

Gewusst wo: Wissensquellen zu HTML und CSS

Die beiden Auszeichnungssprachen HTML und CSS sind unverzichtbar für das World Wide Web und jede Website. Auch wenn du mit Anwendungen wie Dreamweaver arbeitest, kommst du ohne Kenntnisse in diesen Sprachen nicht sehr weit. Aber natürlich musst du nicht jedes Element und jede Eigenschaft kennen. Du solltest nur wissen, wo du dich schlau machen kannst. Daher haben wir hier ein paar nützliche Wissensquellen zu HTML und CSS für dich.

Kategorien
Design HTML/CSS

HTML5: Moderne Layouts mit CSS-Grids

Als es noch kein CSS und keine Trennung zwischen Inhalt und Gestaltung einer Website gab, war es üblich, Weblayouts als Tabelle zu gestalten. Mit der steigenden Bedeutung einer semantischen HTML-Auszeichnung waren Tabellen fortan nur noch für die Auszeichnung von Inhalten gedacht, die auch tatsächlich tabellarisch dargestellt werden sollen.

Kategorien
Design E-Business SEO & Online-Marketing UI/UX

Design oder Marketing: Worin unterscheiden sich User Interface und User Experience?

Das User Interface und die User Experience hängen eng zusammen, sind aber als eigenständige Bereiche zu betrachten. Bei gelungener Kombination bestimmen sie maßgeblich, wie ein Produkt oder eine Dienstleistung von den Usern wahrgenommen wird. Für die erfolgreiche Umsetzung beider Komponenten ist es zunächst nötig, sie in ihren Einzelteilen zu verstehen.

Kategorien
Design HTML/CSS

CSS3: So einfach hübscht du deine Tabellen auf (2/2)

Egal ob Umsatzzahlen, Marktanalysen oder Bundesliga-Ergebnisse: Tabellen sind auch im Internet gefragt. Allerdings lassen sie sich dort lange nicht so schön gestalten, wie das mit Illustrator oder  Excel und Co. möglich ist. Mit CSS3 kannst du deine Tabellen nun aber auch im Internet grafisch ansprechend aufbereiten. Im heutigen Teil 2 des Beitrags zur Tabellenaufhübschung mit CSS3 erläutere ich, wie du Spalten aufpeppen und bestimmten Zeilen automatisch ein anderes Aussehen gibst als dem Rest der Tabelle.

Kategorien
Design HTML/CSS

CSS3: So einfach hübscht du deine Tabellen auf (1/2)

Auch wenn Tabellen als Layout fürs Webdesign dank CSS passé sind, gibt es nach wie vor jede Menge Inhalte, deren Präsentation im Internet einer Tabelle bedarf. Seien es Preislisten im Online-Shop, Tarife für Flüge oder Hotelbuchungen oder Ergebnisse von Sportvereinen. Wie du solche Tabellen mit CSS3 ansprechend und dynamisch gestaltest, zeige ich dir in einem zweiteiligen Tutorial, dessen ersten Teil du gerade liest.

Kategorien
Design Design-News

IceCream Tarantino – Eiskalte Posterserie von Matthias Lehner

Was dabei rauskommt, wenn man leckeres Steckerleis und Kultregisseur Quentin Tarantino zusammen in einen bunten Farbeimer mit Vektoren und Pixel wirft, zeigt uns Matthias Lehner in eindrucksvoller Art und Weise.

Klassiker meets Klassiker

Mit seiner neuen Posterserie »IceCream Tarantino« hat der Grafiker und Illustrator Matthias Lehner – mit Vorliebe für minimalistische Posterkunst – Tarantinos Filmklassiker in Form von illustrierten Steckerleis-Klassikern veranschaulicht. So werden zum Beispiel Kill Bill: Vol.1 als Capri interpretiert, die drei Hauptcharaktere von Django Unchained mittels der drei Mini Milks verkörpert und der weiche Kern sowie die harte Schale einer Jackie Brown mit einem Nogger Choc dargestellt.

„Mordsspaß hat es auf jeden Fall gemacht“, so Matthias Lehner. „Gibt ja auch nichts Schöneres als seine Kindheitserinnerungen mit einem der besten Filmemacher in Verbindung zu bringen.“

Ausgestellt wurden die Kunstwerke in der Ausstellung »Reine Formsache 18« in Straubing und Regensburg. Außerdem sind sie als hochwertige Kunstdrucke im grafinesse-Shop käuflich zu erwerben.

Nachfolgend erzählt uns Matthias wie er auf die Idee gekommen ist und gibt uns sogar einen kleinen Einblick in die Entstehung eines Plakats.

Reservoir Dogs als Kunterbunt
Reservoir Dogs als Kunterbunt (Bild: grafinesse)
Pulp Fiction als Twinni
Pulp Fiction als Twinni (Bild: grafinesse)
Jackie Brown als Nogger Choc
Jackie Brown als Nogger Choc (Bild: grafinesse)

 

Steckerleis und Quentin Tarantino?!

Seit der ersten Ausstellung „Reine Formsache 14“ für Digitale POP Kunst wollte ich eine Posterserie zu einem meiner Lieblings-Filmemacher Quentin Tarantino machen. Herausgekommen ist jedoch eine Alternative-Filmplakat-Serie, welche zwei Jahre später bei „Reine Formsache 16“ ausgestellt wurde.

Den Wunsch nach einer Tarantino-Serie hatte ich selbst nach dieser Ausstellung immer noch im Kopf. Dabei war ich in der Recherche und beim Brainstorming jedoch immer zu nah am Filmemacher selbst dran. Somit hatten meine Ideen und erste Skizzen zu sehr den Tarantino-Charakter, weshalb mich jeder Einfall irgendwie nicht überzeugt hat und ich das Thema vorerst mal ad acta gelegt habe.

Kill Bill: Vol.1 als Capri
Kill Bill: Vol.1 als Capri (Bild: grafinesse)
Kill Bill: Vol.2 als Flutschfinger
Kill Bill: Vol.2 als Flutschfinger (Bild: grafinesse)
Death Proof als Rocket
Death Proof als Rocket (Bild: grafinesse)

Plötzlich war das erste Eis geboren

Die Idee hatte ich erst wieder im Sommer 2017 aufgegriffen, als ich aus Jux und Tollerei – und weil ich es einfach nicht lassen kann, Dinge minimalistisch mit Vektoren darzustellen – mein Lieblingssteckerleis „Capri“ vektorisiert und kunstvoll texturiert habe.

Als ich damit fertig war, habe ich links und rechts zwei schwarze Streifen eingezeichnet und plötzlich war der Ganzkörperanzug von Uma Thurman in „Kill Bill: Vol. 1“ als Steckerleis geboren.

So kam das Konzept dieser Plakatserie zustande, Tarantinos Filmklassiker mittels Steckerleis zu visualisieren. Immerhin ließ es sich ja auch prima weiterspinnen – für jeden Film von ihm war tatsächlich ein Eis dabei.

Inglourious Basterds als Brauner Bär
Inglourious Basterds als Brauner Bär (Bild: grafinesse)
Django Unchained als Mini Milk
Django Unchained als Mini Milk (Bild: grafinesse)
The Hateful Eight als Twister
The Hateful Eight als Twister (Bild: grafinesse)

Zärtlich bunte Steckerleis-Klassiker

Was mich vor allem an dieser Idee gereizt hat, war die Tatsache, dass die Verknüpfung mit den Eis- und Filmklassikern ja tatsächlich so weit entfernt ist… endlich hatte ich eine würdige Hommage an Quentin Tarantino, die nicht gleich nach Quentin Tarantino schreit.

Keine blutverschmierten Anzugträger, nein, zärtlich bunte Steckerleis-Klassiker!

Die Untergründe der Plakate sind eher dezent gehalten, so dass wirklich nur die Eissorten im Zentrum auffällig in Szene gesetzt sind. Anders bei den Postkarten, hier hat auch der farbig-knallige Hintergrund seinen Spielraum.

IceCream Tarantino – Postkarten-Box
IceCream Tarantino – Postkarten-Box (Bild: grafinesse)

 

Making of Kill Bill: Vol.1

Eigentlich ist die Entstehung eines Plakats recht schnell erklärt. Wenn erst einmal die Idee dahinter steht, ist der Rest nur noch Fingerübung im Adobe® Illustrator.

In 7 Schritten zum Kill-Bill-Capri-Eis…

Making of: Kill Bill Vol.1
(01) Beginnen wir mit dem Steckerl. Minimalistisch, einfach, ohne Schnörkel.
Making of: Kill Bill Vol.1
(02) Mit einem simplen Muster bekommt man gleich etwas Holz-Optik.
Making of: Kill Bill Vol.1
(03) Mit dem Filter „Körnung“ schafft man Tiefe und Struktur.
Making of: Kill Bill Vol.1
(04) Eine gelbe Fläche setzt den Grundstein für das Wassereis. Gewohnt minimalistisch.
Making of: Kill Bill Vol.1
(05) Auch beim Eis sorgt der Strukturierungsfilter „Körnung“ für die nötige Tiefe…
Making of: Kill Bill Vol.1
(06) …sowie Schattierungen beim Übergang vom Steckerl zum Eis und eine klassische 45°-Schattierung im Hintergrund.
Making of: Kill Bill Vol.1
(07) Erst die beiden schwarzen Streifen links und rechts machen Kiddo’s Jumpsuit sichtbar.

 

IceCream Tarantino für Zuhause

Sicher Dir Dein IceCream-Tarantino-Poster!

Jedes der 9 Tarantino-Poster gibt es als hochwertigen Kunstdruck im Format 50 x 70 cm auf 300g Strukturpapier im grafinesse-Shop zu kaufen. Streng limitiert auf 10 Stück – also ran an’s Steckerl!

Farbenprächtige Interpretationen der Plakate gibt es auch als Postkartenserie gesammelt mit Buttons in einer Postkarten-Box.

Hier geht’s zum grafinesse-Shop:
https://www.grafinesse.net/shop

IceCream Tarantino Buttons

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Photoshop

Photoshop-Design: 30+ Text-Effekte zum Nachbauen

Aufwändige Texteffekte sind mit Photoshop zwar grundsätzlich kein Hexenwerk, dennoch kenne ich kaum einen Anwender dieser Software, der sie aus dem Ärmel schütteln kann. Dabei ist ein starkes typografisches Logo oder ein anderer derartiger Eyecatcher fantastisch dazu geeignet, Aufmerksamkeit zu generieren und so die zu vermittelnde Botschaft zu verstärken. Wenn du dich schon immer mal selber an der Erstellung aufsehenerregender Texteffekte probieren wolltest, dann lies weiter. Wir haben mehr als 30 frische Photoshop Text-Effekte zusammengestellt. 

Kategorien
Design Essentials Freebies, Tools und Templates

Design: 11 Web-Apps, die Farbpaletten aus Bildern erstellen

Dienste zur Erzeugung von Farbpaletten gibt es im Netz wie Sand am Meer. Solche, die auch oder nur Farbpaletten aus vorhandenen Bildern extrahieren können, sind allerdings relativ selten. Dabei entspricht es zumindest meinem Workflow weit eher, kundennahe Farbpaletten aus vorhandenen Materialien zu entwickeln, anstatt sie ganz neu zu definieren. Folgend zeige ich dir daher nur solche Onlinedienste, die dir erlauben, Farbpaletten aus Bildern automatisiert zu erzeugen. Alle vorgestellten Dienste sind kostenlos nutzbar.

Kategorien
Design E-Business E-Commerce SEO & Online-Marketing Social Media Technik UI/UX Workflow

Design: So beleben animierte Präsentationen den E-Commerce

Text und Bild ist nicht mehr genug. Ton allein ist zu isoliert. Erst in der Kombination verschiedener Medien entsteht ein erfolgreiches E-Commerce-Design.

Kategorien
Design HTML/CSS

CSS-Transitions: Timing ist alles

Mit CSS3 kannst du Animationen ohne Flash und Javascript erstellen. Dabei beeinflusst du den zeitlichen Ablauf deiner Animation recht komfortabel. Unter Verwendung der Eigenschaft „transition-timing-function“ definierst du unterschiedliche Abläufe – mit und ohne Beschleunigung.

Beschleunigen und abbremsen

Neben der Einstellung „linear“, bei der eine Animation kontinuierlich dieselbe Geschwindigkeit hat, lassen sich Animationen auf unterschiedliche Weise beschleunigen und abbremsen. Die Standardeinstellung für eine Animation ist „ease“. Sie sorgt für einen langsamen Start der Animation mit Beschleunigung zur Mitte und anschließendem Abbremsen zum Ende hin.

Neben der einfachen „ease“-Beschleunigung gibt es weitere Varianten. Der Wert „ease-in“ sorgt für einen langsamen Start der Animation, die dann linear fortgesetzt wird. Bei „ease-out“ wird die Animation linear gestartet, am Ende erfolgt ein Abbremsen der Animation.

Zu guter Letzt sorgt der Wert „ease-in-out“ für einen langsamen Start mit nachfolgender Beschleunigung und Abbremsen am Ende der Animation.

Individueller Ablauf

Statt auf vorgegebene Abläufe mit den genannten „ease“-Werten zurückzugreifen, kannst du Animationsabläufe auch individuell festlegen. Hierzu dient die Einstellung „cubic-bezier“. Wie der Name zutreffend vermuten lässt, wird hierbei eine Bézierkurve angegeben, die den zeitlichen Ablauf der Animation definiert. Eine Bézierkurve definierst du über verschieden viele Punkte. Die kubische Bezierkurve, die hier verwendet wird, habe ich über vier Punkte definiert.


Bezíerkurven aller vorgegebenen Werte für die Timing Function

Der erste Punkt P0 gibt die Startposition der Kurve an. Die Richtung, die die Kurve einschlägt, wird  mit dem zweiten Punkt P1 definiert. Der dritte Punkt P2 gibt die zweite Richtung der Kurve an, die schließlich im vierten Punkt P3 mündet. Zur Definition einer Bézierkurve für den Animationsablauf werden lediglich die beiden Richtungen angegeben. Der Startpunkt liegt immer bei 0/0 und der Endpunkt immer bei 1/1.


Vier Punkte einer kubischen Bézierkurve

Einen individuellen Ablauf definierst du beispielsweise so:

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

Die resultierende Kurve entspricht dem Verhalten des Wertes „ease“.  Angegeben sind die Werte für P1 (0,25/0,1) sowie für P2 (0,25/1).

Der Wert „ease-in-out“ stellt sich als Bézierkurve wie folgt dar:

transition-timing-function: cubic-bezier(0.42, 0.1, 0.58, 1);

Mit „cubic-bezier“ lassen sich also ganz unterschiedliche Beschleunigungs- und Abbremsverhalten festlegen. Mit der „Maximaleinstellung“ für eine kubische Bézierkurve erhältst du eine Animation, die nach dem Start stark abbremst, sich linear weiterbewegt und anschließend zum Ende stark beschleunigt:

transition-timing-function: cubic-bezier(0, 1, 1, 0);


Individuelle Bézierkurve

Derzeit unterstützen alle Browser mit Ausnahme des Internet Explorer CSS-Transitions und auch die Eigenschaft „transition-timing-function“.

Fazit: Gerade das individuelle Anlegen von Bézierkurven für Animationsabläufe ist eine schöne Sache, um jenseits der Standardwerte eigene Vorstellungen zu verwirklichen. Dabei ist die Verwendung relativ einfach.

(Artikelbild: Depositphotos)