Lieferando Nachbau

Im Rahmen der Übung sollten wir eine App für die Verfolgung der Lieferortung im Stil der Material Design Guidelines erstellen. Ich entschied mich dabei für Lieferando. Der Fokus lag hierbei darauf das gelernte im Kurs auf bis zu 3 Screens anzuwenden und die App nachzubauen.

Ich entschied mich für IBM Plex Sans als Schrift und mich am Material Design zu orientieren, weil ich mit dieser noch nicht gearbeitet habe bisher.

Wir hatten nur einen Tag Zeit, wo ich persönlich nur das gröbste machen konnte aber die Übung war sehr gut, denn unter so einem Zeitdruck habe ich bisher noch nicht gearbeitet. Man lernte durch die Übung auch gut mit Figma umzugehen und das Material-Design-System anzuwenden.

Mit letzterem habe ich die größten Schwierigkeiten muss ich zugeben. Es ist für mich nicht ganz eindeutig, wie man am effizientesten ein Design-System anwendet ohne viel Zeit aufzuwenden.

Giga Typografie Redesign

Der Fokus bei dieser Aufgabe lag auf der Typografie. Wir sollten also die Schrift-Mängel einer Seite anpassen. Ich entschied mich hier für Giga und dem IBM Design System und auch wieder der IBM Plex Sans.

In diesem Fall war es etwas schwerer, weil es sich um ein bereits gutes Design gehandelt hat. Tatsächlich, habe ich das Design eher verschlechtert und die Regeln nicht gut angewendet. Ich hätte eher ein Design wählen soll, was mehr Mängel hat. Außerdem war die Schrift zu klein.

Finales Projekt: Momox.de Redesign

Zu guter Letzt, war die finale Aufgabe eine Seite in 4 Screens zu redesignen und ein eigenes sehr kleines Design-System zu erstellen. Da ich es jetzt gewohnt war blieb ich bei den IBM-Design-System inkl. der IBM Icons und der IBM Plex Sans als Schrift.

Der erste Schritt war die Roasting Methode aus dem Kurs anzuwenden und alles zu markieren, was einem persönlich nicht gefällt

Allgemein gehalten, wollte ich die Tap-Bar verbessern, aufräumen und vereinfachen. Außerdem braucht die Werbung ein besseres Layout und die Top-Verkäufe-Sektion ergab für mich nicht viel sind. 

Im Anschluss habe ich mir eine Webseite ausgesucht, wo mir das Design gefällt und wovon ich mich inspirieren lassen kann. Dies sollte möglichst eine Webseite sein, mit dem selben Service. Also entschied ich mich für Rebuy. Dementsprechend sahen meine Wireframes so aus.

Die Wireframes benötigen Übung aber es ist eine gute Methode, um sich an einer gestalterischen Grundlage zu halten. Ich benötigte noch zu lange dafür.

Nun konnte ich mich an das Design setzen und die ersten Screens fertigstellen.

Da es sich hier um die Verkaufsseite handelt aber Momox noch 2 Einkaufsseiten und eine weitere Verkaufsseite hat, wollte ich noch die Einkaufsseite von Momox Fashion bearbeiten.

Der 1. Screen ist die originale Seite, die schon gut gestaltet war. Auf jeden Fall besser als die Verkaufsseite. Demnach wollte ich mich nur an eine andere Kaufsseite orientieren, damit ich Dinge ändern und selbst gestalten kann. Meine Inspiration hier war Net-a-porter.com.

Mit der Verkaufsseite bin nicht so zufrieden wie mit der Kaufsseite. Die Verkaufsseite sieht noch in meinen Augen etwas unprofessionell aus. Das Design ist dennoch besser als das Original.

Die Kaufsseite ist mir gut gelungen und mit der bin ich auch sehr zufrieden.

Fazit

Der Kurs gab mir genau das was ich gebraucht habe. UI-Übungen für einen besseren Workflow und den besseren Umgang mit Figma. In beiden fühle ich mich jetzt sicherer.