Blog

  • Material Design Icons reloaded

    veröffentlicht von Martin Kohlhaas am 21.08.2015 in CSS, Recherche, SVG, Webfonts

    noch viel mehr Icons

    Material Design Icons, Bild: Bildschirmfoto (Ausschnitt) vom 21.08.2015 https://materialdesignicons.com/
    Material Design Icons, Bild: Bildschirmfoto (Ausschnitt) vom 21.08.2015 https://materialdesignicons.com/

    Unter materialdesignicons.com gibt es jetzt eine noch größere Auswahl an Icons (Stand 21.08.2015: 1264). Ergänzt wurde die bisherige Auswahl vor Allem durch Grafiken aus der Community (692). Neu ist, das es die Icons nun auch als Webfont zum einbinden gibt.

    Inwieweit das im Einzelfall praktisch ist, ist eine andere Frage. Bei zentralbuchhandlung.de haben wir die benötigten 25 Icons (12 verschiedene Grafiken jeweils in zwei Größenvarianten) als SVG direkt im Quelltext eingebaut.

    Auf jeden Fall wächst damit der Fundus auch an ungewöhnlicheren Motiven.

  • Material Design Icons

    veröffentlicht von Martin Kohlhaas am 21.10.2014 in CSS, Recherche, SVG, Webfonts · 7 Kommentare

    Ganz frisch: Die Icons zu Googles Material Design zum einbauen

    Material Design Icons (Ausschnitt aus der Vorschauseite), Bild: http://google.github.io/material-design-icons/
    Material Design Icons (Ausschnitt aus der Vorschauseite), Bild: http://google.github.io/material-design-icons/

    Auf github stehen seit vier Tagen mehrere Icon-Sets aus dem Google Material Design zum Download zur Verfügung. Eine Vorschauseite zeigt die große Auswahl an Icons und Symbolen, auf den ersten Blick mehr, als man so bei Font Awesome oder Symbolset findet.

    Alle Icons liegen in verschiedenen Formaten vor, darunter jedes Icons als separates SVG aber auch die verschiedenen Sets als Sprite-Sheets.

    Ich freue mich auf den ersten Einsatz.

  • Wie geht agiles Entwerfen?

    veröffentlicht von Martin Kohlhaas am 22.08.2014 in Illustrationen, Informationsgrafiken, Lab, Nähkästchen, SVG, Vermittlung · 2 Kommentare

    Es ist in letzter Zeit viel die Rede von agilem Arbeiten, interaktivem Entwerfen, iterativen Prozessen – doch wie muss man sich das vorstellen? Wir zeigen an einem aktuellen Projektbeispiel die Entwicklung einer Zeitstrahl-Grafik von der Vorlage bis zur fertigen Drucksache.

    Vorlage „Von der Schule an die Hochschule“, Bild: Broschüre „Studiere in Thüringen“ 2011 + 7 Bilder
    Vorlage „Von der Schule an die Hochschule“, Bild: Broschüre „Studiere in Thüringen“ 2011

    Wir betrachten eine der Grafiken in der Broschüre „Studieren in Thüringen“ im Rahmen der Kampagne „Entdecke Dein Studium“ des Netzwerks Hochschulmarketing. Wie bei dieser einzelnen Grafik erfolgte der gesamte Gestaltungsprozess in diesem Projekt iterativ, also: Entwurf > Diskussion > Anpassung Inhalte Broschüre und Zeitstrahl > Entwurf > Diskussion – Anpassung Inhalte Broschüre und Zeitstrahl > Gestaltung …, – immer unter Verwendung echter Inhalte, immer im Kontext der Gesamtpublikation und immer im Abgleich mit anderen, parallel bearbeiteten Projekten dieser Kampagne (Website, Anzeigen).

    So wie das im agilen Entwicklungsprozess im Webdesign anzustreben ist, steht also am Ende jedes Entwicklungsschrittes quasi ein publikationsfähiges Ergebnis.

    img 1

    Ausgangspunkt war der Wunsch, die Tabelle „Von der Schule an die Hochschule“ aus einer früheren Broschüre in eine zeitgemäße grafische Form zu überführen – Arbeitstitel „Zeitstrahl“.

    img 3

    Ein erster Entwurf stellte auf Basis der „alten“ Tabelleninhalte eine mögliche grafische Umsetzung vor.

    img 2

    Die Richtung kam an. Nun brachte der Auftraggeber die Inhalte auf den (jetzt gerade) aktuellen Stand, den (jetzt gerade) aktuellen Gliederungspunkten der Broschüre zugeordnet, das Ganze als Tabelle aufbereitet.

    Es folgten weitere Entwurfsstufen:

    img 4

    img 5

    img 6

    img 7

    Die Entwürfe wurden einerseits durch die fortschreitende Ausarbeitung und Veränderung der Inhalte (die Gliederung musste im Laufe der Arbeit mehrfach leicht angepasst werden, Kapitel wurden zusammengefasst oder neue ergänzt werden), andererseits durch die Definition und Vereinheitlichung der grafischen Sprache bestimmt. Der Styleguide für dieses Projekt entwickelte sich kontinuierlich während der Arbeit an den Einzelprodukten – im Gegensatz zu einer Vorab-Definition eines Corporate Designs.

    img 8

    Am Ende steht ein Ergebnis, das sich relativ stark vom ersten Entwurf unterscheidet. Die einzelnen Zwischenschritte zeigen, dass der Prozess vor allem in der Reduktion der Elemente, im Aufräumen, bestand, so dass die Anzahl von Farben, Linienstilen und Schriftvarianten – aber auch die Anzahl der Informationen in der finalen Version am geringsten ist.

    Als zusätzliches Produkt wurde der Zeitstrahl in einer SVG-Variante (hier viel zu klein eingebunden – besser im Original auf campus-thueringen.de/studienwahl/) für die Website adaptiert. Auch hier gab es mehrere Überarbeitungsschleifen bis zum Ergebnis.

    Fazit: Ein agiler Entwurfsprozess ist dann sinnvoll, wenn die Aufgabenstellung offen, aber das Ziel klar ist.
    Es gab hier keine konkreten Designvorgaben und keine „festen“ Inhalte. Aber es gab das Ziel, die To-Do’s der Studienvorbereitung grafisch abzubilden. 

    Diese Art des Arbeitens funktioniert nicht immer und nicht mit jedem. Der Auftraggeber muss genügend Fantasie aufbringen, um auch in unausgereiften Skizzen das Potenzial zu erkennen und darf das Vetrauen in seinen Designer nicht verlieren. Der Gestalter muss konstruktive Kritik als Chance sehen, das Projekt noch besser zu machen – auch, wenn seine Lieblingsidee gerade rausgekickt wurde… nicht immer leicht. Aber am Ende sind alle froh :)

  • SVG-Header reloaded

    veröffentlicht von Martin Kohlhaas am 14.11.2013 in Lab, SVG · 2 Kommentare

    Neues Template – Neuer Header. Unser Blog hat ein neues Layout bekommen und der SVG-Header ein neues Farbschema, welches auf die Inhalte der Website reagiert.

    Die Headergrafik bildet wenn sie ohne Parameter verwendet wird die vier Rubriken (Feldforschung, Lab, Recherche, Webmontag) ab.

    Innerhalb der Rubrik wird die Grafik eingefärbt (hier das Beispiel der Rubrik „Lab“). Neben der Grundfarbe wird ein Teil der Kacheln zufällig abgetönt, so dass das Ganze etwas abwechslungsreicher aussieht.

    Hinter der SVG steckt ein PHP-Script, welches Zugriff auf die Parameter der Website hat und daraus den Code der Zeichnung generiert. Damit kann bei jedem Aufruf der Seite eine individuelle Zusammenstellung erzeugt werden.

  • Infografik der Woche

    veröffentlicht von Martin Kohlhaas am 11.04.2013 in Informationsgrafiken, Recherche, SVG · 2 Kommentare

    Zum Thema Datenvisualisierung heute ein Link.

    d3.js example gallery, Bild: https://github.com/mbostock/d3/wiki/Gallery
    d3.js example gallery, Bild: https://github.com/mbostock/d3/wiki/Gallery

    Es geht um D3.js, eine Javascript-Bibliothek, um Daten in Websites mit Hilfe von HTML, SVG und CSS schick darzustellen und manipulieren zu können. Die Beispielgalerie ist beeindruckend. Eigene Tests stehen noch aus und werden hier später nachgereicht.

  • Bildschirmauflösungen

    veröffentlicht von Birgit Kohlhaas am 17.12.2012 in CSS, Lab, mobiles Web, SVG, Vermittlung · 3 Kommentare

    „Die Web-Seite soll ganz auf den Bildschirm passen“, sagte der Auftraggeber. „Auf welchen?“, fragten wir.

    Bildschirmauflösungen als SVG, Bild: MK
    Bildschirmauflösungen als SVG, Bild: MK

    Weil wir solche oder ähnliche Wünsche des Öfteren hören und uns sehr daran liegt, unsere Auftraggeber zu professionalisieren, hat Martin mal wieder eine kleine SVG-Fingerübung gemacht.

    Herauskam eine Grafik, die eine subjektive Auswahl von 27 der aktuell verfügbaren nativen Auflösungen von Mobiltelefon-, Tablet- und Desktop-Monitoren zeigt. Die tatsächlich dargestellte Auflösung (Stichworte Retina, virtuelle Auflösung) wird hier noch nicht berücksichtigt.

    Eine dynamische Grafik, gekoppelt an die jeweilige Piwik-Statistik einer Website, ist in Arbeit.

  • Akira2-Logo

    veröffentlicht von Martin Kohlhaas am 26.10.2012 in Akira CMS, Lab, Nähkästchen, SVG · 1 Kommentar

    Akira2 steht in den Startlöchern. Die ersten drei neuen Websiteprojekte arbeiten bereits mit der aktuellen Betaversion, um letzte Fehler für Benutzer auszuschalten.

    Akira2-Logo
    Akira2-Logo

    In diesem Zusammenhang wollen wir natürlich auch die Akira-Website überarbeiten. Eines unserer aktuellen Lieblingsspielzeuge, SVG, soll darauf auch wieder eine Rolle spielen, als animiertes Logo. Der Schriftzug mit seinen zerlegten Buchstaben steht für die Modularität und Anpassungsfähigkeit des Systems. Unser Feriengast Arthur hat in den letzten Tagen die Animationseffekte von SVG ausgelotet und das Resultat kann sich sehen lassen. Ob das Logo wirklich so auf die Website kommt, wird sich zeigen. Einen Freischaltungstermin gibt es noch nicht - erstmal steht die Arbeit am CMS selbst im Vordergrund.

  • Die 640x480-Headerillustration

    veröffentlicht von Martin Kohlhaas am 11.09.2012 in Lab, SVG

    SVG im dekorativen Einsatz.

    640x480.de Headerillustration als SVG, Bild: Bildschirmfoto 11.09.2012 + 5 Bilder
    640x480.de Headerillustration als SVG, Bild: Bildschirmfoto 11.09.2012

    Für den Kopf unserer neuen Seite wollte ich SVG mal als Deko-Element anstatt eines Fotos einsetzen. Als erste Idee geisterte mir der Schriftzug aufgelöst in vereinfachte transparente, sich überlagernde Flächen durch den Kopf. 

    img 3

    Ein paar Stunden, mehrere Skizzen und Skripte später und mit Arthurs Hilfe verdichtete sich die Idee zu einem Raster von Dreiecken, die mit Zufallsfarben gefüllt werden. Es ging um den Bezug zu den Pixeln, die ja Grundlage der Auflösung 640x480 sind.

    Das spannendste war der Prozess: angefangen haben wir mit dem händischen zeichnen erster Dreiecke (also Eintippen des SVG-Quelltextes Zeile für Zeiel). Da die Grafik aus immer der gleichen Form in vier unterschiedlichen Drehungen besteht haben wir dann die Dreiecke als Symbole definiert, die wir dann im Koordinatensystem der Fläche platzieren konnten. Auch das konnten wir weiter automatisieren, so dass zum Schluss nur noch ein array aus Koordinaten, Dreieckstyp und Farbe übrig blieb. Die Farbe wird mit einer Funktion für jedes Dreieck zufällig ermittelt. Dabei kann eine Farbstimmung (red, green, blue, cyan, magenta, yellow, mono) angegeben werden, die wir nach mehreren Experimenten der Reihe nach auf die einzelnen Zeichen des Schriftzuges verteilt haben. Mit jedem Seitenaufruf entsteht so eine neu eingefärbte Grafik.

    Die Grafik im Einsatz als Banner:

    img 4

    img 5

    img 6

    Letztendlich musste die Grafik noch im Layout eingepasst werden und zwar so, dass sie sich im flexiblen Layout anpasst. Das Ergebnis gefällt uns schon sehr gut und lässt viel Raum für weitere Spielereien. So lassen sich zum Beispiel die Symbole der Dreiecke nun einfach durch Kreise austauschen und die Grafik sieht vollkommen anders aus.

    img 2

    In der nächsten Stufe wollen wir die Interaktivität noch erhöhen und noch eine spielerische Komponente einbauen – dazu später mehr.

  • Mehr Infografik

    veröffentlicht von Martin Kohlhaas am 30.08.2012 in Lab, SVG · 2 Kommentare

    Je mehr ich mich mit SVG-Grafiken beschäftige, desto mehr Spaß macht es und es kommen mir immer neue Ideen für weitere Einsatzzwecke. Heute: SVG-Diagramm statt Tabelle.

    Für die Analyse der Auslastung von Datenbanktabellen bzw. der Übersicht über das Vorhandensein der Tabellen in unterschiedlichen Installationen hatten wir vor einiger Zeit ein Skript geschrieben, welches diese Informationen live einsammelt und als Tabelle ausgibt.

    img 2

    Dieser Tabelle mangelte es erheblich an Charme und Übersichtlichkeit. Nach den letzten Spielereien mit SVG im Zusammenhang mit der Staffellaufauswertung habe ich nun diese Tabelle durch ein Diagramm ersetzt, welches die gleichen Informationen garstellt, nun aber in viel eingängigerer Form.

    img 1

    Ich habe jetzt keine Anstrengungen in eine Neu-Interpretation des strukturellen Aufbaus gesteckt. Andere Diagrammformen wären eventuell platzsparender oder noch übersichtlicher. Insofern lässt sich meine Vorgehensweise mit dem CSS-Syling der Tabelle vergleichen. Würde man die Tabelle richtig schick stylen und z.B. den Wertefeldern je nach Inhaltsmenge noch unterschiedliche Farbschattierungen geben, dann würde man eine schicke Tabelle gegen ein schickes Diagramm vergleichen, was weniger unfair wäre. Ein möglicher Vorteil der der SVG-Lösung: Wird die Grafik, Auswertung, das Diagramm auch für andere Zwecke benötigt, so lässt sich die SVG auch im Illustrator oder Inkscape öffnen und in Drucksachen weiterverarbeiten. Das ist bei der schicken Tabelle nur über das Bildschirmfoto und dann mit den Nachteilen des Pixelbildes möglich.

  • Fundstücke

    veröffentlicht von Martin Kohlhaas am 09.07.2011 in Link-Tipps, Recherche, SVG

    vom 2. bis 9. Juli mit Links zu Infografik, SVG, PureData, Creative Commons