10 // mockup-generator.com

Zum jetzigen Stand ist der Mockup-Generator funktional, allerdings mit ein paar wenigen Abstrichen. Folgende Probleme sollen langfristig noch gelöst werden:

- Performance: Beim Wechsel zwischen Mockups merkt man deutlich die Ladezeit. Um das in Grenzen zu halten, wird aktuell kein Mockup in voller Auflösung gerendert, kann somit also auch nur in mittlerer Auflösung heruntergeladen werden.

- Vorschau des hochgeladenen Bildes bereits in der Übersicht: Auch hier ist der Prozess aktuell sehr langsam und alle Bilder werden beim Wechsel auf eine andere Kategorie neu gerendert. Vielleicht hilft hier eine Caching-Funktion.

- Mockups: Die bisherigen Mockups sind nicht selbst produziert, hier soll langfristig von anderen Anbietern weg zu eigenen Mockups migriert werden, um den Nutzern die Bildrechte auch sicher gewährleisten zu können. Außerdem werden bei manchen aktuellen Mockups leichte weiße Flächen über das hochgeladene Bild gelegt, welche sich teilweise zu stark und dadurch unnatürlich auswirken.

09 // Präsentation

08 // Korrekturen

• Farbe geändert (mehr Neon, hebt sich besser ab)

• Schriftkombinationen getestet

• Hintergrundelemente getestet

• MockUps erkenntlicher durch Farbflächen geändert

• „Testimonials“ raus -> „Warum kostenlos“ rein

• USPs eingebaut (global neben „Logo“ und auf Startseite als Text im Landingbereich)

Offenes Todo:
Lösung für den Landingbereich finden, aktuelles Bild bisher unklar

Aktuelle Startseite:

Tests von Schriftarten (DM Sans & Mazius Display Extra-Italic, kann bei Linux leider nicht in Figma verwedet werden) und Hintergrundelementen (bisher nichts gutes gefunden):

Nebenbei die grobe HTML-Struktur gecoded:

07 // Zwischenpräsentation, Zeitplan & Entwurf

06 // Moodboard & Mockup-Test

05 // Weitere Feature-Ideen & Migration zu SvelteKit inkl. Skeleton

Weitere Feature-Ideen

• Video Mockups

• 3D-Mockups inkl. AR Preview

• Automatische Mockup-Auswahl anhand des Uploads

• Wasserzeichen Upload bzw. Copyright Markierung

• API

• Integration in andere Design Tools z.B. Photoshop, InDesign, Figma, Browser

• Bulk-Upload

• Mehrsprachigkeit

• Dark Mode

• Recently visited

Migration zu SvelteKit inkl. Skeleton

https://git.feba.me/fb/mockup-generator.com/commit/400e27c8f963cdb99be7c3828e1ecb5b3da66e25

04 // WebGL & erste Wireframes

WebGL

Nach einigen Fehlschlägen bei dem Versuch ein Bild innerhalb eines Canvas mit WebGL perspektiv zu transformieren, hat mir Sebastian den dafür geeigneten Code zukommen lassen. Dadurch gelingt die Umsetzung mit WebGL und statt OpenCV mit 8,6 MB wurde der externe Code mit perspective-transform auf 7,6 KB reduziert.

Erste Wireframes

03 // Projektzusammenfassung, Proof of concept, Lofi Wireframe & Plakat

Projektzusammenfassung

Problem
Als Designer muss man oft seine Entwürfe dem Kunden verständlich präsentieren. Hierbei kommen meistens Mockups ins Spiel, welche realistische Bilder mit austauschbaren Inhalten darstellen. Als Designer möchte man also möglichst effizient seine Designs in Mockups umsetzen. Der Prozess dahinter ist aber oft frustrierend, da die Qualität der Mockups oft zu Wünschen übrig lässt, man diese dann auch erst herunterladen & entpacken muss und man auch auf Photoshop angewiesen ist - was nicht jeder nutzt.

Lösung
Als Lösung soll eine Webapp entwickelt werden, in der man ohne zusätzliche Programme von seinem Browser aus seine Designs in Mockups laden kann. Zusätzlich wird das Design automatisch in mehrere ähnliche Mockups geladen und eine Übersicht erstellt, welche einfach heruntergeladen werden koennen. Dadurch soll der Prozess um einiges vereinfacht werden und auch Nicht-Designer haben Zugriff auf Mockups.

Wettbewerb
Es gibt bereits viele ähnliche Wettbewerber, dabei aber kein kostenloser und einfach zu bedienender Service. Für eine genauere Übersicht, siehe „Wettbewerbsanalyse“.

Proof of concept

Um die Umsetzbarkeit des Projekts zu testen, wurde vorab eine technische Lösung zur client-seitigen perspektiven Transformation eines Bildes gesucht, welches dann mit dem Mockup kombiniert wird.

Die vermutlich performanteste Lösung wäre, für jedes Mockup eine Transformationsmatrix zu errechnen und diese auf die einzufügenden Bilder anzuwenden (Anleitung hier).

Da dies bei der Erstellung relativ zeitintensiv wäre, wurde nach alternativen Libraries gesucht. Hier waren viele Ergebnisse outdated, deprecated oder machten Probleme bei der Verwendung mit SvelteKit. Ein erfolgreicher „Proof of concept“ konnte mit der Einbindung von OpenCV durch WebAssembly erreicht werden - die Größe dieser Dependency beträgt allerdings 8,6 MB, da darin viele Features enthalten sind.

Für den Release soll noch eine einfachere Lösung gefunden werden, zum Beispiel durch eine Library wie perspective-transform.

Link zum Wireframe (octopus.do)

Plakat

02 // Wettbewerbsanalyse, Features & Ablauf

Wettbewerbsanalyse

| Company      | Register | Paywall | Editor | Quality | Watermark | Score |
|--------------|----------|---------|--------|---------|-----------|-------|
| Artboard     |    +     |    +    |   +    |    +    |     -     |  3/5  |
| Canva**      |    +     |    -    |   +    |    +    |     -     |  4/5  |
| Gelato**     |    +     |    -    |   +    |    +    |     -     |  4/5  |
| Mock It*     |    -     |    -    |   +    |    +    |     -     |  5/5  |
| Mockey*      |    -     |    -    |   +    |    +    |     -     |  5/5  |
| Mockup Mark* |    -     |    -    |   +    |    +    |     -     |  5/5  |
| Mockupbro    |    -     |    -    |   +    |    +    |     -     |  5/5  | <
| Mockuper     |    -     |    -    |   +    |    -    |     -     |  4/5  |
| Mockuuups    |    -     |    +    |   -    |    -    |     -     |  2/5  |
| Pixelied**   |    -     |    -    |   +    |    -    |     +     |  3/5  |
| Placeit      |    +     |    +    |   +    |    +    |     -     |  3/5  |
| Printful**   |    +     |    -    |   +    |    +    |     -     |  3/5  |
| Renderforest |    +     |    +    |   +    |    +    |     +     |  2/5  |
| Smartmockups |    -     |    +    |   -    |    -    |     +     |  1/5  |
| Vexels*      |    -     |    -    |   +    |    +    |     -     |  5/5  |
* Nur Kleidung
** Nicht dafür gedacht

Features

Must-Have Features:

• Qualitativ hochwertige Mockups
• Sortierung durch Kategorien (Devices, Print, Social Media)
• Zuschneiden des Upload-Bilds
• Auswahl der (Hintergrund-)Farbe im Mockup

Ablauf

01 // Projekt-Brainstorming

📊 Vollautomatisches Haushaltsbuch

Wiederkehrende Zahlungen erkennen und dadurch Ausgaben und Budget visualisieren

• Finanzplanung
• Budgetübersicht
• Kategorisierung & Analyse

📝 Intelligente Aufgabenplanung

Bestmögliche Planung der Todos in Kombination mit bestehenden Terminen

• Todos planen sich selbst anhand eines Priorisierungssystems
• Besserer Überblick durch Time Blocking
• Berücksichtung des Terminkalenders
• Automatisches Reschedule-ing

💻 Online Mockup Generator

Einfache und schnelle Erstellung von Mockups für z.B. Flyer, Logos, Websites

• Hochwertige Mockups
• Weitergabe der Nutzungsrechte
• Einfacher Modus: drag&drop, download
• Erweiterter Modus: zusätzliche Farbauswahl, Wahl des Ausgabe-Dateityp