iPhone with camera app displaying Markus Kison's portrait

Education & EXperience

Profile

I design & realize websites, data visualizations and interactive graphics.

Being a web designer with a background in traditional graphic design, my websites focus on a clear structure and balanced typography. Since studying visual communication, I have 20+ years of experience working as a creative coder in the context of agencies and freelance projects.

I live in Berlin and work freelance.

Two brands next to each other: Figma for design and webflow for website realization

Portfolio

Selected Projects

Find below a selection of websites and interactive graphics I designed, built and maintain for clients.

My tool stack combines design tools (Figma, Adobe CC), CMS-systems (Wordpress, Webflow) and a code editor (Visual Studio Code).  If required I may also deliver assets like renderings in Cinema4d or interactive data visualization using flourish.studio.

The hero section for thePlanetDrum website. Displaying a group of people celebrating after a workshop
Webdesign
Arrow down to the left bottom

Concept, design & asset creation w/ Figma

Development
Arrow down to the left bottom

Programming, hosting & SEO

Full-Service
Arrow down to the left bottom

Podcast publications, security & legal updates, web- & email hosting...

Icon Wordpress
Arrow down to the left bottom

Built in Wordpress

Icon Divi theme

Using the Wordpress DIVI theme

Arrow down to the right bottom
Icon Podlove plugin

Podcast hosting using the Podlove plugin

Arrow down to the right bottom
Icon Yoast SEO plugin

SEO optimization using Yoast plugin

Arrow down to the right bottom

Website

thePlanetDrum.de

Icon chevron down

Webdesign & development of several website generations for Berlin’s largest private drum school

From a single Flash site in 2004 to three Wordpress sites in 2023, thePlanetDrum is a long term client of mine. Site-development is focussed on SEO with several subdomains incl. a podcast website. The website were realized using different Wordpress themes (JOYN, Divi) and include SEO optimization, hosting, legal administration, cookie integration and privacy control, backup, security, updates, email-setup, podcast hosting, asset preparation and optimization.

Project website:

Icon external link
An iPhone displaying the responsive webdesign for the drum website
The hero section for thePlanetDrum website. Displaying a group of people celebrating after a workshop
An iPhone mask to lay above a webdesign site
Webdesign for the thePlanetDrum. Structured rhythm of images and black and white sections.
An iPhone with Spotify App displaying the podcast site for thePlanetDrum
Arrow down to the left bottom

Publish to Spotify...

An iPad with Apple Podcasts app displaying the thePlanetDrum design
Arrow down to the left bottom

...and to Apple Podcasts

An iMac displaying the webdesign for 3punkt. Hero section with a large image of traffic signs and the sentence "don't walk where the road leads you..."
Webdesign
Arrow down to the left bottom

Concept, design & asset creation w/ Figma

Development
Arrow down to the left bottom

Programming, hosting & SEO

Icon visual studio code
Arrow down to the left bottom

Coded in Studio Visual Code

Icon javascript

Custom JavaScript embeds

Arrow down to the right bottom
Icon html canvas

Integration of an html canvas animation

Arrow down to the right bottom

Landing page

3punkt.de

Icon chevron down

Landing page design, implementation and hosting for Ulm based advertisement agency 3punkt.

Adaption of html template and integration of custom elements like html canvas animations and javascript elements. Asset preparation in Adobe CC.

Project website:

Icon external link
An iMac computer with a black screen
An iPhone displaying the responsive webdesign for 3Punkt's agency section
An iPhone displaying the 3Punkt webdesign
An iPad device displaying a white browser window
An iPad displaying the responsive webdesign for Berlin based artist Markus Kison. Clean typography black on white. Images with captions.
Webdesign
Arrow down to the left bottom

Concept, design & asset creation w/ Figma

Development
Arrow down to the left bottom

Programming, hosting & SEO

Icon visual studio code
Arrow down to the left bottom

Coded in Studio Visual Code

Icon javascript

Custom JavaScript embeds

Arrow down to the right bottom
Icon web-p image

Fast web-p images (with fallback)

Arrow down to the right bottom

Portfolio website

markuskison.de

Icon chevron down

Fast artist portfolio website for (my) digital media art projects.

With strong focus on efficiency and responsiveness, this site is build from scratch in VSC using latest html design patterns and features like grids, flex boxes, webP images (with fallback).

The site is rated 98% performance, 99% accessibility, 100% best practices, 100% SEO using Google Chrome’s Lighthouse analytics tool. Local hosting of all scripts, fonts and movies allows full GDPR 2020 compliance without cookie banners or other agreements.

Project website:

Icon external link
An iPhone showing the responsive webdesign for markuskison.de. A clean website with typography at the top and a single image at the bottom.
Arrow down to the left bottom

Responsive grid alignment

Webdesign showcase. A clean Responsive webdesign for Berlin based artist Markus Kison: website with typography black on white and centered images. Similar to a weblog.
Responsive webdesign for Berlin based artist Markus Kison: Webdesign showcase. A clean website with typography black on white and centered images. Similar to a weblog.
An iPad displaying the webdesign for developed application. Left side an image with clickable dots. Right side a form to enter the text which is displayed for each dot.
UX
Arrow down to the left bottom

User experience evaluation

Development
Arrow down to the left bottom

Programming, hosting & SEO

Icon visual studio code
Arrow down to the left bottom

Coded in Studio Visual Code

Icon javascript

Custom JavaScript embeds

Arrow down to the right bottom
Icon jQuery

Using jQuery

Arrow down to the right bottom

single-page application

clickMapMaker

Icon chevron down

Development of a javascript based browser tool that allows graphic designers to create interactive images without coding.

After uploading a background image, users define areas of interest by placing markers onto the image. For each of these areas an info box is created into which users can enter a headline and additional information as well as an image. The interactive image is exported to a single html file and embedded into websites. The tool was used by designers working at welt.de to build interactive stock charts, maps and illustrations.

Tube system rendering realised in Cinema4D as part of my asset creation process.

A flag arrow down
Demo
video
A flag arrow down
Exported
interactive
graphic
A flag arrow down
Try it
Yourself
AniPad displaying a information graphic about the Berlin vote. SPD in the center and the number of occurrences for certain words in their election program
Webdesign
Arrow down to the left bottom

Concept, design & asset creation w/ Figma

UX
Arrow down to the left bottom

User experience evaluation

Development
Arrow down to the left bottom

Programming, hosting & SEO

Icon visual studio code
Arrow down to the left bottom

Coded in Studio Visual Code

Icon javascript

Custom JavaScript embeds

Arrow down to the right bottom
Icon jQuery

Using jQuery

Arrow down to the right bottom
Icon D3 framework

Using D3, a JavaScript library for
manipulating documents based on data

Arrow down to the right bottom

Interactive infographic

Parteien in Zahlen

Icon chevron down

Design and implementation of an interactive illustration with scrolling effects for Berliner Morgenpost

Using the d3.js framework for data visualization, this website features also custom made scroll event handling using jQuery. Asset creation realised in Adobe Illustrator.

An iPad device displaying an interactive map of Europe on the welt website.
Webdesign
Arrow down to the left bottom

Concept, design & asset creation w/ Figma

UX
Arrow down to the left bottom

User experience evaluation

Icon Flourish tool
Arrow down to the left bottom

Built with Flourish, a tool for visualization
and animated data storytelling

Icon of Excel
Arrow down to the left bottom

Data preprocessing in Excel

Data visualization

welt.de

Icon chevron down

Design and realisation of interactive maps, charts & tables

For welt.de I am creating different data visualizations on a daily basis using the Flourish.studio tool. Data preprocessing is handled in Excel or Google Tables eg. using Google Finance for real-time stock values.

Project website:

Icon external link

Tool website:

Icon external link
A cookie icon

This visualization requires cookies. Accept?

An iPad displaying the welt.de website interface.
An iPhone with open safari browser displaying an empty website
A cookie icon

This visualization requires cookies. Accept?

IPhone with open welt website. The website is still empty.
A cookie icon

This visualization requires cookies. Accept?

An iPad displaying the welt.de website interface.
A cookie icon

This visualization requires cookies. Accept?

Need a solid website builder that bridges structured visual design with modern development skills?

Email icon
Icon copy

Copy address to clipboard

Markus Kison
c/o Wu
Topsstr. 33
10437 Berlin

markuskison@gmail.com

© VG Bild-Kunst, Bonn, 2023

Website made in Webflow

Javascript plugins by Finsweet