Oberflächen-Attrappen mit Adobe XD und Office Fabric UI

Mit dem Ressourcen-Kit von Office Fabric UI gelingt es, schöne Oberflächen-Attrappen (engl. Mockups) für SharePoint oder andere Office 365 Anwendungen zu bauen. Office Fabric UI, das offizielle Front-End-Framework von Microsoft, lässt designtechnisch Individuallösungen nahtlos in Office und Office 365 einfügen.

Auf der Microsoft Webseite für Entwickler könnt ihr für Adobe XD ein Ressourcen-Kit für SharePoint oder Office Fabric UI herunterladen.

Direktlink zur Seite: https://developer.microsoft.com/en-us/fabric#/resources

Mit Adobe XD, als Komplettlösung für Prototyping und UI-Design, kann man seine Vision schnell für andere visualisieren. Mit der Prototyping-Komponente kann man darüber hinaus noch spielend leicht einen Klick-Dummy erstellen, damit man ein noch besseres Gefühl für die spätere Anwendung sowie deren Benutzung bekommt. Der Prototyp kann über die Adobe XD App auch direkt auf einem mobilen Endgerät oder im Web ausgeführt werden.

Nach dem Download des Fabric Design Toolkits kann man direkt loslegen. Es beinhaltet alle Komponenten und vordefinierten Styles des Office Fabric UI.

Die Komponenten sind unter verschiedenen Gruppierungen vordefiniert und können einfach herauskopiert werden. Schnell lassen sich Anwendungen, Formulare oder Abläufe im gewohnten Office Design erstellen und präsentieren.

Wenn das gewünschte Layout erstellt ist, kann dieses einfach aus der Anwendung exportiert werden. Es kann zum Beispiel als PNG-Bild gespeichert werden.

Für dieses Beispiel haben wir eine mögliche Erfassungsmaske für ein Veranstaltungs-Planungstool im SharePoint erstellt. Das Ergebnis seht ihr im nachfolgenden Bild (~10 Minuten Zeitaufwand).

Mit diesem Formular-Layout kann man nun in die Detail-Diskussion gehen. Wenn man sich auf ein Layout und die Handhabung geeinigt hat, dann sieht das Endprodukt durch den Einsatz von Office Fabric UI so aus wie die Mockups. Mögliche Unstimmigkeiten im Bezug auf Layout und Navigations-Konzepte während der Umsetzung können so vermieden werden.

Wer in der Vergangenheit mit Storyboarding von PowerPoint gearbeitet hat, der wird das Arbeiten mit Adobe XD als sehr angenehm empfinden. Adobe XD ist eine echte Alternative mit mehr Funktionen als Storyboarding (PowerPoint) und kommt mit Oberflächen-Komponenten im neusten Look and Feel für Office-Webanwendungen.

Manchmal sagt ein Bild mehr als tausend Worte – ich freue mich auf eure Erfahrungen mit Adobe XD und Office Fabric UI-Dummys.

Haben Sie Fragen zu diesem Artikel oder brauchen Sie Unterstützung?

Nehmen Sie mit uns Kontakt auf!

Wir unterstützen Sie gerne bei Ihren SharePoint-Vorhaben!