mockup-generator.com

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