Webdesign Tools: Pattern Lab

‚We’re not designing pages, we’re designing systems of components‘—Stephen Hay.

patternlab
Obwohl ich noch nicht so ganz durchsteige, wie genau das Setup läuft, halte ich das Projekt Patternlab.ioDemo 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

Rapid App-Prototyping with Realizer

Will definitely try this out – looks promising:

„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.

Writing User-Scenarios with Scrivener

Index Card View

Organizing and structuring the Chaos

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 Cards
Composite 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

+++http://www.literatureandlatte.com/scrivener.php

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 :)

DropMocks – Bilder einfach teilen


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.

http://www.dropmocks.com/

( via swissmiss & techcrunch )

Edit:
Es gibt auch http://min.us, praktisch das gleiche Tool, welches auch in Safari funktioniert! :)

( thx @boerge30 )

Markup Bookmarklet

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.

http://markup.io/

( via Smashing Magazine)

Design Methoden Finder

desmethodenfinder

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.

desmethodenfinder2

Sehr empfehlenswertes Tool, zudem top aufbereitet!

http://www.designmethodenfinder.de

( via Design made in Germany )

Gridulator

Tolles Tool zum Erstellen von Grids für Weblayouts: Gridulator. I like!
gridulator

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.

http://gridulator.com/

( via swissmiss )

ProCSSor – CSS Prettifier

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 ;)

procssor

http://www.procssor.com/

CSS Gradients-Generator

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

grad 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/

Cross Browser Testing mit Adobe Browserlabs

adobe-browserlabs

Neu ist die Idee ja nicht, das Webentwickler Webseiten in verschiedenen Browsern & unterschiedl. Betriebssystemen testen. Tools dafür gibt es einige: z.B. Browsercamp.com
Xenocode Browser Sandbox ( nur f. windows ), & IE Tester
„Cross Browser Testing mit Adobe Browserlabs“ weiterlesen

15 Resources für Macfans

mac

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:

Here we go – 15 Resourcen zum stöbern und bookmarken, viel Spass & eine schöne Woche!
„15 Resources für Macfans“ weiterlesen

CSS Color Replacement–Tool

css-color-editor

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.

http://css-color-replace.orca-multimedia.de

CSS Sprites / Single-Image Rollover Effekte

sprites

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 Sprites / Single-Image Rollover Effekte“ weiterlesen

GDPR Cookie Consent mit Real Cookie Banner