Öffnet in einem neuen Tab
Zum Inhalt

Anil Kahraman · Webdesigner aus Hamburg

Design mit
Charakter.

Für Marken, die ihren
eigenen Weg gehen.

Ich gestalte Websites und setze sie um. Mit Erfahrung aus Agentur, E-Commerce und dem Gesundheitswesen.

Mit der Maus über Text & Porträt
Anil Kahraman mit Brille und Collegejacke

Konzeption trifft Umsetzung.

Ich mache aus Ideen digitale Auftritte, die Menschen verstehen und gerne nutzen.

Ein Blick fürs Ganze.
Ein Auge fürs Detail.

Mein Hintergrund verbindet Screendesign, Webentwicklung und visuelle Kommunikation. Ich denke Gestaltung und Technik zusammen – vom ersten Aufbau bis zur fertigen Website.

Mein Herzprojekt / Bei zollsoft

Hier steckt
mein Herz drin.

Websites für Praxen. Mit einem Blick für die Menschen dahinter.

zollsoft.Media

Ein Projekt, das mir
wirklich am Herzen liegt.

Hier kommen meine Freude am Gestalten, die technische Umsetzung und meine Liebe zum Detail zusammen. Als Webdesigner im Team von zollsoft betreue ich die Websites für zollsoft.Media und entwickle sie mit weiter.

Ich möchte, dass man diesen Auftritten die Sorgfalt ansieht – und dass sich jede Praxis darin wiederfindet. Genau das macht diese Arbeit für mich so besonders.

zollsoft.Media besuchen
01 / Gestaltung

Ein eigener Charakter.
Für jede Praxis.

02 / Umsetzung

Aus einer Idee wird
eine nutzbare Website.

03 / Feinschliff

Die kleinen Details
machen den Unterschied.

Aktuelle Arbeiten / zollsoft.Media

Mit Herz gemacht.
Jetzt online.

Fünf aktuelle Websites aus meiner Arbeit im zollsoft-Team. Jede mit ihrem eigenen Charakter.

Weitere Arbeiten entdecken
01 / Ausgewählte Projekte

Arbeiten.

Websites, digitale Markenwelten
und Gestaltung zum Anfassen.

Lars Schneider

Webdesign

Eine weitere Facette meiner Arbeit im Web: der Website-Auftritt für Lars Schneider.

Ebru Ergüner / EBL

Surprise Box · Konzept & Grafik

Von der digitalen Idee zum greifbaren Ergebnis: Gestaltung für die Surprise Box von Ebru Ergüner.

Mehr Arbeiten auf Behance
02 / Was ich für deinen Auftritt tue

Leistungen.

Eine gute Website beginnt mit dem richtigen Aufbau. Ich ordne Inhalte, entwickle die Gestaltung und führe Besucher mit klarer Navigation durch deinen Auftritt. Das Design passt zu deiner Marke und funktioniert auf kleinen wie großen Bildschirmen.

  • Inhaltsstruktur & Nutzerführung
  • Individuelles Screendesign
  • Responsive Gestaltung & Interaktion

Ich setze Entwürfe in WordPress um – mit wiederverwendbaren Elementen und einem durchgängigen Gestaltungssystem. So lassen sich Seiten erweitern und Inhalte im Alltag gut bearbeiten.

  • WordPress, Bricks & Automatic.css
  • HTML, CSS & JavaScript
  • Bearbeitbare Seiten & Komponenten

Deine Website hat schon eine Geschichte? Ich entwickle sie weiter: mit einer klareren Struktur, überarbeiteter Gestaltung und passenden Funktionen. Vorhandene Inhalte werden sinnvoll übernommen.

  • Bestehende Websites überarbeiten
  • Ladezeiten & mobile Darstellung
  • Technische SEO-Grundlagen

Ein Auftritt wirkt über die Website hinaus. Ich gestalte Grafiken für Kampagnen, Social Media und Print und übersetze die visuelle Sprache deiner Marke in unterschiedliche Formate.

  • Kampagnen- & Social-Media-Grafiken
  • Digitale Markenwelten
  • Printgestaltung & Werbemittel

Ich unterstütze beim Einpflegen und Aktualisieren von Inhalten und zeige dir, wie du deine Website selbst bearbeitest. Neue Anforderungen und kleinere Erweiterungen können wir gemeinsam weiterentwickeln.

  • Inhalte einpflegen & aktualisieren
  • Einweisung in die Seitenpflege
  • Erweiterungen nach Bedarf

So arbeite ich / Von der Anfrage bis zum Launch

Gute Websites.
Entstehen gemeinsam.

Ein klarer Ablauf. Viel Raum für deine Ideen. Und ein Blick für die Details, die aus einer Website deinen Auftritt machen.

Ein Blick in den Prozess01 / 06
Beispiel: mein eigener Auftritt
  1. 01
    Kennenlernen

    Erst die richtigen Fragen.

    Du erzählst mir von deinem Vorhaben. Wir sprechen über Ziele, Menschen und darüber, was deine Website wirklich leisten soll.

    Ein gemeinsames Briefing.

  2. 02
    Konzept

    Aus Gedanken wird ein Plan.

    Ich sortiere Inhalte, plane die Seitenstruktur und skizziere die wichtigsten Wege. So bekommt jede Seite eine Aufgabe – und dein Auftritt eine klare Richtung.

    Struktur, Inhalte und erste Skizzen.

  3. 03
    Design

    Jetzt bekommt die Idee Charakter.

    Farben, Schrift, Bilder und Details werden zu einem stimmigen Auftritt. Ein Styleguide hält die Gestaltung zusammen und macht Entscheidungen nachvollziehbar.

    Ein Entwurf mit eigenem Gestaltungssystem.

  4. 04
    Umsetzung

    Vom Entwurf ins echte Web.

    Ich setze das Design in WordPress um. Dabei denke ich Desktop und Smartphone zusammen und achte auf saubere Strukturen, Lesbarkeit und passende Bewegung.

    Eine Website, die sich richtig anfühlt.

  5. 05
    Feinschliff

    Die kleinen Dinge machen es rund.

    Wir gehen die Website gemeinsam durch. Ich arbeite dein Feedback ein und prüfe Inhalte, Navigation, Formulare und die Darstellung auf verschiedenen Bildschirmgrößen.

    Ein abgestimmter, geprüfter Stand.

  6. 06
    Launch

    Bereit für den ersten Eindruck.

    Nach deiner Freigabe geht die Website online. Mit einer verständlichen Übergabe weißt du, wie du deine Inhalte selbst pflegst und deinen Auftritt weiterführst.

    Deine Website. Bereit für den Alltag.

Der nächste Schritt?
Deine erste Idee.

Lass uns darüber sprechen ↗
AK / Styleguide

Anil Kahraman / Digitales Gestaltungssystem

Ein Auftritt.
Ein System.

So wird aus einer Gestaltung eine klare Linie. Dieses Beispiel dokumentiert die tatsächlichen Farben, Schriften und Gestaltungsregeln meiner Website.

01 / Eisblau & Tiefblau02 / Manrope03 / Portfolio V5

02 / Die Palette

Kühl in der Farbe.
Klar im Ausdruck.

#9BC8ED

Eisblau

RGB 155 · 200 · 237

--primary

Akzente, Links und aktive Zustände

#101820

Tiefblau

RGB 16 · 24 · 32

--base

Hintergrund und ruhige Grundfläche

#172431

Flächenblau

RGB 23 · 36 · 49

--secondary

Abgesetzte Bereiche und Panels

#EDF3FA

Licht

RGB 237 · 243 · 250

--text-light

Überschriften und Haupttext

#9EAFBF

Nebelblau

RGB 158 · 175 · 191

--text-light-muted

Begleittext und Beschriftungen

#304F6C

Konturblau

RGB 48 · 79 · 108

--ak-frame

Rahmen und grafische Details

Dunkle Flächen geben dem Auftritt Ruhe. Eisblau setzt gezielte Akzente. Heller Text sorgt für Orientierung; Konturblau bleibt eine grafische Farbe für Rahmen und Flächen.

03 / Die Stimme

Manrope. Mit Charakter.

Aa

Manrope

Regular 400 für großzügige Überschriften. Semibold 600 für Betonungen. Lokal eingebunden, mit Arial und sans-serif als Ersatz.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 · & ! ? ↗

Design mit
Charakter.

Display / Regular / eng laufend / großzügig gesetzt

Fließtext16 px · Zeilenhöhe 1,7
Hero / Desktopclamp(76 px, 7,8 vw, 124 px) · Zeilenhöhe 1,01
Hero / kleine Displaysclamp(56 px, 14,7 vw, 86 px); bis 360 px: 50 px
Über-mich-Headlineclamp(42 px, 4,8 vw, 70 px) · mobil 39 px
Schriftabstand / Hero−0,07 em
Textskala12 / 14 / 16 / 20 / 24 / 32 px

Die Hero-Schrift hat zusätzliche Zwischenstufen mit 8,5 vw und 8,9 vw. Die Angaben zeigen die komponentenspezifischen Regeln der V5, keine starre Schriftgröße für alle Überschriften.

04 / Der Rhythmus

Raum ist Teil des Designs.

Inhaltsbreite1.320 px + beidseitige Einzüge
Einzüge / Desktopclamp(22 px, 3,7 vw, 72 px)
Einzüge / Tablet & Mobil28 px bis 800 px · 22 px bis 600 px
Abstand zwischen Abschnittenclamp(80 px, 10 vw, 150 px)
↔XS / 12–15 px
↔S / 18–22,5 px
↔M / 24–30 px
↔L / 36–45 px
↔XL / 54–67,5 px
↔XXL / 81–101,25 px

Die Abstände wachsen fließend mit der Bildschirmbreite. Das Sechserraster zeigt das Prinzip; einzelne Komponenten verwenden ihre eigenen Spaltenaufteilungen.

05 / Die Details

Wenige Mittel.
Ein eigener Ausdruck.

Textlink / Hover & TastaturfokusEine Idee besprechen ↗

Eisblauer Akzent, feine Linie und ein gerichteter Pfeil. Der Fokus bleibt deutlich sichtbar.

Runde Aktion / Bewegung↗

Die runde Aktion reagiert mit Farbe und leichter Drehung. Flächen und Projektbilder bleiben überwiegend rechteckig.

Linien-Icons: 24er-Raster, 1,5 px Kontur, runde Linienenden. Trennlinien: 1 px mit geringer Deckkraft.

06 / Die Bewegung

Lebendig. Ohne laut zu werden.

Bewegungskurvecubic-bezier(0.16, 1, 0.3, 1)
Kleine Reaktionenca. 0,3–0,5 Sekunden, je nach Element
Große Bildbewegungenbis 0,9 Sekunden
BedienbarkeitBewegungspause und reduzierte Bewegung berücksichtigt

Der Maus-Reveal verbindet Portrait und Headline. Die Istanbul-Silhouette bringt leise Bewegung in den Hintergrund. Einblendungen und Übergänge unterstützen den Inhalt.

Beispiel-Styleguide / Anil Kahraman / Portfolio V5 / Stand 01.11.2026

Styleguide als HTML herunterladen ↗
03 / Der Mensch hinter dem Design

Gestalter im Kopf.
Macher im Alltag.

AK LogoHamburg.
Und offen für neue Ideen.

Hi, ich bin Anil.

Ich bin Webdesigner aus Hamburg. Meine Ausbildung im Screendesign hat die Grundlage gelegt; freie Projekte, Agenturarbeit und E-Commerce haben meinen Blick erweitert. Gestaltung, Technik und die Menschen hinter einem Projekt gehören für mich zusammen.

Seit Oktober 2022 arbeite ich bei zollsoft. Dort betreue ich die Webseiten für zollsoft.Media und arbeite an verschiedenen Projekten im Unternehmen.

Ich mag offene Gespräche, klare Absprachen und neue Herausforderungen. Am liebsten begleite ich eine Idee von der ersten Skizze bis zu dem Moment, in dem sie im Browser funktioniert.

DeutschTürkischEnglisch
Mein WerkzeugkastenWordPressBricks & ACSSHTML / CSS / JSAdobe Creative CloudLinkedIn ↗
04 / Stationen, die mich prägen

Ein Weg.
Viele Perspektiven.

  1. Okt. 2022 — Heute Aktuell

    zollsoft

    Webdesigner

    Webseiten für zollsoft.Media und verschiedene Projekte im Unternehmen. Mein aktueller Alltag verbindet Gestaltung, technische Umsetzung und die Weiterentwicklung digitaler Auftritte.

    Webdesign · WordPress · Healthcare
  2. Nov. 2018 — Juli 2022

    Staples / OfficeCentre

    Screendesign & digitales Marketing

    Vom Web-to-Print-Projekt bis zum Online-Marketing: Shopgestaltung, Landingpages, digitale Kampagnen und Social-Media-Inhalte. Dazu kamen Printprojekte und die Zusammenarbeit mit internationalen Teams.

    E-Commerce · Kampagnen · Print
  3. 2016 — 2018

    qbe Medienhaus

    Webdesign & Projektarbeit

    Websites und individuelle Designs auf WordPress-Basis, Anpassung von Themes, WooCommerce sowie Inhalte für Social Media. Kundenbriefings und die technische Umsetzung gehörten zusammen.

    Agentur · WordPress · Kundenkontakt
  4. Aug. 2014 — Mai 2022

    Heroes Designs

    Freie Projekte

    Webprojekte und Social-Media-Gestaltung für Agenturen und eigene Kunden. Ein Raum für unterschiedliche Branchen, neue Aufgaben und selbstständige Projektarbeit – parallel zu weiteren Stationen.

    Freelance · Konzeption · Social Media
  5. Dez. 2013 — Juni 2014

    taurus-media

    Webdesign & Social Media

    Frühe Praxiserfahrung mit WordPress, HTML, CSS und JavaScript. Dazu Grafikgestaltung und die Betreuung von Social-Media-Kanälen.

    Webpraxis · Grafik · Community
  6. Aug. 2012 — Juni 2014

    Medienschule Hamburg

    Ausbildung im Screendesign

    Hier begann die gestalterische Grundlage: Mediengestaltung, Medienproduktion und Projektorganisation. Abschluss als staatlich geprüfter Assistent für Screen Design sowie Fachhochschulreife.

    Gestaltung · Konzeption · Abschluss 2014

Ein eigener Blick. Ein eigener Auftritt.

Lass uns etwas
bewegen.

Deine Idee.
Unser nächster Schritt.
Du hast eine Idee?

Lass uns reden.

Eine neue Website, ein Relaunch oder eine gute Idee?
Erzähl mir, was du vorhast.

Zurück nach oben ↑
Aus meinem Portfolio

zollsoft.Media – mein Herzprojekt

Websites für Praxen, die mir besonders am Herzen liegen. Bei zollsoft.Media verbinde ich Gestaltung, Umsetzung und die Freude am Feinschliff. Als Webdesigner im zollsoft-Team betreue ich die Websites und entwickle sie mit weiter.

zollsoft.Media besuchen ↗Ansicht der zollsoft.Media-Website vom 01.11.2026. Meine Arbeit als Webdesigner im Team von zollsoft.
Portfolio-Arbeit: zollsoft.Media – mein Herzprojekt
Aus meinem Portfolio

Staples.de

Konzeption und grafische Umsetzung des Staples-Shops im Rahmen meiner Arbeit bei Staples / OfficeCentre. Zu meinem Aufgabenfeld gehörten außerdem Landingpages, digitales Marketing, Social Media und Gestaltung für Copy & Print.

Projekt auf Behance ansehen ↗Projektansicht aus meinem Portfolio. Sie zeigt den damaligen Gestaltungsstand.
Portfolio-Arbeit: Staples.de
Aus meinem Portfolio

Lars Schneider

Website-Projekt aus meinem Portfolio. Der Auftritt für Lars Schneider zeigt eine weitere Arbeit aus meinem Bereich Webdesign. Die Originalansicht findest du auch auf Behance.

Projekt auf Behance ansehen ↗Projektansicht aus meinem Portfolio. Sie zeigt den damaligen Gestaltungsstand.
Portfolio-Arbeit: Lars Schneider
Aus meinem Portfolio

Ebru Ergüner / EBL – Surprise Box

Konzept und grafische Gestaltung für Ebru Ergüner. Die Surprise Box verbindet Illustration, Farbe und Verpackung – ein Projekt, das meine Arbeit über den Bildschirm hinaus zeigt.

Projekt auf Behance ansehen ↗Projektansicht aus meinem Portfolio. Sie zeigt den damaligen Gestaltungsstand.
Portfolio-Arbeit: Ebru Ergüner / EBL – Surprise Box