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

André-Pascal Werthwein

Communication Design [Bachelor of Arts]

Web Design & Web Development

arrow_forward Biography

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.

2020

Photography

Portfolio Photography

A website dedicated to my photographic work


This is the Website where I choose to present my photographic work. While creating this website it was important to me, that the images presented are an integrated part of the User Interface. Furthermore, it was important to me to avoid unnecessary depth within in the navigation, to increase the accessibility of each individual project.

For this project I choose a dark theme to further increase the focus on the photography. Within this project is used color as well as skewed elements to guide the users eye and also separate different categories.

arrow_forward Experience »Portfolio Photography«


keyboard_arrow_right Details about the Project

Institution:
Date:April 2020

fat·link

fat·link

An interactive Sitemap.


The main purpose of this Website is Sharing. Therefore, this Website was mainly created for mobile devices. For the Re-Design a modern and less minimalistic concept was chosen. The Design of this Website is roughly inspired by the principles of skeumorphism, by working with embossing and blind embossing the User-Interface mimics haptics.

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.

arrow_forward Experience »fat·link«


2019

Flow Logo

Bachelor of Arts

Mainly this project is about the conception of a »To-Do-App«. But of course, this project does not add into the spectrum of already existing »To-Do-Apps«, »Task Manager« or »Team Manager«. This project is based on the change of fundamental aspects. A change that is solely targeted to help the User. Within the concept the personal state of the User is taken in Account, which positively as well as negatively influences the restrictive nature of the concept.

Based on research as well as on an elaborate Market analysis, a concept for a »Progressive Web App« and a programmatic Prototype were created. The Prototype was created using HTML, SASS, CSS, Javascript as well as PHP and reproduces the essential functional spectrum and also the essential User-Patters. Beyond this programmatic Prototype, a fitted Branding, Color-Schemes, Color-Modes and also an individual Icon-Set were created.

Additionally, to the Conception, the Development and the Design of the Prototype an elaborate, written Documentation was created. The Documentation sums up the Concept, single Drafts as well as algorithmic Processes.

[First Appraiser: Professor V. Götz]
[Second Appraiser: Arno Richter]
[02/07/2019]

NOISE

NOISE [CAPTCHA Designfestival]

A website for the CAPTCHA Designfestival.


This is the Website of the CAPTCHA Designfestival in Mannheim, which is organized each year, since 2013. This international Designfestival offers workshops, presentations as well as an exhibition at the end. Therefore, this Website was mainly created to centralize all necessary information on the Festival itself as well as its yearly changing workshop instructors and presenters. The Website also provides functionalities for the registration-process for the workshops.

Each year the Design is completely renewed to reflect the new topic as well as the concept. This year the Website experienced a full Re-Design as well as Re-Development.

The Logo-Design was done by: Denys Hsu

arrow_forward Experience NOISE


keyboard_arrow_right Details about the Project

Institution:CAPTCHA Designfestival
Date:August 2019

fat·link

fat·link

An interactive Sitemap.


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.

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.

arrow_forward Experience »fat·link«


Víkingr

Víkingr

A Navigation through the Era of the Vikings.


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.

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.

arrow_forward Experience »Víkingr«


keyboard_arrow_right Details about the Project

Institution:Hochschule Mannheim
Institute of Design
Semester:Winter Semester 2018/19
09th subject-specific Semester
Course:Navigation Design
Guidance:Prof. Veruschka Götz
Cooperation:

成安造形大学

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

arrow_forward Field Report

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.

大津・滋賀県・日本

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 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

The Tea Encyclopedia

A Tea Encyclopedia with Filters, Glossary and Quiz.


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 span.comment [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

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«.

arrow_forward Experience »The Tea Encyclopedia« [German Only]


Japan Blog

Japan Blog

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


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.

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.

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

arrow_forward Experience the Blog [German Only]


keyboard_arrow_right Details about the Project

Institution: [Private Project]
Date:February 2018

2017

Mizaan

A Landingpage for the Modest-Fashion-Label »Mizaan«.


For the Design of this Landingpage it was especially important to keep the structure clear and to bundle the Channels of Communication [Social Media, Newsletter, etc.] of the Label. Furthermore, it was important to already show a part of the »Mizaan«-Style on this first page.

[Images, as well as Texts are Property of »Mizaan« und »Lebdiri Studios«.]


Curriculum Vitae — Timeline

A Web-Concept for a complete Curriculum Vitae.


This project is a conception of a digital, web based Curriculum Vitae. Especially important for this project was the compact and categorized display of the most important chapters, that are crucial to a Curriculum Vitae.

play_arrow
replay
fullscreen

Due to the two columns Layout, whose columns can be independently scrolled, the digital Curriculum Vitae is divided into two major Chapters; »Academic Career« and »Non-Academic Career«. With the different Sizes, Dropdown-Details and also Transparencies, the contents are further prioritized.

play_arrow
replay
fullscreen

The two columns Layout with its centered Alignment has quite a few challenges regarding Development. The left column for example naturally would have its Scrollbar on the righthand side. Therefore, the Scrollbar would be in the center of the Concept. By changing the direction of writing in the superordinate »div-Element« the problem is successfully by-passed.


keyboard_arrow_right Details about the Project

Institution: [Private Project]
Date:September 2017

vmapit GmbH

During my practical Semester I was employed at the »vmapit GmbH« and mainly worked within their product »Appack«. The »vmapit GmbH« is a sophisticated Start-Up-Business int the Technology Sector focusing on Software-Development, App-Development and Consultation.

arrow_forward vmapit GmbH

During my Internship I mainly worked as an Interface-Designer and also within the Development based on Javascript. Doing this I designed a lot of Apps for Clients from a multitude of different Sectors. I also developed functional modules, that supported the advanced development of the product »Appack itself.

Appack

With the product »Appack« it is possible to create individual and native Smartphone Apps based on a modular System. These Apps are built from a combination of different Modules, that can flexibly be combined and equally flexibly designed.

arrow_forward Appack

The product »Appack« effectively and individually works for diverse Clients from a multitude of different sectors. Besides Business-Apps »Appack« also — in Cooperation with the »Deutschen Olympischen Sportbund« and »Stifter Helfen« — runs a Sponsoring-Project for Sports- and Non-Profit-Associations.

keyboard_arrow_up