Tipps aus den veschiedenen Bereichen des Webdesigns

Klicken Sie einen der folgenden Links und lesen Sie den Tipp Ihrer Wahl

→ Das Internet in Zahlen
→ Icons schaffen Platz
→ Spiegeleffekt mit Illustrator
→ Mehr als nur eine Schrift. Freie Webschriften kostenlos und kommerziell nutzbar.

Das Internet in Zahlen

Wer sich für Statistiken interressiert und daraus auch gern seine Schlüsse zieht, dem sei die Seite http://httparchive.org empfohlen. Die Seite bietet viele Interessante Statisitiken, wie zum Beispiel die Verwendung von jpgs, gifs oder pngs im gesamten Netz in Prozent. Auch werden verschiedene Trends abgebildet: zum Beispiel wie viele Seiten mit einem Sicherheitsprotokoll versehen sind, wie viele Seiten Flash benutzen und vieles mehr.

[zurück nach oben]

Icons schaffen Platz

Mit der zunehmenden Verwendung von Smartphones wächst auch die
Notwendigkeit, Websites speziell für Smartphonebildschirme zu kreieren.
Da das Platzangebot dieser Bildschirme naturgemäß begrenzt ist, ist es bei dem Entwurf von Seitendesigns sinnvoll, Informationen in Form von Icons zu vermitteln.

Wenn diese dann noch als Link dienen, stellen sie ein hervorragendes Instrument dar, das optisch auch noch eine Menge hermachen kann.

Ein Beispiel, wie Icons eingesetzt werden können ist hier zu finden. Trotz starker Generalisierung lässt sich nahezu jeder Inhalt transportieren. Ganz ohne Zahlen werden hier mehrere Alterstufen eines Menschenlebens dargestellt.

Noch dazu können Icons, je nachdem welche Zielgruppe angesprochen werden soll, eher technischer Natur sein oder aber humorvoll gestaltet werden. Ein weiterer Vorteil von Icons ist die gute Integration in ein vorhandenes CI (Corporate Identity) Allein durch die Gestaltung in den entsprechenden Farben.

Wenn ein Icon mit nur zwei Farben gestaltet wird, ergibt sich auch ein hervorragender Wiedererkennungswert, wenn es in Schwarz / Weiß dargestellt wird.

[zurück nach oben]

Spiegeleffekt mit Illustrator.

Erzeugen Sie einen Spiegeleffekt mit Illustrator statt mit Photoshop.

Für das Design von Webseiten ist der Spiegeleffekt mittlerweise ein wichtiger Bestandteil geworden. Viele Designer verwenden diesen Effekt, um ihre Seiten plastischer darzustellen.

Ohne Umweg über Photoshop.

Oft wird der Spiegeleffekt in Photoshop erzeugt. Wenn jedoch eine Grafik in Illustrator erstellt wird, braucht man diese nicht erst in eine Pixelgrafik umwandeln, sondern kann diesen Effekt auch ganz schnell und leicht in Illustrator direkt erzeugen. Dazu kann man  wie folgt vorgehen:

Öffnen Sie die zu spiegelnde Grafik in Illustrator.

Markieren Sie diese und verwenden Sie die Befehle Kopieren und Davor einfügen (cmd+c und cmd+f). Jetzt muss die Grafik noch horizontal gespiegelt werden.

Verwenden Sie nun die Pfeiltasten ihrer Tastatur, um die markierte Kopie der zu spiegelnden Grafik nach unten zu verschieben, sofern die Spiegelung unter der Grafik erfolgen soll. Es ist von Vorteil, wenn zwischen der Ursprungsgrafik und der Kopie ein kleiner Spalt gelassen wird, das der Effekt so noch realistischer wirkt.

Die kopierte Grafik muss nun markiert werden. Öffnen Sie das Arbeitsfenster Transparenz. Klicken Sie doppelt auf den rechten leeren Bereich neben dem Quadrat. Die Grafik kann nun mit einer Maske belegt werden.

Verwenden Sie dazu als nächstes die Rechteckfunktion und ziehen Sie ein neues Rechteck über die soeben angelegte Kopie Ihrer Grafik.

Füllen Sie das neue Polygon mit einem Verlauf von schwarz nach weiss, wobei schwarz transparent ist und weiss die Farbe des Hintergrundes einnimmt. Stimmen Sie den Verlauf mit Ihren Vorstellungen von dem Spiegeleffekt ab et voila: Ihr Spiegeleffekt ist fertig!

[zurück nach oben]

Mehr als nur eine Schrift.

Freie Webschriften zur kommerziellen Nutzung
Mit der Einführung des CSS Befehls @font-face begann eine Revolution im Netz. Endlich konnten Seiten erstellt werden, die nicht mehr von den Systemschriften des jeweiligen Betrachters einer Website abhängig waren. Keine Beschränkung mehr auf Arial, Verdana oder sonstige gängige Systemschriften. Die Website Squirrel --> www.fontsquirrel.com bietet, wie viele andere Websites auch, Schriften an. Allerdings, und das ist das besondere, kommerziell nutzbar und trotzdem frei.

Die Menüpunkte Popular und Recent auf der Squirrelseite geben Aufschluß über die am häufigsten heruntergeladenen oder die neu hinzugefügten Schriften. Wenn man sich für eine Schrift entschieden hat, kann man diese anpassen - ob fett, kursiv oder light - je nachdem welche Optionen für die Schrift zur Verfügung stehen. Weiterhin kann ein Beispieltext eingegeben werden, um zu sehen ob einem die Schriftzüge für ein Wort oder einen Textabschnitt auch wirklich gefallen.

Die meisten Schriften sind als OTF (Open Type Font) oder als @font-face Kit erhältlich. Diese Kits sind Ordner, die, einmal als .zip Datei heruntergeladen und entpackt, die jeweilige Schrift in ihrer unterschiedlichen Ausführung, CSS-Code zum Einbinden in die CSS Datei, eine Demo HTML, Lizenzinformationen und einges mehr enthalten.

Aber das ist nicht alles. Squirrel bietet auch einen @font-face Generator. Hier können Schriften ausgewählt und so individuelle Kits zusammengestellt werden.

Hier sind freie Webschriften erhältlich:
→ www.fontsquirrel.com
→ www.google.com/webfonts
→ www.fonts.info/info/index.htm

Hier sind kostenpflichtige Webschriften erhältlich:
→ www.fontslive.com
→ fontdeck.com
→ typekit.com
→ www.typotheque.com/webfonts

[zurück nach oben]