Front-end Systems, Creative Development and Prototyping

Hi, I’m a senior front-end web designer/-developer in Berlin. I specialize in responsive CSS architecture, advanced design-systems and accessibility. I build websites, prototypes, style-guides and frameworks.

Selected Projects

Leibniz Gemeinschaft

A reference front-end implementation for an identity and content system. The brief was to prototype design patterns that could apply the redesign across parent and 90+ sub-organizations, as well as an online-magazine.

Implemented a modular architecture of page-layout and page-section components, supported by responsive-token layout/typo/ui/theming, as well as custom navigation components.

Deployed as a static build of randomized content scenarios, organized by layout and section type, as a references for subsequent CMS/backend development.

Final website built by DMK e-business.

Year

2019

Design

Sina Schwartz, Magda Podkowinska

Tools

Custom SSG, static/dummy data, Netlify. Pug, Sass, Vue.js

TU Darmstadt

A CSS/JS framework to support a redesigned identity and component system. The brief of this project was not to implement designs but to create abstractions for their implementation by an internal team at TU Darmstadt.

Built a framework on the pattern of Bootstrap, refactored to a responsive-token approach. Deployed a “Framework guide” website with documented interactive demonstrations for all patterns, including code-samples, inspectable grids and breakpoints. Also developed custom navigation elements with Vue.js.

Final website developed by TU Darmstadt internal team.

Year

2018

Design

Magda Podkowinska

Tools

Custom SSG, static/dummy data, Netlify. Pug, Sass, Vue.js

Circula

A marketing site for a Berlin startup, with UI details designed to match those of their mobile app. The brief was to implement a static-site which could be taken over later by the company’s own developers.

Implemented components to match the branding and UI details, responsive-tokens to match Implemented a design-token approach to match designer’s specs across all responsive views; implemented modular section components corresponding to a page-building implementation in DatoCMS. Custom navigation elements.

Built with open-source tools,

Year

2017

Design

Jürgen Hassler

Tools

Metalsmith.js, Headless CMS, Webhooks

HWR Berlin

A large-scale identity- and information-design system. The goal was to create a deliverable which would serve as reference front-end implementation for subsequent CMS/backend development.

Implemented a component/module system with responsive-token (media-specific sizes, spacings) layout and typography abstractions, supported by custom navigation work. Delivered as a prototype build of approx XX page scenarios, on a custom development basis designed for stress-testing modules and components through continuous randomized content-generation.

Final website built by DMK e-business; design-system later adapted for the Berlin Professional School.

Year

2017

Design

Jasmin Herkel

Tools

Node.js prototype with randomized content-generation, on Heroku. Pug, Sass, jQuery.

Open-source Software

logo Created with Sketch.

SplitEase.js

SplitEase.js allows animators and creative coders to compose separately variable acceleration, constant-speed and deceleration segments in a single continuous easing (interpolation) through simple numeric arguments. It weighs less than 1k.

Homework

A Sass CSS framework based on a hybrid utility-object methodology and making extensive use of CSS custom properties.

Penny

The hybrid live-server/static-site-generator with which I build most of my projects. It integrates Browsersync, Webpack, Sass, Pug and Markdown-it.

Sass/CSS Packages

Sass Calc

Enables math operations on mixed unit and/or calc()- or var()-based values. Includes utility for removing calc() formatting. Compatible with dart-sass and libsass.

Sass Lerp

Builds on sass-calc to express any CSS dimension as a linear function of its context or parent dimension, within precise bounds. % em and v* viewport units supported. Compatible with dart-sass and libsass.

Sass Maps Next

Overloads Sass’ core map-get() and map-merge() functions to enable operations on nested values. Conforms to the feature proposal in this thread, also adding nested map-set().

Sass Throw

Enables capturable—thus testable—invocation of @error, @warn and @debug directives in Sass. Essential for any test suite. Compatible with dart-sass and libsass.