3plusx.io

Visuelle Kommunikation und Webentwicklung

Beratung,Konzeption,Design,UI/UX,Typografie
& Produktion von digitalen Medien

Portfolio

Website 2023

Pro Inklusion Hamburg e.V.

www.pro-inklusion-hamburg.de |

Website Pro Inklusion Hamburg with the claim "Lern together, live together" in german language, mobile view
Website Pro Inklusion Hamburg with the claim "Lern together, live together" in german language, dark mode, mobile view

Colors:

228,21,19 245,238,89 184,228,246 245,210,228 226,237,229

Anchors:

0,0,0

TYPEFACES: AtkinsonHyperlegible

TECH STACK: Typo3, Foundation

Website by Thomas Böker (Content), Ulf Treger (Design/UI, Production)

Website REACH Hamburg mit einer Illustration auf der drei Erlenmeyer Kolben abgebildet sind, jeweils in Hellgrün, Fuchsia und Hellorange

Website 2023

REACH Hamburg

www.reach-hamburg.de |

Website REACH Hamburg mit einer Illustration auf der drei Erlenmeyer Kolben abgebildet sind, jeweils in Hellgrün, Fuchsia und Hellorange

Colors:

188,175,113 198,223,185 210,170,212 238,205,176 215,213,194 215,208,221

Anchors:

135,123,64 66,60,31

TYPEFACES: Fabrikat Normal, Georgia, Remix Icon

TECH STACK: Foundation, Typo3, jQuery

Website by Thomas Böker (Content), Felix Raeithel (UI/Templates, Typo3) Ulf Treger (Design/UI, Typo3, Illustration)

Web map 2022

Treibgut Plattform

treibgut-plattform.net |

Colors:

255,120,0 172,214,239 123,50,51 222,217,217

Anchors:

245,157,10 0,0,0

TYPEFACES: P22Mackinac-Medium$, IBMPlexMono-Regular

TECH STACK: Leaflet JS, Tailwind CSS, ORTE Backend

Website & Map by Ulf Treger (Design, UI/UX, Code)

Project and all images by Felix Dreesen, Stephan Thierbach

Screenshot of the startpage of GWA St. Pauli

Website 2021

GWA St. Pauli

gwa-stpauli.de |

Screenshot of the startpage of GWA St. Pauli (as seen by a phone)

Colors:

249,216,64 255,127,0 77,165,150 249,49,113 121,203,220 254,248,223 155,155,155

Anchors:

0,3,51 0,0,0

TYPEFACES: Work Sans, Font Awesome

TECH STACK: Typo3, Foundation, jQuery, Leaflet JS

Website by Ulrike Schulz (Typo3) and Ulf Treger (Design, UI/UX)

Web map 2021

Gedenken zum 76. Jahrestag der Befreiung des Stalag X B Sandbostel

www.sandbostel76.de |

Screenshot of the initial view of the map (as seen with a phone)
Screenshot a detailed view of the map (as seen with a phone)
Screenshot a detailed view of the map (as seen with a phone)
Screenshot a view of the map (as seen with a phone)

Colors:

30,83,101 94,120,131 165,44,50 200,183,183

Anchors:

30,83,101 26,71,87

TYPEFACES: Bitter Regular, Work Sans

TECH STACK: Leaflet JS, D3.js, Foundation, Rails

Webmap by Sebastian Fuchs (Code, Submission form) and Ulf Treger (Map design + UI)

Website 2021

Bewegungsstiftung

www.bewegungsstiftung.de |

Startseite der Bewegungsstiftung (in Mobiler Ansicht)
Folgeseite der Bewegungsstiftung mit dem Titel Förderung entschieden (in mobiler Ansicht)

Colors:

255,183,17 254,214,123 204,0,0 36,95,9 132,49,117 254,254,254

Anchors:

112,14,24

TYPEFACES: HKGrotesk, Georgia, Remix Icons

TECH STACK: Typo3, Foundation

Website by Felix Raeithel + Ulrike Schulz. Website design + illustrations by Felix Raeithel + Ulf Treger.

Website 2020

Hamburger Arbeitsassistenz

www.hamburger-arbeitsassistenz.de |

Colors:

206,41,39 184,210,167 99,197,242

Anchors:

0,0,0 20,104,160

TYPEFACES: Work Sans, Bitter, Remix Icons

TECH STACK: Typo3, Foundation, jQuery, Leaflet JS

Website by Thomas Böker (Content), Ulf Treger (Design, Production)

Website 2020

Praxpack

www.praxpack.de |

Colors:

52,165,168 142,187,84 45,105,102 100,142,102 76,193,231 204,193,178 244,242,239

Anchors:

23,121,186 0,4,68

TYPEFACES: BrutalType$, Karla, Font Awesome

TECH STACK: Typo3, Foundation

Website and Logo design by Ulf Treger

Client: Ökopol – Institut für Ökologie und Politik GmbH

Web map 2020

Postcolonial Potsdam Audio Guide & Map

map.postcolonialpotsdam.org |

Screenshot of the start screen of the mobile app (as seen with a smartphone)

Colors:

0,168,192 239,194,14 255,85,85

Anchors:

0,168,192 54,54,54

TYPEFACES: Classic Sans$, Systemfonts, Segoe UI

TECH STACK: Nuxt.js, Bulma, Leaflet JS, jQuery

Web map + PWA design + production by Ulf Treger

Published by Postcolonial Potsdam (Anna von Rath, Elisabeth Nechutnys, Lina Fricke, Yann LeGall)

Place marker in three different variations used for the map

Website 2020

Accessing.theatre

hoou.hfmt-hamburg.de/accessing_theatre |

Colors:

227,9,126 42,147,172 110,38,49 229,168,8 129,30,201

Anchors:

0,3,51 227,9,126

TYPEFACES: Jost, Bitter, Deja Vu Serif, Remix Icons

TECH STACK: Jekyll, jQuery, Leaflet JS, Cypress.io, ORTE Backend

Design + production: Ulf Treger

Project lead and concept: Anja Redecker. Client: Hochschule für Musik und Theater Hamburg + Hamburg Open Online University.

Website 2020

Rechtsanwältin Katrin Inga Kirstein

www.kanzlei-kirstein.de |

Colors:

51,150,117 0,0,0

Anchors:

51,150,117

TYPEFACES: Classic Sans Medium$, Yrsa

TECH STACK: Static HTML/CSS, jQuery

Design by Ulf Treger

Website 2020

Republikanischer Anwältinnen- und Anwälteverein e. V. (RAV)

www.rav.de |

Screenshot of the website of the RAV (as seen by a mobile phone)

Colors:

140,16,41 28,106,153 251,185,23 206,214,215

Anchors:

153,0,0

TYPEFACES: Atkinson-Hyperlegible

TECH STACK: Typo3, jQuery

Design Relaunch + UI/UX by Felix Raeithel + Ulf Treger. 2020.

Based on initial design by Erik Tuckow (Sichtagitation) + Ulf Treger. 2008/09. Front illustration by Erik Tuckow.

Web application 2019

KOK Statistik

Startseite des KOK Statistiktool in mobiler Ansicht

Colors:

228,0,58 233,78,19 160,144,115 153,187,187 199,218,218 255,174,0 17,90,135

Anchors:

0,3,51 20,104,160

TYPEFACES: Fantasque Sans Mono, Roboto Light

TECH STACK: Rails, D3.js, jQuery

Web application by Sebastian Fuchs, Nina Siessegger, Ulf Treger (2019ff)

Initial concept and UI/UX: Ulf Treger. Basic version w/Pragma Shift, 2018. Client: KOK - Bundesweiter Koordinierungskreis gegen Menschenhandel e.V.

Website 2019

Die Bildbeschaffer

www.die-bildbeschaffer.de/de |

Colors:

3,117,155 90,70,130 234,215,46

Anchors:

23,121,186 20,104,160

TYPEFACES: Signika, Font Awesome

TECH STACK: Rails, Foundation, jQuery

Design, Code & Icons: Ulf Treger.

Content by Die Bildbeschaffer, Photos by Simon Puschmann. Backend/API w/Pragma Shift. HTML/CSS by Felix Raeithel.

Eine Reihe von schwarz-weiss Symbolen, die für die Website entwickelt wurden

Web application 2019

Polizeirechtsdatenbank des RAV

www.rav-polizeirecht.de |

Screenshot Startpage (as seen with a mobile phone)
Screenshot result page (as seen with a mobile phone)

Colors:

141,8,36 237,237,237 23,121,186

Anchors:

140,16,41 20,104,160

TECH STACK: Rails, Apache Solr, jQuery, Foundation

Application concept + UI/UX by Ulf Treger

Backend w/Pragma Shift

Website 2018

zakk klubraum

zakk.klubraum.org |

Colors:

7,137,139 64,81,111

Anchors:

0,0,0 0,5,85

TYPEFACES: Royal Sans Black, Royal Sans Bold$

TECH STACK: Rails, Foundation, jQuery

Design + production by Ulf Treger

Web map 2018

Treffen Total 2018 Map

map.treffentotal.de |

Colors:

242,213,0 102,102,102

Anchors:

TYPEFACES: Open Sans

TECH STACK: Static HTML/CSS, Foundation, Leaflet JS, ORTE Backend

Design website and map by Ulf Treger

Website 2018

Lesbisch Schwule Filmtage Hamburg | International Queer Film Festival Website

www.lsf-hamburg.de |

Screenshot of the startpage of the festival website (seen with a mobile device)

Colors:

225,60,153 75,53,131 54,141,104

Anchors:

TYPEFACES: Aleo, Open Sans, Font Awesome

TECH STACK: Rails, jQuery, Leaflet JS, Bootstrap, Nuxt.js

Website design + code by Ulf Treger

Logo by Bax, Backend/Frontend w/Pragma Shift, API by Pragma Shift

Website 2018

Veddel Anbau Nord

www.veddel-anbau-nord.de |

Colors:

137,160,44 222,222,102

Anchors:

TYPEFACES: CA SpyRoyal, Roboto

TECH STACK: DokuWiki

Design by Ulf Treger

With content from Nicole Vrenegor & Ulf Treger

Web map 2018

Media & Socialities

workshop.citydataexplosion.de |

Colors:

157,7,119 6,162,154 185,176,1 150,0,0

Anchors:

TYPEFACES: Dejavu Sans Mono, Kingthings Typewriter, Roboto

TECH STACK: Static HTML/CSS, Leaflet JS, jQuery, Foundation

Concept & design: Ulf Treger

Fotos, Videos, Drawings by the contributors. Editing: Thomas Böker, Stephan Thierbach, Ulf Treger. Proof reading: Rima Radhakrishnan

Web application 2018

ORTE Backend

orte.link |

Screenshot of the application, with a satellite map of Hamburg (as seen with a smartphone)

Colors:

51,51,51 198,198,0 118,118,118 230,230,230

Anchors:

TYPEFACES: Work Sans, Foundation Icons

TECH STACK: Rails, Leaflet JS

Concept, code and design by Ulf Treger. 2018-2022. With contributions by Sebastian Fuchs.

A Headless Web GIS for creating and editing digital maps and collected mixed data (text, images, audios). A variant of this application has been used by A Thousand Channels project <3

Website 2017

KOOFRA Koordinierungsstelle gegen Frauenhandel

koofra.de |

Colors:

82,147,197 155,193,222 195,229,250

Anchors:

0,8,136 0,2,34

TYPEFACES: Lato, Open Sans, Roboto Slab

TECH STACK: Jekyll, Foundation, jQuery

Design + production: Ulf Treger

Website 2017

metroZones: Schule für städtisches Handeln

schoolbook.metrozones.info |

Colors:

244,6,20 0,84,204 0,0,0

Anchors:

TYPEFACES: Merriweather, Dosis Bold

Design + production by Ulf Treger

Screendesign based on the book design by Tanja van de Loo

Web application 2017

JobPlattform der Hamburger Arbeitsassistenz

Colors:

138,0,0 119,119,119 249,177,177 244,215,215

Anchors:

TYPEFACES: OpenSans, FoundationIcons

TECH STACK: Rails, Foundation, jQuery

Design + code by Ulf Treger

Web map 2017

How to hear the invisible

www.how-to-hear-the-invisible.org |

Colors:

51,51,51 0,140,186 252,50,90 214,71,141 255,173,49 229,107,61

Anchors:

TYPEFACES: Avenir$

TECH STACK: Static HTML/CSS

Design + Code: Ulf Treger

Sound & montage: Katharina Pelosi. Speakers: Simone Dede Ayivi, Hauke Heumann, Toni Jessen, La Toya Manly Spain

Website 2014

New Hamburg

new-hamburg.de/wp |

Colors:

57,134,181 255,112,84 50,255,255

Anchors:

0,0,0 57,134,181

TYPEFACES: Roboto, Chunk Five

TECH STACK: Wordpress, Foundation, jQuery

Website by Tanja van de Loo, Felix Raeithel, Ulf Treger

Logo New Hamburg by Julian Regenstein

Web map 2014

Lern und Erinnerungsort Afrikanisches Viertel in Berlin

www.3plusx.de/leo-site |

Colors:

0,140,186 51,51,51

Anchors:

0,140,186 0,120,160

TYPEFACES: Franklin Gothic Book$

TECH STACK: Static HTML/CSS, Foundation, jQuery, Leaflet JS

Design website + map by Ulf Treger

Audio and texts by Franziska Zimmermann, Editor: Yonas Endrias

Website 2013

Vereinigung Demokratischer Juristinnen und Juristen (VDJ)

www.vdj.de |

Colors:

228,42,27 249,248,245

Anchors:

0,6,102 0,0,0

TYPEFACES: Open Sans

TECH STACK: Typo3

Website by Felix Raeithel, Thomas Böker, Ulf Treger

Web map 2011

Hamburg Global

www.hamburg-global.de/v1.0 |

Colors:

241,211,0 146,184,42 222,32,51 246,94,13 246,243,236

Anchors:

0,6,102 0,0,0

TYPEFACES: CartoGothic, Miso-Bold

Concept and design Ulf Treger. Icons by Ulf Treger, base map by Tamer Fawzy,

Backend support by Pragma Shift