3plusx.io

Visuelle Kommunikation und Webentwicklung

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

Portfolio

Startseite der Website Jüdische Schicksale in Werder (Havel) 1933-1945 mit einem Ausschnitt der Karte und einem kurzen Infotext über das Projekt
Gesamtansicht der Karte von Werder mit mehreren gelben Markierungen, die mit einer roten Linie verbunden sind

Web map 2023

Jüdische Schicksale in Werder (Havel) 1933 – 1945

audioguide.weltoffenes-werder.de/#splash |

Startseite der Website Jüdische Schicksale in Werder (Havel) 1933-1945 mit einem Ausschnitt der Karte und einem Infotext über das Projekt, Smartphone-Version
Gesamtansicht Karte von Werder mit mehreren gelben Markierungen, die mit einer roten Linie verbunden sind, Smartphone-Version
Eintrag zum Schicksal von Emilie Asch und Familie Scheel, Smartphone-Version

Colors:

223,186,72 237,107,106 7,79,96

Anchors:

9,36,75

SCHRIFTEN: IBMPlexMono, SpectralBold

TECH STACK: Tailwind CSS, Leaflet JS, Static HTML/CSS

Website + Karte von Ulf Treger (UI, Icons/Markers, Basemap Design)

Kund*in: Stadt-Land.move e.V. Aktionsbündnis Weltoffenes Werder

Startseite der Website REACH Hamburg mit einer Illustration auf der drei Erlenmeyerkolben abgebildet sind, jeweils in hellgrün, fuchsia und hellorange

Website 2023

REACH Hamburg

www.reach-hamburg.de |

Startseite der Website REACH Hamburg mit einer Illustration auf der drei Erlenmeyerkolben abgebildet sind, jeweils in hellgrün, fuchsia und hellorange, Smartphone-Version

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

SCHRIFTEN: Fabrikat Normal, Georgia, Remix Icon

TECH STACK: Foundation, Typo3, jQuery

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

Kund*in: Ökopol - Institut für Ökologie und Politik GmbH

Startseite der Website Pro Inklusion Hamburg mit dem Titel "Gemeinsam lernen, gemeinsam leben"
Startseite der Website Pro Inklusion Hamburg mit dem Titel "Gemeinsam lernen, gemeinsam leben", Nacht-Modus

Website 2023

Pro Inklusion Hamburg e.V.

www.pro-inklusion-hamburg.de |

Startseite der Website Pro Inklusion Hamburg mit dem Titel „Gemeinsam lernen, gemeinsam leben", Smartphone-Version
Startseite der Website Pro Inklusion Hamburg mit dem Titel "Gemeinsam lernen, gemeinsam leben", Smartphone-Version, Nacht-Modus

Colors:

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

Anchors:

0,0,0

SCHRIFTEN: AtkinsonHyperlegible

TECH STACK: Typo3, Foundation

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

Kund*in: Pro Inklusion Hamburg e.V.

Startseite der Website Treibgut Plattform mit einer Karte eines Wasserwegs zwischen Kassel und Bremerhaven im Hintergrund und drei Fotografien im Vordergrund, die die Reise mit dem Floß dokumentieren
Unterseite der Website, die Ausstellung zeigt, bei der das Floß präsentiert worden ist
Startseite der Website Treibgut Plattform mit einer Karte eines Wasserwegs zwischen Kassel und Bremerhaven im Hintergrund und drei Fotografien, die die Reise mit dem Floß dokumentieren, ein Abschnitt des Wasserwegs ist auf der Karte rot hervorgehoben

Web map 2022

Treibgut Plattform

treibgut-plattform.net/#splash |

Colors:

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

Anchors:

245,157,10 0,0,0

SCHRIFTEN: P22Mackinac-Medium$, IBMPlexMono-Regular

TECH STACK: Leaflet JS, Tailwind CSS, ORTE Backend

Website + Karte von Ulf Treger (Design, UI/UX, Code)

Kund*in: Felix Dreesen + Stephan Thierbach Projekt + Fotografien: Felix Dreesen + Stephan Thierbach

Startseite der Website der Bewegungsstiftung
Unterseite der Bewegungsstiftung mit dem Titel „Förderung entschieden“
Unterseite der Bewegungsstiftung mit Optionen wie „Infos anfordern“ oder „Spenden“
Unterseite der Bewegungsstiftung mit den Optionen „Stiften und spenden“, „Förderung“ und „Über uns“
Unterseite der Bewegungsstiftung mit Informationen zur Antragsstellung

Website 2021

Bewegungsstiftung

www.bewegungsstiftung.de/magazin |

Startseite der Bewegungsstiftung, Smartphone-Version
Unterseite der Bewegungsstiftung mit einer Veranstaltungsankündigung, Smartphone-Version
Unterseite der Bewegungsstiftung mit Optionen wie „Infos anfordern“ oder „Spenden“, Smartphone-Version
Unterseite der Bewegungsstiftung mit Optionen wie „Mitmachen“, „Förderung“ und „Magazin“, Smartphone-Version

Colors:

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

Anchors:

112,14,24

SCHRIFTEN: HKGrotesk, Georgia, Remix Icons

TECH STACK: Typo3, Foundation

Website von Felix Raeithel + Ulrike Schulz Basiert auf Design + Illustrationen von Felix Raeithel + Ulf Treger

Kund*in: Bewegungsstiftung

Startseite der Website Gedenken zum 76. Jahrestag der Befreiung des Stalag X B Sandbostel mit Gesamtansicht der Karte des Geländes
Unterseite der Website Gedenken zum 76. Jahrestag der Befreiung des Stalag X B Sandbostel mit einer Detailansicht der Karte des Geländes, in englischer, deutscher, französischer, russischer, italienischer, polnischer und niederländischer Sprache

Web map 2021

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

www.sandbostel76.de |

Startseite der Website Gedenken zum 76. Jahrestag der Befreiung des Stalag X B Sandbostel mit Gesamtansicht der Karte des Geländes, Smartphone-Version
Unterseite der Website Gedenken zum 76. Jahrestag der Befreiung des Stalag X B Sandbostel mit einer Detailansicht der Karte des Geländes und einer Portraitfotografie, Smartphone-Version
Startseite der Website Gedenken zum 76. Jahrestag der Befreiung des Stalag X B Sandbostel mit einer Detailansicht der Karte des Geländes, Smartphone-Version

Colors:

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

Anchors:

30,83,101 26,71,87

SCHRIFTEN: Bitter Regular, Work Sans

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

Website + Karte von Sebastian Fuchs (Code, Einreichungsformular) + Ulf Treger (Design/UI)

Kund*in: Gedenkstätte Lager Sandbostel

Startseite der Website GWA St. Pauli e.V.

Website 2021

GWA St. Pauli e.V.

gwa-stpauli.de |

Startseite der Website GWA St. Pauli e.V., Smartphone-Version

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

SCHRIFTEN: Work Sans, Font Awesome

TECH STACK: Typo3, Foundation, jQuery, Leaflet JS

Website von Ulrike Schulz (Typo3) + Ulf Treger (Design, UI/UX)

Kund*in: GWA St. Pauli e.V.

Startseite der Website Republikanischer Anwältinnen- und Anwälteverein e.V.
Unterseite der Website Republikanischer Anwältinnen- und Anwälteverein e.V. zum Thema „Über uns“
Unterseite der Website Republikanischer Anwältinnen- und Anwälteverein e.V. zum Thema „Informationsbrief“
Unterseite der Website Republikanischer Anwältinnen- und Anwälteverein e.V. zum Thema „Globale Gerechtigkeit“

Website 2020

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

www.rav.de/start |

Startseite der Website Republikanischer Anwältinnen- und Anwälteverein e.V., Smartphone-Version
Unterseite der Website Republikanischer Anwältinnen- und Anwälteverein e.V. zum Thema „Über uns“, Smartphone-Version
Unterseite der Website Republikanischer Anwältinnen- und Anwälteverein e.V. zum Thema „Globale Gerechtigkeit“, Smartphone-Version

Colors:

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

Anchors:

153,0,0

SCHRIFTEN: Atkinson-Hyperlegible

TECH STACK: Typo3, jQuery

Website von Felix Raeithel + Ulf Treger (Design Relaunch, UI/UX, 2020)

Kund*in: Republikanischer Anwältinnen- und Anwälteverein e.V. Basiert auf einem Entwurf von Erik Tuckow/Sichtagitation + Ulf Treger (2008/2009) Illustration: Erik Tuckow

Unterseite der Website der Rechtsanwältin Katrin Inga Kirstein mit dem Thema „Über mich“

Website 2020

Rechtsanwältin Katrin Inga Kirstein

www.kanzlei-kirstein.de |

Unterseite der Website der Rechtsanwältin Katrin Inga Kirstein mit dem Thema „Über mich“, Smartphone-Version

Colors:

51,150,117 0,0,0

Anchors:

51,150,117

SCHRIFTEN: Classic Sans Medium$, Yrsa

TECH STACK: Static HTML/CSS, jQuery

Website von Ulf Treger (Design)

Kund*in: Katrin Inga Kirstein

Startseite der Website Accessing.theater mit den Menüpunkten „Produktion“, „Programm“, „Publikum“ und „Politik“
Unterseite der Website Accessing.theater zum Thema „Produktion“
Unterseite der Website Accessing.theater zum Thema „Programm“
Unterseite der Website Accessing.theater zum Thema „Publikum“
Unterseite der Website Accessing.theater zum Thema „Politik“
Unterseite der Website Accessing.theater mit Kachelansicht der Beiträge
Unterseite der Website Accessing.theater mit einem Interview der Theaterpädagogin Marie Petzold vom Deutschen Schauspielhaus Hamburg in deutscher Lautsprache

Website 2020

Accessing.theatre

hoou.hfmt-hamburg.de/accessing_theatre |

Startseite der Website Accessing.theater mit den Menüpunkten „Produktion“, „Programm“, „Publikum“ und „Politik“, Smartphone-Version
Unterseite der Website Accessing.theater zum Thema „Produktion“, Smartphone-Version
Unterseite der Website Accessing.theater zum Thema „Programm“, Smartphone-Version
Unterseite der Website Accessing.theater zum Thema „Publikum“, Smartphone-Version
Unterseite der Website Accessing.theater zum Thema „Politik“, Smartphone-Version
Unterseite der Website Accessing.theater mit Kachelansicht der Beiträge, Smartphone-Version
Unterseite der Website Accessing.theater mit einem Interview der Theaterpädagogin Marie Petzold vom Deutschen Schauspielhaus Hamburg in deutscher Lautsprache, Smartphone-Version

Colors:

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

Anchors:

0,3,51 227,9,126

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

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

Website von Ulf Treger (Design, Production)

Kund*in: Hochschule für Musik und Theater Hamburg + Hamburg Open Online University. Projektleitung + Konzept: Anja E. Redecker

Startseite der Website Postcolonial Potsdam Audio Guide and Map
Startseite der Website Postcolonial Potsdam Audio Guide and Map
Überblick über die Karte von Potsdam und den Park Sanssouci mit mehreren blauen Markierungen, die mit einer roten Linie verbunden sind
Unterseite der Website mit einer Fotografie des Grottensaals zeigt

Web map 2020

Postcolonial Potsdam Audio Guide & Map

map.postcolonialpotsdam.org |

Startseite der Website Postcolonial Potsdam Audio Guide and Map, Smartphone-Version
Startseite der Website Postcolonial Potsdam Audio Guide and Map, Smartphone-Version
Überblick über die Karte von Potsdam und den Park Sanssouci mit mehreren blauen Markierungen, die mit einer roten Linie verbunden sind, Smartphone-Version
Unterseite der mobilen App mit einer Nahaufnahme eines Objekts mit dem Titel „Spitze des Kilimandscharo“, Smartphone-Version

Colors:

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

Anchors:

0,168,192 54,54,54

SCHRIFTEN: Classic Sans$, Systemfonts, Segoe UI

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

Website + Karte von Ulf Treger (Design/UI/UX, Production)

Kund*in: Postcolonial Potsdam (Anna von Rath + Elisabeth Nechutnys + Lina Fricke + Yann LeGall)

Startseite der Website Praxpack
Unterseite der Website Praxpack mit Materialien zu Themen wie „Mehrwegversandverpackungen“
Unterseite der Website Praxpack zum Thema „In den Medien“

Website 2020

Praxpack

www.praxpack.de |

Startseite der Website Praxpack, Smartphone-Version
Unterseite der Website Praxpack mit Materialien zu Themen wie „Mehrwegversandverpackungen“, Smartphone-Version

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

SCHRIFTEN: BrutalType$, Karla, Font Awesome

TECH STACK: Typo3, Foundation

Website + Logo von Ulf Treger

Kund*in: Ökopol - Institut für Ökologie und Politik GmbH

Startseite der Website Hamburger Arbeitsassistenz mit der Überschrift „Beruflich Integration von Menschen mit Behinderung“
Unterseite der Website Hamburger Arbeitsassistenz zum Thema „Leitbild“
Unterseite der Website Hamburger Arbeitsassistenz zum Thema „Maßnahmen“
Unterseite der Website Hamburger Arbeitsassistenz zum Thema „Angebote für Kund*innen“

Website 2020

Hamburger Arbeitsassistenz

www.hamburger-arbeitsassistenz.de |

Startseite der Website Hamburger Arbeitsassistenz mit der Überschrift „Beruflich Integration von Menschen mit Behinderung“, Smartphone-Version
Unterseite der Website Hamburger Arbeitsassistenz zum Thema „Leitbild“, Smartphone-Version
Unterseite der Website Hamburger Arbeitsassistenz zum Thema „Maßnahmen“, Smartphone-Version
Unterseite der Website Hamburger Arbeitsassistenz zum Thema „Angebote für Kund*innen“, Smartphone-Version

Colors:

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

Anchors:

0,0,0 20,104,160

TECH STACK: Typo3, Foundation, jQuery, Leaflet JS

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

Kund*in: HAA Hamburger Arbeitsassistenz gGmbH

Startseite der Website Polizeirechtdatenbank der Republikanischer Anwältinnen- und Anwälteverein e.V. mit einer Suchleiste für Suchworte, Schlagworte, Gerichte, Normen oder Aktenzeichen
Unterseite der Website Polizeirechtdatenbank der Republikanischer Anwältinnen- und Anwälteverein e.V. mit einem Suchergebnis zum Thema „Durchsuchung um 04.30 Uhr wegen einer Abschiebung in der Regel unzulässig“
Unterseite der Website Polizeirechtdatenbank der Republikanischer Anwältinnen- und Anwälteverein e.V. mit einem Suchergebnis zum Thema „Anlasslose polizeiliche Identitätsfeststellung rechtswidrig“

Web application 2019

Polizeirechtsdatenbank des RAV

www.rav-polizeirecht.de |

Unterseite der Website Polizeirechtdatenbank der Republikanischer Anwältinnen- und Anwälteverein e.V. mit einem Suchergebnis zum Thema „Anlasslose polizeiliche Identitätsfeststellung rechtswidrig“, Smartphone-Version

Colors:

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

Anchors:

140,16,41 20,104,160

TECH STACK: Ruby on Rails, Apache Solr, jQuery, Foundation

Webanwendung von Ulf Treger (Konzept, UI/UX)

Kund*in: Republikanischer Anwältinnen- und Anwälteverein e.V. Backend Entwicklung zusammen mit: Pragma Shift

Startseite der Website Die Bildbeschaffer mit Menüpunkten wie „Einkauf“, „Recherche“ und „Beratung“
Unterseite der Website Die Bildbeschaffer zum Thema „Recherche“
Unterseite der Website Die Bildbeschaffer mit den Kommunikationsangeboten als Overlay

Website 2019

Die Bildbeschaffer

www.die-bildbeschaffer.de/de |

Startseite der Website Die Bildbeschaffer, Smartphone-Version
Unterseite der Website Die Bildbeschaffer zum Thema „Recherche“, Smartphone-Version
Unterseite der Website Die Bildbeschaffer mit einem Auftragsformular, Smartphone-Version

Colors:

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

Anchors:

23,121,186 20,104,160

SCHRIFTEN: Signika, Font Awesome

TECH STACK: Ruby on Rails, Foundation, jQuery

Website von Ulf Treger (Design, UI/UX, Icons, Code)

Kund*in: Die Bildbeschaffer. Content: Die Bildbeschaffer, Fotos: Simon Puschmann, Backend/API mit: Pragma Shift. HTML/CSS: Felix Raeithel

Startseite des KOK Statistiktools
Unterseite des KOK Statistiktools mit einer Tabellenansicht
Unterseite des KOK Statistiktools mit einem Dougnut-Diagramm

Web application 2019

KOK Statistiktool

Startseite des KOK Statistiktools, Smartphone-Version

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

SCHRIFTEN: Fantasque Sans Mono, Roboto Light

TECH STACK: Ruby on Rails, D3.js, jQuery

Webanwendung von Sebastian Fuchs + Nina Siessegger + Ulf Treger

Kund*in: KOK - Bundesweiter Koordinierungskreis gegen Menschenhandel e.V. Konzept + UI/UX: Ulf Treger Basisversion mit: Pragma Shift (2018)

Startseite der Webanwendung Orte Backend mit einer Satellitenkarte von Hamburg, in englischer Sprache
Unterseite der Webanwendung Orte Backend mit einer Satellitenkarte von Hamburg mit roten Punkten, die Parks in Hamburg Altona markieren
Unterseite der Webanwendung Orte Backend mit einer typologischen Ansicht, auf der mit roten Punkten Parks in Hamburg Altona markiert sind

Web application 2018

ORTE Backend

orte.link |

Startseite der Webanwendung Orte Backend mit einer Satellitenkarte von Hamburg, Smartphone-Version

Colors:

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

Anchors:

SCHRIFTEN: Work Sans, Foundation Icons

TECH STACK: Ruby on Rails, Leaflet JS

Webanwendung von Ulf Treger (Konzept, Code, Design) + Sebastian Fuchs

Ein Web-GIS zur Erstellung und Bearbeitung von digitalen Karten und verschiedenen Medien (Text, Bilder, Audios). Unter einer Open-Source Lizenz veröffentlicht.

Startseite der Website Media and Socialities, in englischer Sprache
Unterseite der Website Media and Socialities zum Thema „Walk“
Unterseite der Website Media and Socialities zum Thema „Presentation“
Unterseite der Website Media and Socialities zum Thema „Context“
Unterseite der Website Media and Socialities mit einer Fotografie eines Hochhauses
Unterseite der Website Media and Socialities mit einer gezeichneten Karte der Bahnhofsvorstadt in Bremen

Web map 2018

Media & Socialities

workshop.citydataexplosion.de |

Colors:

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

Anchors:

SCHRIFTEN: Dejavu Sans Mono, Kingthings Typewriter, Roboto

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

Website + Karte von Ulf Treger (Konzept, Design)

Kund*in: Kunst & Kulturverein Spedition e.V. Fotos + Videos + Zeichnungen: Workshopteilnehmende Editing: Thomas Böker + Stephan Thierbach + Ulf Treger Korrekturen: Rima Radhakrishnan

Startseite der Website Veddel Anbau Nord

Website 2018

Veddel Anbau Nord

www.veddel-anbau-nord.de |

Startseite der Website Veddel Anbau Nord, Smartphone-Version

Colors:

137,160,44 222,222,102

Anchors:

SCHRIFTEN: CA SpyRoyal, Roboto

TECH STACK: DokuWiki

Website von Ulf Treger (Design)

Kund*in: Neue Schauspielhaus GmbH Content: Nicole Vrenegor + Ulf Treger

Startseite der Website Lesbisch Schwule Filmtage Hamburg mit den Menüpunkten „Unterstütze die Filmtage!“, „Werde Teil des push-clubs!“ und „Reiche deinen Film ein!“, in deutscher und englischer Sprache
Startseite der Website Lesbisch Schwule Filmtage Hamburg mit den Menüpunkten „Unterstütze die Filmtage!“, „Werde Teil des push-clubs!“ und „Reiche deinen Film ein!“, in deutscher und englischer Sprache

Website 2018

International Queer Film Festival

www.hiqff.de |

Startseite der Website Lesbisch Schwule Filmtage Hamburg mit den Menüpunkten „Mach mit! Take part!“ und „Neuigkeiten“, Smartphone-Version

Colors:

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

Anchors:

SCHRIFTEN: Aleo, Open Sans, Font Awesome

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

Website von Ulf Treger (Design, Code)

Kund*in: Querbild e.V. Logo: Bax Backend/Frontend + API mit: Pragma Shift

Startseite der Website Treffen Total 2018 Map mit einer Karte von Hamburg

Web map 2018

Treffen Total 2018 Map

map.treffentotal.de |

Startseite der Website Treffen Total 2018 Map mit einer Karte von Hamburg, Smartphone-Version
Unterseite der Website Treffen Total 2018 Map mit einer Karte von Hamburg mit mehreren verschiedenfarbigen Markierungen, Smartphone-Version
Unterseite der Website Treffen Total 2018 Map mit einer Karte des Geländes von Kampnagel mit mehreren verschiedenfarbigen Markierungen, Smartphone-Version
Unterseite der Website Treffen Total 2018 Map mit einer Karte des Geländes von Kampnagel mit mehreren verschiedenfarbigen Markierungen, Smartphone-Version
Unterseite der Website Treffen Total 2018 Map mit einer Karte von Hamburg mit mehreren verschiedenfarbigen Markierungen, Smartphone-Version

Colors:

242,213,0 102,102,102

Anchors:

SCHRIFTEN: Open Sans

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

Website + Karte von Ulf Treger (Design)

Startseite der Website zaak klubraum

Website 2018

zakk klubraum

zakk.klubraum.org |

Colors:

7,137,139 64,81,111

Anchors:

0,0,0 0,5,85

SCHRIFTEN: Royal Sans Black, Royal Sans Bold$

TECH STACK: Ruby on Rails, Foundation, jQuery

Website von Ulf Treger (Design, Production)

Kund*in: zakk klubraum

Startseite der Website how to hear the invisible mit einer Karte von Hamburg und drei kreisförmigen Markierungen mit den Titeln „Motiv“, „Stille“ und „Feedback“
Startseite der Website how to hear the invisible mit einer Karte von Hamburg und drei kreisförmigen Markierungen mit den Titeln „Motiv“, „Stille“ und „Feedback“

Web map 2017

How to hear the invisible

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

Unterseite der Website how to hear the invisible mit einer Karte von Hamburg und einer kreisförmigen Markierung mit den Titeln „Motiv“, Smartphone-Version
Unterseite der Website how to hear the invisible mit einer Karte von Hamburg und einer kreisförmigen Markierung mit den Titeln „Feedback“, Smartphone-Version

Colors:

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

Anchors:

SCHRIFTEN: Avenir$

TECH STACK: Static HTML/CSS

Website + Karte von Ulf Treger (Design, Code)

Kund*in: Katharina Pelosi Sound + Montage: Katharina Pelosi Sprecher*innen: Simone Dede Ayivi + Hauke Heumann + Toni Jessen + La Toya Manly Spain

Startseite der Website Jobplattform der Hamburger Arbeitsassistenz
Unterseite der Website Jobplattform der Hamburger Arbeitsassistenz mit dem Login für Nutzer*innen

Web application 2017

JobPlattform der Hamburger Arbeitsassistenz

Startseite der Website Jobplattform der Hamburger Arbeitsassistenz, Smartphone-Version
Unterseite der Website Jobplattform der Hamburger Arbeitsassistenz mit dem Login für Nutzer*innen, Smartphone-Version

Colors:

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

Anchors:

SCHRIFTEN: OpenSans, FoundationIcons

TECH STACK: Ruby on Rails, Foundation, jQuery

Webanwendung von Ulf Treger (Design, Code)

Kund*in: HAA Hamburger Arbeitsassistenz gGmbH

Startseite der Website Metrozones: Schule für städtisches Handeln
Unterseite der Website Metrozones: Schule für städtisches Handeln zum Begriff „Hacking Public Spaces“
Unterseite der Website Metrozones: Schule für städtisches Handeln zum Begriff „Multilingualität“

Website 2017

metroZones: Schule für städtisches Handeln

schoolbook.metrozones.info |

Colors:

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

Anchors:

SCHRIFTEN: Merriweather, Dosis Bold

TECH STACK: Jekyll, Foundation

Website von Ulf Treger (Design, Production)

Kund*in: MetroZones e.V. Screendesign basiert auf einer Buchgestaltung von Tanja van de Loo

Startseite der Website KOOFRA Koordinierungsstelle gegen Frauenhandel
Unterseite der Website KOOFRA Koordinierungsstelle gegen Frauenhandel, auf der Informationen zu Themen wie Arbeitsausbeutung und sexuelle Ausbeutung in 35 Sprachen zu Verfügung stehen
Unterseite der Website KOOFRA Koordinierungsstelle gegen Frauenhandel, in russischer Sprache

Website 2017

KOOFRA Koordinierungsstelle gegen Frauenhandel

koofra.de |

Startseite der Website KOOFRA Koordinierungsstelle gegen Frauenhandel, Smartphone-Version
Unterseite der Website KOOFRA Koordinierungsstelle gegen Frauenhandel, auf der Informationen zu Hilfsangeboten in 35 Sprachen zu Verfügung stehen, Smartphone-Version
Unterseite der Website KOOFRA Koordinierungsstelle gegen Frauenhandel, in russischer Sprache, Smartphone-Version

Colors:

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

Anchors:

0,8,136 0,2,34

SCHRIFTEN: Lato, Open Sans, Roboto Slab

TECH STACK: Jekyll, Foundation, jQuery

Website von Ulf Treger (Design, Production)

Kund*in: KOOFRA Koordinierungsstelle gegen Frauenhandel

Startseite der Website Lern- und Erinnerungsort Afrikanisches Viertel in Berlin mit einer Gesamtansicht der Karte des Viertels mit mehreren blau-weißen Markierungen in Sprechblasenform und einem Textfeld
Startseite der Website Lern- und Erinnerungsort Afrikanisches Viertel in Berlin mit einem kurzen Infotext über das Projekt mit mehreren blau-weißen Markierungen in Sprechblasenform
Startseite der Website Lern- und Erinnerungsort Afrikanisches Viertel in Berlin mit einer Gesamtansicht der Karte des Viertels mit mehreren blau-weißen Markierungen in Sprechblasenform und einem Textfeld

Web map 2014

Lern- und Erinnerungsort Afrikanisches Viertel in Berlin

www.3plusx.de/leo-site |

Startseite der Website Lern- und Erinnerungsort Afrikanisches Viertel in Berlin mit einer Gesamtansicht der Karte des Viertels mit mehreren blau-weißen Markierungen in Sprechblasenform und einem Textfeld, Smartphone-Version
Startseite der Website Lern- und Erinnerungsort Afrikanisches Viertel in Berlin mit einer Gesamtansicht der Karte des Viertels mit mehreren blau-weißen Markierungen Sprechblasenform, Smartphone-Version
einer Gesamtansicht der Karte des Viertels mit mehreren blau-weißen Markierungen in Sprechblasenform und einem Textfeld, Smartphone-Version

Colors:

0,140,186 51,51,51

Anchors:

0,140,186 0,120,160

SCHRIFTEN: Franklin Gothic Book$

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

Website + Karte von Ulf Treger (Design)

Kund*in: Bezirksamt Mitte von Berlin Audio + Texte: Franziska Zimmermann Editor: Yonas Endrias

Startseite der Website New Hamburg mit Menüpunkten wie „Über uns“, „Orte“ und „Akteuer*innen“

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

SCHRIFTEN: Roboto, Chunk Five

TECH STACK: Wordpress, Foundation, jQuery

Website von Tanja van de Loo + Felix Raeithel + Ulf Treger

Kund*in: Neue Schauspielhaus GmbH

Startseite der Website Vereinigung demokratischer Juristinnen und Juristen mit den Menüpunkten „Über uns“, „Aktivitäten“ und „Mitteilungen“

Website 2013

Vereinigung Demokratischer Juristinnen und Juristen e.V. (VDJ)

Unterseite der Website Vereinigung demokratischer Juristinnen und Juristen zum Thema „Aktuelles“, Smartphone-Version

Colors:

228,42,27 249,248,245

Anchors:

0,6,102 0,0,0

SCHRIFTEN: Open Sans

TECH STACK: Typo3

Website von Felix Raeithel + Thomas Böker + Ulf Treger

Kund*in: Vereinigung Demokratischer Juristinnen und Juristen e.V.

Startseite der Website Hamburg Global mit einer Karte von Hamburg und mehreren mehrfarbigen Markierungen

Web map 2011

Hamburg Global

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

Startseite der Website Hamburg Global mit einer Karte von Hamburg und mehreren mehrfarbigen Markierungen, Smartphone-Version

Colors:

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

Anchors:

0,6,102 0,0,0

SCHRIFTEN: CartoGothic, Miso-Bold

Website + Karte von Ulf Treger (Konzept, Design) + Tamer Fawzy (Basiskarte)

Kund*in: Eine Welt Netzwerk Hamburg e.V. Backend: Pragma Shift