01 / 04
Websites
Responsive interfaces, layout, interaction and front-end development — explored through complete concept builds and smaller experiments.
- Written by hand
- Every width
- Fast by default
Alaa Abbod, Herne, Germany
Four disciplines
Design and development are not separate halves of my work. These four areas are where I keep testing how visual thinking and technical thinking can strengthen each other.
02 / 04
Mobile apps
Interface systems for mobile — screens, navigation, states, flows and interaction patterns for iOS and Android.
- iOS and Android
- Flows, not screens
- Every state drawn
03 / 04
E-commerce
Digital storefront concepts focused on product presentation, hierarchy, browsing and checkout interaction.
- Own the journey
- Payments stay with a provider
- Your data, your accounts
04 / 04
Graphic design
Logos, identity systems, posters, advertising pieces and visual studies built around type, colour and composition.
- Marks and construction
- Full identity systems
- Campaign and advertising
true of every build
The same practice, whichever discipline it is
-
Scoped before it starts
Every project gets a real plan before any code or design work begins.
-
Iterated, not first-drafted
Revisions are part of the process, not an afterthought bolted onto the end.
-
Set up properly
Domain, hosting and repository set up the way I would want to come back to them.
-
Readable source
Any developer, including a future me, can open the files and read what they say.
-
Accessible from the start
Built to WCAG 2.1 AA practice while it is made, not audited on afterwards.
-
Nothing left half-finished
A project ships as a complete, coherent experience or it does not ship at all.
-
One person, both halves
The same hands do the design and the build, so nothing gets lost between them.
-
Made to be explored
Every build here is meant to be opened, clicked through and read, not just looked at.
not a discipline, a practice
Measuring accessibility and performance
A scanner reads markup. It cannot press Tab, and it cannot tell you that the thing it just passed is unusable. So checking a build by hand — the keyboard, the contrast, what still moves under reduced motion — is part of how I finish anything I make, this site included.
Where a number gets published it carries the date it was measured and the method beside it, so it is checkable rather than taken on faith. Here is this site's own: on 26 August 2026, axe-core 4.11 found 5 violations across 204 scans — all 102 documents at two widths, under prefers-reduced-motion so every reveal had settled. All five are one element: a heading whose accent half is the site's own green on a light ground, which the owner chose knowingly after it was measured at 1.33:1. That is the automated half and nothing more. The keyboard walk above is not inside that number, and no manual screen-reader pass has been run on this site.
What a pass consists of
- A keyboard walk of every interactive control, by hand
- Focus order, focus visibility and focus traps
- Contrast, measured, with the pairs that fail listed
- Headings, landmarks, names and roles
- Reduced-motion behaviour, and what still moves
- Load and interaction cost, on a throttled connection
three of the ten, picked for range
You can run every one of them
All ten projects on this site are self-initiated, all ten run in the browser you already have open, and each one has a write-up saying what it set out to do and what fought back.
Arke Estates
Editorial restraint, self-initiated, 2025
Signalform
Dense product interface, self-initiated, 2026
Root & Ritual
A storefront, end to end, self-initiated, 2020
Each one started from a different question.
whichever of the four it is
See how it comes together
The ten projects on this site walk through the decisions behind each of these four areas — what worked, what did not, and what I would do differently next time.