Grossartige Datenquellen für lebendige Prototypen

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?

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.

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.

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.

Instagram

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:

• Für grossartige Bilder von zubereitetem Essen -› aktuelle URL beibehalten
• Für Bilder von Sportwagen -› kopiere und füge diese URL ein (Rechtsklick, speichern unter)
• Für Bilder Gadgets -› kopiere und füge diese URL ein (Rechtsklick, speichern unter)
• Für wunderschöne Landschaften unseres Planeten -› kopiere und füge diese URL ein (Rechtsklick, speichern unter)

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.