What's new?

15MAI

Photoshop-Shortcuts als interaktive Web-App

Jeder Grafiker lebt von Shortcuts. Sie erleichtern den Arbeitsalltag enorm. Tastenkombinationen gehen mit der Zeit jedem Adobe-Nutzer in Fleisch und Blut über. Aber oftmals vergisst man länger unbenutzte Shortcuts oder bringt sie durcheinander, weil Illustrator andere Shortcuts verwendet als Photoshop und man begibt sich wieder auf die Suche nach der entsprechenden Kombination. Daher war ich heute total begeistert, als ich diese tolle interaktive Web-App gefunden habe, die einem über eine Suche die verschiedenen Tastenkombinationen anzeigt und das betriebssystemübergreifend. Einziges Manko: die Web-App ist auf englisch. Aber auch das sollte für die meisten nicht das größte Problem darstellen. Also Viel Spaß!



webapp

12DEZ

Nützliche Tools für Webdesigner

Immer wieder war ich auf der Suche nach nützlichen Tools oder Internetseiten die mir die Arbeit erleichtern oder Zeit einsparen sollten. Im Folgenden Artikel habe ich eine Übersicht für euch zusammengestellt. Ich bin mir sicher, hier ist für jeden Designer das ein oder andere hilfreiche Tool dabei. Selbstverständlich alle kostenlos.



Behance

behance

Deviantart


deviantart

Wedesign.org


webdesign


Colour Lovers

COLOURlovers ist eine internationale Community von Designern, Künstlern und Kreativen, die Farbinspiration brauchen. COLOURlovers kreiert Farben, Farbpaletten und Muster.


colourlovers

Adobe Kuler

Ebenfalls ein Möglichkeit Farbpaletten zusammen zu stellen bietet Adobe mit ihrer Webapplikation AdobeKuler.


adobekuler

Colorhunter

Colorhunter ermöglicht das Erstellen von Farbpaletten aus Bildern.


colorhunter

Stripemania

Stripemania ist ein einfaches Tool um randlose diagonale Muster für Hintergründe oder Designs zu erstellen. Die Farben, Abstände und Größe können beliebig angepasst werden.


stripemania

Fontstruct

FontStruct ermöglicht das schnelle und einfache entwickeln von Schriftarten.


fontstruct

Whatthefont

Jeder Designer kennt das Problem, eine Font zu sehen, die einem gefällt, aber nicht zu wissen welche es ist. Abhilfe schafft da das Tool von WhatTheFont. Einfach ein Bild von der Schrift hochladen und ihr wisst mehr.


myfonts

Typeteste

Der Typetester ist eine Online Anwendung die es ermöglicht, verschiedene Schriftarten und Schriftschnitte miteinander zu vergleichen. Erleichtert enorm die Arbeit eines Webdesigners.


typetester

04OKT

Responsive Webdesign (RWD)

Mittlerweile haben fast alle davon gehört und jeder will es haben- Responsive Design. In der Theorie klingt es auch toll, auf jedem Device ein optimal angepasstes Design zu haben, die Praxis stellt die Entwickler aber vor Herausforderungen, die kein Kunde ahnt. Deswegen möchte ich ein paar wesentliche Fakten und ein paar nützliche Tipps für Webentwickler oder solche, die es noch werden wollen, anbringen. Im 1.Teil gibt es ein paar wissenswerte Fakten zu Auflösungen, Mediaqueries, Ladezeitersparnis durch Iconfonts und Responsive Layout.





Einer der schwierigsten Aufgaben für Webentwickler sind die rasenden technologischen Entwicklungen. Zu den klassischen Desktop-Browsern kommen mittlerweile mehrere mobile Plattformen mit den unterschiedlichsten Browsern. Smartphones, Tablets und Desktops von verschiedenen Herstellern mit variierenden Bildschirmauflösungen. Auch die...

Mehr...

1AUG

Long Shadow Design - wird das Flat Design zu langweilig?

Nach dem wir durch CSS3 alle Möglichkeiten hatten Schatten, abgerundete Ecken und Verläufe auf alle Objekte und Schriften anzuwenden- kam das Flat Design. Alles kantig, ohne Schatten, ohne Verlauf und so einfach wie möglich. Tja, aber wie es nun mal bei jedem Trend ist, hält auch dieser nicht lang an.

Designer lockern das Flat Design auf und es entsteht das Long Shadow Design.



Anscheinend soll das Flache und Einfache noch nicht ganz aufgegeben, sondern mit einem simplen Schatten erweitert werden. Im Grunde werden den flachen Elementen ein sehr tiefer Schatten im Winkel von 45 Grad. Das Besondere daran: ebenfalls der Schatten ist flach. Das bedeutet er hat keinen Farbverlauf um die Tiefe zu verdeutlichen. Die Designer entwerfen einen langen Schatten im selben Farbton, meist ohne Verblassen, Schattierung oder Farbabstufungen.

Wie immer bleibt der Kreativität des Designers keine Grenzen gesetzt, zwar nutzen die meisten einen Schattenwinkel von 45 Grad (in die rechte untere Ecke) aber andere wiederum bevorzugen einen Schatten von 120 Grad (die linke Ecke). Wieder andere geben dem Element verschiedene Tiefen indem sie verschiedene Farbflächen übereinander legen.

Das Long Shadow Design kann bzw. sollte nur auf kleine Elemente angewendet werden. Größtenteils wird dieses Design nur auf Icons und Buttons angewendet. Es basiert auf einfachen Formen und klaren Linien. Überwiegend werden helle und lebendige Farben genutzt. Die Farbe für den Schatten ist in der Regen nur eine eine Nuance dunkler als der eigentliche Farbton. Auf Farben wie Schwarz oder Grau wird überwiegend verzichtet.

Hier hab ich noch ein paar Beispiele für euch:







6JUN

Falls ihr euch fragt, wie ich diese Trends bestimmen kann? Hab ich nicht. Das habt ihr und meine Kunden gemacht. Ich hab einfach mal meine bisherigen Aufträge (2013) betrachtet und mir angeguckt was besonders gewünscht war und mal eine kleine Liste für euch zusammengestellt...die ich sicherlich auch bald erweitern muss. Aber für's erste hier die Trendliste "was-sich-der-Kunde-2013-von-baptista-design-wünscht":

Mobiles Webdesign

"Responsive" heißt das Zauberwort. Was "responsive" ist? Grob gesagt, es bedeuetet, dass eure Webseite auch auf den Smartphones und den Tablets gut aussieht. Für diejenigen denen diese Erklärung nicht reicht: Der grafische Aufbau oder auch das Layout einer Webseite wird entsprechend den Anforderungen flexibel an die individuellen Geräte angepasst. Das ewige zoomen und hin und her scollen hat damit ein Ende. Großartige Sache, wenn ihr mich fragt. Ich hab das mal für euch veranschaulicht.




Besonders gern gesehen sind Designs ohne Schörkel und Firlefanz- klar und sauber. Es wird auf Texturen, Schatten oder Effekten verzichtet und dafür auf knallige Farben gesetzt. Tja, was soll ich sagen, ihr seht gerade ein Flat-Design Baptista-Design ist nur vielleicht nicht ganz so bunt wie es bei dieser Designart so üblich ist, deswegen noch ein paar mehr Beispiele:

fitbit



invoisse



und das wohl bekannteste Beispiel:

windows microsoft



Ja, Ja, Bilder sagen mehr als 1000 Worte, aber hauptsächlich, weil die Leute keine Zeit haben sich elendig lange Texte durchzulesen. Auch wenn das Leistungsportfolio von manchen Firmen allumfassend erscheint und scheinbar einfach alles angeboten wird, wollen wir darüber kein Exposé lesen müssen. Oder der persönlichen Werdegang...bööp, das interessiert doch nun wirklich niemanden. Es kann sein, dass manche Firmen aus dem nichts, mit Karteikarten in Schuhkartons in Geräteschuppen des Nachbars angefangen haben und sich über Jahre einen "Namen" gemacht haben. Wenn das so ist, Glückwunsch, die harte Arbeit hat sich dann ja wohl ausgezahlt, aber wenn ihr nicht zufällig Apple* seid-reicht ein einfaches Gründungsdatum. Wichtig ist es die Leute von sich zu überzeugen und der erste Eindruck zählt bekanntlich- also versucht euch kurz zu fassen und lasst Bilder sprechen.

*An diese Stelle kann natürlich jede beliebige Firma über die ein Film gedreht worden ist, eingesetzt werden.

Passend zum vorigen Trend, setzt man auf bildschirmfüllende Hintergrundbilder, alternativ zählt übrigens auch ein Slider, am besten Full-Width. Wenn ihr auf Slider setzt, dann so einen der so krasse Effekte hat. Warum nicht ein bisschen mit CSS3 rumspielen und Wörter und Bilder nacheinander einfliegen lassen? Blueline Productions hat zum Beispiel sowas, ich sitz gerade an einem neuen Slider für die Jungs der ein bisschen mehr auf CSS3 und weniger auf JavaScript setzt- auch mit verrückten Slide-Effekten. Naja, wenn ich fertig bin sag ich Bescheid.

Verrückte Sache. Durch Scrollen bewegen sich die Bilder unterschiedlich schnell auf dem Bildschirm und schaffen so eine fantastische Tiefen-Illusion. Wer nicht weiß was ich meine, sollte sich sowas unbedingt mal angucken. An dieser Stelle wollte ich Schleichwerbung für Nike machen, die HATTEN nämlich so eine Seite-tja, dann nicht. Stattdessen www.iutopi.com. Ziemlich cool oder? Nicht umsonst "Site oft he Day". Wenn ich die Zeit dazu hätte würde ich mir sowas auch basteln!

14FEB

Bewerbungsprojekt für eine begabte Tänzerin

Absolut gelungenes Teamwork!

Die Nachwuchs Hip Hop Tänzerin Mai Quynh Le Thi hat den großen Wunsch an der weltbekannten "The Juilliard School" in New York - ein Musikkonservatorium und eine Schauspielschule - zu studieren. Um ihr Talent zu unterstützen, hat die Agentur Whitedesk ein Team an verschiedenen Firmen zusammengesetzt und wir haben alle zusammen mal eine ganz andere Bewerbung zu Stande gebracht.

Eine komplette Zusammenfassung unserer Arbeit könnt ihr euch auf der Landingpage angucken.

Das Bewerbungsvideo:



Hier eine kleine Liste von den Mitwirkenden:

Darsteller: Le Thi Mai Quynh, Michél Meier, Till Krücken, Maxi & Fabienne
Choreographie: Le Thi Mai Quynh, Michel Meier, Part of IaMmE Crew (Texas)
Kamera: Christian Beer & Karsten Schaarschmidt
Licht: Christopher Reiß
Organisation: Sandro Jödicke & Stefan Feichtinger | WHITEDESK
Technik: Benjamin Zeising & Peter Rudolph
Fahrzeuge: Stefan Herzog | BLUEGREEN ERFURT

Organisation & Text: Johannes Wiese | BLUELINE PRODUCTIONS
Layout & Landingpage:Tamara Baptista | BAPTISTA DESIGN



Wir drücken dir die Daumen Mai, dass es mit der Bewerbung an der Juilliard klappt- wir haben alle unser Bestes gegeben!



31JAN

Neues Designtemplate

Hin und wieder wird es Zeit neue Designs zu präsentieren. Hier mal ein Designbeispiel für ein kreatives Portfolio. Bei diesem Beispiel ist bewusst mal ein besonders auffälliges grün genutzt worden - schlicht und unauffällig kann doch jeder...


Hinweis: Dieses Template ist bisher nicht genutzt. Bei Interesse könnt ihr euch gerne bei mir melden.



15DEZ

Redesign Blueline Productions

Die Kommunikationsagentur Blueline Productions hat sich dazu entschieden vor dem Jahreswechsel mit einer neuen Webpräsenz zu glänzen und hatte dabei meine Unterstützung bei Redesign und Umsetzung. Ich hoffe euch gefällt die neue Seite genauso wie uns. Anschauen könnt ihr die Seite übrigens unter www.blueline-productions.de



23OKT

Relaunch und neuer Claim

Wer heute zum ersten Mal auf meiner Seite ist, dem gefällt hoffentlich was er sieht. Wer aber die "alte Seite" kannte, wird erkennen, dass das Grunddesign geblieben ist, wenn auch schlichter und mit mehr Text. Auch wenn die alte Seite noch gar nicht so alt war, war es an der Zeit...


Mehr...

08OKT

INPUT - Der neue Studentenkalender ist endlich da!

2000 Exemplare werden heute vom StuRa der Fachhochschule Erfurt kostenlos verteilt. Glück hat, wer einen liebevoll gepackten Stoffbeutel der FH mit kleinen Überraschungen abgreifen kann, denn da ist auch der INPUT drin. 15 Monate Kalender, mit farblicher Unterteilung, damit man genau erkennen kann, wann die vorlesungsfreie Zeit und wann die Prüfungszeit beginnt. Mal ehrlich, was ist für einen Studenten wichtiger als zu wissen wann man frei hat? Richtig -wann die nächsten Ersti-Partys in der Stadt sind? Und genau dehalb stehen diese schon in dem Kalender drin.


Nach langer Planung und vielen Stunden Arbeit sind wir stolz unseren Kalender präsentieren zu dürfen- Teamwork pur. Das Design und den Satz habe ich übernommen, nachdem ich die Inhalte vom StuRa bekommen habe. Blueline Productions hat sich dabei um die Umsetzung und die Anzeigenakquise gekümmert. Ich hoffe wir sind nächstes Jahr wieder ein Team!



Twitter