Skip to content
Portfolio · Web design · Vienna

Design that goes live.

I design and build websites and web apps: the structure, a look of its own, and fast, accessible code, one person from the first sketch to the launch. This site is my portfolio.

See all 69 stylesWrite to me
Styles

69 styles, each a whole site.

Each style is a homepage for a different kind of business, from an architecture studio to a pixel game, and each has a whole example site to click through. A real site gets a style worked out from who it is for, then built as a design system so every page keeps to it.

See all 69 styles
SwissAn architecture studioMonochromeA fashion labelFlatA city bike serviceScandinavianA furniture makerBauhausAn art schoolNeo-brutalismA productivity appPop artA comic shopAcidA techno clubOversized typeA creative agencyCollageA second-hand bookshopNeumorphismA smart home appAuroraAn AI start-upPastelA sleep app3D illustrationA language appEditorialA magazineArt decoA hotel barDark academiaA writers' societyVictorianA barberGothicA tattoo studioY2KA pop festivalPixelAn indie gameMid-centuryA coffee roasterFrutiger aeroA weather appRetro OSA computer repair shopRisographA print studioHand-drawnAn illustratorMemphisA design meetupScrapbookA travel journal appStickerA hot sauce brandCottagecoreA country bakeryCyberpunkA gaming teamDark SaaSAn analytics productGlitchA security conferenceData terminalA market data serviceLow polyA ski resort
MinimalA photographerBento gridA product launchMaterialA trip plannerJapandiA tea houseBrutalistA record labelMaximalistA music festivalKinetic typeA type conferenceAnti-designA galleryDuotoneA run clubGlassmorphismA finance appClaymorphismA learning app for childrenLiquid glassA music playerMesh gradientA payments APISkeuomorphismA film camera appLuxuryA watchmakerNewspaperA local newsroomArt nouveauA floristOld moneyA sailing clubSeventiesA surf schoolVaporwaveA synth labelSixtiesA record shopSynthwaveAn arcade barWeb 1.0A model railway clubSpace ageA planetariumPlayfulA swimming schoolOrganicA skincare brandKawaiiA mochi shopPaper cutA picture book publisherBotanicalA plant shopGrainyA podcastTerminalA developer toolBlueprintAn engineering firmSci-fi HUDA drone makerSpatialA music app for headsets
What I do

Six layers, one site.

Pick a layer to see what it holds. Design and code come from the same person, so nothing gets lost between them.

What I do
Layers6
01 · Palette · type · themes

UI design and a design system

A look of its own, built as a small design system: a palette checked for contrast, a type scale, spacing, components and a light and a dark theme, so every new page fits without a designer.

  • A palette checked for contrast
  • A type scale and spacing
  • Components for every state
  • A light and a dark theme
  • Made as code, not only pictures
02 · Sitemap · flows · wireframes

UX and structure

Who visits, what they came for and the shortest way there: a sitemap, the main user journeys and wireframes you can click through before anything is designed.

  • Who visits, and what for
  • A sitemap
  • The main user journeys
  • Clickable wireframes
03 · Next.js · React · SEO

Websites

Multi-page websites in Next.js and React with clean addresses, structured data for search and AI answers, and pages that stay light.

  • Pages for every screen size
  • Clean addresses and structured data
  • Static pages that load fast
  • A link preview for every page
04 · Dashboards · editors

Web apps and interactive tools

Dashboards, configurators, calculators and editors that run in the browser, like every tool on tools.benibix.com.

  • Dashboards and editors
  • Calculators and configurators
  • Empty, loading and error states
  • Keyboard shortcuts
05 · WCAG · page weight

Accessible and fast

Keyboard and screen reader use, contrast to WCAG, and a weight budget per page that is checked on every build, not once before launch.

  • Contrast to WCAG
  • Keyboard and screen reader use
  • A weight budget per page
  • Checked on every build
06 · Hosting · updates

Launch and care

Domain, hosting, search console and statistics without cookies set up, then new pages and updates as the site grows.

  • Domain and hosting
  • Search console
  • Statistics without cookies
  • Updates as the site grows
Social media

Posts and videos, in the same look.

The site is where visitors land; posts and short videos are how they find it. Both come in the same colours, type and voice, with the words that go with them.

Social media
How I work

Five steps, no surprises.

Scroll and watch one run: a brief becomes a wireframe, the wireframe a design, the design a live site, and the site is looked after.

How I work
  1. 01 · Scope

    A clear goal, written down

    Every project starts with who the site is for and what it has to do, written down as a short scope: the pages, the goal and the look, before any design.

  2. 02 · Structure

    Structure before pixels

    A sitemap, the main journeys and clickable wireframes, so what goes where is settled before anything is designed.

  3. 03 · Design

    A look of its own

    Colours, type and components as a small design system, light and dark, shown on the real pages and refined step by step.

  4. 04 · Live

    Built, checked, live

    Code on a preview address, checked on every build, then launched on its own domain.

  5. 05 · Care

    Looked after after launch

    Hosting, updates and statistics without cookies keep running after the launch, and new pages come as the site grows.

The proof

This site is the sample.

Every page here and every tool on tools.benibix.com is designed and built by me, on one design system. Open any of them: that is the standard I work to.

All 13 web appsWhat it is built with
13
web apps live
2
themes on every page, light and dark
0
cookies or trackers
1
design system behind all of it
Use cases

Real projects, real screens.

Sites, web apps, posts and films I designed and built, live and in use. Open any of them.

All use cases
Questions

Before you write.

Who is behind this site?

Behnia Zarei, a developer in Vienna with more than ten years across software, data and AI. Every page here, the example sites, the tools on tools.benibix.com and the films are designed and built by me.

What do you design and build?

Websites, web apps and interactive tools, the design systems behind them, and the posts and short films that go with them: from the first sketch and the structure to the code, the launch and the care after.

Can I see work you have done?

Yes, on the use cases page: this site, tools.benibix.com with its web apps, benibix.com, and the videos and posts made for them. Sixty-nine example sites, one for every style, are on the styles page to click through.

Are the example sites real businesses?

No. Each of the sixty-nine example sites is for a made-up business, with made-up names, people and prices, to show how a style holds up on a whole site.

Do your sites work on phones and in dark mode?

Every page I build is designed for phones as well as large screens and checked at every width, with a light and a dark theme that follows the visitor's setting.

What can I write to you about?

Anything about design and the web: a question about one of the styles, feedback on this site, or an idea you want to share. I read every message and answer it myself.

Get in touch

Like what you see?

A question about a style, feedback on this site, or an idea to share: I read every message and answer it myself.

Write to me