Eine Website für premium Mockups, fotografische Simulationen für Layouts, wie Visitenkarten, Plakate usw.. Die Mockups werden über eine AI generiert und bietet ganze Mockup Serien, die beispielsweise für die gesamte Visualisierung einer Corporate Identity oder Kampagnen genutzt werden kann. Die Mockups sehen hochwertig und realistisch aus.
Die Produkte können von Agenturen, Studios, Freelanceren und Designern erworben werden, damit sie ihre Arbeit ihren Kunden überzeugend präsentieren können, ohne dass das reale Produkt (z.B. Plakat) bereits produziert wurde. Der Name der Brand ist AIR Mockups, der leitet sich aus AI Artificial Intelligence und Realistic ab.
- Wireframes - Logo - Styles definieren, Farben, Schrift etc. - Styles abspeichern - Frame anlegen - Komponenten anlegen
Mittwoch
- Frames anlegen - Frames für den Flow anlegen - Desktop Flow animieren - Mobile Key Frames fertigstellen
Donnerstag
- Flows animieren - Anpassungen - Feinschliff
Analyse & Forschung
Personas
Marie Rieken
Freelancerin für Corpoarte Design 37 Jahre Berlin MacBook Air
Pain
– Keine Möglichkeit zu shooten – Unsicher beim Kauf von Mockups – Geringe Auswahl an nicen Mockups – Wenig Budget
Gain
+ Verschiedene Lizenzen + Große Auswahl + Vorschau der Layouts + Test Mockups for free
Joao Victor
Art Director in Digital Agentur 28 Jahre Hamburg MacBook Air & iPhone
Pain
– Zu wenig Zeit für Abstimmungen – Findet keine animierten Mockups
Gain
+ Vorschau von versch. Formaten + Video Mockups + Auswahl an Favoriten speichern
Lösungsprozess
Brainstorming
Kurzes Brainstorming für die anschließende Moodboard-Erstellung.
Lösungsprozess
Moodboard
Inspiriert vom Namen AIR Mockups, der sich aus AI Artificial Intelligence und Realistic ableitet. Zeigt das Mood Clouds, die später auch im Design die AI abbilden.
Lösungsprozess
User-Flow
Ein gut durchdachter User-Flow ist entscheidend für die erfolgreiche Entwicklung eines Prototyps. Er zeigt den Weg, den Nutzer durch die Anwendung nehmen, und stellt sicher, dass alle Interaktionen logisch und intuitiv sind.
Lösungsprozess
Wireframes
Startseite, mit Beispiel-Mockups zu jeder Kategorie, die hinter dem Logo scrllbar sind.
Mockup-Kategorie Unterseite biete eine große Übersicht an Mockups.
Mockup-Detail Unterseite, die genau Infos zum Mockup gibt, Lizenzen, Auflösung, Größe, Filtrat etc.
Lösungsprozess
Prototyp
Der Prototyp wurde mit besonderem Augenmerk auf die mobile Nutzererfahrung entwickelt. Die wichtigsten Funktionen und Elemente sind so gestaltet, dass sie auf kleinen Bildschirmen gut zugänglich und einfach zu bedienen sind. Hier sind einige der mobilen Features:
Intuitive Navigation Ein übersichtliches Menü ermöglicht eine schnelle und einfache Navigation durch die verschiedenen Bereiche der Website. Angepasste Inhalte: Inhalte werden dynamisch an die Bildschirmgröße angepasst, um eine optimale Lesbarkeit und Benutzerfreundlichkeit zu gewährleisten.
Schnelle Ladezeiten Optimierte Bilder und schlanker Code sorgen dafür, dass die Seiten schnell geladen werden, selbst bei langsamen Internetverbindungen.
Einfache Interaktion Große Schaltflächen und Eingabefelder erleichtern die Bedienung per Touchscreen.
Lösungsprozess
Styleguide
Erkenntnisse
Konkrete Learnings
Allgemein
Ein entscheidendes Learning war die Bedeutung der gleichzeitigen Entwicklung von Desktop- und Mobil-UI-Designs. Anstatt das Mobil-Design nachgelagert zum Desktop-Design zu erstellen, habe ich festgestellt, dass eine parallele Gestaltung mehrere Vorteile bietet
Kohärenz und Konsistenz
Durch die gleichzeitige Gestaltung beider Versionen konnte ich sicherstellen, dass das Benutzererlebnis auf beiden Plattformen konsistent ist. Alle Elemente und Funktionen wurden von Anfang an auf die jeweilige Plattform abgestimmt, was die Benutzerfreundlichkeit erheblich verbessert hat.
Effizienz und Zeitersparnis
Der parallele Designprozess erwies sich als effizienter. Anstatt Änderungen nachträglich im Mobil-Design vorzunehmen, konnten Anpassungen und Verbesserungen sofort in beiden Versionen integriert werden. Dies sparte nicht nur Zeit, sondern auch Ressourcen.
Optimierung der Benutzerfreundlichkeit
Die gleichzeitige Berücksichtigung von Mobil- und Desktop-Anforderungen führte zu einem durchdachteren und benutzerfreundlicheren Design. Spezifische Herausforderungen und Bedürfnisse beider Plattformen wurden direkt adressiert, was zu einer insgesamt besseren User Experience führte.
