Kürzlich habe ich bei einem Re-Design Projekt im Rahmen des Visual Design Prozesses angefangen, zusätzlich mit einer Projekt-GUI-Library zu arbeiten.
Es ist ein Versuch. :) Ich finde es einfach ineffizient, für jeden Seitentyp Screendesigns zu machen. Es dauert ewig, es ist ein Mordsgefrickel und Schriften wirken im Browser meist doch eh anders.
Können wir im Appplikationsdesign nicht unsere Zeit für viel wertvollere und wichtigere Aufgaben als tagelange Pixelschubsereien in Photoshop & Co verwenden? – Stichwort Usability/UX.
„Umdenken ? – GUI Libraries statt Screendesigns“ weiterlesen
Schlagwort: interfacedesign
John Underkoffler points to the future of UI
„Minority Report science adviser and inventor John Underkoffler demos g-speak — the real-life version of the film’s eye-popping, tai chi-meets-cyberspace computer interface. Is this how tomorrow’s computers will be controlled?“
( via eleqtriq )
Vision of the Future
Wann wird es wohl so weit sein?
Freescale – „Vision of the Future: Consumer“ from Arts + Labor on Vimeo.
Mehr interessante Videos gibt es bei Arts & Labour
( via Core77 )
The 4 questions to ask in a cognitive walkthrough
Super Artikel über Cognitive Walkthroughs auf Userfocus. Cognitive Walkthroughs sind eine bekannte Methode, um Interaktionsprobleme in einem frühen Stadium des Designprozesses eines Interfaces herauszufinden.
„The cognitive walkthrough is a formalised way of imagining people’s thoughts and actions when they use an interface for the first time. Walkthroughs identify problems that new users will have when they first use an interface. You select one of the tasks that the design is intended to support and then you step through the task, action by action, seeing if you can identify any problems with the interface.“
Stencils App – Sketching Apps
Mockups für Apps direkt auf dem iPhone erstellen.
Personas in Interface Design
oder….welchen Nutzer hättens‘ denn gern? ;)
Oft leider unterschätzt und ignoriert – für UI Designer und Informationsarchitekten allerdings oft sehr essentiell wenn es darum geht, eine Seite entweder komplett neu zu erstellen, oder ein Auftrag für ein Re-Design ansteht. Die Entwicklung von Personas.
Was sind Personas?
Persona = fiktive, nicht-reale Person, die stellvertretend für eine Benutzergruppe steht. Personas sind ein Hilfsmittel u.a. im Bereich Interaction Design, um ein Produkt herzustellen, welches voll und ganz auf die Bedürfnisse der Endnutzer zugeschnitten ist (User-Centered Design).
„Personas in Interface Design“ weiterlesen
Wireframes Artikel
Zum Download und lesen gibt es hier meinen Artikel über Wireframes & Prototyping aus dem Webstandardsmagazin Ausgabe 03/2009.
Viel Spass bei der Lektüre. :)
+++Wireframes und Prototyping im Interfacedesign – Webstandards Mag 03/09
Hot, Hotter, Hotgloo -Online Wireframing Tool
How to HotGloo Ad from HotGloo on Vimeo.
HotGloo ist ein wirklich kleines feines Online-Tool zum Erstellen von Wireframes und klickbaren Prototypen.
Man kann Sitemaps anlegen, Master Templates erstellen, klickbare Links erstellen, eigene Widgets hinzufügen, zusammen daran arbeiten und auch einen PDF Export gibt es.
Zur Zeit ist HotGloo noch in der Beta & daher frei. :)
Was Webdesigner vom Industrial Design lernen können
Diese Sache beschäftigt mich schon etwas länger.:
Nochmals angeregt durch einen Post vom UX Magazine, welcher auf das phantastische Portfolio des Industrial Designers Damjan Stanković verweist, finde ich das wir UI Designer vom klassischen Industrial Design nur dazulernen können & sollten: Denn sind wir Interfacedesigner/Web-UX Pros nicht sowieso viel viel näher am Industrial Design als am Grafikdesign?
„Was Webdesigner vom Industrial Design lernen können“ weiterlesen
Nutzerfreundliche Formular-User-Interaktion
Formulare sind wichtig. Man findet sie bei Logins, in Registrierungsprozessen, beim Bestellen in Onlineshops und zur simplen Kontaktaufnahme. Und es gibt kaum etwas nervigeres, als das zeitintensive Ausfüllen eines Formulars, um dann hinterher – nach getaner Arbeit festzustellen- das der Name keine Sonderzeichen beinhalten sollte, das Passwort zu kurz ist, und man aus Versehen die E-Mailadresse irgendwie falsch eingetippt hat, und man den ganzen Schmodder nochmals wiederholen muss. Schlimmstenfalls sind ALLE Datensätze weg. Ja das gibt es auch heute noch.
„Nutzerfreundliche Formular-User-Interaktion“ weiterlesen
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
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/
Links oder rechts? Magentos Registrierungs Usability
Usability Frage anhand des Magento Demo-Shops. Registrierung und Login auf einer Seite. Was sollte wohin?
Heute eine kleine Umfrage…. Bei Magento, dem derzeit wohl beliebtesten Open-Source Shopsystem, stolpere ich immer wieder, wenn ich das Frontend gestalte, über diese Hürde:
„Links oder rechts? Magentos Registrierungs Usability“ weiterlesen
7 gute Gründe für Wireframes & Prototyping im Interfacedesign
„Design is a Process – much more than making things look pretty“
„7 gute Gründe für Wireframes & Prototyping im Interfacedesign“ weiterlesen
Usability Testing mit Silverback am Mac
Silverback ist ein low-budget Usability Testing Tool, d.h. es testet die Benutzerfreundlichkeit einer Webseite, indem es die Mausaktivitäten und Augenbewegungen sowie die spachlichen Aussagen des Benutzers in Echtzeit mit der integrierten iSight Kamera aufzeichnet, und den fertigen Film als .mov abspeichert – sodass man diesen hinterher auswerten kann.
Neulich bin auf meiner Suche nach guten Webdevelopment Tools für den Mac auf „Silverback“ gestossen.
Silverback ist ein low-budget Usability Testing Tool, d.h. es testet die Benutzerfreundlichkeit einer Webseite, indem es die Mausaktivitäten und Augenbewegungen sowie die spachlichen Aussagen des Benutzers in Echtzeit mit der integrierten iSight Kamera aufzeichnet, und den fertigen Film als .mov abspeichert – sodass man diesen hinterher auswerten kann.