Seit dem ersten lesen sind fast 10 Monate vergangen und ich denke immer noch darüber nach. Um es vorwegzunehmen, ich bin inzwischen zu dem Schluss gekommen, das Design auf jeden Fall erlernbar ist, man muss aber differenzieren.

Wo zieht man die Linie zwischen Design und Kunst? Ich denke diese Frage beschreibt das Ganze ziemlich gut. Wenn man öfters auf Seiten stöbert, wie in unserem Beitrag kostenlose Design Inspirationen vorgestellt, wird einem dies immer wieder bewusst.

Die ersten Sachen die ich, wenn man das überhaupt so nennen kann, designed habe waren einfach nur hässlich. Dies lag aber zum großen Teil daran, dass mir einfach fundamentale Grundkenntnisse im Bereich der Grafik Programme fehlten. Da ich aber Spaß am designen hatte und das nun auch beruflich aktuell wurde, machte ich einfach immer weiter. Es ging schneller voran als ich gedacht hatte, ich lernte immer mehr die Werkzeuge der Grafikprogramme einzusetzen, ich wusste am Anfang ja nicht mal den Unterschied zwischen einem Vektor und einer Bitmap Grafik, obwohl ich davor immer dachte es zu wissen. Inzwischen mache ich, wie ich denke, ganz gute Designs und die Sachen gehen wirklich schnell von der Hand. Man fängt irgendwann damit an seine Umwelt ein bisschen anders wahrzunehmen. Wenn ich irgendwo einen ansprechenden Flyer sehe, schaue ich mir diesen immer genau an und nehme ihn teilweise auch mit um mich inspirieren zu lassen. Dies gilt natürlich nicht nur für Flyer sondern für jegliche Design Inspiration, denen man sich heute ja nicht mehr entziehen kann.

Um nun aber zu Thema zurück zu kommen, inzwischen bin ich der Meinung, dass Design auf jeden Fall erlernbar ist. Mann muss aber immer Unterscheiden. Was definitiv erlernbar ist, sind die Techniken, die Grafikprogramme so einzusetzen um das gewünschte Resultat auch technisch umzusetzen zu können. Was man sich auch aneignen kann ist ein gewisses Auge, wobei ich hier sagen muss, dass ich das schon immer ein bisschen hatte, glaube ich zumindest.

Übung macht zwar den Meister und mit dem beherrschen diverser Techniken, in Verbindung mit genug Inspiration, können wirklich sehr ansprechende Designs enstehen. Aber eines ist für mich klar geworden, es gibt Menschen die mit einem Talent geboren sind, dass man nicht erlernen kann. Diese Menschen machen Designs mit denen ich mich niemals messen werde können, denn hier geht es eben schon in Richtung Kunst und künstlerische Begabung. Ich finde das aber gar nicht so schlimm und erachte es auch für eher unwichtig. Mein Kerngebiet ist Programmieren und nicht Designen. So lange einem die ganze Sache Spaß macht und als Abwechslung dient, kann ich es jedem nur empfehlen.

Das ist in etwa der Stand auf dem ich im Moment stehe. Dieser Artikel soll aber nicht nur meine Gedanken zu dem Thema wiedergeben, er ist auch ein Aufruf zur Diskussion an alle Leute, die diesen Artikel lesen und etwas dazu beitragen wollen. Vor allem würden mich Meinungen von Leuten interessieren, denen es ähnlich geht und die vielleicht die gleiche Ehfahrung gemacht haben.

Und BTW wie findet Ihr den unsere Designs:
Ilimitado
Ilimitado Labs
Ilimitado Referenzen

Bücher:

Es gibt auf publicons.de nach Kategorien geordnete Listen, aus welchen man auswählen kann, welche Icons zu einem passen, anschließend erhält man einen Link zu seinem Steckbrief/Visitenkarte. Das kann man nun in seinem Blog als Art Vorstellung des Charakters einbinden, oder in Forensignaturen hinzufügen.

Es gibt auch noch alternative Darstellungen, wie vertikal, oder aber horizontal und dann mit kleinen Icons.
Also, mein Tipp: einfach mal durchschauen und testen.

Die Idee ist von daher sehr nett, da man anhand der Icons schnell erkennen kann, welche Interessen, Meinungen und Einstellungen der mir ja meist unbekannte Autor hat.

Web Galerien:

• Best Web Gallery
  
• ndesign Studio
  
• Smashing Magazine
  
• 60 elegant and visually appealling designs
• 50 beautiful css based webdesigns
• simple and clean designs
• 45 fresh clean and impressive designs
• 30 dark designs
• Designmeltdown
  
• Vecteezy
  
• Web Creme
  
• Illustration class
  
• Veerles blog
  

Logo Galerien:

• Logopond
  
• Deviantart
  
• Elogodesign
  
• Brandsoftheworld
  

Bücher:

Ich hoffe ich konnte dem ein oder anderen hiermit weiterhelfen. Wenn Ihr noch mehr Webseiten mit Galerien kennt, schreibt bitte einen Kommentar, damit alle daran teilhaben können. Weil man kann noch so kreativ sein, ohne Inspiration kommt man selten aus bzw. zu einem guten Design.

Zwar mag dies auf den ersten Blick ungeeignet für barrierefreies Webdesign, nach längerem Nachdenken finde ich das aber gar nicht. Es ist vielmehr so, wenn ich einen Link mit der Maus berühre und ich sehe einen kleine Screenshot bevor ich die Seite besuche kann ich schon eine kleine Vorentscheidung treffen, z.B. kenne ich die Seite bereits und erinner mich anhand des kleinen Vorschau Bildes daran.
Besucher der Seite ohne aktiviertes JavaScript bekommen keinen Screenshot angezeigt und der Link funktioniert ganz normal.
Die Technik bietet also eine Zusatzfunktion für Homepage Besucher, die sie zulassen. Vor allem ist in jeder Sprechblase ein Optionsmenü integriert, in welchem sich die Vorschau Screenshots für die derzeitige oder sogar für alle Homepages deaktivieren lassen. Somit kann jeder Besucher für sich selbst entscheiden ob er diese Screenshots in der Sprechbalse sehen will oder nicht oder ob sie auch für alle sonstigen Homepages deaktiviert werden soll.

Aufgrund der Einfachheit der Technik kann man sie einfach mal testen und dann für sich entscheiden ob man sie einsetzen will, ich persönlich halte es für ein echt nettes Feature, kann mir aber vorstellen das es mich irgendwann nervt wenn jede Seite im Netz die Technik einsetzen würde,… mal sehn…

Favicons (von Favorit und Icon) sind kleine, 16×16 Pixel großes Bildchen. Sie werden in der Adresszeile eines Browsers links von der URL angezeigt, sowie auch in den Lesezeichen (Favoriten).
Das Format ist das Microsoft .ICO Format (MIME-Type image/vnd.microsoft.icon).
Eingebunden in die Homepage werden sie über die HTML – Meta Angabe

<link href="/path/to/favicon.ico" rel="Shortcut Icon" />

innerhalb des HTML – HEAD Bereichs.

Leider kann man aus gängigen Graphikprogrammen dieses Format nicht ohne weiteres exportieren. Es gibt allerdings eine Homepage welche einen Online Favicon Editor, bzw einen Online Favicon Creator anbietet. Dort können .gif, .png oder .jpg Dateien importiert werden und im .ico Format gespeichert werden. Ausserdem ist es möglich Online das Favicon zu verändern durch setzen von Pixeln. Einfach mal testen!

Etwas komfortabler ist das Feeware Desktop Tool IcoFX. Es bietet alles, was ein Icon Editor braucht. Hier lassen sich ebenfalls png, gif, jpg etc. importieren. Außerdem ist es möglich, transparente Icons zu erzeugen. Für Unterwegs gibt es sogar eine lauffähige standalone Version für den USB Stick (unter downloads)
Da dies nicht alle Browser unterstützen bietet das .ICO Format die Möglichkeit mehrere Versionen des Icons in eine Datei zu speichern. Z.B. ein 16×16 großes Icon mit (alpha) Transparenz und ein 16×16 großes Icon ohne (alpha) Transparenz. Ausserdem kann man auch noch zusätzlich ein 32×32 Icon oder andere Größen mit in das Favicon speichern. In Browser wird aber nur das 16×16 Icon benötigt.

Favicons sind meiner Meinung nach auch etwas, was man im weiten Sinn als Pflicht für barrierefreies Webdesign sehen kann. Ich surfe oft mit vielen offenen Tabs und anhand der Favicons kann ich doch um einiges schneller zwischen den Tabs umschalten, da ich anhand des Icons sofort sehe, welche Homepage unter welchem Tab ist.

Es ist übrigens z.B. im Mozilla Firefox auch möglich über die zusätzliche zweite HTML – Meta Angabe

<link href="/path/to/favicon.ico" rel="Shortcut Icon" />
<link href="animated_favicon.gif" rel="icon" type="image/gif" />

innerhalb des HTML – HEAD Bereichs, zusätzlich zum normalen Favicon ein animiertes Favicon bereitzustellen. Hierzu wird ein normales animiertes GIF benötigt. Der Firefox zeigt dann an der Stelle des Favicons das animierte Favicon (gif) an. Alle anderen Browser das normale Favicon (ico).

In Bezug auf barrierefreies Webdesign ist von animierten Favicons dann aber doch eher abzuraten und auch meine persönliche Meinung ist, dass dies hin und wieder ganz nett und effektvoll ist, aber im Endeffekt irgendwann nervt und nur ablenkt, ich rate von animierten Favicons also eher ab.

update
Ideen, und wie man sein eigenes Favicon gestalten kann bietet seit neustem das Smashing Magazin im Beitrag “Creative Favicons: When Small Is Beautiful”

Als erstes checken wir Preview, damit wir sehen können wie unser Pfad nach anwenden des Effektes aussehen wird. Nun hat das ganze schon die Form eines Ei´s. Durch eingeben der numerischen Werte kann das Ei nun beliebig in alle Richtungen gedreht werden bis die gewünschte Perspektive erreicht ist.
Meine Werte:

• Rotation X-Achse: -165
• Rotation Y-Achse: – 54
• Rotation Z-Achse: 104

Es dürften an dem Ei jetzt 2 Sachen auffallen, zum einen sieht es noch nicht so richtig wie ein Ei aus, da die Oberfläche zu sehr reflektiert, zum anderen sieht es aus als ob es Schlieren auf der Oberfläche des Eis geben würde.

Um das erste Problem mit der Reflektion zu beheben wählen wir einfach, immer noch im gleichen Dialog, die Option Surface aus und setzen diese von Plastic- auf Diffuse Shading. Hiermit änderen wir den Oberflächentyp. Das Ei spiegelt jetzt nicht mehr so stark und sieht, was die Spiegelung angeht, schon wie ein Osterei aus. Das zweite Problem sind die Schlieren. Diese entstehen weil Illustrator standardmäßig nur mit 25 Blend Steps arbeitet, d.h. es werden nur 25 Schlüsselbilder erzeugt um das Effekt Resulatat zu erzielen. Dies ist wie man sieht zu wenig, deshalb klicken wir im gleichen Dialog einfach auf More Options. Das folgende Fenster erscheint:

Nun wählen wir im Dialog die Blend Steps aus und tragen einen höheren Wert ein. Ich verwende in meinem Beispiel einen Wert von 52.

Nun haben wir ein perfektes Ei aber eben noch kein Osterei. In Teil 3 werden wir uns dann dieser Sache annehmen indem wir eine Textur erstellen und Sie über das Ei legen.

Im folgenden wird das ganze dann in 3 Teilen Schritt für Schritt mit ein paar Bildern erklärt. Wir beginnen mit dem aufziehen einer Ellipse mit dem Ellipse Tool. Die Füll Farbe ist transparent, mit einer 1pt Stroke. Um einen Halbkreis zu bekommen klickt man mit dem Schneidewerkzeug (Scissors Tool) auf den oberen und den unteren Anker der Ellipse. Nun trennen wir die beiden Pfade voneinander und erhalten so einen runden Pfad, der schon fast wie ein Ei aussieht. Aber halt nur fast. Mit dem Direct Selection Tool klicken wir jetzt auf den oberen Ankerpunkt und ziehen in etwas nach oben, um die länglichere Form eines Ei´s zu bekommen. Da die Farbe der Stroke später die Farbe des Ei´s sein wird wählen wir die gewünschte Stroke Farbe aus. Ich verwende hier das ilimitado Grün:

• Rot: 168
• Grün: 194
• Blau: 29

Es gibt in Adobe Illustrator 3 Arten von 3D Effekten aber dazu morgen mehr.