Das Surfen im Internet auf verschiedenen Geräten nimmt rapide zu. Um eine Online-Präsenz zu entwickeln, ist es wichtig, eine Website zu erstellen, die auf verschiedenen Bildschirmgrößen funktioniert. Responsive Webdesign ist ein Ansatz, der darauf abzielt, Webseiten zu erstellen, die auf allen Bildschirmgrößen und -auflösungen effektiv dargestellt werden und so eine bessere Benutzerfreundlichkeit gewährleisten. Ein weiterer Ansatz, den Entwickler bei der Entwicklung von Webanwendungen verfolgen, ist das Mobile-First-Design. Dabei werden die Produkte zunächst für kleine Bildschirme entworfen und dann schrittweise auf größere Bildschirme ausgeweitet. Andere Ansätze zur Optimierung von Websites für unterschiedliche Bildschirmgrößen sind adaptives und flüssiges Design. Media Queries sind Filter für CSS-Stile, um das Erscheinungsbild einer Website oder Anwendung entsprechend der Bildschirmgröße des Geräts des Benutzers zu verändern. Da Entwickler häufig responsives Webdesign verwenden, ist es wichtig, dessen bewährte Verfahren zu befolgen. Entwickler sollten die Website oder Anwendung durch Cross-Browser- oder Responsive-Tests testen, bevor sie sie auf den Markt bringen. Progressive Webanwendungen (PWAs) verwenden Webtechnologien, um den Benutzern ein app-ähnliches Erlebnis zu bieten. Sie verwenden verschiedene Frameworks und Muster, damit sie sowohl Web- als auch native Anwendungsfunktionen nutzen können. Single Page Applications (SPAs) machen die Website eher zu einer Desktop-Anwendung und bieten ein flüssigeres und angenehmeres Erlebnis, indem sie die Verzögerungszeit zwischen aufeinanderfolgenden Seiten reduzieren. Ein wesentlicher Bestandteil von PWA sind Service Worker. Diese ermöglichen den Offline-Zugriff, schnelles Laden, Push-Benachrichtigungen und andere Funktionen. Eine Website kann durch Hinzufügen von Funktionen und Ändern des Codes in eine PWA umgewandelt werden, damit sie sich auf mobilen Geräten wie eine App verhält. PWA-Apps können native app-ähnliche Funktionen bieten und sogar Inhalte im Hintergrund aktualisieren, so dass die Benutzer die aktuellsten Inhalte sehen können.

Figma ist ein webbasiertes Design-Tool zur Erstellung von Benutzeroberflächen, Icons, Wireframes und Prototypen. Seine einzigartigen Funktionen ermöglichen es Designern, digitale Designs effizient und effektiv zu erstellen und gemeinsam daran zu arbeiten. Zu den Kernkonzepten von Figma gehören Frames, Komponenten und Ebenen. Mit Rahmen lassen sich zusammengehörige Elemente gruppieren und Abschnitte innerhalb des Designs erstellen. Mit Ebenen können Sie die Sichtbarkeit und Positionierung einzelner Elemente innerhalb eines Rahmens verwalten. Die Komponentenfunktion in Figma ermöglicht es Designern, wiederverwendbare Designkomponenten zu erstellen, die sich in Echtzeit über verschiedene Seiten und Dateien hinweg ändern und aktualisieren lassen. Die Komponenten können in Bibliotheken organisiert werden, um den Zugriff und die gemeinsame Nutzung durch Teammitglieder zu erleichtern. Auf Komponenten können auch Stile angewendet werden, z. B. Typografie, Farben und Effekte, um die Konsistenz des gesamten Designs zu gewährleisten. Karten und Layouts sind zusätzliche Funktionen in Figma, mit denen sich zusammengehörige Inhalte und Aktionen in einem flexiblen und erweiterbaren Container gruppieren lassen. Figma bietet außerdem eine Vielzahl von Bildformen und Werkzeugen für die Gestaltung, darunter Vektorformen, Bilder, Icons, Text und Plugins. Um Figma einzurichten und zu konfigurieren, müssen Benutzer ein Konto erstellen, einen Plan auswählen und ihre Arbeitsbereichseinstellungen anpassen.

In diesem Modul werden Sie mit Figma und Thunkable eine interaktive Sales App entwerfen und erstellen. Figma ist ein leistungsstarkes UI-Design-Tool, mit dem Sie Wireframes, Prototypen und High-Fidelity-Designs für Web- und mobile Anwendungen erstellen können. Thunkable ist eine Webanwendung, die für visuelle Programmierkonzepte im "Drag & Drop"-Stil bekannt ist. Dadurch ist sie für jedermann leicht zu verstehen und hilft bei der Erstellung sehr interaktiver mobiler Webanwendungen. Um die interaktive Vertriebsanwendung zu erstellen, können Sie das Layout und die Funktionen mit Figma entwerfen, die Figma-Assets nach Thunkable exportieren, die Funktionalität mit vorgefertigten Komponenten aufbauen und die Anwendung auf einem mobilen Gerät oder mit der Webvorschau testen.