Prototyping von Atlassian-Anwendungen mit dem Atlaskit UI-Kit

Guten Tag, mein Freund! Es zahlt sich aus, wenn man weiß, wie man eine gute Projektmanagement-Software designt. Und warum? Weil sie heutzutage überall zu finden ist und jede Woche neue Tools auftauchen, die sich wie Wackelpudding anfühlen. Aber wenn es eines gibt, das die Nase vorn hat, dann ist es das Ozzie Atlassian!

Mit Millionen von Anwendern, die sich täglich auf die Produkte von Atlassian für die Zusammenarbeit, die Softwareentwicklung und das Projektmanagement verlassen, müssen Sie vielleicht eine Schnittstelle für eines der Produkte von Atlassian entwerfen.

Hier kommt das Atlaskit UI-Kit von Justinmind ins Spiel! Lesen Sie weiter, um zu erfahren, was in unserem Kit enthalten ist und wie Sie Atlassian UIs damit designen können.

Jeder hat schon von Atlassian und seinen Produkten JIRA, Confluence und Trello gehört, aber was genau ist Atlaskit? Atlaskit ist das Design-System von Atlassian, das für alle diese Produkte eingesetzt wird.

Atlaskit ist eine Reihe von Richtlinien, die Designern und Entwicklern helfen, die Produkte von Atlassian zu modifizieren und an die Bedürfnisse bestimmter Unternehmen anzupassen. Sie enthalten Anweisungen für das Design von Elementen und UIs.

Mit dem Atlaskit UI-Kit von Justinmind können Sie Atlassian-Prototypen schnell und einfach designen, da fast alle UI-Elemente für Sie erstellt wurden, so dass Sie sie nicht von Grund auf neu erstellen müssen.

Tatsächlich sind viele der Elemente, Widgets und Komponenten in unserem Kit bereits mit grundlegenden Interaktionen ausgestattet. Das bedeutet, dass Sie sie nur noch auf eine Leinwand ziehen müssen, sie mit der entsprechenden Seite oder Aktion verknüpfen und schon können Sie sie an die Entwickler weitergeben.

Unser Atlaskit UI-Kit hilft Ihnen, eine Menge Zeit zu sparen. Ganz gleich, ob Sie eine agile UI für JIRA, einen Collaboration-Bildschirm für Confluence oder eine Projektmanagement-Funktion für Trello designen möchten, hier werden Sie fündig.

Sie werden alles entdecken, von Avataren bis hin zu vollständig montierten Komponenten und Schaltflächen mit Interaktionen, die Ihnen helfen, Ihre Arbeit schnell und effizient zu erledigen.

In dieser Kategorie finden Sie Symbole, die Ihnen helfen, Informationen über einen Benutzer zu einem bestimmten Zeitpunkt anzuzeigen, wie z.B. einen leeren Avatar und einen mit einem Foto, zusätzlich zu verschiedenen Statusaktualisierungssymbolen wie „Anwesenheit verfügbar“, „beschäftigt“, „genehmigt/abgelehnt“ und sogar die Farbpalette des Atlaskit-Designsystems.

Dies sind nicht einfach nur Schaltflächen, sondern kleine Zeitsparer! In dieser Kategorie finden Sie Schaltflächen, die Sie auf jedem Bildschirm der Atlassian UI verwenden können, z.B. primäre, Standard-, deaktivierte, Gefahren- und Bearbeitungsschaltflächen.

Das Beste daran ist, dass sie sogar schon mit kleineren Interaktionen ausgestattet sind, wie z.B. Hervorhebungen, wenn Sie mit der Maus darüber fahren. Neben den für JIRA-Software typischen Issue-Badges finden Sie sogar montierte Komponenten wie Schaltflächengruppen und Registerschaltflächen für Dashboards.

In der Kategorie Komponenten können Sie alles verwenden, von Badge-Symbolen, Navigations-Breadcrumbs und Tag-Text bis hin zu Inline-Dialogfeldern, modalen Fenstern und Paginierungskomponenten. Und – sie alle enthalten grundlegende Interaktionen!

Darüber hinaus finden Sie hier auch die typischen Projektmanagement-Hinweise wie IN FORTSCHRITT, ENTFERNT, ERFOLG und so weiter.

Das eigentliche Sahnehäubchen ist jedoch eine große Repository-Tabelle, die bereits mit einem Bildlaufeffekt und einer Paginierungsleiste mit Interaktion ausgestattet ist!

Wie bei jeder anderen App oder Software ist das Design von Formularen in Atlassian-Produkten entscheidend. Bei dieser Art von UI-Design ist es wichtig, Einfachheit und Funktionalität in den Vordergrund zu stellen.
Deshalb haben wir uns in der Kategorie Formulare dieses Kits um all die einfachen Dinge für Sie gekümmert, wie z.B. die Atlassian-Typfelder, Dropdown-Menüs und -Listen, Datums- und Zeitauswahlfelder, Umschalttasten und Spinner.

Sie finden sogar ein Kennwortfeld mit Inline-Text und Farbvalidierung sowie einen einfachen Textfeldbereich, der bereits die notwendigen Interaktionen enthält und es dem Benutzer ermöglicht, Textabsätze zu schreiben.

Die Kirsche auf dem Sahnehäubchen ist aber vielleicht die Daten- und Zeitauswahl, die bereits mit einem vorgefertigten Pop-Out-Kalender und einer scrollbaren Stundenauswahl ausgestattet ist, mit der der Benutzer Datum und Uhrzeit auswählen kann. Nach der Auswahl des Datums und der Uhrzeit erscheint die Auswahl des Benutzers in dem Feld. Damit entfällt die mühsame Arbeit, diese Designs und Interaktionen selbst hinzufügen zu müssen.

Regelmäßige Nachrichten, die den Benutzer über den Status eines Projekts oder eines Bugs informieren, sind in den Atlassian-Apps ziemlich üblich. Deshalb haben wir eine ganze Kategorie dafür vorgesehen, Ihnen beim Design von Nachrichten zu helfen, die dem Benutzer hilfreiche Informationen anzeigen.

Hier sehen Sie farbenfrohe Banner, die informative, gefährliche und warnende Overlay-Meldungen anzeigen. Sie können sogar auf die typische Dropdown-Meldungskomponente für Flaggen verzichten, denn das Dropdown-Pfeilsymbol, die anpassbare Meldung und die Schaltfläche mit einer Hervorhebungsfunktion sind bereits interaktiv.

Um mit dem Design Ihrer Atlassian Web-App-Prototypen zu beginnen, müssen Sie als erstes unser Prototyping-Tool herunterladen! Dann folgen Sie einfach den folgenden kurzen und einfachen Schritten:

1. Laden Sie das Atlaskit UI Kit von unserer UI Kits Seite herunter
2. Öffnen Sie Justinmind auf Ihrem Desktop
3. Navigieren Sie zu den Widgets in der Menüleiste
4. Wählen Sie „Bibliotheken hinzufügen/entfernen“.
5. Scrollen Sie unter „Standardbibliotheken“ nach unten, bis Sie das Atlassian-Kit sehen
6. Klicken Sie auf „Zu Widgets hinzufügen“.
7. Viel Spaß beim Designen Ihrer Bildschirme!

Um zu demonstrieren, was Sie mit unserem Atlaskit UI-Kit tun können, sehen wir uns zwei Beispiele für Bildschirme an, die Sie erstellen können.

Für den ersten Bildschirm werden wir schnell eine Projektmanagementseite erstellen. Alles, was wir tun müssen, ist, einen neuen „Web-Prototyp“ zu öffnen. Dann ziehen wir ein Seitenmenü, ein „Hamburger-Symbol“, ein „Plus“ und ein „Suchsymbol“ darüber. Dies wird die grundlegende Navigation der App bilden.

Als nächstes ziehen Sie eine „Avatar-Entität“, um diese Aufgabe als Design-Aufgaben zu kennzeichnen. Dann fügen wir einige Textbeschriftungen hinzu, damit die Benutzer zu verschiedenen Stellen in der Atlassian-App navigieren können, z.B. zu Backlogs, Sprints und neuen Markteinführungen.

Weiter rechts auf dem Bildschirm ziehen wir noch ein paar dieser kleinen Avatar-Symbole auf, um zu zeigen, wer an den Aufgaben beteiligt ist. Dann fügen Sie eine Registerkarten-Link-Komponente hinzu. Diese Komponente verfügt über integrierte Interaktionen, die die Optionen bei Mausverschiebung hervorheben und sie hervorheben, wenn der Benutzer sie auswählt.

Für die Projektkarten ziehen Sie einfach eine Komponente „Flaggennachricht“ auf die „Leinwand“ und duplizieren sie, so dass wir acht pro Seite haben. Jetzt müssen Sie nur noch den Text ändern!

Schließlich fügen wir unterhalb der Karten eine Paginierungskomponente mit Interaktion hinzu, so dass unsere App zehn oder mehr Aufgabenseiten haben kann.

Für unser zweites Beispiel werden wir einen einfachen, übersichtlichen Projektmanagement-Bildschirm erstellen. Zunächst ziehen wir ein Informationsbanner aus dem Kit auf die Leinwand, das den Benutzer darüber informiert, was auf der Seite passiert (in diesem Fall ist es das Erscheinen der neuen Aufgabe, die er erstellt hat).

Anschließend fügen wir eine „Standardschaltfläche“ hinzu und duplizieren sie viermal, benennen sie um und ordnen sie neu an, so dass sie wie im Bild oben aussehen. Jetzt müssen wir nur noch ein editierbares „Textfeld“ hinzufügen, um die Aufgabe zu beschreiben, und darunter ein weiteres Feld, in das die Benutzer Kommentare eingeben können. Dann können wir noch ein wenig herumspielen und eine „Auswahlkomponente“ hinzufügen, mit der die Benutzer die Abteilung auswählen können, sowie einige weitere Elemente wie „Beschriftung“ und „Tag-Schaltflächen“.

Und schließlich ist es eine nette Idee, die oben erwähnten Datums- und Zeitauswahlfunktionen zu integrieren, damit der Benutzer eine Zeit und ein Datum für ein Sprint-Meeting auswählen kann!

Jetzt müssen Sie nur noch auf Simulieren klicken! Klicken Sie auf ein paar Elemente und sehen Sie, wie Ihre Atlassian-Bildschirme aussehen und wie die Elemente funktionieren!

Hier finden Sie einige Tipps für das Design einer Atlassian Produktoberfläche mit dem Justinmind Atlaskit UI Kit. Wenn Sie diese Richtlinien befolgen, können Sie die UI so designen, dass sie mit dem Atlaskit-Designsystem übereinstimmt und von Anfängern und Power-Usern gleichermaßen erkannt und genutzt werden kann.

Atlassian ist kein Produkt, das vor der Verwendung kräftiger und leuchtender Farben zurückschreckt, wenn auch mit einem bestimmten Zweck. Sie verwenden Farben, um die Aufmerksamkeit des Benutzers auf einen wichtigen Teil der UI zu lenken. Lassen Sie uns nun über Farbpaletten sprechen.

Die Primärfarben, die Atlassian für seine Produkte verwendet, sind kräftig und hell, während die Sekundärfarben warme Farben sind, die einen schönen Kontrast bilden und dazu beitragen, dass sich die kräftigeren Farben einfügen. Das bedeutet auch, dass Elemente wie Projektmanagement-Rauten, Tags und Issue-Badges einladender wirken. Das Basisfarbschema für diese Paletten besteht aus acht Farben.

Die erweiterte Palette umfasst verschiedene Schattierungen der primären und sekundären Paletten, so dass Sie bei der Gestaltung von Elementen und Illustrationen viel Spielraum haben. Diese erweiterte Palette umfasst bis zu 24 Farben.

Außerdem ist es wichtig zu wissen, dass Atlassian es ernst meint mit der Verwendung von Farbkombinationen, die dem AA-Standardkontrastverhältnis entsprechen. Sie sollten immer sicherstellen, dass jedes UI, das Sie in Justinmind designen, einen ausreichenden Farbkontrast zwischen Text und Hintergrund sowie zwischen den Elementen aufweist, um Menschen mit Sehschwäche und Farbenblindheit zu helfen.

Wenn es um Schriftarten in Atlassian-Produkten geht, ist der Status quo recht einfach: alles in Sans-serif-Barcode, für den sie bevorzugt Monospace-Schriftarten verwenden. Der Grund dafür ist, dass die Texte in den Produkten lesbar sein sollen, damit der Benutzer die Informationen schnell erfassen kann.

Für Windows verwenden Sie Segoe UI, für Mac eine der San Francisco Varianten oder Helvetica Neue und für Chrome oder Android – Roboto, Noto oder Droid Sans.

Und schließlich sollten Sie bei der Ikonographie darauf achten, dass Sie Symbole verwenden, die dem Benutzer helfen, die UI und ihre Funktionen zu verstehen. Ein Beispiel dafür ist die Art und Weise, wie Atlassian sowohl gefüllte als auch umrissene Symbole verwendet.

Wenn etwas auf der UI „eingeschaltet“ ist, wird dies normalerweise durch ein ausgefülltes Symbol angezeigt. Im Gegensatz dazu bedeutet ein ungefülltes Symbol oft, dass etwas „ausgeschaltet“ ist. Die einzige Ausnahme ist, wenn sich die Symbole im Navigationsbereich befinden. In diesem Fall sollten sie immer umrandet sein, damit sie einen guten Kontrast zur Hintergrundfarbe der UI bilden.

Wenn es sich um ein Symbol handelt, das eine Gruppe von Unterpunkten kennzeichnet, sollten Sie Tiefe hinzufügen, um zu signalisieren, dass sich dahinter detailliertere Optionen befinden. Kleine Elemente wie Kreise sollten ausgefüllt sein, um die Lesbarkeit beim Verkleinern zu verbessern.

Wenn Sie Atlassian UI-Oberflächen anpassen möchten, hilft Ihnen Justinmind dabei, dies schnell und einfach zu tun und dabei die Benutzer zu berücksichtigen. Sie können im Handumdrehen beeindruckende interaktive Atlassian-Prototypen erstellen, die die Funktionalität demonstrieren und bereit sind, an die Entwickler weitergegeben zu werden.

Warum testen Sie das Justinmind Atlaskit UI Kit nicht noch heute?