Grossartige Datenquellen für lebendige Prototypen

13. Mai 2020 - Geschrieben von Mark Land

Im den kürzlich erschienenden Artikel Design mit Live Daten haben wir über Live-Daten-Prototyping in Adobe XD gesprochen. In dem Beispiel zeigen wir dir, wie du deinen Prototypen durch reale Daten aus öffentlichen APIs Leben einhauchen kannst.

Was wäre, wenn du Daten zu Musik von Services wie Soundcloud, Nachrichten von Yahoo Finance, Bloomberg oder Fotos von Instagram Profilen reinladen könntest? Was wäre, wenn du tatsächlich Soundcloud oder Bloomberg nach den richtigen Musik- oder Nachrichtenartikeln durchsuchen könntest?

Das wäre ziemlich cool, oder?

Design mit Live Daten und verschiedenen Datenquellen

Wie gelangst du zu den eigentlichen Daten?

Der kompliziertere Weg: Öffne einen Online-Dienst und schau dir die API-Aufrufe an, die dein Browser macht, wenn die Website geladen und aufgebaut wird. Ob du die tatsächliche URL sehen wirst, die der Client (der Browser) aufruft, hängt von der Technologie ab, die die Seite verwendet.

Es kann vorkommen, dass du den tatsächlichen Aufruf nicht findest, selbst wenn die Website hauptsächlich auf APIs basiert. Die Gründe dafür sind vielfältig. Ein Aspekt ist die Tatsache, dass die Website-Entwickler natürlich nicht wollen, dass Fremde Daten von der Website saugen (Scraping).

Der einfachste Weg: Verwende unsere Daten in Google Sheets.

Benutze unser Sheet! Kein weiterer Aufwand erforderlich.

Die Idee ist, Daten über Adobe XD, Figma oder Sketch in deine UI-Prototypen zu importieren. Im kürzlichen erschienenen Artikel Design Mit Live Daten findest du einen Schritt-für-Schritt-Prozess zum Einrichten der XD-Datei, Google Sheets und zum Importieren der Daten.

Jetzt aber zu den Daten selbst.

Nachstehend findest du einige weitere Datenquellen, die du verwenden kannst, um deinem Prototypen Leben einzuhauchen. Wir haben alle Quellen in ein Google Sheet zusammengefasst.

Design mit Live Daten und verschiedenen Datenquellen

Um tatsächlich Daten aus diesem Google Sheet importieren zu können, musst du zunächst die entsprechenden Daten von den Registerkarten Soundcloud, Yahoo oä. in die Registerkarte "XD" bringen (oder referenzieren). Bevor du also das XD-Plugin verwendest, gehe in die erste Registerkarte namens "XD", gebe ein "=" und navigiere dann zu der entsprechenden Registerkarte, das du importieren möchtest. Einzelheiten zur Vorgehensweise findest du in unserem kürzlich erschienenen Artikel Design mit Live-Daten.

Yahoo Finance

Wir haben einen API-Aufruf gefunden, mit dem du alle Artikel mit Titel, Beschreibung und Link für einen von dir eingegebenen Börsenticker abrufen kannst, hier "NYSE-BABA". "NYSE " ist die Börse, "BABA " der jeweilige Börsenticker. Das vollständige Symbol für Apple wäre zum Beispiel "NASDAQ-AAPL". Um den Ticker zu finden, gehe auf tradingview.com und suche nach dem jeweiligen Unternehmen. Kopiere dann den kompletten Ticker und füge diesen hier ein.

Design mit Live Daten und Yahoo Finance Datenquellen

Bloomberg

Die Daten für Bloomberg sind leider recht statisch im Vergleich zu den anderen Datenquellen. Aber du kannst ca. 50 Artikel abfragen, aktualisiert werden diese täglich.

Design mit Live Daten und Bloomberg Datenquellen

Instagram

Design mit Live Daten und Instagram Datenquellen

Viele Designer werden dies lieben.

Mit dieser API Abfrage kannst du ua. Bilder von jedem Instagram-Benutzer abrufen. Schade ist nur, dass du den eigentlichen API-Aufruf für jeden IG User separat ersetzen musst. Es ist aktuell nicht möglich, einfach den Instagram-Benutzernamen einzugeben, zumindest nicht in unserem Sheet aktuell.

Wenn andere Arten von Bildern suchst, ersetze die URL in Zelle "A4" (für Instagram) im Sheet "APIs " durch die folgenden:

Design mit Live Daten und Instagram Datenquellen

Probier's aus.

Wenn du deine eigenen Datenquellen zur Hand hast und wissen willst, wie du diese importierst, dieser Artikel Design mit Live Daten erklärt dir alles Schritt für Schritt.

Danke fürs Lesen.


Die Welt wird digital. Wir begleiten innovative Unternehmen, diese Herausforderungen zu meistern. Was ist Ihr nächster Schritt?

Sprechen Sie mit Andree Huk
via +49 30 5557 7174 oder [email protected].

Kontaktieren Sie uns heute!