Drrrty WASTED DESIGN

Valentinsanimation für Restaurant Ludwigs

donald — Wed, 25 Jan 2012 12:58:11 +0000

In Zusammenarbeit mit sic productions entstand dieser kurze Online-Werbespot im Vintage-Look, um die “Valentine” Aktion des Restaurants Ludwigs in München online via Facebook, Twitter usw. bewerben zu können. Zu sehen ist das Video nach dem Klick!

Animationsfilm für Munich Dreamland

donald — Mon, 10 Oct 2011 11:34:06 +0000

Im Auftrag von sic productions entstand im Frühling 2011 dieses animierte Video für die Event-Veranstalter Munich Dreamland aus München ;-)

Wärters Schlechte – Webdesign

donald — Sun, 09 Oct 2011 15:16:28 +0000

Wieder einmal habe ich in Zusammenarbeit mit Poisonhost eine Webseite erstellt. Diesmal für die befreundete Punkband Wärters Schlechte.

Das Design ist klassisches Punkdesign: Sehr trashig und plakativ, fast wie ein Konzertposter auf ner mit Edding beschmierten Toilette einer Punk Rock Kneipe. Die Besonderheiten der Site sind das implementieren der Twitter Sidebar und Spezial-Font, der Musikplayer zum Hören einzelner Wärters Schlechte Songs und die Hervorhebung aller Social Media Buttons auf denen sich die Band rumtollt.

Webdesign: Eine Sammlung wichtiger Tools

donald — Wed, 07 Sep 2011 11:54:54 +0000

Eine Freundin von mir will nun Webdesign lernen. “Uff”, denken manche, “schon wieder so eine…” Ich kann diejenigen beruhigen, denn sie kennt die Grundlagen von HTML und CSS, aber ihr fehlt das Know-How bei den einzelnen Tools (also sie hat mit mir Medien Design studiert und ging dann hauptsächlich in den Printbereich – Musste ich von ihr aus unbedingt klarstellen jetzt *g*).

Hierzu wollte ich ihr eigentlich einen Link für gute und kostenlose Webentwicklungs Tools schicken, aber ich hab nichts passendes gefunden. Somit präsentiere ich nun eine Liste von Webdesign-Programmen, mit denen ich persönlich viel Arbeite und für diese ich nicht einmal Geld ausgeben musste.

Fangen wir aber einmal der Reihe nach an:

Webspace:

In Sachen Domain und Webspace kann ich euch zwei persönliche Empfehlungen geben. Für Neulinge zum “Ausprobieren” und deshalb eher ein Spielplatz oder “Webspace für die allererste Seite” rate ich euch zu funpic.de. Meine Seite war lange bei diesem kostenlosen Anbieter gehostet. Viel Speicherplatz und technologisch relativ Up-to-Date macht diesen Anbieter in meinen Augen perfekt für den Start. Der Anbieter ist (meines Wissens) kostenlos! Ob sich das in Zukunft mal ändern soll, kann ich natürlich nicht sagen (sollte jedem Leser klar sein). Funpic.de finanziert sich mit Einblendewerbung auf den kostenlosen Webspaces. Einen Banner, der sich über eure Seite legt, muss man somit in Kauf nehmen. Diesen können eure Besucher aber wegklicken. Ich hatte übrigens damals festgestellt, dass dieser Banner teilweise Probleme mit Javascript auf eurer Website verursacht, ich kann aber jetzt nicht sagen, ob dieses Problem behoben wurde… Außerdem bekommt man bei funpic.de nur eine sogenannte “Subdomain” (in etwa so: name.na.funpic.de), aber sehr schön finde ich die Möglichkeit, dass eine gekaufte Domain aufgeschaltet werden kann.

Webseiten mit Einblendwerbung wirken natürlich nicht äußerst seriös und somit sollte man sich für richtige Projekte einen seriösen Anbieter suchen, bei dem man Webspace mit Domain kaufen kann. Dafür empfehle ich meinen Freunden und Kunden außnahmslos Alfahosting.de. Alle meine Projekte laufen seit mehr als 3 Jahren über diesen Hoster und ich bin total zufrieden! Stabile Server, zugeschnitte Pakete und schneller Support! Letztens überraschte mich der Support wieder als ich mitten in der Nacht eine Frage per Ticket-System zwecks Paket-Transfer an ihn schrieb und innerhalb einer Stunde eine Antwort bekam (mit der ich in dieser Nacht eigentlich nicht mehr rechnete). Ein ebenso wichtiger Punkt ist der günstige Preis der einzelnen Pakete. Bei anderen Anbietern bezahle ich 1€ im Monat für eine Domain, hier zahle ich etwas über 1€ im Monat für Domain UND Webspace.

Webhosting bei Alfahosting – jetzt kostenlos testen!

FTP-Upload:

Sobald man seinen Webspace eingerichtet hat, will man ja irgendwie Daten hochladen können. Das gängiste Tool hierfür ist Filezilla. Ich kenne eigentlich keinen Webprogrammierer der etwas anderes Nutzt (außer vielleicht MAC-USER). Unter Filezilla kann man sich verschiedene Webseiten einrichten und verwalten. Alles was man hierzu braucht ist die Adresse der Website, den User und das Passwort. Diese bekommst du von deinem Webhost (Wo du deinen Webspace hast).

HTML und CSS Editor

Schön und gut! Ich kann Daten hochladen, aber ich hab ja noch gar keine…
HTML, CSS, PHP (und weiß der Teufel was für) Dateien kann man entweder mit dem teuren Adobe Dreamweaver erstellen (Er hat so seine Vor- und Nachteile – Größter Nachteil ist wohl, dass er verdammt teuer ist, aber größter Vorteil ist das Erstellen von Template-Dateien, damit man nicht alles auf jeder Seite einzeln ändern muss!), ODER man ladet sich eines der Open-Source-Programme PSpad bzw. Notepad++ kostenlos aus dem Internet runter. Bei den Open-Source-Tools nutzte ich bis jetzt immer PSpad, da dieser Editor nicht zu sehr aufgeblasen ist und man seine Daten auch via FTP synchronisieren kann (bzw. online arbeiten). Von Notepad hörte ich zwar, dass es sehr beliebt sei, mir war es dann aber doch etwas “zu nackig” ;-)

Update: Es hat mir keine Ruhe gelassen, dass tatsächlich noch keiner auf die Idee kam Templatefunktionen in einen HTML-Editor einzubauen (außer Dreamweaver). Ich bin aber letztendlich fündig geworden: Quanta+ (nur für Linux-User) und NVU. NVU werde ich in den nächsten Tagen einmal ausgiebig testen, ob es das hält, was es verspricht ^^

Fotobearbeitung

Wenn wir schon dabei sind, dann stell ich auch noch kostenlose Programme für Fotobearbeitung vor. Man braucht nicht wirklich Photoshop um ein nettes Webdesign zu gestalten:

Gimp

Der größte kostenlose Konkurrent zu Photoshop ist Gimp. Gimp (The Gnu Image Manipulation Program) kann fast alles, das Photoshop auch kann, aber man muss sich etwas einarbeiten (genauso wie bei Photoshop). Mit diesem Foto/Grafik Bearbeitungs-Tool baust du dir das Design deiner Seite zusammen.

Inkscape

Schaden kann es nicht hier auch Inkscape vorzustellen. Nette Illustrationen basierend auf Vektorgrafiken können ohne Probleme damit umgesetzt werden.

Fotosizer

Kommen wir nun noch zu einem Geheimtipp in Sachen Stapelverarbeitungs-Programm. Sollte auf deine Website eine Galerie mit Unmengen von Bildern oder deinen “Urlaubsfotos”, aber alle sind Dank Spiegelreflexkamera jenseits der 3000 Pixelbreite und du willst sie etwas “komprimieren” (verkleinern), dann kannst du entweder jedes Foto einzeln unter Gimp ;-) bearbeiten, oder du fügst sie alle in den Fotosizer, drehst ein paar Knöpfchen und wählst den neuen Speicherort und drückst zu guter Letzt nur noch auf Start. Den Rest erledigt dein Computer…

Content Management Systeme (CMS)

Man muss ja nicht sofort eine Website von “Null” aufbauen. Zum Einstieg in das Webprogrammieren oder für ihre erste Website nutzen viele Menschen kostenlose Open-Source CMS wie Joomla oder WordPress. Mit Joomla habe ich damals meine erste Seite erstellt, danach hab ich alle meine Seiten programmiert um am Ende der Einfachheithalber wieder bei einem CMS namens WordPress zu landen ;-)

In meinen Augen ist auch WordPress bis heute noch am Sinnvollsten. Es ist wirklich einfach zu bedienen wenn man oft seinen Inhalt ändert und erweitert.
Weitere bekannte CMS wären noch Drupal (vorwiegend für Communities) und TYPO3 (das Flaggschiff – nur für Experten)

Für CMS gibt es auch unzählige Erweiterungen wie z.B. Fotoglaerien und Kalender…

Debugging

Am Ende sollte man sich auf Fehlersuche begehen, denn manchmal funktioniert es einfach nicht so wie man es sich gedacht hat: Vielleicht hat man an einer Stelle vergessen das schließende Div-Tag zu setzen, oder das Element sollte nicht auf die linke Seite “gefloatet” werden. Nur wie kommt man auf diese Fehler?

Firefox Addons

Firefox ist in Sachen webdeveloping der beste Browser! Es gibt dutzende Debugger dafür und zwei will ich näher hervorheben:

1. Firebug: mit diesem Addon kann man sich jeden Quellcode einer Seite anschauen und live auf Fehlersuche gehen. Man erkennt wie sich die Tables und DIVs öffnen und schließen und welche Elemente durch einen Fehler nicht erkannt werden. Sehr praktisch ist das bearbeiten der CSS! Welches Element vererbt bestimmte Attribute weiter oder welche Attribute besitzt es überhaupt? Außerdem kann man Paddings und Margins live vergrößern oder verkleinern, somit muss man nicht lange rumprobieren, sondern kann sich sofort den perfekten Wert anzeigen lassen…

2. HTML-Validator: Der schnellste Weg um Fehler zu finden! Unten rechts wird auf jeder Seite ein Symbol (Kreuz, Ausrufezeichen, oder Häkchen) angezeigt. Sollte man ein Kreuz sehen weiß man, dass mindestens ein Fehler auf der Seite ist. Mit Doppelklick werden diese Fehler im Quellcode angezeigt und erklärt was falsch ist…

Jetzt hoffe ich noch, dass ich nicht nur einer guten Freundin weiterhelfen konnte, sondern jedem Leser der hier gelandet ist um etwas über Webdesign/Webprogrammierung zu erfahren, weil er vielleicht einen Einstieg in das Thema wagt.

Logodesign, Corporate Identities, Corporate Design

donald — Thu, 11 Aug 2011 11:12:25 +0000

Im Laufe meines Designerlebens durfte ich schon für verschiedenste Firmen und Organisationen Logos entwickeln.

Diese Arbeiten finde ich immer sehr interessant, da man versuchen muss die komplette Philosophie einer ganzen Firma auf ein kleines Logo zu komprimieren. Ich finde es wichtig, dass Logos so einfach wie möglich gehalten werden und trotzdem so ausgefallen sind, um im Gedächtnis bleiben.

klassisch gehaltene Designs:

Comiclogos

Punkdesign und wilde Logos

Scribbles und Storyboards

donald — Wed, 10 Aug 2011 20:35:25 +0000

Die münchner Medienproduktion Regiepapst, benötigte für den Pitch bei einem großen Automobilkonzerns einige Storyboards und Scribbles um ihre Ideen von Werbefilmen visuell darstellen zu können.

Ihre Wahl für einen Illustrator fiel auf mich und ich lieferte ihnen unter anderem diese Bilder:

Regiepapst gewann den Pitch! Hier sehen Sie die einzelnen Werbeclips:

Coverdesign SN-Punx

donald — Mon, 08 Aug 2011 13:20:29 +0000

Ein besonderes Punkdesign von Drrrty WASTED DESIGN gibt es auf dem neuen Sommerkatalog 2011 von SN-Punx.

SN-Punx ist ein kleines aber wirklich tolles unabhängiges Plattenlabel mit qualitativ hochwertigen Punkbands. Für den Katalog entstand ein anspruchsvolles punkiges Artwork mit genügend Platz für das SN-Punx-Team das Design weiter typografisch zu bearbeiten.

Das tierische Fotomodell ist Beast mein “Familienhund” ;-)

Übrigens können mich auch gerne Bands und Labels jeder musikalischen Stilrichtung anschreiben wenn sie Interesse für CD-Covers, T-Shirts, Animationen, Comics und/oder Musikvideos haben!

Punks’n'Banters – Treppenhaus (Outlines)

donald — Sun, 03 Jul 2011 22:43:55 +0000

Gerade fertig geworden. Die Outlines-Zeichnung des Punkabunka Treppenhaus. Nächster Schritt ist das Einfärben. Mehr Infos zu Punks’n'Banters gibt es hier: www.punksandbanters.de

Illustrator at work! Marionette erstellen für Animation

donald — Mon, 27 Jun 2011 21:36:58 +0000

Sweetie dürfte einigen bekannt sein. Eine meiner Figuren bei Punks’n'Banters. Für den Motion Comic erstellte ich die Charaktere als “Marionetten”. Diese können ohne großen Aufwand immer wieder verwendet und animiert werden. In diesem Video zeige ich, wie aus der Skizze der Frontansicht von Sweetie, die komplette Marionette in der Seitenansicht entstand. Erstellt wurde die Figur an einem WACOM Cintiq 21UX.

Punkdesign: Drrrty WASTED DESIGNs extrem wilde Seite

donald — Wed, 22 Jun 2011 13:42:56 +0000

Nun will ich auch einen Tribut an meine wilden Designs von Drrrty WASTED DESIGN geben. Wurden meine Designs in den letzten Jahren immer klarer, sauberer und hochwertig und meist “nett”, brodelt trotzdem in den tiefen meiner Kreativität noch der wilde Antidesigner. Dort werden Regeln missachtet und Grenzen eingerissen. Nicht immer politisch korrekt, aber trotzdem sehenswert!

Hier nun verschiedenste Punkdesigns aus den letzten 6 Jahren (Geschrieben am 22. Juni 2011)