Geschrieben von Christian Schnettelker

Links deluxe, Folge 1

Ich habe heute einmal ein paar Seiten aus meinem Linkverzeichnis herausgesucht, die ich regelmäßig nutze, da sie für meine Arbeit von besonderer Güte und Nützlichkeit, also sozusagen „deluxe“ sind. Da in der nächsten Zeit sicher immer wieder neue Seiten hinzukommen werden mache ich daraus eine kleine Reihe, heute also Folge 1:

http://www.whatfontis.com/

Oft habe ich das Problem, dass mir z.B. ein Logo zur Verfügung gestellt wird, aber sämtliche anderen Informationen dazu fehlen, insbesondere der Name der verwendeten Schriftart. Mittels whatfontis.com kann man jetzt nachträglich feststellen, welcher Font vom Designer des Logos benutzt wurde.

Dazu lade ich den Teil der Grafik hoch, der den geschriebenen Text enthält und bestätige innerhalb der Seite die per OCR erkannten Buchstaben. Anschließend wirft mir das System eine Liste kommerzieller und / oder freier Schriftarten aus, die gleich oder zumindest ähnlich zum fraglichen Font sind. Nützlichkeitsfaktor: ★★★★ (vier von fünf Sternen).

http://ami.responsivedesign.is/

Da ich zunehmend an mobile Endgeräte angepasste Seiten („Responsive Webdesign“) entwickle habe ich auf der Suche nach einer Simulationsmöglichkeit die Lösung von ami.responsivedesign.is entdeckt. Gibt man dort eine beliebige URL ein wird die Darstellung auf einem Desktop-PC, Notebook, Tablet und Smartphone realitätsnah simuliert, sogar Animationen und das Scrolling funktioniert auf den „virtuellen Geräten“.

Screenshot Simulation Responsive Webdesign manoftaste.de
Besonders praktisch ist es auch, einen Link mit Angabe der gewünschten URL verwenden zu können, z.B. http://ami.responsivedesign.is/?url=http://www.manoftaste.de, wobei dann automatisch die jeweilige Seite auf den vier Geräten angezeigt wird. Nützlichkeitsfaktor: ★★★★★ (fünf von fünf Sternen).

http://www.fontsquirrel.com/

Bei größeren Projekten gehe ich vermehrt dazu über, die Fonts direkt vom eigene Server über @font-face zu laden, einfach weil es meist schneller funktioniert als der Ladevorgang über die Google-Webfonts und ein unschönes „springen“ des Schriftbildes entfällt.

Auf fontsquirrel.com gibt es eine umfangreiche, gut sortierte Liste an freien Webfonts und zusätzlich für die meisten Fonts auch einen sogenannten „Webfont kit“, also vorgefertigter CSS-Code zum einfachen Einbinden der Schriftart. Zudem werden die Fonts nach Auswahl in verschiedenen Schriftgrößen unter realistischen Bedingungen dargestellt, was die Auswahl sehr erleichtert. Nützlichkeitsfaktor: ★★★★★ (fünf von fünf Sternen).

http://www.pictaculous.com/

„Ever wonder what colors to use with an image?“. Die Seite pictaculous.com analysiert ein dort hochgeladenes Bild und wirft eine Palette von fünf zu diesem Bild passende Farben aus; das ist sehr nützlich bei der Entwicklung eines zu einer Fotoserie passenden Layouts, zumal der Hex-Code für die CSS-Datei gleich mitgeliefert wird. Allerdings verlasse ich mich nicht ausschließlich auf die vorgegebenen Farben sondern gehe auch oft nach meinem persönlichen Farbempfinden vor. Nützlichkeitsfaktor: ★★★ (drei von fünf Sternen).

http://www.iconfinder.com/

Zur Auflockerung des Textes, oder um die Aufmerksamkeit des Benutzers gezielt zu lenken, bietet sich der (gelegentliche) Einsatz von Icons an. Da mir in der Regel die Zeit fehlt, diese Grafiken selber zu erstellen, greife ich meist auf frei verfügbare Werke aus dem Netz zurück.

Hier erleichtert die Seite iconfinder.com die Suche erheblich, kann dort doch nach Begriffen wie „Musik“, „Medic“, „Doctor“ etc. gesucht und die Auswahl auf frei verfügbare Icons beschränkt werden. Aber, wie bereits gesagt, setze ich Icons nur gelegentlich ein, deshalb ist der Nützlichkeitsfaktor: ★★ (zwei von fünf Sternen).

http://placeit.breezi.com/

Zum Abschluss noch eine nette Seite, die hin und wieder für das Vorstellen eines responsiven Webdesign nützlich ist. Auf placeit.breezi.com laden Sie einen Screenshot, z.B. des Layout einer Seite auf einem Smartphone oder Tablet hoch, das Programm rechnet diese Grafik dann in verschiedene Alltagsbilder ein:

In das Bild eines Tablets eingerechneter Screenshot
Laut Angabe der Seite können diese so generierten Bilder für alle, auch kommerzielle Zwecke benutzt werden („Images are ok to use for commercial purpose“). Übrigens müssen Sie den Screenshot nicht selber herstellen, es kann auch einfach eine URL angegeben werden, das Programm holt sich dann den passenden Screenshot selber. Wirklich toll gemacht, aber ehr ein „Gimmick“, deshalb vergebe ich den Nützlichkeitsfaktor: ★★ (zwei von fünf Sternen).

Kommentare

Kommentare

Kommentar schreiben

Allgemeiner Hinweis: Bitte kommentieren Sie zum Thema unter Vermeidung von Allgemeinplätzen. Eine gute Rechtschreibung sollte selbstverständlich sein.

Hinweis für SEO-Kommentarschreiber: alle Links sind nofollow und steigern Eure Linkpopularität nicht. Offensichtliche SEO-Kommentare werden nicht oder in anonymisierter Form veröffentlicht.