kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Prototyping


Der Design/Development-Workflow und die »Single Source of Truth«

Digitale Design-Projekte sind modular aufgebaut, häufig sogar auf Grundlage eines Design Systems. Doch die starke Trennung der Bereiche Design und Development stellt nach wie vor ein Problem dar. Unternehmen und Agenturen propagieren zwar einen interdisziplinären Design/Development-Workflow, entwickeln dann aber doch zunächst im Design statische UI-Komponenten, die anschließend von Frontend-Teams im Code nachgebaut werden.

Beitrag zu Ende lesen

Sketch – Prototyping (Video-Tutorial)

Mit den Prototyping-Funktionen von Sketch ist es möglich Artboards scrollbar zu gestalten, Verlinkungen einzufügen und Objekte beim Scrollen im Vordergrund zu fixieren. Somit ist es möglich den User-Flow – die Bewegung des Benutzers durch die Website oder App – zu visualisieren und zu testen.

Beitrag zu Ende lesen

Prototyping im Web Design – welche Arten von Prototypen gibt es?

Wenn Web-Projekte nach modernen Workflow-Konzepten realisiert werden, stehen die späteren Benutzer im Zentrum aller Überlegungen. Interaktive Prototypen werden in diesem Zusammenhang immer wichtiger, um das entstehende Produkt möglichst früh und regelmäßig auf das Erreichen der gesteckten Ziele zu überprüfen. Bei umfangreichen Projekten helfen Prototypen zudem dabei den Gesamtumfang im Blick zu behalten.

Es gibt zahlreiche Arten, Prototypen umzusetzen – alle haben Vor- und Nachteile. Grob lassen sich drei Gruppen bilden: analoge, digitale und native Prototypen. Sie unterscheiden sich in Zielsetzung, Anwendbarkeit im Projektverlauf und der Qualität der Ausgestaltung.

Beitrag zu Ende lesen

Adobe XD – Einstieg und Praxis-Tipps

Adobe XD ist ein Programm für UX- und UI-Design-Teams. Mit XD können einzelne Screens im »Design Mode« gestaltet und anschließend im »Prototype Mode« miteinander verknüpft werden. Somit lässt sich das Verhalten der finalen Anwendung in Form eines visuellen Clickdummies simulieren. Das Ergebnis kann im »Freigabe Dialog« präsentiert oder an die Entwicklung übergeben werden.

Beitrag zu Ende lesen

Sketch – Einstieg und Praxis-Tipps

Icon Sketch App

Das Grafikprogramm Sketch erfreut sich bei UX-, UI-, App-, und Webdesignern größter Beliebtheit. Sketch deckt die Bedürfnisse von Interface-Designern perfekt ab und bietet spezialisierte Funktionen, die es in anderen Programmen so nicht gibt. Insbesondere die Arbeit mit Design-Systemen, fluiden Layouts und Prototypen wird dank Sketch spürbar erleichtert. Darüber hinaus lässt sich das Programm dank zahlreicher Plugins flexibel erweitern.

In diesem Beitrag beschreiben wir die wichtigsten Funktionen, schildern typische Anwendungsfälle und klären die häufigsten Fragen unserer Schulungsteilnehmer um euch den Einstieg in das Programm zu erleichtern. Es lohnt sich dennoch zusätzlich die kurzweilige, offizielle Dokumentation zu lesen.

Beitrag zu Ende lesen

Der Workflow im Responsive Web Design – Prototyping & Co.

Die Entwicklung vom lokalen Desktop-Computer zum allgegenwärtigen „mobile Web“ zwingt uns dazu Webdesign-Projekte heute anders zu planen, zu gestalten und technisch umzusetzen als noch vor ein paar Jahren. Die schier unüberschaubare Anzahl an Displaygrößen, Geräten, Browsern und individuellen Einstellungen macht den bisherigen Workflow ineffizient, führt zu falschen Erwartungshaltungen bei Kunden und ist für langfristig angelegte Web-Projekte nicht mehr empfehlenswert. Die Anforderungen haben sich verändert und wir sollten darauf reagieren.

Beitrag zu Ende lesen