tonakademie bietet online Musik-Kurse an
Wer hier häufiger mal vorbeischaut, wird schon mitbekommen habe, dass ich gerne Websites vorstelle, die ich bei Web2Null entdeckt habe. Diesmal ist dies die tonakademie aus Erding. Hier kann man online Musikinstrumente spielen lernen. Derzeit sind dies etwa Gitarre und Schlagzeit für Anfänger sowie Praxis-Kurse für E-Bass und etwas, dass sich Funky Drumming nennt.
In die Kurse kann man kostenfrei reinschnuppern, wer aber den vollen Lernumfang inkl. Videos, Noten, Übungen, Playalongs, Aufgaben und das Kursforum nutzen möchte, zahlt € 19,95 für 30 Tage. Weitere Kurse werden, wie die bestehenden auch, mit ausgebildeten Musikern erarbeiten.
E-Learning ist ja schon so lange eine kommendes großes Ding im Web, dass ich echt mal froh bin, so ein Angebot, wie das von der tonakademie zu Gesicht zu bekommen. Auch wenn ich selbst so fürchterlich unmusikalisch bin, dass dieses Angebot für mich schlichtweg rausgeworfenes Geld wäre.
von Matthias Zellmer
Cheat sheets für Web-Entwickler

Cheat sheet übersetzt man wohl am besten mit “Spickzettel” und im Netz gibt es sie inzwischen in x-facher Form. Denn es ist fast schon zu einem Sport für Web-Entwickler, -Designer und Konzepter geworden, solche Spickzettel für die unterschiedlichsten Bereiche anzulegen. Zudem tun dann auch Blogger und Online-Redakteure das, was sie bei einer solchen Schwemme gerne tun: Sie legen Listen an.
Ich für meinen Teil lege darum heute auch eine Liste an, eine Meta-Liste mit Cheat-Sheet-Listen:
- Design Reviver: 10 Web Design Cheat Sheets You Can’t Live Without
- Dr.Web: Cheat Sheet List – Spickzettel Sammlung
- t3n: Hilfreiche Cheat-Sheets zu HTML5, CSS3 und jQuery
- HTML5Tutorial: 9 hilfreiche HTML5 und CSS3 Cheat Sheets
- WebDesign by mts: 10 Spickzettel oder Cheat Sheets
- Added Bytes: Cheat Sheets
- it republik – PHPmagazin: Etliche Cheat Sheets für PHP, CSS, Drupal u.v.a.
- Elmastudio: 18 hilfreiche Cheat Sheets für Programmierer
- Web Tuts: 25+ aktuelle Cheat Sheets für Webworker
- Smashing BUZZ: Ultimate WordPress Cheat Sheet to Enhance Blog Skills
von Matthias Zellmer
Methoden zur Visualisierung als Periodensystem
In der Grafik oben wird eine Übersicht über Visualisierungsmethoden in Form eines Periodensystems gezeigt. Und auch, wenn diese Infografik schon einiges verrät, offenbart sie die ihn ihr steckenden Informationen erst auf der Ursprungswebseite A Periodic Table of Visualization Methods auf Visual Literacy. Denn dort ist hinter jedem “Element” ein anschauliches Beispiel hinterlegt, ähnlich einem Adventskalender. Per Mouseover wird einem dort offenbart, was es jenseits von Excel-Tabellen und Mind-Maps, noch an Möglichkeiten gibt, Daten und Informationen aufzubereiten.
von Matthias Zellmer
Fundsters – themenoffenes Crowdfunding
Mit Fundsters steigt eine weitere Crowdfunding-Plattform in den Ring. Das Start-up aus dem niederrheinischen Meerbusch lässt die thematische Ausrichtung der zu finanzierenden Projekte offen, was sie von einigen Mitbewerbern abgrenzt.
Fundsters bietet dabei zwei grundlegende Wege der Ideenfinanzierung an: Die Investition, die einen später an den Gewinnen und Wertsteigerungen des Projekts teilhaben lässt und die Möglichkeit dem Projekt über einen finanziellen Beitrag auf die Beine zu helfen.
Der Anteil, den sich Fundsters für seine Dienstleistung abzweigt, hört sich für mich durchaus fair an: 4% der Fundingsumme für eingegangene Finanzierungsbeiträge und 9% für Investitionen. Ausgezahlt wird nur, wenn das Fundingziel erreicht ist. Andernfalls bekommen die Unterstützer ihr beigesteuertes Geld vollständig wieder zurück.
— via Web2Null
von Matthias Zellmer
RDW Wireframing – Online Tool für responsive Mockups
Wer mal auf die schnelle ein einfaches, aber doch responsives Mockup für eine Webseite machen möchte, kann sich ja mal RDW Wireframing ansehen. Dies ist ein Online-Tool für Informationsarchitekten und Konzepter, das zwar kaum professionellen Ansprüchen genügen wird. Doch für zwischendurch, vielleicht auch unterwegs, ist RWD Wireframing durchaus eine Option. Das Tool kann übrigens auch via Github heruntergeladen werden.
— via Wireframing Magazin
von Matthias Zellmer
Word-Art – künstlerisch mit Schrift umgehen
Nein, hier geht es nicht um das schreckliche Wordart von Microsoft Word. Es geht um richtige Kunst. Denn als ich auf Dressed Like Machines die folgende Grafik über Word-Art entdeckt habe, war ich sofort extrem begeistert. Aber schaut es euch selbst an: || Den ganzen Beitrag lesen »
von Matthias Zellmer
Design-Guru Hartmut Esslinger über Gestaltung
Vor ein paar Wochen habe ich in der Süddeutschen Zeitung ein Interview mit dem Design-Guru Hartmut Esslinger gelesen. Leider habe ich es versäumt, die Ausgabe zu retten, bevor sie bei Anzünden unserer Stückholz-Heizung Verwendung fand. Doch weil mich das Interview mit dem kongenialen Partner von Steve Jobs schon nach wenigen Zeilen ziemlich beeindruckt hat, habe ich mir zum Glück direkt beim Lesen ein paar Stichwort zu seinen zentralen Thesen aufgeschrieben. Zu denen möchte ich gleich kommen, doch zunächst ein paar Zeilen zu Hartmut Esslinger und seiner Arbeit.
Der in Beuren bei Karlsruhe geborenen Esslinger, hat als Designer und Gründer von frog design einige wichtige Weichen im Bereich Produkt- und Software-Design gestellt. So zeichnet er u.a. verantwortlich für das richtungweisende Design des Apple IIc, des NeXTcube und auch bei der Gestaltung von Windows XP war er maßgeblich beteiligt. Mit Steve Jobs hatte er eine intensive Arbeitsbeziehung, die den guten Ruf von Apple als zuverlässigen Design-Trendsetter erst möglich gemacht haben soll.
Nun aber zu den Design-Thesen Esslingers: Im Mittelpunkt einer jeder gestalterischen Maßnahme steht immer der Mensch … und nicht der Gegenstand. Design muss bei den Menschen etwas auslösen. Darum muss man ihnen immer auch Raum für eigene Interpretationen lassen. Niemals darf man beim Design Kompromisse machen. Und auch wenn viele das denken, bei der Gestaltung, kommt es nicht auf Schönheit an. Viel mehr müssen die Proportionen stimmen und die Bedienelemente richtig positioniert sein. Zu guter Letzt ist es dann noch wichtig, dass egal was man gestaltet, man es für heute gestaltet. Nur dann kann es zeitlos werden.
Mir zeigt dies, wie wichtig z.B. in der Web-Gestaltung der Bereich der User Experience ist. Beim Design einer Website müssen zunächst einmal die zentralen Bedürfnisse der Nutzer berücksichtigt werden. Und die liegen meist darin, dass sie entweder die gesuchten Informationen reibungslos finden oder die Website einwandfrei funktioniert. Die Schönheit der Website ist hier absolut zweitrangig. Wichtiger ist, dass die Optik einer Website den Erwartungen der Nutzer entspricht. Einer kleinen Pension im Thüringer Wald lässt man ein rustikales Erscheinungsbild eher durchgehen, als einer internationalen Hotel-Kette. Doch wichtig ist, dass die Nutzer in beiden Fällen möglichst auf den ersten Blick erkennen, wie sie an ihre Informationen z.B. über Preis oder Anfahrt kommen.
Besonders spannend finde ich jedoch den Aussage Esslingers, dass man beim Design niemals Kompromisse machen darf. D.h. auch, dass man bei einem Dissens immer dazu bereit sein muss, eine ganz neue Lösung zu suchen. Zu einer ähnlichen Erkenntnis ist seinerzeit auch schon Albert Einstein gekommen. Er hat es folgendermaßen ausgedrückt:
Zwei Dinge sind zu unserer Arbeit nötig: Unermüdliche Ausdauer und die Bereitschaft, etwas, in das man viel Zeit und Arbeit gesteckt hat, wieder wegzuwerfen.
Dem habe ich nichts mehr hinzuzufügen.
von Matthias Zellmer
Online-Vertrieb: Sieben Usability-Todsünden
Bei den amerikanischen Kollegen von KISSmetrics gibt es einen interessanten Artikel, den ich euch nicht vorenthalten möchte. Sie listen dort sieben Usability-Todsünden beim Online-Vertrieb auf.
Die 7 schwerwiegenden Fehler, die Gregory Ciotti dort zusammengetragen hat, sind folgende:
- Fehlender Schwerpunkt auf den Überschriften
- Lange Seiten-Ladezeiten
- Unlesbare Typografie und Abstände
- Lesegewohnheiten beim Gestalten vernachlässigen
- Verwirrende Navigation
- Blindes Vertrauen auf die »3-Klick-Regel«
- Falsche Abstände und lange Landing-pages
Warum diese Usability-Sünden so gravierend sind, zeigt Gregory Ciotti anhand von Beispielen und Studien auf KISSmetric ausführlich auf. Darum jetzt nix wie rüber…
von Matthias Zellmer
Ein paar ausgesuchte Lesetipps … mal wieder

Heute gibt es mal wieder ein paar Linktipps von ein paar erwähnenswerten Beiträgen bzw. Artikeln aus dem Netz. Los geht’s mit einer…
Mini-Studie: Einsatz von Shopsystemen in Deutschland
Auf Webzapper, dem E-Commerce-Blog der FH Wedel hat Jan-Philipp Evers eine Mini-Studie zum Einsatz von Shopsystemen in Deutschland veröffentlicht. Soviel schon mal vorab: Intershop ist der absolute Platzhirsch in diesem Marktsegment.
Social Media Image Maker
Ein feines Online-Tool für social-media-affine Menschen hat Autre planète aus Paris im Angebot. Für immerhin 16 Social-Media-Dienste haben die Franzosen ein Online-Grafik-Werkzeug geschaffen, mit dem man sich sehr komfortabel Bilder für die unterschiedlichen Verwendungen auf den jeweiligen Website zurecht schneiden lassen kann.
Niedliche Animation statt langweiligem Ladebalken
Tamim Swaid zeigt auf ux·zentrisch, einem meiner favorisierten User-Experience-Blogs, eine schöne Alternative zu langweiligen Ladebalken auf.
Berufsbegleitende Qualifizierung bzw. Weiterbildung für angehende Usability Professionals
Machen wir thematisch ein kleiner Sprung zur Usability: Der UX-Experte Ulf Schubert listet auf seinem User Experience Blog einige Möglichkeiten auf, wie man sich in Deutschland in Sachen User Experience aus- bzw. weiterbilden lassen kann.
Twopcharts: Tracking Twitter users
Zum Schluss noch eine kleine Spielerei für Twitter-Fans: Twopcharts ist ein Dienst, der ein paar Statistiken zur allgemeinen, aber auch zur eigenen Nutzung von Twitter aufbereitet. Mein Twopcharts-Profil gibt es übrigens hier…
von Matthias Zellmer
BLOKK – Font-Alternative zu Blindtext
Es würde mich wundern, wenn es einen Informationsarchitekt oder -designer gäbe, der nicht mindestens schon einmal die großen Augen eines Kunden zu Gesicht bekommen hätte, welcher sich über Blindtext wunderte. Und es gibt ja auch immer wieder mal irgendwo die netten Screenshots von Webseiten, auf denen der Blindtext beim Launch nicht ausgetauscht wurde.
Eine interessante Alternative zu Lorem Ipsum und Co. ist die Schriftart BLOKK. Bei dieser Schriftart ist jeder Buchstabe ein Block. Das hat u.a. den Vorteil, dass ein Kunde bei diesem Text nun wahrlich nicht mehr versuchen wird, sein kleines Latinum auszupacken. Lorem ipsum mit BLOKK gesetzt, sieht dann z.B. so aus:

Hierbei handelt es sich um einen Screenshot einer HTML-Datei. Und wer sagt, dass es für so ein paar schwarze Balken keine eigene Schriftart braucht und man das schnell mal in Photoshop mit eine paar Rechtecken ebenso hinbekommen könnte, dem sei gesagt, dass es sich hierbei immer noch um Text handelt. D.h. auch, dass sich die Balken genau so verhalten, wie Text. Dieser hier ist mit folgenden CSS-Parametern gesetzt:
font-family: BLOKK Neue;
font-size: 16px;
line-height: 1em;
Natürlich macht die Verwendung von BLOKK vor allem im konzeptionellen Kontext Sinn. Im Design-Prozess sollte (Fließ-)Text dann schon in der Schriftart gesetzt werden, die später verwendet wird, damit der gestalterische Gesamteindruck stimmt. Aber für Mockups/Wireframes ist BLOKK eine interessante Alternative zu Blindtext.
Runterladen kann man BLOKK auf blokkfont.com … ganz unten auf der Seite.
— via Wireframe Magazine
von Matthias Zellmer








