▲ PromNET

2026. május 2. · #design #ux #product-decision #pozicionalas

Engineer-view redesign — miért NEM hasonlít WordPress-adminra

Az /app/* alá bevezettünk egy Linear-stílusú design-systemet: eyebrow + serif-italic + card-eng + amber-accent. Megosztó döntés, indoklással. Miért NEM Bootstrap-szerű, és kinek nem fog tetszeni.

Engineer-view redesign — miért NEM hasonlít WordPress-adminra

A magyar SaaS-piacon két dominate design-szótár van:

  1. WordPress-admin-stílus — szürke, tábla-based, sima, “nem-szép-de-funkcionális”
  2. Shopify/Stripe-stílus — kék-fehér, bootstrap-szerű, bezzeg-szép-de-előrelátható

A PromNET-en az /app/* alatti dashboard egyik sem. A választott megközelítés: engineer-view — Linear-stílusú typography-fókuszú felület, amber accent-tel, JetBrains Mono monospace-szel, és Instrument Serif italic kiemelésekkel. Megosztó döntés — nem mindenkinek tetszik, és ez OK.

Ebben a posztban arról, miért így döntöttem, mire jó, és mire NEM jó.

A motiváció

A PromNET célközönsége fejlesztő-affin magyar SMB: junior-mid fejlesztők, hobbi-projektezők, technikailag-érdeklődő vállalkozók. NEM a “kapok-egy-CMS-t-és-publikálok”-felhasználó (azt a vizuális szerkesztő szolgálja ki — ott Bootstrap-szerű design van).

A /app/* alatti dashboard a haladó-felhasználók területe:

Ezeknél a fejlesztői esztétika előny: a felhasználó tudja, mit csinál, a felület ne legyen lebutítva marketing-pop-up-okkal.

A választott design-elvek

1. Typography-fókusz, nem ikon-fókusz

A felirat-mono (label-mono) classzal a feliratok JetBrains Mono-t használnak. Ez technikai-feeling — emlékeztet arra, hogy a felület valódi mérnöki munka, nem marketing-felület.

<p class="eyebrow">CLOUD · ÚJ PROJEKT</p>
<h1 class="text-3xl font-semibold">
  <span class="serif-italic text-pn-accent">Új</span> projekt
</h1>

Az eyebrow-felirat (rövid, monospace, dim-color) + serif-italic kiemelés a címben — ez a Linear-Stripe-Vercel-Notion-iskola, és nagyon szándékosan választott. Nem tetszetős mindenkinek (főleg “klasszikus magyar admin”-szokáshoz), de a fejlesztő-affin felhasználónak rögtön kommunikál.

2. Amber accent, nem kék

A platform fő-színe amber (#f59e0b). NEM kék (Bootstrap-default), NEM zöld (Hostinger-szótár), NEM lila (modern SaaS-divat). Az amber:

A “PromNET amber” nem véletlenül lett választva: a magyar zászló- piros + fehér kontextusban az amber egy kompromisszum, ami nem nemzeti-tematikus, de meleg és határozott.

3. Card-eng + corner-tl/br — engineer-view kártyák

A kártyák a card-eng osztállyal engineer-stílust kapnak:

Ez a dot-grid-bg háttérrel kombinálva (apró pontok rácsos mintázatban) CAD-program-szerű asszociációt ad. Mérnöki.

4. Stripes-warn — figyelmeztetés-csíkok

A figyelmeztető üzeneteknek piros stripe-os hátteret adunk (stripes-warn), ami építkezési-stop-jelzéshez hasonlít. Nem sima piros banner — rétegezett, trafikálható, határozott.

Ez specifikus a PromNET-re — más SaaS-on nem láttam. Védjegy- elem lesz.

A döntés indoklása

A “miért nem WordPress-admin-szerű?” kérdésre az egyértelmű válasz: a célközönség más. WordPress-adminra átlag-magyar-vállalkozó- néni néz egy reggel — neki nem mérnöki felület kell, hanem egyértelmű, ismerős.

A PromNET-célközönsége NEM néni-vállalkozó. Junior-mid fejlesztő, vagy technikailag-érdeklődő SMB-tulajdonos, akinek a Linear-Stripe- Notion-stílus ismerős és barátságos. Aki nem ezt szereti, az a vizuális szerkesztő-flow-ra megy (ott klasszikus Bootstrap-szerű felület van).

Mire NEM jó

Hogy ne ködösítsek: az engineer-view-stílus ELVISELHETŐ csak akkor, ha a célközönség is ezt tudja olvasni. Konkrétan rosszul jön át:

A két felület: marketing vs. dashboard

A PromNET-nek kettő különböző felülete van:

TerületStílusCélközönség
/, /csomagok, /blog`Klasszikus marketing — kép-orientált, kék-amber-fehér mixMindenki, aki “nézelődik”
/app/*Engineer-view — typography-fókusz, sötét, monospaceBejelentkezett fejlesztő-affin felhasználó

Ez szándékos szegmentálás: a marketing-oldal eladja a platformot, a dashboard pedig a fejlesztő-felhasználónak dolgozik.

A konkrét komponens-arzenál

Az engineer-view komponensei (CSS-classzok):

Ezek mind dokumentáltak a /sugo/dev-jegyzek cikkben (fejlesztői referencia).

A megvalósítás

A bevezetés több hét munkája volt: új design-tokenek a Tailwind-config-ban (PromNET amber, pn-bg-1/2/3, pn-text/text-dim, pn-border), a Base.astro layout appShell flag-jének bevezetése, és az összes /app/* oldal végigírása az új szótárral.

A végeredmény: vizuális koherencia az /app/* alatt, minden oldal ugyanazt a komponens-készletet használja.

Kinek tetszhet

Ha a Linear, a Stripe-dashboard, a Notion vagy a Vercel-dashboard design-szótára megfogott — az engineer-view ismerős és otthonos.

Ha a klasszikus WordPress-admin, vagy a Wix-szerkesztő a referencia-pontod — a PromNET dashboard kezdetben furcsa lesz. Pár nap után megszokod, vagy sose fog tetszeni.

Mindkét reakció valid. Nem mindenkinek való termék mindenkire jó.

A roadmap

A design-system élő dokumentum. A következő hónapokban:

A vizuális irány megmarad — NEM fogjuk Bootstrap-szerűre átírni, mert “túl-engineer-view”. A célközönség dönti el — és eddig a feedback pozitív azoktól, akik a Linear-Stripe-iskola tagjai.

Akik kritizálják: megértjük, és külön sugó-cikkben részletesen elmagyarázzuk az összes komponenst — hogy kódolható is legyen a saját projektedbe (sablonokon keresztül).

© 2026 PromNET — Polyák Csaba. ← Vissza a blog-ra

Hozzászólások

Betöltés…