Category: Design

Color Oracle

A color wheel

A nice tool to check your design for color blindness compatibility (e.g. to see whether there is enough contrast for color blinds) is the “Color Oracle” (available for Mac OS, Linux and Windows). In Mac OS, the tool resides on the right side of the menu bar and offers color filters for Deuteranopia, Protonopia and Tritanopia. It even allows you to assign shortcuts to the filter functions: Simply press F5 to view your entire screen instantly in Deuteranopia filter mode.

SourceForge.net im neuen Kleid

Das neue Design von SourceForge.net

Der große “Open-Source-Hoster” SourceForge.net hat ein neues Design. Die Optik wurde deutlich modernisiert und wirkt etwas zeitgemäßer. Auffällig ist, dass die Designer mit sehr vielen Farbverläufen gearbeitet haben um die Seite etwas geschmeidiger und “glatter” wirken zu lassen (hier darf geraten werden, was ich meine ;-)). Allerdings sind bei dem Redesign meiner Meinung nach einige Dinge deutlich schief gegangen.

Standardkonformität

  • Im Großen und Ganzen ist die Seite recht valide. Es ist halt einfach schwer bis unmöglich, eine so große Seite die Code-Schnipsel von allen möglichen Seiten bekommt, komplett valide zu gestalten. Die einzigen Fehler die mir aufgefallen sind, waren & in URLs die nicht nach & kodiert waren und einige Tags die groß geschrieben waren. Die kommen vermutlich von irgendwelchen Anzeigenpartnern auf die SourceForge.net nicht so viel Einfluss hat - darüber lässt sich meiner Meinung nach hinwegsehen. Und zumindest ist ein deutlicher Ansatz erkennbar.
  • Unschön ist allerdings, dass “presentational markup” benutzt wird. Das heißt konkret, dass viele Elemente mit <b>-Tags ausgezeichnet wurde. Das entspricht dem Grundsatz “Trennung von Design und Semantik” nicht so ganz, da das b-Element konkret fette Formatierung bedeutet. Sinnvoller wäre aber, nicht zu sagen “das soll Fett sein” sondern “das soll hervorgehoben werden”, also strong zu verwenden. Wie strong dann ausschauen soll, kann ja in den Stylesheets festgelegt werden.
  • Ein grober Schnitzer ist meines Erachtens auch die Verwendung von b-Tags als Hilfselemente für die Gestaltung der Kästen. Konstrukte wie </b><b class="ttopw"></b><b class="t1w"></b><b class="t2w"></b> finden sich recht häufig im Quelltext. Semantisch hat das natürlich keinen Sinn, eine Verwendung von spans oder divs wäre sinnvoller bzw. semantisch weniger fragwürdig.

Usability

  • Aus welchem Grund kann ich nicht auf das ganze SourceForge-Logo klicken um auf die Startseite zu kommen? Wieso ist das “.net” nicht anklickbar? Irgendwie irritiert mich das weil nichts passiert wenn ich auf die untere Hälfte des Logos klicke.
  • Und aus welchem Grund gibt es gleich unter dem Logo einen “SF.net”-Link der zum selben Ziel, nämlich zur Startseite, führt?
  • Weniger gelungen ist auch die Platzierung der Listen mit den Top-Projekten. Die sind auf der Startseite fast ganz unten eingequetscht zwischen den Site-News und Anzeigen.
  • Fünfspaltiges Layout ist nicht so wirklich übersichtlich. Außerdem wird ständig zwischen 1-, 2,-, 3-, 4-, und 5-spaltigem Layout hin- und hergewechselt was die Situation noch verschlimmert.
  • Und wieso werden die Beschriftungen der kleinen Icons über dem weißen Hauptkasten einer Projektseite (Beispiel), also der Schlüssel auf orangefarbenem Grund, das Werkzeug (?) auf blauem und der gelbe Kreis, nicht permanent angezeigt? Ich erkenne nicht sofort, was mit diesen Icons gemeint ist. Außerdem gerät es zum Geduldsspiel bis man es schafft, die Beschreibung per Mouseover einzublenden. Schonmal probiert erst auf das gelbe Symbol und dann auf das blaue zu zeigen? Ja, geht nicht da zwischen den Icons Zwischenräume sind.
  • Ein Log-In ist jetzt erst nach einem Klick auf “Log-In” und anschließendem laden der Seite möglich. Früher war das ganz bequem auf jeder Seite möglich, ohne zusätzliche Zwischenseite.
  • Die Leisten am oberen Bildschirmrand sind ja wirklich eine Zumutung. Ganze fünf Leisten werden standardmäßig eingeblendet. Das ließe sich deutlich reduzieren. Wozu ist die rotbrauen Leiste überhaupt nötig? Auf die Startseite komme ich auch mit einem Klick auf das Logo, das ich auf einer Projektseite bin, erkenne ich auch an der Breadcrumb-Navigation zwei Zeilen darunter, “My Page” lässt sich genau so gut neben den Benutzernamen in der Zeile darüber setzen und für “Help” würde sich sicher auch ein genau so guter Platz finden.
  • Auf einer Projektseite verschlimmert sich der “Leistenwahn” noch. Dort kommen nämlich noch zwei zusätzliche Leisten hinzu: Die Titelzeile mit “Donate”, “Stats” und RSS-Link und die Projektnavigationsleiste. Die deckt sich ja eigentlich mit der Breadcrumb-Navigation da auch hier angezeigt wird auf welcher Projektunterseite der Benutzer sich befindet. Im Prinzip ist die Breadcrumb-Navigation dadurch ziemlich überflüssig - dass ich bei SourceForge.net bin erkenne ich am Logo, das ich ein Projekt ansehe daran, dass ich auf der entsprechenden Projektseite bin, welches Projekt ich ansehe erkenne ich an dem groß abgebildeten Namen der gleich darunter steht und auf welcher Projektunterseite wie gesagt an der Projektnavigation.
  • Die einzige Verbesserung in Hinsicht auf Benutzbarkeit sind die Download-Seiten. hier kommt man deutlich schneller zum Ziel da zum einen unübersichtlich lange Listen durch JavaScript verkürzt werden und die jeweils neuesten Versionen ganz oben auf der Seite gelistet werden. Außerdem erkennt man in der “großen” Liste besser wo ein Release-Block aufhört und wo der nächste anfängt.

Photoshop-Kurs

Wirklich toll ist die Tatsache, dass an unserer Schule ein kostenloser(!) Photoshop-Kurs für Schüler und Lehrer angeboten wird. Und zwar von einem Mitarbeiter aus der Druckvorstufe des Delp-Verlags aus Bad Windsheim. Gottseidank fingen wir nicht bei Adam und Eva an sondern stiegen gleich voll ein mit den verschiedenen Farbräumen, die Konvertierung von RGB zu CMYK und einigen Photoshop-Grundlagen. Ich kann mir zwar vorstellen, dass einige Personen nicht ganz mitgekommen sind, aber für mich war das Schwierigkeitsniveau ganz gut.

Grafikprogramm für Mac OS X?

Ich überlege ja schon länger, auf Mac OS X umzusteigen da mich Windows einfach nervt. Ich will keinen Virenscanner, keine Firewall, keine Antispyware, keine Defragmentierungsprogramme, usw. brauchen müssen. Außerdem bin ich ein Fan von komplett integrierten Anwendungs-“Suiten”. Und die hat Mac OS X zuhauf. Wie Apple iTunes meine Musikbibliothek managet gefällt mir wirklich toll (sogar in der Windows-Version!). Aber darüber, wie toll Mac OS X ist, wurde schon sehr viel geschrieben - meine Kommentare machen’s auch nicht fetter.

Aber welche ernst zu nehmenden Grafikprogramme gibt es denn für Mac OS X? Adobe Photoshop fällt für mich aus da es für mich einfach zu teuer ist. und GIMP ist für mich ebensowenig eine Alternative da mir die Bedienung, Oberfläche und Ausrichtung noch nie gefallen hat. Für Windows gibt es ja massenweise Grafikprogramme (PhotoImpact, Paint Shop Pro, PhotoLine32, …). Aber ich habe - außer den Adobe-Produkten - noch nie von einem günstigen und brauchbaren Grafikprogramm für den Mac gelesen. Gibt’s da was?

Karteireiter mit CSS

CSS-Reiter nach oben erweitern

Für ein neues Projekt hab ich solche “Buttons” als Karteireiter entworfen, mit Farbverlauf und allem drum und dran. Allerdings sind solche Farbverläufe bekanntlich nicht gerade platzsparend komprimierbar, also so wenig Bilder wie möglich verwenden. Ich wollte, dass sich diese Buttons, wenn man mit der Maus drüberfährt, nach oben erweitern. Dazu habe ich auch das Bild einige Pixel höher gemacht, damit es sich nicht wiederholt.

Inkscape

Das Firefox Logo in Inkscape geöffnet

Auf der Suche nach einem guten, kostenlosen Vektorgrafikprogramm bin ich auf Inkscape gestoßen. Inkscape ist dazu auch noch Open Source und kann auf der offiziellen Inkscape-Website heruntergeladen werden.

Inkscape kann das SVG-Format, das zugleich das Standardformat der Anwendung ist, speichern und natürlich auch lesen. Obwohl Inkscape als GTK-Anwendung vorliegt, kann man sich sehr schnell an das GUI gewöhnen, das eben nicht ganz Windows-typisch ist. Einzig das Konsolenfenster das auftaucht, wenn man eine Datei speichert, stört etwas, ist aber angesichts der Features, die das Programm bereits in der Version 0.39 hat, auf jeden Fall zu verschmerzen.

Mit Inkscape kann man, wenn man etwas Geschick hat, sogar mit der Maus kalligraphieren. Allerdings ist dazu die Anwendung eines Grafiktabletts empfohlen. Welche Ergebnisse man damit erzielen kann, wird auf der Website eindrucksvoll bewiesen. In der Screenshot-Galerie kann man sich auch von den restlichen Features überzeugen lassen.

Inkscape bietet zwar nicht alle Features von professionellen Vektorgrafikprogrammen wie Adobe Illustrator oder Macromedia Freehand, allerdings lassen sich damit sehr schnell brauchbare Ergebnisse erzielen. Besonders gefällt mir daran, dass Inkscape sehr gut mit dem vom W3C entwickelten SVG-Standard umgehen kann - das bieten einige kommerzielle Programme nicht in dieser Form an. Schön ist auch der Export nach EPS, so kann man seine Vektorgrafiken sehr einfach in das Textverarbeitungsprogramm seiner Wahl kopieren, ohne es in ein Bitmap-Bild umzuwandeln.

Demnächst kommt die Version 0.40 mit erweiterten Funktionen wie z.B. Ebenen und erweiterten Objektformen raus. Auch das Problem mit der Konsole unter Windows soll dann behoben sein. In der Roadmap kann man auch sehen, welche Funktionen oder Verbesserungen für die zukünftigen Versionen geplant sind.

Ebenfalls bestehen Bestrebungen, bald ein SVG-Plugin für Firefox zu programmieren, das auch bitter nötig scheint, um dem Vektorformat etwas auf die Sprünge zu helfen. Hier fragt sich nur, ob die Mozilla Foundation ihr Plugin nicht früher umsetzt als die Inkscape-Programmierer.

Alles in allem kann man sagen, dass die Entwickler von Inkscape bisher gute Arbeit geleistet haben und schon ein ansehnliches Programm produziert haben.