Skip to main content

​
Farbschema

Das Farbschema das wir ausgewählt haben. Primary color: #F2EA7E, Secondary color: #BFA454, Complementary color: #402F29

​
UI Framework

Wir haben uns auch ein paar Gedanken über das UI gemacht. Wir haben uns über verschiedeste Styleguides (Google Material Design, Bootstrap, Semantic UI, Tailwind CSS) informiert und auch gesehen, was uns am meisten anspricht.
StyleguideUnsere Gedanken
Google Material DesignDefinitiv interessant, jedoch erinnert es für unseren Geschmack zu sehr an Google.
BootstrapKlassisch; sehr schön, aber vielleicht ein bisschen zu weit verbreitet/konventionell.
Semantic UIVielleicht schon ein bisschen veraltet? Erinnert uns an ältere Websites von 2014.
Tailwind CSSEin CSS-Framework, das wir als sehr schön empfinden. Wir hatten tatsächlich schon einmal davon gehört und wollten auch einmal mit Tailwind arbeiten. Wahrscheinlich werden wir dieses verwenden.
Wir haben uns schliesslich für Tailwind CSS als Design-Basis (CSS-Framework) entschieden und wollten auch eine Component Library wie shadcn/ui ausprobieren. Uns gefällt das Layout bzw. das Design von shadcn/ui sehr.
Uns ist bewusst, dass shadcn/ui kein Styleguide wie Material Design ist, sondern eine Library, die uns beim Aufbau des Frontends aus UI/UX-Perspektive sehr helfen könnte.
Mit Tailwind CSS + shadcn/ui setzen wir auf ein modernes, flexibles und zukunftssicheres UI-Setup, das unserer Meinung nach sehr schön aussieht, aber auch alle Styling-Guidelines erfüllt, die im Dokument 05_Usability.pdf beschrieben sind. Es ist auch eine aktuelle UI-Library, was zusätzlich dem Objekt des Moduls (ICT-Lösungen mit aktuellen Technologien realisieren) entspricht. Wir hoffen, diese Gedanken sind nachvollziehbar.

​
Designs

Wireframe


Mockup


Mockup Interactivity

Wireframe

Unser Wireframe kann hier gefunden werden.
Es wurden zwei Arten von Prototypen verwendet:
  • Ein Wireframe, das als konzeptionelle und strukturelle Grundlage diente.
  • Ein interaktives Mockup in Figma wurde darauf aufbauend erstellt und mit Elementen sowie interaktiven Flows verbaut.

​
Usability-Tests

Wir haben es einer Person gegeben, die auch eine Benutzerin von so einer App sein könnte. Ihre Rückmeldung war sehr positiv. Sie fand die App sehr schön und übersichtlich. Was sie uns jedoch empfehlt hat, ist eine art von “Onboarding” zu machen, damit die Benutzer wissen, wie sie die App benutzen können.
Wir sind dem Feedback sehr dankbar und haben es in das Backlog aufgenommen. Es wird voraussichtlich in Release 1.1 implementiert.
⌘I