DFT-HungáriaDigitális fejlesztések
← Sztenderdizálás

Design 5 complete website concepts for "SZTENDERDIZÁLÁS", a premium consulting service of DFT-Hungária — and treat this as the portfolio piece that proves you are one of the best web and motion designers alive. Every concept must be a LIVE, fully working, animated website (not static frames). This service lives UNDER the DFT brand, so all 5 concepts use the existing DFT brand system (below) — they differ in layout, navigation and motion, never in brand identity. Go all in: concept, typography, layout, interaction, motion and code quality, all at the highest level. All visible text in HUNGARIAN (copy below); no lorem ipsum, no English UI words.

═══ THE CLIENT & THE IDEA ═══ DFT-Hungária (Dr. Csikesz Tamás, 30 years in organisational development) helps owners, top executives and key leaders — business and public sector — to STANDARDISE how their organisation works: results, processes, dashboards, job roles, key processes, products and the company itself. The core idea is a PARADOX: "A sztenderdizálás a megvalósítható paradoxon a munkaszervezetben." Standardisation brings STABILITY (állandósítás) and IMPROVEMENT (jobbítás) at the same time: "A jobbítás állandósítása – az állandósítás jobbítása." Their unique twist — POSITIVE DEVIATION: the leader writes rules that are not meant to be merely kept but EXCEEDED. "Az eltérés nem hiba, mert létezik a pozitív eltérés is." Standards push people to work with deviation — positive deviation. Tone: calm authority, precision, intelligence, quiet confidence. For owners and CEOs — premium, never corporate-generic.

═══ BRAND: STAY INSIDE THE DFT THEME (mandatory for all 5 concepts) ═══ This is a DFT-Hungária service, not a new company. Use the approved DFT design system "Felívelő Vonal" (Rising Line) exactly:

  • Logo: the real DFT logo (attached: lowercase serif "dft", white on deep green, with the white RISING SWOOSH underneath) is the master brand. Do NOT invent a new logo. Design a SUB-BRAND LOCKUP instead: DFT logo + "Sztenderdizálás" wordmark (e.g. "dft | Sztenderdizálás" or stacked), used consistently. Optionally a small section symbol for Sztenderdizálás that is visibly built from DFT elements (the swoosh, the green square).
  • Palette (only these, plus tints): Mélyzöld #00432D · DFT zöld #006745 · Hajnal (mint) #8FD4B0 · Összevetés (muted slate blue) #566F92 · Háttér (warm off-white) #F4F0F3 · Szöveg #15201A · white. The muted blue #566F92 was specifically approved by Dr. Csikesz Tamás — use it for the "comparison / deviation" role.
  • Typography: SF Pro Display for headlines and big numbers, SF Pro Text for body (Inter as web fallback). Tight, bold headlines.
  • Shapes: continuous rounded corners (10/14/20/34 pt), soft shadows, white cards on the warm off-white background.
  • Motif: the rising swoosh from the DFT logo ("Jót és jobban") may appear as a graphic element — reinterpret it to fit each concept's idea, don't just repeat it.
  • The DFT logo must appear at the bottom-left of the page (explicit client request), in addition to the header lockup.
  • Reference: the already-approved DFT "Hibaok-átvilágítás" landing page (attached if available) — same family, new service.

═══ HARD RULE: TOTALLY DIFFERENT FROM THE PREVIOUS 5 CONCEPTS ═══ For this client you already made 5 website concepts for "Chief Concept": 01 Monogram (giant monogram tile), 02 Paradigmaváltás (huge type + rotating CC), 03 Szintlépés (rising bars / level steps), 04 Apokalüpszisz (dark, logo splitting open with a light beam), 05 Koncepció-térkép (node network map). All five were HORIZONTAL-SCROLL filmstrips in the systemset.co style. Do NOT reuse any of that: no horizontal filmstrip, no giant monogram hero tile, no rising bars/steps motif, no light-beam reveal, no node-network map, no bottom pill dock, no dark manifesto finale. Within the shared DFT brand, each new concept needs its own navigation mechanic, layout system and motion language — the five must feel like five different DFT websites, not five colour swaps of one template.

═══ THE 5 NEW DIRECTIONS (push each to its extreme) ═══ 01 "Pozitív eltérés" — the standard as a perfect baseline/grid; the signature motion is elements snapping precisely onto the baseline… and then one deliberately rising ABOVE it (positive deviation). Swiss precision on the warm off-white, deep greens for the standard, the muted blue #566F92 (or Hajnal mint) reserved only for the deviation. Vertical scroll with sticky chapter moments. 02 "Etalon" — metrology and craftsmanship: measuring scales, calipers, tolerances, fine engraved lines, a watchmaker's precision. The DFT lockup sits like a maker's engraving. Mélyzöld #00432D as the dominant surface with fine Hajnal-mint engraved lines — precision through line weight, not new colours. Scroll moves a precision ruler that measures the page; numbers tick like instruments. 03 "Paradoxon" — stability and improvement at once: a split screen where one half stays perfectly still (állandósítás) while the other half keeps evolving (jobbítás), and they sync at key moments. Two-tone within DFT: the still half in Mélyzöld, the evolving half on the warm off-white, typographic and conceptual. Scroll-snapped full-screen chapters. 04 "Szabványlap" — the aesthetic of a technical standard document (DIN/ISO sheet, blueprint, spec tables, revision marks, redline annotations) made luxurious in DFT greens (green redlines instead of red). The page literally reads like the client's future standard; sections are "clauses" (§), annotations draw themselves in. Editorial long-read layout. 05 "Kristályrács" — order that grows: a crystal-lattice/modular system where a standard is the unit cell and the organisation grows from it; the 5 maturity levels are the lattice becoming more complete and self-organising. Lattice lines in DFT green and Hajnal mint on the off-white, cells filling with Mélyzöld as maturity grows. Organic yet exact; a subtle 3D-feel built with 2D/SVG (no WebGL). Zoom-in navigation: scrolling moves the camera deeper into the lattice, level by level.

═══ DELIVERABLES PER CONCEPT ═══

  1. The DFT + "Sztenderdizálás" sub-brand lockup as used in this concept (header, footer, small/favicon version), on dark and light. One line explaining how it fits the concept.
  2. How this concept applies the DFT system: which palette roles, type scale, buttons, cards, chips, table style, icon style, and its one motion principle (no new colours or fonts).
  3. LIVE website — desktop 1440px, fully scrollable and interactive, all sections below.
  4. The same site responsive at 390px mobile (real layout, not a scaled-down desktop).
  5. A short motion spec per concept: the 5 signature animations (trigger, property, duration, easing) so a developer can rebuild them exactly.

═══ MOTION — SHOWREEL LEVEL, BUT WITH TASTE ═══

  • Each concept's motion must express ITS idea (snap-to-standard + positive deviation; instrument precision; still vs. evolving; clauses & annotations; lattice growth).
  • Scroll-linked where it adds meaning, one-time reveals elsewhere; precise easing, staggered timing, layered depth.
  • Apple-level restraint: no glowing blobs, gradient orbs, particles, noise, glassmorphism shimmer, neon, cursor trails, typewriter text or anything that looks "AI-generated". No infinite idle loops.
  • Performance: animate only transform, opacity, clip-path (and stroke-dashoffset on small SVGs); must scroll smoothly in Safari and on a mid-range phone. prefers-reduced-motion → static final state. Keyboard navigation works.

═══ SITE CONTENT (use all of it; you may restyle, group and shorten, but don't invent facts) ═══ Menu (group into ~6 items): Sztenderdizálás · Kinek · Mit? · Hogyan? · Fejlettségi szintek · Sztenderdizátorok · Kapcsolat

1 · HERO Title idea: "Sztenderdizálás" + tagline "A jobbítás állandósítása." (alternative line: "A sztenderdizálás a megvalósítható paradoxon a munkaszervezetben.") Keywords: Állandósítás · Jobbítás · Stabilitás · Fejlesztés CTA: "Kérjen személyes konzultációt" + note "Az első díjtalan."

2 · A JELENTÉS (the four sentences — the heart of the site) A jobbítás állandósítása · Az állandósítás jobbítása · A stabilitási szint fejlesztése · A fejlesztés stabilizálása "A sztenderdizálás a megvalósítható paradoxon a munkaszervezetben."

3 · KI A SZTENDERDIZÁTOR?

  • Szabályalkotó, aki meghonosítja a szabályok új típusát, amitől pozitív irányba el lehet térni
  • Állandósítást, stabilitást hoz rendszerszinten
  • Jobbítást, fejlesztést hoz rendszerszinten
  • Totális vezető · Totális folyamatgazda

4 · ÜGYFELEK: Tulajdonosok, felsővezetők, kulcsvezetők · Üzleti szektor, közszektor

5 · CÉLOK (6) 1 Az értékteremtés sztenderdizálása: termékek, értékteremtés, cég, szervezet 2 A működés sztenderdizálása: főfolyamatok, munkakörök, kulcsfolyamatok 3 A működési folyamatrendszer megújítása: proaktív működési folyamattérkép 4 A vezetői és folyamatgazdai sztenderdizálási potenciál fejlesztése 5 Az eredmények és a mérőrendszer (műszerfalak) sztenderdizálása 6 A sztenderdizálási folyamatok sztenderdizálása

6 · MIT? TANÁCSADÁSI TERÜLETEK (5 groups) 1 Eredmények, folyamatok, műszerfalak — eredmények (outputok) · folyamatok (outputhoz vezető folyamatok) · műszerfalak (mérőrendszer) 2 Kulcsfolyamatok, munkakörök, működési folyamatrendszer — munkakörök · kulcsfolyamatok · működési folyamattérkép 3 Termékek, üzletek/értékteremtés, cég/szervezet — termék · üzlet/értékteremtés · cég/szervezet 4 Vezetők, tulajdonosok, kulcsfolyamatgazdák, folyamatgazdák — vezetői · tulajdonosi · kulcsmunkatársi folyamatok 5 Mindenek felett: a sztenderdizálás folyamatának sztenderdizálása

7 · HOGYAN? FEJLESZTÉSI KONCEPCIÓ Sztenderdizáltsági átvilágítás (területek, folyamatok, módszerek) → Tanácsadás (sztenderdizálási koncepció; a stabilitás és fejlesztés rendszerének megújítása) → Megvalósítás támogatása vagy megvalósítás (sztenderdkészítés) → Audit (felkészítés, átvilágítás, hitelesítés és tanúsítás). Mission line: "Szándékunk, hogy támogassuk az önműködő és független sztenderdizálási képesség és munkaszervezeti potenciál megszerzésében."

8 · FEJLESZTÉSI TÉRKÉP (a matrix: 12 areas × 4 phases — design this as a beautiful, explorable table/map) Columns: Átvilágítás · Tanácsadás · Megvalósítás támogatása vagy megvalósítás · Auditálás Rows (areas): 1 Eredménysztenderdek · 2 Folyamatsztenderdek · 3 Munkaszervezeti műszerfalak · 4 Munkakörök · 5 Kulcsfolyamatok, főfolyamatok · 6 Működési folyamattérkép · 7 Termékek és magfolyamatok · 8 Üzleti/értékteremtési főfolyamatok · 9 Cég/szervezet · 10 Vezetői folyamatok · 11 Tulajdonosi folyamatok · 12 Kulcsmunkatársi (kulcsfolyamatgazdai) folyamatok Example cells (row 1): "Eredménysztenderdek átvilágítása a munkaszervezetben" → "Eredménymeghatározások rendszerének megújítása és sztenderdizálása" → "Eredménysztenderdek készítése" → "Sztenderdizáltsági audit". Row 6 implementation mentions: Főfolyamatok sztenderdjei · 5D Mátrix · FOBO modell (Front office – Back office) · Dinamikus csoportmodell. Audit column examples: Sztenderdizáltsági audit · Munkakörök auditálása · Kulcsfolyamatok auditálása · Terméksztenderdek és a magfolyamatok auditálása · Cégsztenderd auditálása. (Fill the remaining cells with the same pattern: "[terület] átvilágítása" / "… megújítása és sztenderdizálása" / "… sztenderdjeinek elkészítése".)

9 · SZOLGÁLTATÁSI FORMÁK (chips) Személyesen vagy online · Konzultáció, tanácsadás · Prezentáció, egyeztetés · Folyamatos szupervízió (helyzetek megértése és újrakeretezése, új koncepció, új cselekvések) · Vezetői és/vagy tulajdonosi workshop · Tanácsadói részvétel tárgyaláson, belső egyeztetésen · Back office, dokumentális output · Tanácsadói dokumentum készítése · Helyzetértelmezés, helyzetelemzés · Koncepciókészítés · Tervkészítés, sztenderdkészítés · Kulcshelyzet megoldása · Profilkészítés · Workshop

10 · MIVEL BÍZZON MEG MINKET ELSŐ LÉPÉSBEN? (6) 1 Átvilágítás: sztenderdizáltsági szint mérése és elemzése a munkaszervezetben · 2 Munkakörök átvilágítása · 3 Vezetői folyamatok átvilágítása · 4 Tulajdonosi folyamatok átvilágítása · 5 Műszerfalak átvilágítása · 6 Sztenderdizáltsági audit: ISA

11 · MEGBÍZÁSOK, MELYEK ÁTÜTŐ VÁLTOZÁST TEREMTENEK (6) 1 Cég/szervezet meghatározásának megújítása és cég/szervezet sztenderdjének elkészítése · 2 Műszerfalak rendszerének megújítása és sztenderdizálása · 3 Munkakörök sztenderdizálása, munkamegállapodások rendszerének megújítása · 4 Működési folyamattérkép készítése · 5 Termékek és a magfolyamatok sztenderdizálása, a terméktervezési folyamatok megújítása · 6 Üzleti/értékteremtési főfolyamatok rendszerének megújítása és sztenderdizálása

12 · MUNKASZERVEZETI FEJLETTSÉGI SZINTEK (5 maturity levels — a signature section in every concept) 1 Megelőzésre épülő működési rendszer, ahol vezetői folyamat a szabályalkotás. 2 Megelőzésre épülő működési rendszer, ahol robusztus vezetői folyamatként beépül a sztenderdizálás. 3 Proaktivitásra épülő működési rendszer, ahol a vezetői szerepben a rendszer középpontjába a sztenderdizálás kerül, amely egyszerre lesz állandósítás és folyamatos fejlesztés eszköze. 4 Proaktivitásra épülő működési- és munkavégzési rendszer, ahol a sztenderdizálás folyamatvezetői kompetenciából folyamatgazdai kompetencia lesz: az sztenderdizálja a folyamatokat folyamatosan és hozzáértően, aki a folyamatot végzi. 5 Proaktivitásra épülő munkavégzési és működési rendszer, ahol a munkatársak minden munkavégzése sztenderdizálás; a munkatárs kiváltja folyamataival a sztenderdizálási vezetői szerepet, a vezető ezután már csak a sztenderdizálás rendszerét sztenderdizálja. Positive-deviation quote (use prominently): "A vezető – ésszerű kivételektől eltekintve – olyan szabályokat alkot, melyekkel a teljesítményszinteket nem betartani kell, hanem meghaladni érdemes. Az eltérés nem hiba, mert létezik a pozitív eltérés is, amikor jobban dolgozunk, mint az elvárások. A sztenderdek arra ösztönöznek, hogy eltéréssel dolgozzunk – pozitív eltéréssel."

13 · KAPCSOLÓDÓ KOMPETENCIAFEJLESZTÉSEK & WORKSHOPOK PROQM: Munkavégzés Mesterfokon · Sztenderdizálás Mesterfokon · Folyamatvezetés Mesterfokon — "Job on the training" workshopok.

14 · SZTENDERDIZÁTOROK (team — round photo placeholders, name + role, NO invented bios) Sztenderdizátorok: dr. Csikesz Tamás · Kovácsné Hajdú Csilla · dr. Kobzos-Kósa Réka · Fülöp Csaba · Czafrangó Ágnes · Benkő József · Rotkai Petra Informatikai, technológiai és AI sztenderdizátorok: Fülöp Csaba · Puskás Dávid · Héjjas Bálint · Vad Hunor · Zsigmond Dániel · Kulcsár Kevin

15 · SZEMÉLYES KONZULTÁCIÓ / KAPCSOLAT "Kérjen személyes konzultációt – az első díjtalan." · Személyesen vagy online · Kapcsolattartó: Kovácsné Hajdú Csilla · e-mail: (a DFT kapcsolattartási címe) · telefon: "+36 …" (placeholder) · DFT-Hungária · dft.hu

═══ RULES ═══

  • Use the real DFT logo only (never redraw or restyle it); the only new element is the "Sztenderdizálás" wordmark/lockup.
  • No invented testimonials, client logos, numbers or results. Photos = tasteful placeholders ("fotó: …").
  • WCAG AA contrast; real responsive layouts; semantic HTML.
  • The page clearly reads as a DFT service: DFT lockup in the header, DFT logo bottom-left, footer "DFT-Hungária · Jót és jobban · dft.hu".

═══ HOW TO DELIVER ═══

  • All 5 concepts as LIVE pages, one file per concept + an overview index comparing them (hero thumbnail, layout idea, navigation mechanic, signature animation).
  • Dark-mode tokens derived from the DFT palette (e.g. #0C1410 background, #9DB0CE for the muted blue); screens in each concept's primary mode.
  • Clean, handoff-ready HTML/CSS/JS (no heavy libraries), so a developer can take the chosen concept straight to production.

Letöltés Markdown fájlként