André-Pascal Werthwein
Portrait of André-Pascal Werthwein

André-Pascal Werthwein

Kommunikationsdesign [Bachelor of Arts]

Web Design & Web Development

arrow_forward Biografie

Wenn Sie das sehen, dann haben Sie in Ihrem Browser »Javascript« deaktiviert. Wenn Sie Website in bester Performance erleben wollen, dann aktivieren Sie bitte »Javascript« in Ihrem Browser.

2020

Photography

Portfolio Photography

Eine Website, die sich meiner Fotografie widmet


Das ist die Website, auf der ich meine fotografischen Projekte präsentiere. Bei der Gestaltung dieser Website war mir vor allem wichtig, dass die Bilder, die präsentiert werden, in die Benutzeroberfläche integriert werden. Darüber hinaus war es mir wichtig eine unnötige Tiefe in der Navigation zu vermeiden, um die Zugänglichkeit der einzelnen Projekte zu vereinfachen.

Für diese Website habe ich mich bewusst für eine dunkle Farbgebung entschieden, um den Fokus auf die fotografischen Arbeiten weiter zu erhöhen. Innerhalb des Projekts habe ich Farbe, wie auch schräge Elemente, eingesetzt, um das Auge des Betrachters zu leiten und auch verschiedene Kategorien voneinander zu trennen.

arrow_forward Erleben Sie »Portfolio Photography« [EN]


keyboard_arrow_right Details zum Projekt

Institution:
Datum:April 2020

fat·link

fat·link [Re-Design]

Eine interaktive Sitemap.


Diese Website wurde vor allem mit dem Hintergedanken des Sharings gestaltet und ist so auch auf mobile Endgeräte ausgelegt. Für das Re-Design wurde ein moderner, weniger minimalistischer Gestaltungsansatz gewählt. Die Gestaltung der Website ist grob an das Prinzip des Skeumorphismus angelehnt, indem im User-Interface durch Erhebungen und Vertiefungen eine haptische Optik erzeugt wird.

Das Projekt bietet neben der bloßen Verlinkung auf verschiedene Netzwerke und Profile außerdem einen integrierten QR-Code-Generator [via Javascript-Library], der das Sofort-Sharing ermöglicht. Außerdem verfügt die Website über ein Sprachmenü, wie auch zwei Farbschemata.

arrow_forward Erleben Sie »fat·link«


2019

Flow Logo

Bachelor of Arts

Dieses Bachelor-Projekt beschäftigt sich in erster Linie mit der Konzeption einer »To-Do-App«. Selbstverständlich wird mit diesem Projekt nicht das unübersichtliche Spektrum bereits existierender »To-Do-Apps«, »Task Manager« oder »Team Manager« erweitert, sondern dieses Konzept basiert auf einer grundlegenden Veränderung, die dem Nutzer direkt zugutekommt. In dem Konzept kommt der persönliche Zustand des Nutzers direkt zum Tragen und wirkt sich je nach Individualfall positiv oder auch negativ auf die restriktive Natur des Konzepts aus.

Basierend auf Recherchen und einer ausführlichen Marktanalyse entstanden in dem Projekt sowohl ein Konzept für eine »Progressive Web App«, als auch ein eigens programmierter Prototyp. Der Prototyp wurde dabei in HTML, SASS, CSS, Javascript und PHP umgesetzt und bildet dabei das zentrale funktionale Spektrum, wie auch die verwendeten Nutzungsmuster ab. Über die funktionale Entwicklung des Prototypen hinaus, entstand außerdem ein maßgeschneidertes Branding, Farbmodi, Farbschemata wie auch ein eigens entworfenes SVG-Icon-Set.

Zusätzlich zu der Konzeption, der Programmierung und der Ausgestaltung des Prototypen, entstand eine ausführliche Dokumentation, die sowohl das Konzept, als einzelne Entwurfsphasen, wie auch algorithmische Aufbauten umfasst.

[Erstgutachterin: Professor V. Götz]
[Zweitgutachter: Arno Richter]
[02/07/2019]

NOISE

NOISE [CAPTCHA Designfestival]

Eine Website für das CAPTCHA Designfestival.


Das ist die Website des CAPTCHA Designfestival in Mannheim, welches jedes Jahr erneut ausgerichtet wird und das seit 2013. Dieses internationale Designfestival bietet Workshops, Präsentationen, wie auch eine abschließende Ausstellung an. Daher fasst die Website alle notwendigen Informationen über das Festival selbst, wie auch über die jährlich wechselnden Workshopleiter und Referenten zusammen. Die Website bietet außerdem alle Funktionalitäten für den Registrierungsprozess für die Workshops.

Jedes Jahr wird das Design des Designfestivals vollständig erneuert und dem neuen Thema und dem neuen Konzept angepasst. Dieses Jahr wurde die Website vollständig neu gestaltet und entwickelt.

Das Logo-Design stammt von: Denys Hsu

arrow_forward Erleben Sie NOISE


keyboard_arrow_right Details zum Projekt

Institution:CAPTCHA Designfestival
Datum:August 2019

fat·link

fat·link

Eine interaktive Sitemap.


Diese Website wurde vor allem mit dem Hintergedanken des Sharings gestaltet und ist so auch vor allem auf mobile Endgeräte ausgelegt. Da es sich prinzipiell um eine Art interaktive Sitemap handelt, die dieses Portfolio in gewisser Weise ergänzen soll, gibt es der Corporate Identity entsprechend Übereinstimmungen.

Das Projekt bietet neben der bloßen Verlinkung auf verschiedene Netzwerke und Profile außerdem einen integrierten QR-Code-Generator [via Javascript-Library], der das Sofort-Sharing ermöglicht. Außerdem verfügt die Website über ein Sprachmenü, wie auch zwei Farbschemata. Beide dieser letzten Optionen werden innerhalb der Website per Hash-Bang an die verknüpften Unterseiten übergeben.

arrow_forward Erleben Sie »fat·link«


Víkingr

Víkingr

Eine Navigation durch die Ära der Wikinger.


In vielschichtiger Art und Weise beschäftigt sich das Projekt mit dem »Reich der Víkingr«. Dabei setzt sich die Website sowohl mit ihrem Aufstieg und Niedergang, als auch mit dem ureigenen Wesen der Víkingr auseinander. Dabei wird das Wesen der Víkingr auch dem Wesen der nordischen Mythologie gegenübergestellt.

Im Rahmen des Projekts wurde ein komplexes Navigations- und Orientierungssystem entwickelt, die auch einem strategisch eingeschränkten Koordinatensystem basiert. Diese Navigation wird durch thematische Verknüpfungen, wie auch gezielte Redundanzen unterstützt. Davon abgesehen werden innerhalb des Projekt Informationen auf multiplen Ebenen verarbeitet und dargestellt.

arrow_forward Erleben Sie »Víkingr«


keyboard_arrow_right Details zum Projekt

Institution:Hochschule Mannheim
Fakultät für Gestaltung
Semester:Wintersemester 2018/19
09. Fachsemester
Kurs:Navigationsdesign
Leitung:Prof. Veruschka Götz
Kooperation:

成安造形大学

Während des Auslandssemesters erlebt man viele Dinge. Vollkommen unabhängig davon, wo es hingeht, ist es ein großes und unvergessliches Abenteuer. 2018 habe ich im Sommersemester an der »Seian University of Art and Design« studiert. Die »Seian University of Art and Design« liegt in Ogotoonsen, Otsu in der Präfektur Shiga span.comment [Japan].

arrow_forward Erfahrungsbericht

Für mein Semester an der »Seian University of Art and Design« habe ich meinen Fokus kurzfristig angepasst. Während ich mich normalerweise auf den Fachbereich »Web Design« konzentriere, habe ich mich in Japan mit dem Fachbereich »Illustration« beschäftigt, wo sich der kulturelle Einfluss des Landes am stärksten ausprägt.

大津・滋賀県・日本

Für etwas mehr als sechs Monate habe ich Otsu gelebt. Otsu liegt in der Präfektur Shiga, die selbst an die Präfektur Kyoto anschließt. Auch Osaka liegt — mit einer knappen Stunde Zugfahrt — in der Nähe. Gelebt habe ich also im kulturellen Zentrum Japans, umgeben von den beliebtesten touristischen Zielen.

In meiner freien Zeit habe ich viele der umliegenden Präfekturen und bekanntesten Städte Japans besucht. Dabei habe ich nicht nur Vieles gesehen oder Außergewöhnliches gegessen, sondern konnte so die komplexe und facettenreiche Kultur Japans aufs Intensivste erleben und genießen.

2018

Die Tee Enzyklopädie

Eine Tee-Enzyklopädie mit Filter, Glossar und Quiz.


Diese Website beschäftigt sich auf vielerlei Ebenen mit dem Thema »Tee«. Verschiedene Features ermöglichen das Nachschlagen oder Erleben von Informationen rund um das Thema. So verfügt die Website beispielsweise über Strukturen für ein umfangreiches Glossar, eine span.comment [in ihrer Darstellung veränderliche] Übersicht von Teesorten und auch ein userorientiertes Quiz. Mit einer Vielzahl von Bildern wird das Thema emotionalisiert und die Informationen zusätzlich zugänglicher gemacht.

play_arrow
replay
fullscreen

Das Branding der Website ist dem Japanischen entlehnt, da Japan unter anderem auch für »Grünen Tee« bekannt ist. Das Logo beruht so auf den Kanji für »Tee«.

arrow_forward Erleben Sie »Die Tee Enzyklopädie«


Japan Blog

Japan Blog

Eine Dokumentation des Auslandssemesters in Otsu, Shiga, Japan.


Dieses Projekt diente vor allem der Dokumentation des Auslandssemesters an der »Seian University of Art and Design« in Otsu, Shiga, Japan. Da in diesem Projekt sowohl das alltägliche Erleben, wie auch thematische Fokusfelder behandelt werden, wurde eine dynamische Inhaltsstruktur gewählt, die auf Javascript basiert. Neben dieser Logik für die Blogeinträge gibt es weitere Features, die das »Miterleben« unterstützen sollen. So wurde zum Beispiel ein eigens entwickelter Panorama-Player.

Die verschiedenen Elemente des Brandings dieses Web-Blogs baiserem vor allem auf dem Ziel »Japan«. So besteht das Logo, welches auch als Fav- oder Touch-Icon eingesetzt wird, aus stilisierten Kanji für日本und dem roten Punkt der japanischen Flagge. Der Ziersatz auf der linken Seite, wie auch die Animation des Loading-Indikators drücken folgenden Satz aus: にほんにいきます。. Unterstützt wird die Thematik außerdem durch eine Reihe von eigens gestalteten Hintergrundbildern mit visuellen Zitaten der japanischen Kultur.

[Ursprünglich enthielt der Web-Blog weitere Features, wie ein Wetter-Widget basierend auf einer Library, einen Tageszähler und auch eine zeitbasierte Anzeige von Beiträgen. Diese Features wurden aufgrund des Wandels des Zwecks — Web-Blog zu Dokumentation — entfernt. Außerdem wurde der Web-Blog im Nachhinein aufgrund des Umfangs auf mehrere Unterseiten aufgeteilt.]

arrow_forward Erleben Sie den Blog


keyboard_arrow_right Details zum Projekt

Institution: [Privates Projekt]
Datum:Februar 2018

2017

Mizaan

Eine Landingpage für das Modest-Fashion-Label »Mizaan«.


Für die Gestaltung dieser Landingpage war es besonders wichtig eine klare Struktur zu wahren und alle wichtigen Kommunikationskanäle [Social Media, Newsletter, etc.] des Labels auf der Landingpage zu bündeln. Außerdem war es wichtig auf dieser einen Seite schon etwas von dem Stil des Labels »Mizaan« zu vermitteln.

[Bilder, wie auch Texte sind Eigentum von »Mizaan« und »Lebdiri Studios«.]


Lebenslauf — Timeline

Ein Web-Konzept für einen lückenlosen Lebenslauf.


Dieses Projekt befasst sich mit der Konzeption eines digitalen, webbasierten Lebenslaufs. Wichtig für dieses Projekt war vor allem die kompakte und kategorisierte Darstellung von wesentlichen Kapiteln, die für einen Lebenslauf wichtig sind.

play_arrow
replay
fullscreen

Durch ein zweispaltiges Layout, dessen Spalten unabhängig voneinander gescrollt werden können, wird zwischen zweierlei Informationen unterscheiden; »Schulischer Werdegang« und »Außerschulischer Werdegang«. Durch unterschiedliche Größen, Dropdown-Details, wie auch Transparenzen, werden die Inhalte weiter ihrer Priorität nach kategorisiert.

play_arrow
replay
fullscreen

Das zweispaltige Layout birgt durch die mittige Ausrichtung auch in der Programmierung einige Tücken, die beachtet werden müssen. Beispielsweise würde in der linken Spalte der Scrollbalken seiner natürlichen Ausrichtung nach am rechten Rand, also im Zentrum des Konzepts dargestellt werden. Durch die Änderung der Schreibrichtung in dem übergeordneten »div-Element« wird dieses Problem umgangen.


keyboard_arrow_right Details zum Projekt

Institution: [Privates Projekt]
Datum:September 2017

vmapit GmbH

Während meines praktischen Semesters war ich bei der »vmapit GmbH« im Rahmen ihres Produkts »Appack« beschäftigt. Die »vmapit GmbH« ist ein ausgereiftes Start-up-Business in der Technologiebranche mit einem Fokus auf Softwareentwicklung, App-Entwicklung und Beratung.

arrow_forward vmapit GmbH

Während meines Praktikums war ich vorwiegend als Interface-Designer und in der javascriptbasierten Entwicklung tätig. Dabei habe ich Apps für Kunden vielseitiger Branchen gestaltet und verschiedene funktionale Module entwickelt, die die Weiterentwicklung des Produkts »Appack« unterstützten.

Appack

Mit dem Produkt »Appack« werden individuelle native Smartphone Apps aus einem modularen System hergestellt. Diese Apps bauen sich dabei aus einer Kombination von Modulen auf, die vollkommen flexibel kombiniert und ebenso flexibel ausgestaltet werden können.

arrow_forward Appack

Das Produkt »Appack« bedient effektiv und individuell vielerlei Kunden aus einer Vielzahl von unterschiedlichen Branchen. Neben Business-Apps betreibt »Appack« in Kooperation mit dem »Deutschen Olympischen Sportbund« und »Stifter Helfen« außerdem ein Sponsoring für Sport- und Non-Profit-Vereine.

keyboard_arrow_up