André-Pascal Werthwein

Kommunikationdesign — Web Design & Web Development

Communication Design — Web Design & Web Development

André-Pascal Werthwein

Kommunikationdesign — Web Design & Web Development

Communication Design — Web Design & Web Development

more_vert
Portrait of André-Pascal Werthwein Portrait of André-Pascal Werthwein
If you see this, »Javascript« is deactivated in your Internet Browser. To experience this website to the best of its abbilites, please activate »Javascript« in your Internet Browser.

2019

fat·link

fat·link

fat·link

fat·link

Fotografien des »Maritme Museum« in Kobe, Hyogo, Japan.

Photographs of the »Maritme Museum« in Kobe, Hyogo, Japan.


Ein »fat-link«, oder auch »one-to-many link«, »extended link« oder »multi-tailed link« ist in der EDV eine Beschreibung für einen Link mit multiplen Endpunkten. Dieser Begriff wird im Sinne einer interaktiven Sitemap auf diese Webseite angewandt.

A »fat-link«, or »one-to-many link«, »extended link« or as well »multi-tailed link« is within computing a description of a link with multiple endpoints. This concept is applied to this Website with the purpose of an interactive Sitemap.

Diese Webseite 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.

The main purpose of this Website is Sharing. Therefore, this Website was mainly created for mobile devices. Since the website is merely an interactive Sitemap, which is supposed to complement this Portfolio, there are — due to Corporate Identity — certain similarities.

fat·link
keyboard_arrow_left keyboard_arrow_right

11

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 Webseite über ein Sprachmenü, wie auch zwei Farbschemata. Beide dieser letzten Optionen werden innerhalb der Webseite per Hash-Bang an die verknüpften Unterseiten übergeben.

Besides Hyperlinks to diverse Networks and Profiles this Website also offers a QR-Code-Generator [via Javascript Library], which enables Sharing on the spot. Furthermore, this website also includes a Language-Menue as well as two Color-Schemata. Both of this latter Options are — within the Website — based on Hash-Bang, forwarded to sub-pages.


Víkingr

Víkingr

Víkingr

Víkingr

Eine Navigation durch die Ära der Wikinger.

A Navigation through the Era of the Vikings.


Thematisch setzt sich das Projekt mit dem Aufstieg und Niedergang der Víkingr auseinander. Aus gestalterischer Sicht stehen die Entwicklung eines Navigations- und Orientierungssystems, wie auch die programmatische Umsetzung der Webseite selbst, im Vordergrund.

The topic of this project is the rise and the fall of the Víkingr. The Design-Focus of this project is the development of a Navigation- and Orientationsystem, as well as the programmatic realzation of the Website.

In vielschichtiger Art und Weise beschäftigt sich das Projekt mit dem »Reich der Víkingr«. Dabei setzt sich die Webseite 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.

The project depicts the »Kingdom of the Víkingr« in a multilayered way. The Website gives information on the rise and fall of the Víkingr, and as well on their very own essence. This essence is also compared to the essence of the Norse Mythology.

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.

Within the project a complex Navigation- and Orientationsystem was developed, based on a strategicially limited coordinate system. This Navigation is supported using thematic links and also targeted redundancies. The Information in this project is processed and depicted in multiple layers.

Víkingr
keyboard_arrow_left keyboard_arrow_right

10

Hier finden Sie eine vollständige Projekt-Dokumentation.

Here you will find a complete Project-Documentation.


keyboard_arrow_downDetails zum Projekt

keyboard_arrow_downDetails about the Project

Institution: Hochschule Mannheim
Fakultät für Gestaltung
Semester: Wintersemester 2018/19
09. Fachsemester
Kurs: Navigationsdesign
Leitung: Prof. Veruschka Götz
Kooperation:
Institution: Hochschule Mannheim
Institute of Design
Semester: Winter Semester 2018/19
09th subject-specific Semester
Course: Navigation Design
Guidance: Prof. Veruschka Götz
Cooperation:

成安造形大学

成安造形大学

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 [Japan].

During a semester abroad one does experience a lot of things. Independent of the destination a semester abroad is a great and unforgettable Adventure. 2018 I studied a Semester at the »Seian University of Art and Design«. The »Seian University of Art and Design« is located in Ogotoonsen, Otsu in Shiga Prefecture [Japan].

keyboard_arrow_right Erfahrungsbericht

keyboard_arrow_right Field Report

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.

For my Semester at the »Seian University of Art and Design« I adjusted my focus. Normally I focus on the subject of »Web Design«, but during my semester in Japan I focused on the subject of »Illustration«, where the countries cultural influences are the strongest.

大津・滋賀県・日本

大津・滋賀県・日本

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.

For more than six months I lived in Otsu. Otsu is located in Shiga Prefecture, which itself is located directly next to Kyoto Prefecture. Osaka as well, width about an hour by train, is not too far. So I lived in the culutral center of Japan, surrounded by the most famous touristic sights.

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.

In my spare time I traveled a lot of the surrounding Prefectures as well as some of the most famous Cities of Japan. There I did not only see a lot of sights or eat a lot of extraordinary foots, I also was lucky enough to intensely experience and enjoy the Japanese Culture.

2018

Ozumo

Ozumo

Eine Plakatreihe wirbt für die Sumo-Meisterschaft in Nagoya.

A series of posters advertises the Sumo-Championship in Nagoya.


Während des Semesters an der »Seian University of Art and Design« entstand eine Reihe von Postern, die illustrativ die Sumo-Meisterschaft in Nagoya [Juli 2018] thematisieren.

During the semester at the »Seian University of Art and Design« a series of illustrative posters for the Sumo-Tournament in Nagoya [Juli 2018] was created.

Diese Poster-Serie befasst sich mit dem Thema »Sumo« und wirbt konkret für die Sumo-Wettkämpfe in Nagoya. Illustrativ werden in dieser Poster-Serie verschiedene Elemente der japanischen Kultur aufgegriffen und zu einer Reihe grafisch starker und werblicher Plakate kombiniert. Dabei kommen auch verschiedene Aspekte des »Sumo« zum Tragen.

This series of posters is about »Sumo« and also precisely advertises the Sumo-Tournaments in Nagoya. Different aspects of Japanese Culture are picked up, illustratively interpreted and combined into a series of graphically strong and advertising posters. There are also different aspects of »Sumo« depicted within the series.

Ozumo
keyboard_arrow_left keyboard_arrow_right

5

Eine gestalterische Herausforderung war hierbei der Umgang mit der fremdartigen Anmutung und Komplexität der japanischen Schriftsprache. Eine Komplexität, die schon in der Schreibweise des [offiziellen] Kaiser-Datums Ausdruck findet.

The use of the unfamiliar Aesthetics and also complex Nature of the Japanese literary language, was especially challenging. The complexity can already be seen in the syntax of the [official] Emperor-Date.


Erleuchtung

Enlightenment

Ein einmaliges, vollständiges japanisches Manga.

A unique, complete Japanese Manga.


Für dieses Projekt entstand ein vollständiges, 16-seitiges Manga [auf Japanisch]. Das Manga ist dabei thematisch von dem Begriff der »Erleuchtung« und dem damit verbundenen buddhistischen Idealbild geprägt.

For this project a complete, 16-page Manga [in Japanese], was created. This Manga is shaped by the topic of »Enlightenment« and the connected Buddhist ideals.

Das Manga erzählt die Geschichte der jungen Kioko, die auf Reisen zum ersten Mal den Tempel Kotoku-in betritt und dem großen Buddha von Kamakura gegenübersteht. Von der gewaltigen Statue hervorgerufen, empfindet Kioko mit einem Mal eine tief sitzende Verpflichtung und wendet sich von ihrem alten Leben ab. Kioko wendet sich dem Buddhismus zu und findet schließlich Erleuchtung.

The Manga tells the story of the young Kioko, who while traveling visits Kotoku-in Temple for the first time. She finds herself in front of the great Buddha of Kamakura. Awakened by the monumental statue, Kioko suddenly feels a deeply rooted commitment and turns away from her old life. Kioko turns towards Buddhism and ultimately finds Enlightenment.

Erleuchtung
keyboard_arrow_left keyboard_arrow_right

14

Eine gestalterische Herausforderung war hierbei der Umgang mit der fremdartigen Anmutung und Komplexität der japanischen Schriftsprache. Eine Komplexität, die durch die buddhistischen Begrifflichkeiten noch erhöht wird.

The use of the unfamiliar Aesthetics and also complex Nature of the Japanese literary language, was especially challenging. A complexity that is enhanced by Buddhist terms and concepts.

[Ein japanisches Manga wird traditionell von rechts nach links gelesen.]

[Traditionally a Japanese Manga is read from right to left.]


keyboard_arrow_downDetails zum Projekt

keyboard_arrow_downDetails about the Project

Institution: Seian University of Art and Design
Institut für Illustration
Semester: Sommersemester 2018
08. Fachsemester
Kurs: Manga
Leitung:
Kooperation:
Institution: Seian University of Art and Design
Department of Illustration
Semester: Summer Semester 2018
08th subject-specific Semester
Course: Manga
Guidance:
Cooperation:

Maritime Museum

Maritime Museum

Fotografien des »Maritme Museum« in Kobe, Hyogo, Japan.

Photographs of the »Maritme Museum« in Kobe, Hyogo, Japan.


Dieses fotografische Projekt fokussiert vor allem auf das gestalterische Potenzial von architektonischen Strukturen. Strukturen, die in besonders musterhafter Art und Weise auf fotografische Blickwinkel reagieren.

This photographic project focuses on the creative potential of architectural structures. Structures that, in a special pattern-like way, react to photographic Perspectives.

Dieses fotografische Projekt setzt sich mit Kobes »Maritime Museum« [Kobe, Hyogo, Japan] auseinander. Genauer; das Projekt fokussiert auf die Dachstrukturen dieses Gebäudes. Weiß lackierte, weit-verzweigte Stahlstrukturen, die durch die fotografischen Blickwinkel so geordnet werden, sodass ihre Ordnung und die ihnen zugrunde liegende Muster zu erkennen sind.

This photographic project is about Kobe’s »Maritime Museum« [Kobe, Hyogo, Japan]. More precisely; the project focuses on the roof-structures of the building. White lacquered, widely branched steel structures, which are arranged by photographic perspectives, so that their order can be recognized and their underlying pattern can be seen.

Maritme Museum
keyboard_arrow_left keyboard_arrow_right

4

Aus diesem dichten Geäst weißer Linien, vor einem grau-weißen Himmel, entstehen mithilfe des Blickwinkels geordnete Bilder aus geometrischen Formen, Linien und Kurven. Bilder, deren Ausdruckskraft, durch ihre monochromatische Farbgebung unterstützt wird.

Using photographic perspectives, ordered photographs are created from these tight branches of lines, in front of a grey-white sky. Ordered photographs are created, which combine geometric shapes, lines and curves. Photographs, their expressiveness is enhanced by their monochromatic colors.

Mehr Projekte, wie dieses, sind auf Behance zu finden.

More projects, like this, can be found on Behance.


Umeda Skybuilding

Umeda Skybuilding

Fotografien des »Umeda Skybuilding« in Osaka, Osaka, Japan.

Photographs of the »Umeda Skybuilding« in Osaka, Osaka, Japan.


Dieses fotografische Projekt fokussiert vor allem auf die Kompostionen von architektonischen Gebäuden, die in ihrer Anatomie eine Vielzahl geometrischen Formen vereinen. Besonders spannend ist dabei das Zusammenspiel von weichen und harten Formen.

This photographic project focuses on the composition of architectural buildings which combine a multitude of geometric shapes. Especially exciting is the interplay of soft and hard shapes.

Dieses fotografische Projekt setzt sich mit Osakas komplexem »Umeda Skybuilding« [Osaka, Osaka, Japan] auseinander. Fotografisch fokusiert das Projekt auf die Komposition durch den fotografischen Blickwinkel. Der fotografische Blickwinkel sortiert die Vielzahl der geometrischen Formen, die das Gebäude bestimmen. So entstanden Fotos mit einer ausgeglichenen Komposition aus Geraden und Rundungen, wie auch geschlossenen und offenen Formen.

This photographic project is about Osaka’s complex »Umeda Skybuilding« [Osaka, Osaka, Japan]. Photographically this project focuses on the composition, using photographic perspectives. The photographic perspective orders the multitude of geometric forms, that dominate the building. This resulted in photos with a balanced composition of straight lines and curves, as well as closed and open forms.

Umeda Skybuilding
keyboard_arrow_left keyboard_arrow_right

6

In dieser Kombination aus eben diesen kontrastreichen Formen liegt die Herausforderung des Projekts. Die Reduktion auf schwarz-weiß, unterstützt das Spiel der geometrischen Formen.

The combination of shapes rich in contrast is the challenge of this project. The reduction to black and white enhances the interplay between the different, geometric shapes.

Mehr Projekte, wie dieses, sind auf Behance zu finden.

More projects, like this, can be found on Behance.


keyboard_arrow_downDetails zum Projekt

keyboard_arrow_downDetails about the Project

Institution: [Privates Projekt]
Datum: Juni 2018
Institution: [Private Project]
Date: June 2018

Die Tee Enzyklopädie

The Tea Encyclopedia

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

A Tea Encyclopedia with Filters, Glossary and Quiz.


Im Rahmen des Projekts wurde eine Webseite gestaltet, die viele attraktive Features aufweist, die dazu dienen, dem User umfangreiche Kenntnisse zum Thema »Tee« zugänglich zu machen. Dabei stellt die Webseite sowohl eine Art Nachschlagewerk als auch eine minimalistische Lernplattform dar.

During this project a Website was created, that contains quite a few attractive features, that are supposed to offer the User information on the topic of »Tea« in an easily accessible way. The Website therefore is a reference work and also a minimalist learning platform.

Umeda Skybuilding
keyboard_arrow_left keyboard_arrow_right

7

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 Webseite beispielsweise über Strukturen für ein umfangreiches Glossar, eine [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.

This Website gives Information on Tea on multiple layers. A lot of different features enable the looking up or the experience of information on the topic. Therefore the Website for example contains structures for an extensive glossary, a [in its display variable] Overview of different teas and an user oriented Quiz. With a multitude of pictures the topic is additionally emotionalized and the Information becomes even more accessible.

play_arrow replay fullscreen

Das Branding der Webseite 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«.

The Branding of this Website is based on the Japanese Language, since Japan is among other things also famous for its »Green Tea«. The Logo contains the Kanji for »Tea«.

Erleben Sie »Die Tee Enzyklopädie«.

Experience »The Tea Encyclopedia«.


Japan Blog

Japan Blog [GER]

Japan Blog

Japan Blog

Eine Dokumentation des Auslandssemesters in Otsu, Shiga, Japan.

A Documentation of the Semester abroad in Otsu, Shiga, Japan.


Während dieses Projekts wurde ein Web-Blog gestaltet, der sich einer javascriptbasierten Logik bedient und sich im Brand-Design an dem Ziel wie auch an entsprechenden kulturellen Zitaten orientiert.

During this project a Web-Blog was designed, which uses a Javascript-based Logic and a Brand-Design based on the destination as well as fitting cultural aspects.

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.

This project was used for the Documentation of the semester abroad at the »Seian University of Art and Design« in Otsu, Shiga, Japan. Because this project documents all day life as well as different thematic focal areas, a dynamic Javascript-based content-structure was chosen. Next to this Logic for blog entries, there are quite a few more features to enhance the »Witnessing« of stories, told within the blog entries. For example a Panorama-Player as specially developed for this purpose.

Umeda Skybuilding
keyboard_arrow_left keyboard_arrow_right

10

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.

The different Elements of the Branding of this Web-Blog are based on the destination »Japan«. The Logo, which is used as Fav- as well as Touch-Icon, contains the stylized Kanji for 日本 and also the red circle from the Japanese flag. Die decorative Sentence on the left side, as well as in the Loading-Indicator mean: にほんにいきます。. The topic is further supported by a series of specially designed background-images with visual Quotes of Japanese Culture.

[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.]

[Originally the Web-Blog contained a few features, such as a Weather-Widget based on a Library, a Day-Counter as well as a time-based display of blog entries. These features were taken out, due to the change of Purpose — Web-Blog to Documentation. Furthermore, the Web-Blog was, due to its extent, divided into sub-pages.]

Erleben Sie den Blog.

Experience the Blog[GER]


keyboard_arrow_downDetails zum Projekt

keyboard_arrow_downDetails about the Project

Institution: [Privates Projekt]
Datum: Februar 2018
Institution: [Private Project]
Date: February 2018

Generative Types II

Generative Types II

In Processing generierte Alphabete.

Alphabets generated in Processing.


Im Rahmen dieses Projekts wurde mit Processing eine Vielzahl eigenständiger Alphabete erzeugt. Die Alphabete stellen mithilfe von formgebenden Parametern [geometrische Form, Farbe, etc.] und mathematischen Berechnungen [Sinusmodulation, Mapping, etc.] kreative Interpretation der Google-Font »Roboto« dar.

Within this project a multitude of Alphabets was created using Processing. These Alphabets, using shaping parameters [geometric Shapes, Colors, etc.] and mathematic Calculations [Sinus-Modulation, Mapping, etc.], depict creative Interpretations of Google’s »Roboto«.

Das Projekt fundiert auf einem Basis-Processing-Sketch vonMarek Slipek und der Google-Font »Roboto«. Dieses Skript wurde im ersten Schritt so modifiziert, dass über die Tastatur alle Buchstaben des Alphabets als *.png [Pixeldaten] oder als *.pdf [Vektordaten] ausgegeben werden können.

This project is based on the Basis-Processing-Sketch by Marek Slipek and the Google-Font »Roboto«. In the first step the script was modified to be able to export all letters as *.png [Pixel-Data] or as *.pdf [Vector-Data] using the keyboard.

Umeda Skybuilding
keyboard_arrow_left keyboard_arrow_right

9

Während der Formsuche entstand eine Vielzahl eigenständiger Alphabete, die sich durch die Modifikation von formgebenden Parametern [geometrische Form, Farbe, etc.] und mathematischen Berechnungen [Sinusmodulation, Mapping, etc.] grundlegend unterscheiden. Nach eben dieser Formsuche, die auf verschiedene Programmversionen gestützt war, wurde die finale Programmversion um die controlP5-Library ergänzt, die es ermöglicht die einzelnen Parameter der Formgebung [Berechnungen] zu präzisieren.

During the creative process a multitude of Alphabets was created, which majorly differ in their Modification of shaping parameters [geometric Shapes, Colors, etc.] and mathematic Calculations [Sinus-Modulation, Mapping, etc.]. After this process, which was supported by different Versions of the Processing-Sketch, the final Version was expanded with the controlP5-Library, which enables the detailed definition of single parameters of the Shaping [Calculations].

Mehr Projekte, wie dieses, sind auf Behance zu finden.

More projects, like this, can be found on Behance.


share

keyboard_arrow_up

done
close

Die aktuelle URL wurde kopiert!

The current URL was copied!

done
close

Hier finden Sie eine Legende.

Here you will find a legend.