1. Stellen Sie Ihre Marke an die erste Stelle

Ihre Marke repräsentiert die intellektuelle und emotionale Verbindung, die Menschen mit Ihrem Unternehmen, Produkt oder Ihrer App eingehen. Warum also nicht gleich mit der Gestaltung Ihrer App beginnen, indem Sie zuerst Ihre Marke integrieren? Mit dem Mendix Mit dem Theme Customizer können Sie die Farben, Schriftarten und das Firmenlogo Ihrer Marke in das Design Ihrer App integrieren.

Durch die Integration des Logos in eine Kombination aus der Schriftart Ihrer Marke und einer klaren Farbpalette werden Bausteine ​​und Widgets an Ihre Identität angepasst, sodass einmalige Stiländerungen entfallen. Wenn Sie mit der Entwicklung Ihrer App beginnen, werden Sie ein echtes Gefühl der Eigentümerschaft verspüren, da die App die einzigartige Marke Ihres Unternehmens widerspiegelt.

Um auf den Theme Customizer zuzugreifen, klicken Sie auf das Pinselsymbol unten links im Mendix Web-Modellierer.

2. Beginnen Sie mit einer Vorlage

Ich weiß nicht, wie es Ihnen geht, aber eine leere Leinwand kann manchmal überwältigend sein, wenn meine Vision unklar ist. Glücklicherweise Mendix bietet eine umfangreiche Vorlagenbibliothek, die mit dem Atlas UI-Framework erstellt wurde, um die App-Entwicklung anzukurbeln. Seitenvorlagen sind eine großartige Möglichkeit, Zeit zu sparen und die Kreativität anzuregen. Jede Seitenvorlage enthält eine vollständig gestaltete Benutzeroberfläche mit Bausteinen und Widgets, die nur noch verdrahtet werden müssen.

Ihre Benutzer werden die meiste Zeit mit anderen Benutzeroberflächen als Ihren eigenen verbringen (Facebook, Twitter, Nachrichten-Websites usw.). Sie müssen das Rad nicht neu erfinden. Atlas-Vorlagen (Karten, Breadcrumbs, Hero-Header, Hamburger-Menüs usw.) basieren alle auf etablierten Mustern, die überall im Web zu finden sind, und sind Lösungen für gängige Benutzeroberflächenprobleme. Begeistern und befriedigen Sie Ihre Benutzer, anstatt sie zu frustrieren und zu verärgern, und zwar mit intelligenten Designentscheidungen.

3. Lernen Sie Flexbox kennen, Ihren neuen besten Freund

Seltsamerweise ist das Zentrieren von Inhalten eine der schwierigeren Aufgaben beim Erstellen von Web- und Mobil-Apps. Das horizontale Zentrieren von Inhalten ist relativ einfach, das vertikale Zentrieren ist jedoch fast immer schwierig. Sie müssen nur nach „CSS-Zentrierung“ googeln, um zahlreiche Blogs über Hacks zu finden, mit denen sich diese eigentlich einfache Aufgabe erledigen lässt, und die deutlich machen, wie schwierig es ist, sie zu erreichen.

Glücklicherweise Mendix hat eine Reihe spannender Flexbox-Bausteine ​​hinzugefügt:

• Flex-Container links
• Flex Container Links Mitte
• Flex Container Rechts
• Flex Container Rechts Mitte

Mit Flexbox können Sie mit den Align-Content-Eigenschaften alles problemlos (vertikal oder horizontal) ausrichten.

Flexbox hat noch weitere Vorteile. Es eignet sich hervorragend für mobile Bildschirme und responsive Inhalte, da Elemente in Ihrem Flexbox-Container ihre Größe „flexibel“ gestalten können, um auf den verfügbaren Platz zu reagieren. Im Gegensatz zum Block-/Inline-Layoutmodus (Block ist vertikal, Inline ist horizontal) ist es richtungsunabhängig, was bedeutet, dass Sie Ihre Inhalte in jede beliebige Richtung anordnen können (nach links, nach rechts, nach unten oder nach oben). Sie sind auch nicht mehr auf Floats und „klarfix“-Hacks, weil Flexbox das alles für Sie erledigt.

Anleitungen zum Erlernen von Flexbox finden Sie werden auf dieser Seite erläutert.

4. Bewahren und bauen Sie die Konsistenz so weit wie möglich auf.

Konsistenz in Ihrer gesamten App läuft darauf hinaus, Dinge kontinuierlich, vorhersehbar und erwartungsgemäß zu gestalten. Die Auswahl von Bausteinen, Seitenvorlagen und Widgets ist aus Gründen der App-Wartung und, noch wichtiger, der Benutzererfahrung von Bedeutung.

Je mehr sich die Erwartungen der Benutzer als richtig erweisen, desto mehr werden sie das Gefühl haben, das System unter Kontrolle zu haben und desto mehr werden sie es mögen.“ – Jakob Nielsen

Wenn Konsistenz im Anwendungsdesign vorhanden ist, übertragen Benutzer Wissen mühelos auf neue Kontexte. Beispielsweise wird die Farbe Grün für „Schaltflächen zum Speichern” wird Grün mit dem „Speichern”-Aktion. Benutzer wissen ohne kognitive Anstrengung, welche UI-Interaktion stattfinden wird, wenn sie in der gesamten Anwendung grüne Schaltflächen sehen. Das Einrichten von Mustern wie im obigen Beispiel erleichtert die Entwicklung und Benutzerfreundlichkeit Ihrer Anwendungen.

5. Nutzen Sie Designelemente als kreatives Sprungbrett

Ich habe bereits erwähnt, wie Atlas UI-Vorlagen dabei helfen, die Anwendungsentwicklung anzukurbeln. Atlas UI ist jedoch viel mehr als vorgefertigte Seitenvorlagen, Bausteine ​​und Widgets. Die bereitgestellten Komponenten sind ein Sprungbrett für die Implementierung Ihrer eigenen Enterprise Design Language.

Beginnen Sie Ihre Designsprache-Reise mit dem Herunterladen der Atlas UI-Referenz-App von der Mendix App Store. Beginnen Sie dort mit der Anpassung der vorkonfigurierten Atlas-UI-Bausteine, Seitenvorlagen und Widgets und erstellen Sie dann Ihre eigenen. Durch die Investition in eine Enterprise Design Language stellen Sie einen einheitlichen Satz von UX- und Designregeln für Ihr gesamtes App-Portfolio und Ihr gesamtes Team bereit und beschleunigen so den Übergang vom Design zur Entwicklung.

6. Experimentieren

Nur durch Experimentieren lernen Sie, was funktioniert und was nicht. Die WYSIWYG-Oberfläche des Web Modeler ist ein hervorragendes Tool zum Experimentieren, da Sie ganz einfach neue Ideen entwickeln können, indem Sie Bausteine ​​und Widgets ändern oder die Designeigenschaften vorhandener Designelemente anpassen. Je mehr Sie mit Atlas UI experimentieren, desto schneller werden Sie die UX/UI-Elemente verstehen, die das Engagement steigern, und diejenigen, die Frustration oder Abbruch verursachen.

Verwenden der Atlas UI-App während der Arbeit

Mit der neu veröffentlichten mobilen Atlas UI-App können Sie alle Seitenvorlagen, Bausteine ​​und Widgets auf Ihrem Mobiltelefon durchsuchen. Entdecken Sie Atlas UI-Lösungen, wo immer Sie sind. Sie können sie sogar während der Modellierung verwenden, sodass Sie nicht immer wieder zu Ihrem Browser zurückkehren müssen.

Machen Sie jetzt weiter und erstellen Sie etwas Erstaunliches in Atlas UI. Laden Sie Mendix Mobiler Guide für die Inspiration.