Similar to Realizer App here’s another one. Just upload your sketches, hifi wireframes or fancy designed jpg Files and link the images. The FiledTest app is currently in private beta.
FieldTest Beta 2 from FieldTest on Vimeo.
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 :)
A 1140px wide, 12 column grid. Fluid all the way down to a mobile version.
„The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser.
Beyond a certain point it uses media queries to serve up a mobile version, which essentially stacks all the columns on top of each other so the flow of information still makes sense.
Scrap 1024! Design once at 1140 for 1280, and with very little extra work, it will adapt itself to work on just about any monitor, even mobile.“
Ausprobieren! Das Photoshop Template dazu gibt es hier.
( via swissmiss )
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.
( via swissmiss & techcrunch )
Edit:
Es gibt auch http://min.us, praktisch das gleiche Tool, welches auch in Safari funktioniert! :)
( thx @boerge30 )
LittleIpsum
Mac OS Desktop App (ab 10.6 +) zum Erstellen von Blindtexten mit einigen Optionen.
http://littleipsum.com
( via swissmiss )
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.
( via Smashing Magazine)
LiveView for iPhone & iPad
Live View ist eine echt klasse remote iPhone/iPad App, um die Wirkung von Mockups oder auch klickbaren Prototypen via eines Desktop Live-Screencasts direkt auf dem iPhone oder iPad zu testen.
Die App besteht aus zwei Teilen, der iPhone/iPad App Live View und der Desktop App, dem Live View Screencaster.
Besonders hervorzuheben ist auch die Funktion “Interpret Touches as Mouse Events” . So kann man Interaktionen von klickbare Prototypen/Wireframes direkt auf dem iPhone testen.
Nicholas Zambetti, der das Tool entwickelt hat, sagt dazu auf seiner Webseite:
For Visual Designers — Develop pixel–perfect graphics for the iPhone and iPad quickly and easily with a live view of your canvas/artboard while you work. LiveView is compatible with both standard and Retina displays.
For Interaction Designers — With your iPhone or iPad tethered via WiFi, you can interact with software prototypes and demos running on your Mac to communicate and iterate your concepts quickly.
For Everyone — If you’ve ever needed to press a button from afar or wished that you could take a piece of your monitor with you across the room, this app may prove useful from time to time.
Cool! :)
http://www.zambetti.com/projects/liveview/
Design Methoden Finder
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!
http://www.designmethodenfinder.de
( via Design made in Germany )
Gridulator
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.
( 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 ;)
Fillerama – ByeBye boring Lorem Ipsum
Fillerama ist ein Blindtextgenerator, der ausschliesslich mit Futurama Zitaten arbeitet.
Ich warte ja immer noch auf den Slayer-Lyrics-Blindtext Generator. Lorem Ipsum verslayern! Wer schreibt einen? :)
http://chrisvalleskey.com/fillerama/
Average Reading Time Testing
Wie lange braucht der Durchschnittsmensch, um meinen Text zu lesen?
Interessantes Tool – auch zu Demonstrationszwecken bei Kunden, die zu Romanschreibern mutieren, super geeignet.
http://stijlroyal.de/art/index.php
Colorscheme Tools für Designer
Farben sind ja nicht ganz unwichtige Informationsträger. Sei es darum sich einfach nur mal inspirieren zu lassen, oder die passenden Kombinationen zu einer vorgegebenen zu Farbe finden – bei der Gestaltung immer ganz nützlich: diverse Colorschemetools & Pickers, die helfen, Farbharmonien herzustellen.
Adobe Kuler –
Der Klassiker, lässt eigentlich keine Wünsche offen, man kann eigene Farbschemen erstellen, nach versch. Kriterien wie z.B . Komplementärfarben, oder Abstufungen. Exportfunktion für die Paletten in Illustrator und Photoshop vorhanden.
Mir gefällt an Kuler, das es hauptsächlich mit Emotionen arbeitet, man kann also nach Schlagwörtern suchen wie z.B “early morning” – super zur Inspiration.
Gibt es übrigens auch als Desktop AIR Applikation.
