Anzeige
Anzeige
Listicle
Artikel merken

Auf diese 7 Design-Tools setzt Stripe

Das außergewöhnliche Webdesign von Stripe findet in der Tech-Branche viele Nachahmer. Das sind die Tools, die beim milliardenschwere Online-Bezahldienst intern genutzt werden.

Von Daniel Hüfner
2 Min. Lesezeit
Anzeige
Anzeige
Stripe-Mitarbeiter im Büro. (Foto: © Stripe)

Normalerweise haben es Firmen ohne ein Produkt für Endverbraucher schwer, sich regelmäßig ins Gespräch zu bringen. Stripe aber ist eine Ausnahme. Der US-Bezahldienst bietet eine Software zur Annahme von Kreditkartenzahlungen an. Händler beispielsweise können damit ihren Shop ohne großen Programmieraufwand mit einer Zahlungsschnittstelle ausstatten. Erst am Mittwochabend gab die Firma aus San Francisco eine neue Finanzierungsrunde über 245 Millionen Dollar bekannt.

Anzeige
Anzeige

Der alleinige Grund für die Bekanntheit von Stripe ist das aber längst nicht mehr. Der Bezahldienst ist in der Technologie-Branche auch für sein Webdesign bekannt. Seit Jahren gelingt es den Designern bei Stripe, das vergleichsweise komplexe Produkt auf seiner Website verständlich und offenbar erfolgreich in Szene zu setzen.

Kein Wunder, dass das Webdesign unter vielen Gestaltern gefragt ist. Blogger sezieren die Stripe-Website regelmäßig, diverse Startups lassen sich von den Animationen inspirieren und sobald es Gestaltungsänderungen gibt, laufen die Diskussionen in Fachforen heiß. Auf Anfrage hat uns Stripe die intern genutzten Tools verraten.

Anzeige
Anzeige

Diese Tools nutzt Stripe für sein Design

Sketch

Keine Überraschung, klar. Das Vektorgrafikprogramm hat sich unter Designern in den vergangenen Jahren rasant verbreitet. Für Sketch sprechen die schnelle und vielseitige Bedienung sowie der Fokus auf die Gestaltung von User-Interface-Elementen. Neuerdings nur noch im Abonnement nutzbar für 99 Euro pro Jahr. Nach Angaben von Stripe wird Sketch intern von den meisten Designern verwendet, doch einige setzen auf eine Alternative:

Anzeige
Anzeige

Figma

Nämlich auf Figma. Auch dieses Tool ist hauptsächlich auf die Gestaltung von UI-Elementen ausgelegt. Im Vergleich zu Sketch verfügt Figma über einige Kollaborationsfunktionen und ist für Windows und Linux erhältlich. Zudem gibt es eine kostenlose Testversion. Danach werden zwölf US-Dollar pro Monat und Nutzer fällig.

Framer

Wer das Verhalten von Animationen und Interaktionen ausprobieren will, noch bevor es an die eigentliche Programmierarbeit geht, setzt im Webdesign normalerweise auf ein Prototyping-Tool. In besonderer Weise darauf spezialisiert ist Framer, das auch im Design-Team von Stripe zum Einsatz kommt. Nach einer kostenlosen Testphase schlägt die Nutzung mit einem Betrag ab 15 Dollar monatlich zu Buche.

Anzeige
Anzeige

Principle

Wie schon erwähnt, sind vor allem die flüssigen Animationen auf der Stripe-Website eine beliebte Inspiration. Erstellt werden diese mit Principle für den Mac. Das Tool gibt definierte Animationen vor, zum Beispiel typische Bounce-, Ease- und Pop-Effekte, oder bietet Nutzern die Möglichkeit, selbst Hand anzulegen. Auch der Import von Sketch-Files ist möglich. Principle kostet einmalig 129 Dollar.

Wake

Weniger verbreitet ist dagegen Wake.  Das Tool hilft Designern, ihre Projekte mit Kollegen zu teilen. So weiß jeder im Team, woran gerade gearbeitet wird. Wissenssilos werden aufgelöst. Ein großer Mehrwert von Wake liegt in der Möglichkeit, jeden hochgeladenen Entwurf zu bewerten und darüber zu diskutieren. Das Tool hat eine Gratis-Testphase, Premium-Zugang gibt es auf Anfrage.

Abstract

Darüber hinaus arbeitet Stripe mit einer Art Dateimanager für Designobjekte. Erst seit 2017 am Markt, hat sich Abstract in der Szene schnell einen Namen gemacht. Mithilfe eines automatisch installierten Sketch-Plugins überwacht Abstract alle Änderungen in einer Datei und speichert diese als separate Version lokal und im Hintergrund ab. 15 Dollar pro Monat werden bei jährlicher Zahlungsweise fällig.

Anzeige
Anzeige

React

Ebenfalls zum Tool der Wahl unter Stripe-Designern gehört React, eine Javascript-Softwarebibliothek, die ein technisches Grundgerüst für die Ausgabe von UI-Komponenten von Webseiten darstellt. Die Vorteile der Bibliothek liegen in der umfangreichen Dokumention sowie dem modularen Aufbau der Komponenten.

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
Schreib den ersten Kommentar!
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige