Lobster Webapp

Build a Pattern Library

Client: Lobster
Website: lobster.media
Date: 2016
Services: Pattern Library, Front-end Development

01. My Process

This project was really international. I have worked with people from three different countries, but we created a clean and rock-solid digital product.

My task was to create a scalable CSS-Architecture and build a Pattern Library for the team. I got an awesome design from the coworkers, set up the workflow with Pattern Lab and developed a lot of components with my conding-standards.

Atomic Design

Every single line of code is based on the Atomic Design Principle and for the documentation I used Pattern Lab.

Architecture

I created the whole CSS-Architecture with BEM, OOCSS and SMACSS. It is based on the pre-processor Scss.

Templates

I was the man for the static templates and created all views with the atoms, molecules and organisms.

02. Responsive Webdesign

The goal was to have a responsive prototype, which fit well in every kind of screen size. I decided to choose the mobile first principle and kept my eyes on a great performance.

03. Build Components

Pattern Lab and the Atomic Design principle was the base to create future-friendly prototype. I split the design off into different kind of components and created with these modules the templates. The team with back-end and front-end developers created the webapp based on my architecture.

04. Info

It was a pleasure to work with such an international team and created Sendemo. The new way to communicate between artists and labels. If you need static prototypes or Pattern Libraries – hire me!

Client: Lobster
Website: lobster.media
Date: 2016
Services: Pattern Library, Front-end Development
Visit Website

Get in touch

I am available for hire. I am specialized in CSS architecture, Pattern LibrariesResponsive Websites, Styleguides and clean front-end foundations.

Let's work together