‚We’re not designing pages, we’re designing systems of components‘—Stephen Hay.
Obwohl ich noch nicht so ganz durchsteige, wie genau das Setup läuft, halte ich das Projekt Patternlab.io – Demo hier – für sehr beobachtenswert.
Atomic Design heisst der Ansatz, bei dem es darum geht, eine (entwicklungsfreundliche!) Komponenten Library für Webprojekte zu erstellen und kontinuierlich zu pflegen statt endlose Seiten auszugestalten. Elemente werden unterteilt in Atome, Moleküle, Organismen, Templates und Pages. „Webdesign Tools: Pattern Lab“ weiterlesen
„For Developers and UX designers prototyping and testing interaction concepts.“
This is how it works:
1. Build your app mockups or sketches.
2. Upload your screen mockups or sketches
3. Link your screens.
4. Download and run the Realizer app.
If you want to build an easy to use and appealing piece of software, writing Scenarios for your Usergroups is not a new thing and has been around for a while – User Scenarios are a really great and powerful conceptual Design Tool.
Writing Scenarios does help us to think much more in a way like our Users do and to rethink and reflect the Design / IA we’re building.
Today I found a Mac Desktop Tool, originally made for Screenwriters/Writers called „Scrivener“ which seems perfect in helping us building these narrative User-Stories/Flows/ Scenarios with a simple non-linear approach, working with adjustable index cards on a corkboard, according to interaction design, which is definitely a non-linear design process.
There are different view modes available ( list, cards, etc..) and you can write the underlying story containing a little more depth of what should happen „behind“ each index card – you’ll find there also very customizable labeling options ( name them e.g. something like „required in v1“ or „nice to have“ or „later“ ) which will allow you to write down your conceptual ideas quickly and save them for a later Version of the Product – but already within the flow.
Features included : Creating Folders, Insert Images, Export etc.. There is an extra Folder for all the Research Stuff perfect for quick reference since you’re able to put all the related things in just one place, what I think is pretty cool.
List View of Index CardsComposite View with Subdocuments/ Stories behind
I think this is a really GREAT Tool to do structural and conceptual work before and during the Design Process, due it allows you to generate a much more human centered approach to the „Product Backlog“ of what is required instead of boring written spec lists without knowing the WHY of the „requirements“ and the Users Goals and Needs. Cost: $45, 30 Days Trial free
By the way, there is a similar interesting iPad app too, called „Index Card“ .
P.S. I hope my written English is not too bad, since this is my first Article in English – trying to switch this blog to English, due the Interaction/UX Design Community is an international one and we should share all the interesting things and not exclude people due languages :)
Wow! Bilder austauschen made easy. Ein Paradebeispiel für geniales UCD. Es geht einfach nur darum, Bilder auszutauschen, kein Drumherumgedöns, Nichts, nada. Punkt. :)
Funktioniert bis jetzt leider nur im Chrome, oder ab Firefox 4.
Draw on any webpage with MarkUp to quickly share your thoughts. Try it now by choosing a shape to trace. Get MarkUp to use it any time.
Feedback auf Webseiten oder Prototypen – einfach schnell und unkompliziert. Bookmarklet installieren, einfach drauf losmalen/ tippen – fertig.
Der so kommentierte Screen kann auch direkt aus dem Browser mithilfe einer URL publiziert werden. Es gibt einige solcher Tools, aber dies gefällt mir bislang am besten.
Eine wirklich tolle, nützliche Sammlung von Arbeitsweisen, die helfen soll, designbezogene Probleme/Aufgaben zu lösen, stellt der Designmethoden Finder bereit.
Die Infos sind modular aufgebaut, so das man sich schrittweise tiefer in die einzelnen Methoden einarbeiten kann. Es werden passende Methodenvorschläge zu Suchbegriffen ausgegeben, die Methoden werden erklärt, Beispiele geliefert und für Neulinge gibt es die Design Methoden Schule.
Sehr empfehlenswertes Tool, zudem top aufbereitet!
Tolles Tool zum Erstellen von Grids für Weblayouts: Gridulator. I like!
David Sleight, der das Tool gebaut hat sagt dazu: Tell Gridulator your layout width and the number of columns you want, and it’ll spit back all the possible grids that have nice, round integers. Just the thing for pixel-based designfolk. There are inline previews, courtesy of the canvas element, and when you’re all set Gridulator can crank out full-size PNGs for you, ready for use in your CSS, Photoshop docs, or what have you. And there’s full keyboard control for you snazzy power users.
Mann kennt das ja, anfangs wird die CSS Datei gepflegt und gehegt, doch im Laufe des Projektes sieht sie dann aus wie Kraut & Rüben.
Wer es optisch aufgeräumt mag, sollte mal den ProCSSor ausprobieren – mit jeder Menge Formatierungseinstellungen, die man auswählen kann.
Er schafft zumindest eine optische Ordnung.
Nach Regionen oder Elementen muss man schon noch selbst ordnen – aber das ist ja sowieso fast eine religiöse Debatte ;)
Wie lange braucht der Durchschnittsmensch, um meinen Text zu lesen?
Interessantes Tool – auch zu Demonstrationszwecken bei Kunden, die zu Romanschreibern mutieren, super geeignet.
Webkit unterstützt ja bislang als einziger Browser die CSS Eigenschaft „Gradient“ // Property: -webkit-gradient (Farbverläufe linear & radial)
So kann man hübsche Buttons also in Zukunft ganz ohne Grafiken basteln – wie gesagt funktioniert das ganze leider ausschliesslich ab Safari 4
Webkit unterstützt ja bislang als einziger Browser die CSS 3 Eigenschaft „Gradient“ // Property: -webkit-gradient (Farbverläufe linear & radial) So kann man hübsche Buttons also in Zukunft ganz ohne Grafiken basteln – wie gesagt funktioniert das ganze leider ausschliesslich ab Safari 4 – also bei der Anwendung der Eigenschaft bitte niemals vergessen einen Fallback mit einer Hintergrundfarbe für die Browser zu schreiben, die das nicht unterstützen. Wer nun auf jeden Fall per CSS seine Farbverläufe gestalten möchte, dem sei der Gradient Generator von den Westciv Tools empfohlen. Einfach die gewünschten Farbwerte & Einstellungen wählen, und den CSS-Code generieren lassen. Ich persönlich finde ja ein 1px breites Hintergrundbild, welches wenigstens browserübergreifend funktioniert, momentan immer noch die bessere Wahl – trotzdem ein nettes Tool, welches man sich ja mal vormerken kann und mit rumspielen kann ;) http://webkit.org/blog/175/introducing-css-gradients/http://westciv.com/tools/gradients/
Arbeitest du schon oder fluchst du noch ?
Mit einem Mac zu arbeiten macht einfach Spass. Es erhöht die Produktivität meiner alltäglichen Arbeit, und ich verbringe deutlich weniger Zeit damit, mich mit irgendwelchen seltsamen dubiosen Einstellungen und Treibern herumzuschlagen, als meiner eigentlichen Arbeit nachzugehen.
Es gibt superviele günstige und auch sehr viele kostenlose kleine Programme (Apps) für den Mac, die die alltägliche Arbeit noch mehr erleichtern, und somit den Spassfaktor bei der Arbeit deutlich erhöhen:
Intuitiver als die übliche „Search & Replace“ Methode im CSS Editor finde ich den „Replace CSS Colors–Editor“.
Ein nettes online Tool: Du lädst einfach das alte CSS File hoch, ersetzt das alte Farbschema durch ein neues deiner Wahl, und bekommst deinen neuen „Anstrich“ zum download angeboten. Perfekt um schnell mal einen Styleswitcher für die Webseite zu basteln.
An sich überhaupt nicht neu, aber viele kennen diese bestimmte Vorgehensweise zum Erzeugen eines grafischen MouseOver-Effektes doch noch nicht und arbeiten immer noch mit verschiedenen Background-Images oder gar mit JavaScript.
CSS Typetools gibt’s zwar en Masse im Netz , aber dies ist ein besonders schönes wie ich finde. Einfach Text eingeben und CSS Code erzeugen lassen & Lesbarkeit testen.
Webkit unterstützt ja bislang als einziger Browser die CSS 3 Eigenschaft „Gradient“ // Property: -webkit-gradient (Farbverläufe linear & radial) So kann man hübsche Buttons also in Zukunft ganz ohne Grafiken basteln – wie gesagt funktioniert das ganze leider ausschliesslich ab Safari 4 – also bei der Anwendung der Eigenschaft bitte niemals vergessen einen Fallback mit einer Hintergrundfarbe für die Browser zu schreiben, die das nicht unterstützen. Wer nun auf jeden Fall per CSS seine Farbverläufe gestalten möchte, dem sei der 
