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.

2017

Mizaan

Mizaan

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

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


Im Rahmen dieses Projekts wurde eine minimalistische Landingpage für den Release einer neuen Kollektion des Modest-Fashion-Labels »Mizaan« gestaltet.

During this Project a Landingpage for the release of a new Collection of the Modest-Fashion-Label »Mizaan« was designed.

Mizaan
keyboard_arrow_left keyboard_arrow_right

5

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.

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.

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

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


keyboard_arrow_downDetails zum Projekt

keyboard_arrow_downDetails about the Project

Institution: [Privates Projekt]
Datum: November 2017
Institution: [Private Project]
Date: November 2017

Lebenslauf — Timeline

Curriculum Vitae — Timeline

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

A Web-Concept for a complete Curriculum Vitae.


Dieses Projekt befasst sich mit der Konzeption eines digitalen, webbasierten Lebenslaufs. Das Projekt fokussiert dabei auf die Komprimierung, Kategorisierung und Priorisierung der in einem Lebenslauf normalerweise zusammengefassten Daten.

This project is a conception of a digital, web based Curriculum Vitae. The project focuses on the Compression, Categorization and Prioritization of information commonly summarized in a Curriculum Vitae.

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.

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

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.

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

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.

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_downDetails zum Projekt

keyboard_arrow_downDetails about the Project

Institution: [Privates Projekt]
Datum: September 2017
Institution: [Private Project]
Date: 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.

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.

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

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

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.

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.

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

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.

Mafinex

Mafinex

Fotografien des Gründerzentrums »Mafinex« in Mannheim.

Photographs of the business incubator »Mafinex« in Mannheim.


Mithilfe einer »Voigtländer VITO CLR« wurden im Rahmen dieses Projekts besondere Lichtsituationen rund um das Gründerzentrum »Mafinex« festgehalten. Lichtsituationen, die bei der modernen Architektur des Gebäudes für äußerst spannende Fotografien sorgen.

During this project, using a »Voigtländer VITO CLR« a lot of interesting light situations of the business incubator »Mafinex« were captured. light situations, that in combination with the modern Architecture of the building compose to exciting photographs.

Im Rahmen dieses Projekts sind mithilfe einer »Voigtländer VITO CLR« Fotografien des Gründerzentrums »Mafinex« in Mannheim entstanden, die das Gebäude in besonderen Lichtsituationen zeigen. Außerdem wurden für die Fotografien Perspektiven gewählt, in denen sowohl die Besonderheit der jeweiligen Lichtsituation als auch die moderne Architektur des Gebäudes selbst zum Tragen kommen.

During this project, using a »Voigtländer VITO CLR« photographs of the business incubator »Mafinex« were created, which depict the building in special light situations. For these photographs perspectives where chosen, that support the specialty of the light situation as well as the modern Architecture of the building itself.

Mafinex
keyboard_arrow_left keyboard_arrow_right

3

Eine Herausforderung dieser Fotografien waren neben den Lichtsituationen auch die verschiedenen Farben und Schriftzüge, die das Gebäude zieren. So entstanden komplexe Spannungsfelder aus Licht, Perspektive, Farbe und Materialität.

One of the challenges, besides the light situations, were the different decorative colors and lettering on the building. These created complex visual tensions of Light, Perspective, Color and Materiality.

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: März 2017
Institution: [Private Project]
Date: March 2017

2016

Letter Art Project

Letter Art Project

Buchstaben und Quadrate.

Letters and Squares.


In diesem Projekt wird das gestalterische Potenzial der Buchstaben des lateinischen Alphabets ausgereizt. Dabei wurde für jeden Buchstaben die typografische Anatomie kreativ interpretiert.

This project is all about the creative potential of the Letters of the Latin Alphabet. Within this project the typographic Anatomy of each Letter was creatively interpreted.

Diese Arbeit widmet sich dem gestalterischen Potenzial des lateinischen Alphabets. Wichtig während dieses Projekts waren vor allem die Individualität der einzelnen Buchstaben und die kreative Interpretation der eigentlichen typografischen Anatomie. Buchstaben wurden dabei mit unterschiedlichsten Formen und Farben gestaltet, wodurch sich eine vollkommen neue Anmutung des lateinischen Alphabets ergibt.

This work is all about the creative potential of the Latin Alphabet. Important during this project was especially the Singularity of each Letter and the creative Interpretations of the typographic Anatomy. Letters were created in individual Shapes and Colors, which combine into a unique Appearance of the Latin Alphabet.

Letter Art Project
keyboard_arrow_left keyboard_arrow_right

20

Im Laufe dieser Arbeit entstand so nicht nur ein ganzes Alphabet einzigartiger Buchstaben, sondern auch viele der Buchstaben wurde mehrfach umgesetzt. Das Gestaltungspotenzial, das in der Anatomie der lateinischen Buchstaben ruht, scheint beinahe unerschöpflich.

During this work not only a whole Alphabet of unique Letters was created, but a lot of Letters were interpreted more often. The creative potential that lies within the Anatomy of the Latin Letters, seems to be almost inexhaustible.

Eine Übersicht der entstandenen Einzelwerke finden Sie hier.

An Overview of the individual Work can be found here.


keyboard_arrow_downDetails zum Projekt

keyboard_arrow_downDetails about the Project

Institution: Hochschule Mannheim
Fakultät für Gestaltung
Semester: Wintersemester 2016/17
05. Fachsemester
Kurs: Schrift und Typografie
Leitung: Claudia Bärbel Krisamer
Kooperation:
Institution: Hochschule Mannheim
Institute of Design
Semester: Winter Semester 2016/17
05th subject-specific Semester
Course: Typeface and Typography
Guidance: Claudia Bärbel Krisamer
Cooperation:

Locker, Entspannt und Sympatisch

Easygoing, Calmly and Likeable

Eine Porträtserie mit Julia Mollik.

A series of portraits with Julia Mollik.


Das Ziel dieses Projekts war eine Auswahl seriöser, jedoch aber lockerer und sympathischer Porträts. Hierzu sind in einem Studioshooting interessante Porträts entstanden, in der die Sympathie des Models zum Tragen kommt.

The objective of this Project was a range of serious, yet easy-going and sympathetic portraits. Within a Studio-Shooting quite a few interesting photographs were created, where the Model’s Likability comes to fruition.

Im Fotostudio wurde mit dreierlei Lichtquellen gearbeitet. Alle Lichtquellen wurden dabei — für weiches Licht — mit einer Softbox versehen. Die größte der verwendeten Lichtquellen war dabei als Standlicht auf das Model gerichtet. Dagegen waren die beiden kleineren Softboxes auf den Hintergrund gerichtet, um einen annähernd weißen Hintergrund zu garantieren.

In the Photo Studio three light sources were used. All light sources were — for softer light — covered by Softboxes. The biggest of the used light sources was directed towards the Model. The other two, smaller light sources were directed towards the background to guarantee a nearly white background.

Locker, Entspannt, Smypathisch
keyboard_arrow_left keyboard_arrow_right

5

Im Verlauf des Fotoshootings wurde auch mit verschiedenen Lichtintensitäten experimentiert, um variantenreiche Grauverläufe zu erzeugen.

During the Photo Shooting the light intensity was changed experimentally, to create range of gray gradients.


keyboard_arrow_downDetails zum Projekt

keyboard_arrow_downDetails about the Project

Institution: [Privates Projekt]
Datum: März 2017
Institution: [Private Project]
Date: March 2017

Generative Types I

Generative Types I

Ein systematisch generiertes Typeface.

A systematically generated Typeface.


Basierend auf Bitmaps der Schriftart »Stencil Std.« wurden mit Processing die Buchstaben des lateinischen Alphabets neu interpretiert. Mit dem in diesem Projekt entstandenen Processing-Sketch können effektiv Interpretation des gesamten lateinischen Alphabets erzeugt werden.

Based on Bitmaps of the Typeface »Stencil Std.« and using Processing, creative Interpretations of the Latin Alphabet were created. With the Processing-Sketch developed during this project, the whole Latin Alphabet can be effectively recreated.

Auf der Basis von Bitmaps von Buchstaben der Schriftart »Stencil Std.« wurde eine Art Bildfilter für Buchstaben entwickelt. Das Processing-Sketch ermöglicht die effektive Erzeugung von interpretierten, lateinischen Alphabeten.

On the basis of Bitmaps of Letters of the Typeface »Stencil Std.« a program, similar to an Image Filter for Letters, was developed. The Processing-Sketch supports the effective Creation of Interpretations of Latin Alphabets.

Generative Types I
keyboard_arrow_left keyboard_arrow_right

7

Das Processing-Sketch untersucht die Bitmaps der Buchstaben auf schwarze Pixel und speichert dabei deren X- und Y-Koordinaten in ein Array, sodass diese später als Grundlage einer Interpretation genutzt werden können. Die Interpretation des jeweiligen Buchstaben findet durch Farben und Formen statt, die mithilfe mathematischer Berechnungen kontrolliert vermengt werden.

The Processing-Sketch explores the Bitmaps, especially looking for black pixels. The X- and Y-Coordinates of these are pushed into an array, so that they can be used in the Creation of Interpretations. The Interpretation of each Letter is created with Colors and Shapes, that are selectively mixed using mathematical Calculations.

Das Processing-Sketch ermöglicht einen Export der fertigen Grafiken sowohl als *.png [Pixeldaten] als auch als *.pdf [Vektordaten].

This Processing-Sketch supports the Export of finished Graphics as *.png [Pixel Data] as well as *.pdf [Vector Data].


keyboard_arrow_downDetails zum Projekt

keyboard_arrow_downDetails about the Project

Institution: Hochschule Mannheim
Fakultät für Gestaltung
Semester: Wintersemester 2015/16
03. Fachsemester
Kurs: Gestalten mit Processing
Leitung: Marek Slipek
Kooperation:
Institution: Hochschule Mannheim
Institute of Design
Semester: Winter Semester 2015/16
03rd subject-specific Semester
Course: Design with Processing
Guidance: Marek Slipek
Cooperation:

share

keyboard_arrow_up

done
close

Die aktuelle URL wurde kopiert!

The current URL was copied!