
Due to outdated tech stack and unmaintained dependendencies, we decided to rebuild denkmal.org from scratch. Within this process we also redesigned the frontend to give our users not only a fresh look, but more importantly, an improved user experience. One major change was putting the main navigation to the bottom of the screen (on mobile). With this upgrade we could improve the usability for our mobile users (which make up for more than 80% of all our users) notably.

Among smaller UI improvements, we also added a global navigation, a simplified event submission form, and a dark mode. We chose [Nuxt.js](https://nuxtjs.org) as our frontend framework.

Check it out: [Denkmal.org](https://www.denkmal.org).

## Impressions

![Denkmal](/static/images/posts/media/denkmal-2/website-mobile-day.png)
![Denkmal](/static/images/posts/media/denkmal-2/website-mobile-night.png)
![Denkmal](/static/images/posts/media/denkmal-2/website-mobile-tsri-day.png)
![Denkmal](/static/images/posts/media/denkmal-2/website-mobile-tsri-night.png)


Denkmal.org 2.0


Development and UI design for an award winning car insurance web-app. [Snap Demo](https://zealous-euler-09d5f7.netlify.app/en).

## Screenshots

![Simpego Snap](/static/images/posts/media/simpego-snap/website-mobile.png)

## Technology

- Nuxt.js
- Vue
- Netlify


Simpego Snap


Denkmalmit ist the organisation behind Denkmal.org, the event calendar for Basel's night life. [denkmalmit.org](https://denkmalmit.org).

## Screenshots

![Denkmalmit](/static/images/posts/media/denkmalmit/website.png)
![Denkmalmit](/static/images/posts/media/denkmalmit/website-mobile.png)

## Technology

- Illustrator
- Vue.js
- Nuxt.js
- Zeit now


Denkmalmit


Corporate Re-Design for cometas. The e-learning full-service agency cometas creates digital courses, web- and mobile software. [cometas.ch](https://www.cometas.ch).

## Final logo

![Cometas](/static/images/posts/media/cometas/cometas-logo-large.png)

## Before and after

![Cometas](/static/images/posts/media/cometas/cometas-redesign.png)

## Technology

- Illustrator


Cometas


Corporate Design for SANTiHANS GmbH, the agency I founded. [santihans.com](https://www.santihans.com).

## Webdesign

![SANTiHANS](/static/images/posts/media/santihans/website-index.png)
![SANTiHANS](/static/images/posts/media/santihans/website-index-1.png)
![SANTiHANS](/static/images/posts/media/santihans/website-index-2.png)
![SANTiHANS](/static/images/posts/media/santihans/website-blog.png)
![SANTiHANS](/static/images/posts/media/santihans/website-mobile.png)

## Technology

- Nuxt.js
- Netlify


SANTiHANS


Redesign for Denkmal Graz launch. [Denkmal.org](https://www.denkmal.org).

## Webdesign

![Denkmal](/static/images/posts/media/denkmal/Denkmal-App.jpg)

## Print

![Denkmal](/static/images/posts/media/denkmal/Denkmal-Postcard.jpg)

## Ads

![Denkmal](/static/images/posts/media/denkmal/Denkmal-Ad-Absacker.png)
![Denkmal](/static/images/posts/media/denkmal/Denkmal-Ad-Montagsdepressionen.png)
![Denkmal](/static/images/posts/media/denkmal/Denkmal-Ad-Nachtaktiv.png)
![Denkmal](/static/images/posts/media/denkmal/Denkmal-Ad-Schlaflos.png)

## Resources

- Illustrator


Denkmal.org


Second Edition: [Frontâle Festival](https://www.frontale.ch) - French Music Festival 2016

## Webdesign

![Frontale](/static/images/posts/media/frontale-2016/Frontale-App.jpg)

## Print

![Frontale](/static/images/posts/media/frontale-2016/Frontale-Postcard.png)
![Frontale](/static/images/posts/media/frontale-2016/Frontale-Impression-1.jpg)
![Frontale](/static/images/posts/media/frontale-2016/Frontale-Impression-2.jpg)

## Resources

- Illustrator


Frontâle Festival 2


[Frontâle Festival](https://www.frontale.ch) - French Music Festival 2015

## Logo Design

![Frontale](/static/images/posts/media/frontale/Frontale-header.png)
![Frontale](/static/images/posts/media/frontale/Frontale-rooster.png)

## Print

![Frontale](/static/images/posts/media/frontale/Frontale-Print.png)
![Frontale](/static/images/posts/media/frontale/Frontale-Shirts.jpg)

## Resources

- Illustrator


Frontâle Festival


Logo for a the organisation "Schiff Mode".

![Schiff Mode](/static/images/posts/media/schiff-mode/SchiffMode-Logo.png)

![Art44](/static/images/posts/media/art44/Art44-Logo.png)

## Resources

- Illustrator


Logo Designs


Drafts for a game idea.

![Save Me](/static/images/posts/media/save-me/SaveMe1.png)
![Save Me](/static/images/posts/media/save-me/SaveMe2.png)
![Save Me](/static/images/posts/media/save-me/SaveMe3.png)

## Resources

- Photoshop


Save Me


Open source project to connect and support the developer community in Basel. Website at [madeinbasel.org](https://www.madeinbasel.org), project hosted on [Github](https://github.com/MadeInBasel/madeinbasel.github.io).

![Made in Basel](/static/images/posts/media/made-in-basel/MadeInBasel-Website.png)
![Made in Basel](/static/images/posts/media/made-in-basel/MadeInBasel-Badges.png)

## Resources

- Illustrator
- html, css


Made in Basel


Ingress illustrations to get beta invitation ;)

![Ingress](/static/images/posts/media/ingress/Ingress1.jpg)
![Ingress](/static/images/posts/media/ingress/Ingress2.jpg)
![Ingress](/static/images/posts/media/ingress/Ingress3.jpg)
![Ingress](/static/images/posts/media/ingress/Ingress4.jpg)

## Resources

- Photoshop


Ingress


An Avatar for every employee at Cargo Media. See in action on [www.cargomedia.ch](https://www.cargomedia.ch).

![Avatars Screenshot](/static/images/posts/media/cargomedia-avatars/cow.png)
![Avatars Screenshot](/static/images/posts/media/cargomedia-avatars/dog.png)
![Avatars Screenshot](/static/images/posts/media/cargomedia-avatars/elephant.png)
![Avatars Screenshot](/static/images/posts/media/cargomedia-avatars/fish.png)
![Avatars Screenshot](/static/images/posts/media/cargomedia-avatars/fox.png)
![Avatars Screenshot](/static/images/posts/media/cargomedia-avatars/hen.png)
![Avatars Screenshot](/static/images/posts/media/cargomedia-avatars/hippo.png)
![Avatars Screenshot](/static/images/posts/media/cargomedia-avatars/monkey.png)
![Avatars Screenshot](/static/images/posts/media/cargomedia-avatars/owl.png)
![Avatars Screenshot](/static/images/posts/media/cargomedia-avatars/panda.png)
![Avatars Screenshot](/static/images/posts/media/cargomedia-avatars/pig.png)
![Avatars Screenshot](/static/images/posts/media/cargomedia-avatars/seahorse.png)
![Avatars Screenshot](/static/images/posts/media/cargomedia-avatars/sheep.png)
![Avatars Screenshot](/static/images/posts/media/cargomedia-avatars/stag.png)
![Avatars Screenshot](/static/images/posts/media/cargomedia-avatars/whale.png)
![Avatars Screenshot](/static/images/posts/media/cargomedia-avatars/zebra.png)
![Avatars Screenshot](/static/images/posts/media/cargomedia-avatars/bat.png)
![Avatars Screenshot](/static/images/posts/media/cargomedia-avatars/catapillar.png)


Cargo Media Avatars


Web Experiments. See more at [Github](https://github.com/christopheschwyzer/StopheWebLab).

<video src="/video/char_run_hq.mp4" autoplay loop></video>


Web lab


Random photographs.

![Lost and Found](/static/images/posts/media/photography-lost-and-found/LostAndFound-Island.jpg)
![Lost and Found](/static/images/posts/media/photography-lost-and-found/LostAndFound-Kiss.jpg)
![Lost and Found](/static/images/posts/media/photography-lost-and-found/LostAndFound-Kiss1.jpg)
![Lost and Found](/static/images/posts/media/photography-lost-and-found/LostAndFound-Luck.jpg)
![Lost and Found](/static/images/posts/media/photography-lost-and-found/LostAndFound-Metamorphose.png)
![Lost and Found](/static/images/posts/media/photography-lost-and-found/LostAndFound-Mirror.jpg)
![Lost and Found](/static/images/posts/media/photography-lost-and-found/LostAndFound-Shadow.jpg)
![Lost and Found](/static/images/posts/media/photography-lost-and-found/LostAndFound-Tree.jpg)
![Lost and Found](/static/images/posts/media/photography-lost-and-found/LostAndFound-WindowTree.jpg)
![Lost and Found](/static/images/posts/media/photography-lost-and-found/LostAndFound-Sun.jpg)
![Lost and Found](/static/images/posts/media/photography-lost-and-found/LostAndFound-Trash.jpg)
![Lost and Found](/static/images/posts/media/photography-lost-and-found/LostAndFound-Ad.jpg)


Lost and Found


Take a look inside my head ;)

<iframe width="853" height="480" src="https://www.youtube.com/embed/o7t-qajcxzk" frameborder="0" allowfullscreen></iframe>

## Resources

- MRI-Data
- [MeVisLab](https://www.mevislab.de/)
- Adobe AE


Inside my brain


Paris Photographs

![Paris Love](/static/images/posts/media/photography-paris/FPWL-Love.jpg)
![Paris Love](/static/images/posts/media/photography-paris/FPWL-LittleBitch.jpg)
![Paris Love](/static/images/posts/media/photography-paris/FPWL-Metropolitan.jpg)
![Paris Love](/static/images/posts/media/photography-paris/FPWL-NY.jpg)
![Paris Love](/static/images/posts/media/photography-paris/FPWL-Punk.jpg)
![Paris Love](/static/images/posts/media/photography-paris/FPWL-Shadows.jpg)
![Paris Love](/static/images/posts/media/photography-paris/FPWL-TGV.jpg)
![Paris Love](/static/images/posts/media/photography-paris/FPWL-WeShallneverSurrender.jpg)
![Paris Love](/static/images/posts/media/photography-paris/FPWL-Flag.jpg)
![Paris Love](/static/images/posts/media/photography-paris/FPWL-Cracks.jpg)
![Paris Love](/static/images/posts/media/photography-paris/FPWL-Beat.jpg)
![Paris Love](/static/images/posts/media/photography-paris/FPWL-Flash.jpg)
![Paris Love](/static/images/posts/media/photography-paris/FPWL-404.jpg)


From Paris with Love


Create and develop the Cargo Media Corporate Identity. (Including website implementation.) See full website: [www.cargomedia.ch](https://www.cargomedia.ch).

## Webdesign

![Cargo Media Website](/static/images/posts/media/cargomedia/CargoMedia-App.jpg)
![Cargo Media Website](/static/images/posts/media/cargomedia/CargoMedia-Website.png)

## Logo

![Cargo Media Logo](/static/images/posts/media/cargomedia/CargoMedia-Logo.png)


Cargo Media CI


Some experiments with 3d software.

## Glass & Shatter

![3D Glass Shatter](/static/images/posts/media/3d/3D-GlassShatter.png)
![3D Glass Shatter](/static/images/posts/media/3d/3D-GlassShatter2.png)
![3D Glass Shatter](/static/images/posts/media/3d/3D-GlassShatter3.png)
![3D Glass Shatter](/static/images/posts/media/3d/3D-GlassShatter4.png)
![3D Glass Shatter](/static/images/posts/media/3d/3D-GlassShatter5.png)

<iframe width="853" height="480" src="https://www.youtube.com/embed/e0Qqgq8yOPI" frameborder="0" allowfullscreen></iframe>
<iframe width="853" height="480" src="https://www.youtube.com/embed/kEYlA4NuxTs" frameborder="0" allowfullscreen></iframe>

## Character

![3D Character](/static/images/posts/media/3d/3D-Character.png)
![3D Head](/static/images/posts/media/3d/3D-Head.png)
![3D Head](/static/images/posts/media/3d/3D-Head2.png)
![3D Head](/static/images/posts/media/3d/3D-Head3.png)
![3D Head](/static/images/posts/media/3d/3D-Head4.png)
![3D Head](/static/images/posts/media/3d/3D-Heads.png)
![3D Monster](/static/images/posts/media/3d/3D-Monster.png)
![3D Monster](/static/images/posts/media/3d/3D-Monster2.png)
![3D Monster](/static/images/posts/media/3d/3D-Monster3.png)

<iframe width="853" height="480" src="https://www.youtube.com/embed/wnD3ESpbgqE" frameborder="0" allowfullscreen></iframe>

## UV Mapping

<iframe width="853" height="480" src="https://www.youtube.com/embed/ohipkLW27tk" frameborder="0" allowfullscreen></iframe>
<iframe width="853" height="480" src="https://www.youtube.com/embed/svrmvCLmJhQ" frameborder="0" allowfullscreen></iframe>

## Tree Tutorial

![3D Tree](/static/images/posts/media/3d/3D-Tree.png)
![3D Tree](/static/images/posts/media/3d/3D-Tree2.png)
![3D Tree](/static/images/posts/media/3d/3D-Tree3.png)

## Resources

- Maya
- Zbrush
- Adobe Premiere


3D Experiments


Logo for Gundeli Street Team - Basel running community.

![Gundeli Street Team](/static/images/posts/media/gundeli-street-team/GST-Man.png)
![Gundeli Street Team](/static/images/posts/media/gundeli-street-team/GST-Woman.png)

## Resources

- Illustrator


Gundeli Street Team


## Bachelor Thesis, LGK, HGK, FHNW 2011

Why video games matter – The following paper discusses the significance of videogames. What is a videogame and what could it be in the future. I more or less discuss these topics:

- A short excursion on game theory and why it can’t be an appropriate description for modern games.

- What differs the medium videogame from other media.

- A comparison between play and work.

- Games and Art

[Aus Spiel wird Ernst (german)](/static/images/posts/media/ba/BA_Christophe_Schwyzer_2011_Aus_Spiel_wird_Ernst.pdf)

## Practical Part

I created this game prototype as part of my Bachelor Thesis at the LGK, HGK, FHNW. It is based on the Platformer Starterkit. Although it’s not a sophisticated game, I learned a lot about what the basic components of a game are and what is needed to (literally) animate them. The game contains 4 levels.

In brief (german)

Voxel – Artventure Game: Spielprototyp für die XBox 360.

Das Spiel Voxel ist ein sogenannter Sidescroller. Es gilt den Spieler von A nach B zu bewegen und dabei Hindernisse zu überwinden. Der Spieler hat in diesem Prototyp die Möglichkeit zu gehen und zu springen. Zusätzlich kann er zwei verschiedene Arten Sterne einsammeln. Die Gelben erhöhen lediglich den Punktestand, während die Roten Spezialkräfte freisetzen, anhand deren die Gegner ausgeschaltet werden können. Die Spieleranimationen entstanden hauptsächlich in Autodesk Maya und Adobe Photoshop, während für das Leveldesign zusätzlich noch Adobe Illustrator zum Einsatz kam. Programmiert ist das Spiel in C#, realisiert in der Entwicklungsumgebung Visual Studio in Verbindung mit dem XNA Game Studio von Microsoft.

A short summery in pictures about the working process:

[Work in Progress](/static/images/posts/media/ba/BA-VoxelPrototype-WorkInProgress.pdf)

### Preview

<iframe width="640" height="480" src="https://www.youtube.com/embed/iRZAUOhooF0" frameborder="0" allowfullscreen></iframe>

### Resources

- Maya
- Maya Voxelizer Plugin
- Photoshop
- Illustrator
- Visual Studio
- XBox XNA Game Studio (App Hub)
- FL Studio
- XBox 360


Games


Futuristic model for the headquarters of the Academy of Art and Design Basel.

<iframe width="853" height="480" src="https://www.youtube.com/embed/A3warSBSEPg" frameborder="0" allowfullscreen></iframe>

## Resources

- animated with google sketch up 8
- edited with adobe premiere cs4
- effects with adobe after effects cs4
- sound by david holmes – yen on a carousel & stealing the stock


Dreispitz 21


A friendly reminder that you can do whatever you like.

![The World is Yours](/static/images/posts/media/world-is-yours/TheWorldIsYours.jpg)
![The World is Yours](/static/images/posts/media/world-is-yours/TheWorldIsYours2.jpg)

## Resources

- Photoshop


The World is Yours


Cut out from a cuboid of gypsum.

![Sculpture](/static/images/posts/media/sculpture/Sculpture1.jpg)
![Sculpture](/static/images/posts/media/sculpture/Sculpture2.jpg)


Sculpture


![Portrait](/static/images/posts/media/portrait/Portrait1.jpg)
![Portrait](/static/images/posts/media/portrait/Portrait2.jpg)
![Portrait](/static/images/posts/media/portrait/Portrait3.jpg)
![Portrait](/static/images/posts/media/portrait/Portrait4.jpg)
![Portrait](/static/images/posts/media/portrait/Portrait5.jpg)


Portraits


Handmade stuff.

![Old Man](/static/images/posts/media/painting/OldMan1.jpg)
![Old Man](/static/images/posts/media/painting/OldMan2.jpg)
![Old Man](/static/images/posts/media/painting/OldMan3.jpg)


Old Man


Some old comic drafts.

![Noir](/static/images/posts/media/noir/Noir1.jpg)
![Noir](/static/images/posts/media/noir/Noir2.jpg)
![Noir](/static/images/posts/media/noir/Noir3.jpg)
![Noir](/static/images/posts/media/noir/Noir4.png)
![Noir](/static/images/posts/media/noir/Noir5.png)

## Resources

- Photoshop


Noir


This Lamp is mainly made out of paper. The half transparent paper gives a nice light, combined with the irregular squares, a real nice effect with almost no costs. Downside of course is that you can barely touch it and its broken ;)

![LED Lamp](/static/images/posts/media/led/LEDPaperLamp.png)

## Resources

- 25 white LEDs
- AC to DC 12 V Adapter
- some resistors, cables
- paper 90 g/m2


LED Paper Lamp


"Fashion brand idea"

![Kingchiller](/static/images/posts/media/kingchiller/Kingchiller-Logo.png)

## Shirts

![Kingchiller](/static/images/posts/media/kingchiller/Kingchiller-ShirtGeneral.jpg)
![Kingchiller](/static/images/posts/media/kingchiller/Kingchiller-ShirtMajor.jpg)
![Kingchiller](/static/images/posts/media/kingchiller/Kingchiller-ShirtMonk.jpg)
![Kingchiller](/static/images/posts/media/kingchiller/Kingchiller-ShirtSpy.jpg)
![Kingchiller](/static/images/posts/media/kingchiller/Kingchiller-ShirtViolence.jpg)
![Kingchiller](/static/images/posts/media/kingchiller/Kingchiller-ShirtGoldeneye.jpg)
![Kingchiller](/static/images/posts/media/kingchiller/Kingchiller-ShirtConverse.jpg)
![Kingchiller](/static/images/posts/media/kingchiller/Kingchiller-ShirtLanguage.jpg)

![Kingchiller](/static/images/posts/media/kingchiller/Kingchiller-Army.png)


Kingchiller


Sketches.

![Black n White](/static/images/posts/media/bw/BW1.jpg)
![Black n White](/static/images/posts/media/bw/BW2.jpg)
![Black n White](/static/images/posts/media/bw/BW4.jpg)
![Black n White](/static/images/posts/media/bw/BW5.jpg)


Black n' White


Sketches.

![Drawing](/static/images/posts/media/drawing/Drawing1.jpg)
![Drawing](/static/images/posts/media/drawing/Drawing2.jpg)
![Drawing](/static/images/posts/media/drawing/Drawing3.jpg)
![Drawing](/static/images/posts/media/drawing/Drawing4.jpg)
![Drawing](/static/images/posts/media/drawing/Drawing5.jpg)


Drawing


Some old webdesign drafts that are either depraciated or have never been realised.

![Webdesign Depreciated](/static/images/posts/media/webdesign/Webdesign-BBB.jpg)
![Webdesign Depreciated](/static/images/posts/media/webdesign/Webdesign-BBB2.jpg)
![Webdesign Depreciated](/static/images/posts/media/webdesign/Webdesign-ApartmentSever.jpg)
![Webdesign Depreciated](/static/images/posts/media/webdesign/Webdesign-JessicaBuschor.jpg)
![Webdesign Depreciated](/static/images/posts/media/webdesign/Webdesign-Lernwerk.jpg)
![Webdesign Depreciated](/static/images/posts/media/webdesign/Webdesign-SpitzenOpenair.jpg)
![Webdesign Depreciated](/static/images/posts/media/webdesign/Webdesign-Voxel.jpg)

## Resources

- Illustrator
- Photoshop
- Flash
- html, css
