Stromrechner
UX/UI Design für einen Tarifvergleich
Daten eingeben, passende Tarife vergleichen und den Anbieter wechseln: Die drei Schritte machen den Ablauf auf einen Blick verständlich. Eine reduzierte Illustration ergänzt die Erklärung, ohne von den Inhalten abzulenken. Der dunkle Abschlussbereich mit gelbem Button führt direkt zur nächsten Aktion.
Typografie und Farbpalette
Die Farbwelt verbindet ein dunkles Petrol mit warmen Grautönen und einem kräftigen Gelb als Akzent. Die Serifenschrift verleiht den Überschriften Charakter, während Inter für Fließtexte und Bedienelemente gut lesbar bleibt. Zusammen entsteht ein ruhiger, hochwertiger und funktionaler Auftritt.
Desktop Version
Auf dem Laptop wird sichtbar, wie ich mir den Tarifvergleich vorgestellt habe: einfach, übersichtlich und ohne Umwege. Drei kurze Schritte zeigen, wie Nutzer von der Dateneingabe bis zum passenden Angebot kommen. Der dunkle Abschlussbereich und der gelbe Button setzen einen klaren Schlusspunkt und laden dazu ein, direkt loszulegen.
Mobile Version
Die mobile Gestaltung ist nicht einfach eine verkleinerte Desktopseite. Inhalte und Eingabefelder sind untereinander angeordnet, damit sie auch auf kleinen Bildschirmen übersichtlich und gut bedienbar bleiben. So behält die Seite ihren Charakter und passt sich zugleich der Nutzung am Smartphone an.
Abschlussbereich und Newsletter
Nach der Erklärung des Tarifvergleichs setzt die Seite einen klaren Abschluss. Der gelbe Button hebt sich deutlich vom dunklen Hintergrund ab und macht die gewünschte Aktion leicht erkennbar. Darunter bietet die Newsletter-Anmeldung eine weitere Möglichkeit, mit dem Portal in Kontakt zu bleiben.