File no. 001Akte Nr. 001 UX/UI · HTML + CSS

Gabinete
Design

UX/UI Design where ideas get designed and builtwo Ideen gestaltet und gebaut werden research · design · codeResearch · Design · Code

Hi, I'm
Gabriella Hi, ich bin
Gabriella

I'm a UX/UI designer who works across the whole process, from the first user interview to the last line of code. I turn messy problems into calm, friendly interfaces that people enjoy using. And because I build in HTML and CSS myself, my designs are ready for the browser from day one. Ich bin UX/UI-Designerin und begleite Projekte ganzheitlich – vom ersten Nutzerinterview bis zur Umsetzung im Code. Dabei verwandle ich komplexe Herausforderungen in intuitive, freundliche Interfaces, die Menschen gerne nutzen. Da ich meine Designs auch selbst mit HTML und CSS umsetze, denke ich die technische Machbarkeit von Anfang an mit.

See my workZu meiner Arbeit
Gabriella laughing at a café table, chin resting on her hands
“Good design feels like someone listened.” „Gutes Design fühlt sich an, als hätte jemand zugehört.“
my mottomein Motto

I start every project by listening: talking to users, watching where they get stuck and finding the one problem worth solving. From there I move to wireframes, Figma prototypes and usability tests, and I finish with clean, responsive HTML + CSS. Designers and developers both get someone who speaks their language. Jedes Projekt beginnt bei mir mit Zuhören: mit Nutzer:innen sprechen, sehen, wo sie hängen bleiben, und das eine Problem finden, das sich zu lösen lohnt. Danach geht es zu Wireframes, Figma-Prototypen und Usability-Tests, und am Ende steht sauberes, responsives HTML + CSS. Design und Entwicklung bekommen jemanden, der beide Sprachen spricht.

  • Figma
  • FigJam
  • HTML
  • CSS
  • User researchNutzerforschung
  • Usability testsUsability-Tests
  • AccessibilityBarrierefreiheit

Selected
workMeine
Arbeit

Each taken from first research to final design. Jeweils von der ersten Recherche bis zum fertigen Design.

No. 01
Homepage of Leopold Lahr Psychotherapie, Hamburg
Homepage of Vanessa Strecker Psychotherapie, Hamburg
Homepage of Kirschbaum Psychotherapie, Hamburg

Live onlineOnline live

Psychotherapy practicesPsychotherapie-Praxen

3 websites · UX/UI design, HTML & CSS3 Websites · UX/UI-Design, HTML & CSS

Three websites for private psychotherapy practices in Hamburg. Each has its own calm look, and all share a clear structure, so people looking for therapy quickly find what matters: services, approach, costs and an easy way to request a first appointment. On any device. Drei Websites für private Psychotherapie-Praxen in Hamburg. Jede hat ihren eigenen ruhigen Look, alle teilen eine klare Struktur, damit Menschen auf der Suche nach einem Therapieplatz schnell finden, was wichtig ist: Leistungen, Arbeitsweise, Kosten und ein einfacher Weg zum ersten Termin. Auf jedem Gerät.

No. 02
Blatt & Bohne checkout page design
Blatt & Bohne book detail page design
Blatt & Bohne homepage design

Clickable prototypeKlickbarer Prototyp

Blatt & Bohne

Figma prototype · bookshop & café websiteFigma-Prototyp · Website für Buchladen & Café

A website for an independent bookshop with a café corner. I designed the whole journey, from homepage to book page, cart and checkout, with Click & Collect pickup times, guest checkout and an events calendar. Website für einen unabhängigen Buchladen mit Café-Ecke. Ich habe den ganzen Weg gestaltet, von der Startseite über die Buchseite bis zu Warenkorb und Checkout, mit Click-&-Collect-Abholzeiten, Gastbestellung und Veranstaltungskalender.

View prototypePrototyp ansehen ↗
No. 03
THE CLIMB homepage section with live occupancy and entry points
THE CLIMB session booking page design
THE CLIMB homepage design: Klettern im Herzen von Hamburg

Clickable prototypeKlickbarer Prototyp

The Climb

Figma prototype · bouldering gym websiteFigma-Prototyp · Website für eine Boulderhalle

A bold website for a bouldering gym in Hamburg. Seven screens, from a live occupancy bar on the homepage to a three-step booking flow: pick a ticket, choose a time slot and see how busy the hall will be, then pay. Eine kräftige Website für eine Boulderhalle in Hamburg. Sieben Screens, von der Live-Auslastung auf der Startseite bis zur Buchung in drei Schritten: Ticket wählen, Zeitslot aussuchen und dabei sehen, wie voll die Halle sein wird, dann bezahlen.

View prototypePrototyp ansehen ↗
No. 04
tiko splash screen with the mascot Tiko
tiko home screen with daily goal and current lesson
tiko lesson: tap the right picture

Clickable prototypeKlickbarer Prototyp

tiko

Figma prototype · language app for kidsFigma-Prototyp · Sprach-App für Kinder

A playful language-learning app for children aged 4 to 12, with Tiko, a speech-bubble mascot, as their guide. Ten screens: picking a language and a buddy, a home screen with a daily goal, a learning path, picture and speaking exercises, a sticker book as a reward and a grown-ups corner with screen-time limits. Eine verspielte Sprachlern-App für Kinder von 4 bis 12, mit dem Sprechblasen-Maskottchen Tiko als Begleiter. Zehn Screens: Sprache und Buddy wählen, Startseite mit Tagesziel, Lernpfad, Bild- und Sprechübungen, ein Stickerbuch als Belohnung und ein Elternbereich mit Zeitlimit.

View prototypePrototyp ansehen ↗

How I
workSo arbeite
ich

Five steps, borrowed from design thinking. Fünf Schritte, angelehnt an Design Thinking.

  1. 1

    UnderstandVerstehen

    Interviews, surveys, watching real people.Interviews, Umfragen, echten Menschen zuschauen.

  2. 2

    DefineDefinieren

    Personas, journeys, one clear problem.Personas, Journeys, ein klares Problem.

  3. 3

    IdeateIdeen

    Sketches, Crazy 8s, sticky notes.Skizzen, Crazy 8s, Post-its.

  4. 4

    PrototypePrototyp

    Wireframes to clickable Figma.Von Wireframes zu klickbarem Figma.

  5. 5

    Test & buildTesten & bauen

    Usability tests, then HTML + CSS.Usability-Tests, dann HTML + CSS.

Let's talk!Lass uns reden!

I'm open to new roles and projects in UX/UI design. Whether you're hiring, have a project in mind or just want to say hi, I'd love to hear from you. Ich bin offen für neue Stellen und Projekte im UX/UI-Design. Ob du jemanden suchst, ein Projekt planst oder einfach hallo sagen willst: Ich freue mich, von dir zu hören.

↑ Top↑ Oben