Halte es zusammen: Projektorganisation mit Trello

Filed under: Notizen — Schlagwörter: , , , , , — Eno Thiemann @ 11:20

Oje: Technikkram für Technikkramfreaks

Zu jedem anständigen Webdesigner gehören nahezu verpflichtend Tools. Nicht nur, aber zu denen definitiv! Im Deutschen auch unter dem Begriff “Werkzeuge” gehandelt, bezeichnet es zusätzliche Hilfsmittel, die über die grundlegenden Arbeitsmittel hinausgehen, die (dem Designer und/oder Programmierer von Webseiten) zur Verfügung stehen. Ein anständiges Grafikprogramm (im Zweifelsfall Photoshop oder Fireworks), ein solider HMTL-, CSS-usw.-Editor (oft Dreamweaver oder das kostenlose Notepad++) und ein grundlegender FTP-Client (Filezilla ist da sehr beliebt und ebenfalls kostenlos) bilden oftmals die Basis der Arbeitsfähigkeit im täglichen Wahnsinn des weltweiten Webs.
Für die unterschiedlichsten Vorlieben und Aufgaben gibt es jedoch eine Unzahl kostenloser bis kostenpflichtiger Werkzeuge, die bei der täglichen Arbeit mit ganz einfachen Anforderungen wie das Extrahieren von Farben bis zu komplexen Aufgaben wie das Formen von CSS-Animationen oder das im letzten Blogpost benannte SASS-Coden helfen. Täglich gibt es – für oft sehr ähnliche und manchmal neue Aufgaben – neue Werkzeuge, die dazu einladen, darüber das Designen zu vergessen und nach immer neuen, besseren Tools Ausschau zu halten.

Ich muss es zugeben: Je mehr Projekte ich angehe, desto weniger behalte ich den Überblick über manchmal auch kleinere Aufgaben und Teilaufgaben. Oft werden größere Projekte mit kurzfristigen Aufgaben und Dringlichkeiten (“Kannste mal die Öffnungszeiten auf unserer Seite ändern?”) flankiert. Oder die Weiterarbeit verzögert sich durch Feiertage, Krankheit oder hohe Auslastung des Kunden. Wenn also Stress im Büro angesagt ist – oder für einige Projekte lange Pausen einsetzen, die einen Wiedereinstieg erschweren – dann hilft nur eins: Ein Projektmanagement-Tool. Und davon gibt es ganze Schwärme im weiten, warmen Web. Nachdem ich eine Weile verschiedene To-Do-Listen und Projektmanagementtools ausprobiert habe, um meine Arbeit an Onlineshops, Websites, aber auch Offline-Projekten wie ganzen Corporate Designs halbwegs zu strukturieren, bin ich bei Trello hängengeblieben, das ich Euch hiermit einmal vorstellen möchte.

Darf ich vorstellen: Trello

Vorneweg: Auch Trello ist natürlich nicht die Wunderwaffe für alle und alles. Für viele Verwendungsszenarien und Nutzungsvorlieben eignen sich womöglich andere, einfachere Tools besser. Für das Format meiner Arbeit und meine visuelle Arbeitsweise ist es aber nahezu perfekt.

Trello ist kostenlos und ein reiner webbasierter Dienst. Das bedeutet, dass diejenigen, die darauf angewiesen sind, Strecken ihrer Arbeit ohne Internetzugang zurückzulegen, leider wenig Nutzen in Trello finden werden. Trello gibt es als Webapp und Apps für Android und iOS (derzeit leider nur iPhone), aber nicht als native Programme für Windows oder Macintosh. (Nach vorheriger Synchronisation ist zumindest das Offlinelesen von Listen auf den mobilen Apps möglich.) Wer ohnehin wie ich die halbe Zeit seines Tages im Netz verbringt, wird sich sicherlich nicht daran stören.

Boards, Listen und Karten: Groborganisation von Aufgaben

Trello Listenübersicht

Trello Listenübersicht

Das noch recht junge Tool lässt sich als Einzelstreiter prima für das Verwalten der eigenen Projekte und dazugehöriger Aufgaben verwenden. Projekte oder Übersichten lassen sich als sogenannte Boards anlegen, unter denen sich dann Listen mit verschiedenen Projektstadien finden. Als Standard werden “To Do”, “Doing” und “Done” angeboten, es lassen sich aber die Namen derer anpassen und beliebig viele Listen anlegen, so dass man dies ganz seiner eigenen Arbeitsweise und Vorstellung einer Aufgabenorganisation unterwerfen kann. Ich behalte meist die Grundstruktur und füge ggf. spezifische Listen wie “Website” oder “Fragen” bei einem umfassenderen Projekt hinzu, um dort alles mögliche unterzubringen, was sich bei der Arbeit ergibt. Arbeite ich gerade an einer Aufgabe, verschiebe ich sie von “To Do” zu “Doing” und später voller Befriedigung zu “Done”.

Einzelne Aufgaben werden bei Trello Cards genannt und in den Listen angelegt. Die Aufgaben lassen sich per Drag’n Drop sowohl zu anderen Listen als auch innerhalb einer Liste verschieben und damit grob prioritisieren. Ebenso lässt sich auf diese Weise die Reihenfolge der Listen ändern. Natürlich kann man Karten und Listen jederzeit ändern, archivieren und auf andere Boards oder Listen verschieben bzw. kopieren.

The power of cards

Trello Detailansicht mit Kommentaren und Checklist

Trello Detailansicht mit Kommentaren und Checklist

Einer der größten Pluspunkte für Trello ist die Art und Weise, wie man Karten anpassen und ausstatten kann. Das erste überzeugende Argument für Trello war neben dem sehr übersichtlichen Layout die Möglichkeit, bis zu fünf verschiedene Labels je Karte zuweisen zu können, die zwar nicht farblich, aber in der Bezeichnung je Board anpassbar sind. Das erinnert stark an Gmail. Ich mache mir meist nicht die Arbeit, diese umzubenennen und orientiere mich an den Farben: Rot für dringende, orange für bald anstehende, gelb für noch wichtige, aber weniger dringliche, und grün für entspannt anzugehende Aufgaben. Blau und lila benötige ich dann meistens nicht oder nutze sie für Notizen o.ä. Wenn ich beim Erstellen einer Karte direkt ein Label vergeben möchte, kann ich das mit der Eingabe des englischen Farbnamens und einer vorangehenden Raute (z.B. #yellow) tun, ohne dann im Anschluss erst manuell noch eine Priorität oder Einordnung vorzunehmen. Das hat sich als sehr praktisch herausgestellt.

Oft sind Aufgaben komplexer – dann eignen sich eigene Boards für viele Unteraufgaben – aber manchmal benötigt man auch nur die Möglichkeit, mehr Informationen unterzubringen. Trellos Karten lassen sich mit einer Beschreibung und Kommentaren ausstatten. Dazu muss man allerdings nach Erstellen nachträglich die gewünschte Karte öffnen.

Dort kann man dann gleich noch mehr mit den Karten veranstalten. Es lassen sich z.B. Checklisten erstellen, deren Fortschritt man bereits in der Boardansicht sehen kann (z.B. 3/5 bzw. grün als Signal für erledigte Checklisten). Unersetzlich auch das Vergeben eines Abgabedatums und die Möglichkeit, von PC, Dropbox oder Google Drive Dateien anzuhängen. Damit lassen sich ganze Ideen- und Materialsammlungen rund um ein Projekt zusammenfassen, was ich bisher auf verschiedenste Programme aufgeteilt hatte. Hängt man eine Grafikdatei an, bekommt man sogar eine Vorschau innerhalb der Übersicht angezeigt.

Besser zusammen: Teamarbeit mit Trello

Trello - Listen mit Labels

Trello – Listen mit Labels

Seine ganze Stärke entfaltet Trello aber, wenn man nicht allein arbeitet und ein Team organisieren muss (oder darf 😉 ). Ein Beitritt zu Trello ist dazu allerdings unerlässlich, auch wenn einzelne Boards für die öffentliche Ansicht freigeschaltet werden können, wie das Trello für eigene Entwicklungsarbeit tun. Ein Administrator kann dazu bestehende Trellouser oder per Mailadresse auch Neulinge einladen, Bearbeiter eines oder mehrerer Boards zu werden oder Teil einer “Organisation” zu werden, nach der Boards zusammengefasst werden können. Kleines Manko in Bezug auf Nutzerfreundlichkeit: Auch wenn man jemanden als Administrator zu einer Organisation hinzugefügt hat und dieser die Einladung angenommen hat, muss man ihn für jedes Board zur Bearbeitung einzeln freischalten. Man kann jedoch mit einem einzelnen Klick die komplette Organisation zu einem Board einladen, womit ich mich dann schließlich vorerst zufriedengebe. Unterscheiden kann man zwischen einfachen Nutzern und Administratoren, die auch Einstellungen von Boards ändern und diese archivieren können.

Abgesehen von der Möglichkeit, alle Boards, Listen und Karten zu sehen und bearbeiten zu können, kann man sich selbst oder anderen Nutzern Aufgaben zuordnen, so dass mit einem Blick in das Board klar ist, wer welche Aufgaben zu welchem Stand (via Kommentare, Verschieben auf die Doing-Liste, Abarbeiten von Checklisten u.a.) gerade bearbeitet.

Wer einen Überblick behalten möchte, bekommt rechts in der Seitenleiste detailliert angezeigt, wer was auf seinen Boards geändert hat. Außerdem lassen sich Benachrichtigungen nach Grad des Interesses global abonnieren, aber über eine Subscribe-Option direkt für ein Board, eine Liste oder sogar nur für eine Karte separat aktivieren.

Trello für daheim und unterwegs

Trello Karte mit Bildanhang

Trello Karte mit Bildanhang

Es klingt durchaus praktisch, dass es für die großen Spieler Android und iOS kostenlose Apps gibt, die Trello auch auf mobilen Geräten ermöglichen. Leider gestaltet sich die Arbeit damit nicht immer vollkommen intuitiv. Die App fühlt sich an wie eine einzige, in den Funktionen etwas reduzierte Mobilvariante der Seite an, was auf dem Smartphone definitiv auch mit dem kleinen Bildschirm zu tun hat, aber bei der Tabletversion für Android – eine iPad-Version ist im Entstehen – nicht anders ist. Es ist z.B. nicht ermöglicht, mehrere Listen nebeneinander zu überblicken. Und irgendwie ist der Konkurrent Wunderlist für das schnelle Hinzufügen einer Aufgabe wesentlich einfacher strukturiert und zugänglicher. Leider kann man in den mobilen Apps von Trello auch nicht gleich Labels via #farbe hinzufügen, an einigen Ecken ist noch zu feilen. Nutzbar sind die Apps durchaus, wenn auch nicht so ganz überzeugend – an den Rechner sollte man für bequemes Arbeiten dann bestenfalls doch.

Fazit: Ein Rundumpaket mit wenigen Abstrichen

Trello - Boards

Trello – Übersicht über verschiedene Boards

Egal, auf welche Weise man nun an Projekten arbeitet, ob es sich um das Organisieren einer Geburtstagsparty oder um die Planung und Umsetzung einer kompletten Marketingstrategie für Web oder offline handelt. Trello ist ein ernstzunehmendes Werkzeug, das einem enorm und auf eine beinahe unterhaltsame Art und Weise den Arbeitsalltag erleichtern kann. Sei es im Alleingang, um all seine Projekte und Pläne geordnet zu verwalten und die Genugtuung zu verspüren, Aufgaben auf die “Done”-Liste zu verschieben, oder in einem Team, wobei Trello seine Stärken richtig ausspielen kann. In Trello findet man eine übersichtliche, angenehm reduziert und klar strukturierte Applikation, um den täglichen Wahnsinn an Informationen und Aufgaben zu verwalten oder einfach Ideen zu sammeln und zu sortieren, um daraus bestenfalls konkrete Aufgaben zu organisieren. Abstriche muss man bei den Apps für Android und iOS machen, die beide funktionieren, aber weniger komfortabel sind und sich nicht so rund anfühlen wie beispielsweise Wunderlist.

Weblink: Trello

Der Weg zur Frucht: eine Dokumentation

Filed under: Notizen — Eno Thiemann @ 01:07

Es war, wie es kommen musste:

Für die eigenen Kleider nimmt man sich zu wenig, zu spät und zu inkonsequent Zeit. Erst nach einem Jahr veröffentlichte ich Ende 2009 meine erste Website. Ich sah bereits damals meine Seiten als Zwischenstand, um weiter daran zu arbeiten, kontinuierlich Inhalte hinzuzufügen und Verbesserungen vorzunehmen.

Obwohl sie eine Weile lang gut funktionierte und sie positiv bewertet wurde, zerbrach sie langsam an verschiedenen Stellen. Ich schraubte an einem Ende und riss damit am anderen Ende andere Dinge ein. Besonders die Referenzen, eigentlich das Herzstück, verspielten ihr eigentliches Potential. Der Link zur Referenz-Website war weit unten und schwer zu finden, kurze und knackige Infos waren nicht mit schnellem Blick erfassbar.

Angebotsseite von physalis.Alte Internetseite ReferenzNewsbeitrag von physalis

Mein Kenntnisstand, was die zugrundeliegende Plattform WordPress betrifft, war ebenso noch wesentlich geringer, auch gab es 2009 viele Möglichkeiten noch nicht, die WordPress mittlerweile von Hause aus oder via Plugin liefert. Kurzum: Layout und Umsetzung wurden in meinen Augen immer unfrischer und welk und war an vielen Enden auch nicht sonderlich nutzerfreundlich.

Erste Entwürfe

Bereits im Dezember 2010 entstanden erste Entwürfe. Bis Ende 2011 erstellte ich vier unterschiedliche Entwürfe. Sie waren farblich bereits wesentlich intensiver als die alte, pastellige Seite, jedoch in sich nicht stimmig und wirkten überladen, zu intensiv oder zu muffig, insgesamt zu unaufgeräumt und wenig inspiriert.

Erster Webdesign-EntwurfZweiter Entwurf für die HomepageLetzter Entwurf

Mein Wunsch war, einen stärkeren Fokus auf die Unternehmensfarbe zu legen und ein moderneres, mehrspaltiges und freundliches Layout zu schaffen. Die Navigation und die dahinterliegende Idee mochte ich noch immer, so dass ich dort nicht anfassen wollte. (Wie in den Bildern zu sehen ist, gab es hier auch unterschiedliche Entwürfe für ein neues Logo, das vorher auf einem Foto basierte und weniger markant und griffig war.)
Kurzum: Ich fand Ansätze für ein neues Layout, aber ich wurde nicht glücklich.

Und los!

Im Februar 2012 schuf ich einen Entwurf, den ich genauer ausarbeitete, überarbeitete und schließlich umsetzte und der auch bei meinem befragten Testern das bislang beste Feedback erzeugte. Anders als bislang, schuf ich für jeden Inhaltstyp einen Entwurf in Photoshop und nahm mir viel Zeit und Ruhe dafür. Bis zur letztlichen fertigen Umsetzung sollte es nicht zuletzt durch die vielen Kundenprojekte und anderes privates Engagement noch zehn Monate dauern.

Farblich ist auch eine Weiterentwicklung zu entdecken: Das Rot, bislang etwas dunkler und gediegener, ist lebendiger und zentraler geworden, wird komplementiert von Orange und ein wenig Gelb, aber konterkariert durch ein saftiges, fruchtiges Grün, das sich in vielen kleinen Details auf den Seiten wiederfindet.

Im Kopf prägen nun fruchtige, saftige Bilder die Stimmung der Website. Das Layout sollte in sich reduziert, aber durchdacht sein. Da ich die Website responsive gestaltete, also die Website sich den Geräten und der Bildschirmgröße entsprechend anpasst, waren auch diese großen Bilder denkbar, ohne “kleinere” Geräte auszusperren.

Entwurf in Photoshop

Als Komplement zu den großen Headerbildern setzte ich die Schriftart Streetscript angrenzend an den Kopf als präsente, aber freundliche Headingfont ein. Als Bodyschriftart dient mir die neutrale, sympathische Open Sans. Der Einsatz nunmehr als Webfonts via @font-face bricht auch endlich die Abhängigkeit von Flash und Javascript, die ich bislang hatte – weniger Barrieren und Abhängigkeiten. Wesentlich freundlicher für die Augen ist auch die wesentlich größere Typo, ebenso für Nebenelemente. Die weite Zeilenlänge wird hier – bei den Desktopversionen der neuen Seite – durch eine Aufteilung in Spalten aufgefangen, sodass die Rezeption der Seite nicht unnötig ermüdet.

Referenzen im Vordergrund

Referenz-Übersicht physalis

Ansicht Referenzen

Die Referenzen waren das Element, das mich auf der bisherigen Seite am meisten störte. Mit den unzureichenden Kurzinfos, dem versteckten Link zum Live-Projekt und der weniger optimalen Slideshow. Beim Redesign der Referenzenübersicht habe ich mich für einen interessanteren, kompakten Überblick ohne Unterteilung in Seiten entschieden. Nutzerbefragungen haben gezeigt, dass gerade in Zeiten von Touchgeräten das Scrollen/Wischen dem Klicken und Nachladen von neuen Seiten vorgezogen wird, was auch bei meinen Probanden der Fall war – also finden sich alle Referenzen in der Übersicht nun auf einer Seite. In Zukunft soll die Filterung nach Kategorie auch ohne Neuladen der Seite vonstatten gehen können.

Auf der Detailseite einer Referenz findet man nun oben ein kurzes Datenblatt zum Projekt und bei Webprojekten ein deutlicher Call-To-Action-Button, um sich selbst von der Website in Aktion zu überzeugen. Die Möglichkeiten, die dort gefundenen Projekte über Webdienste einfach weiterzuteilen, habe ich mit einer dezenten “Teilen”-Leiste im Factsheet geschaffen. Erst darunter folgt eine Beschreibung des Projektes mit folgender Bildergalerie in einem Slider. Beibehalten habe ich in Kopf und Fuß Links zu vorherigen und nächsten Projekten, um eine schnelle Navigation zwischen Referenzen zu ermöglichen.

Usability und prägnante Texte

Deutlicher als auf der alten Seite (auf der ich erstmalig Vergleichstests angestrengt habe) finden sich Kontaktinformationen und Links, weitere Inhalte zu erkunden. Auf der Startseite werden, nach einer nichtrepräsentativen Umfrage als die präferierte Variante herausgestellt, nach einer kurzen Einleitung konkret die drei Teilbereiche meiner hauptsächlichen Arbeit vorgestellt, mit deutlichen Links zum Weiterklicken. Auf den jeweiligen Unterseiten finden sich wiederum Links zu anderen Bereichen der Seite wie den Referenzen, der Kontaktseite oder der Philosophie. Im Footer sind wichtige Kontaktdaten, eine Kurzinfo, ein zweites Navigationsmenü und ein minimalistisches Kontaktformular vorhanden.

Soziale Medien und Verweise auf den (neuen) Blog sind dezent gesetzt; nicht jeder Besucher der Seite ist interessiert an der fachlichen Seite der Arbeit, so dass ich diesen Aspekt einbezogen, aber etwas getrennt habe. Deshalb hat der Blog auch ein anderes Design bekommen, an dem ich in nächster Zukunft auch noch intensiver arbeiten möchte. Einen Twitter- oder anderen automatischen Feed habe ich deswegen auch weggelassen.

Viel Arbeit wurde auch in die Neu- und Umformulierung der Texte gesteckt. Die Texte sind nun kürzer, prägnanter und leichter lesbar geworden; längere Beiträge soll es nur ansatzweise bei den Referenzen und intensiver im Blog geben.

Bling bling und das Neue

Sass - CSS im Editor

SASS – CSS der Seite im Editor

Wie eingangs schon erwähnt, lag mein Augenmerk auf einem eher cleanen, aber durchdachten Layout ohne übermäßigen Pathos. Die Basis bildet ein auf dem 978.gs-Rastersystem basierendes Grundtemplate von mir, welches ich responsive adaptiert habe, so dass es sich allen Situationen geschmeidig anpasst. Im Detail stecken viele kleine Elemente von CSS3, wie etwa die üblichen Schatten, runden Ecken oder der animierte Hover-Effekt bei der Referenzen-Übersicht, die teilweise für die ungläubigen Microsoftbrowser älterer Generation via Javascript hinübergehievt wurden. Die meisten Javascript-Erweiterungen basieren auf jQuery.

Jedes Jahr versuche ich, mindestens eine Technik dazuzulernen (wenn es sich anbietet). 2011 beschäftigte ich mich in einem ersten Projekt mit Responsive Webdesign. Dieses Jahr nahm ich mir den seitdem fast immer eingesetzten intelligenten CSS-Präprozessor SASS vor, der CSS um sinnvolle Funktionen wie Variablen, Rechenoperationen, wiederverwendbare und vererbbare Codebausteine und vieles mehr erweitert. Die Arbeit am CSS für die Seite wurde so, nach einer kurzen Lernphase, um einiges leichter und logischer.

Fazit: Der Weg ist die Frucht

Ich bin nunmehr recht zufrieden mit meiner neuen Website und froh, sie endlich veröffentlicht zu haben. Es war ein langer und lehrreicher Weg, bei dem ich viele kleinere und größere Dinge ausprobiert habe und nun eine Seite habe, die stabiler und stimmiger ist. Sie wird auch weiterhin “Work in progress” bleiben. Jegliche Kritik, Fehlermeldung oder Anmerkung ist mir willkommen!

Neues Jahr, neues Glück

Filed under: Neues — Eno Thiemann @ 11:39

Als allererstes: Meinen Mitlesern, Freunden, Kunden, Partnern, Mitmenschen ein fantastisches und geschmeidiges neues Jahr 2013!

Nach einer wirklich schier unglaublich langen Zeit, in der fast nichts auf meiner Website geschehen war, hole ich zum Jahreswechsel nun einmal richtig aus und sage: alles neu. Nach einem guten Jahr Entwicklungszeit, vom ersten Entwurf bis zur fertigen Netzversion, darf ich nun meine Website im vollkommen neuen Gewand präsentieren. Aufgeräumter, nutzerfreundlicher, interaktiver und irgendwie: fruchtiger. Ein paar Dinge fehlen noch und stehen bereits auf meiner Liste für die kommenden Wochen.

Damit einher geht ein längst anstehender Umzug auf eine neue Domain. Fortan findet sich mein Portfolio unter der griffigeren und unabhängigeren Domain physalis-design.de. Die alte Domain wird aber bis auf weiteres auch auf die neue Domain umleiten, nicht zuletzt wegen der vielen Verlinkungen zu der Seite.

Viel Spaß beim Stöbern ;)!