Fogyasztási folyamat HTML Sablon

Négy illusztrált kártya alkot egy használatra kész tanácsadási szakaszt

A középre zárt „Mit csinálunk” felirat és a „Tanácsadási folyamat” főcím már az ismétlődő tartalmi elemek előtt egyértelművé teszi a szakasz célját. Alattuk négy azonos méretű fehér kártya jeleníti meg a folyamatot különálló lépések sorozataként, elkerülve az egybefüggő szövegblokkokat. Minden kártya ugyanazt a belső felépítést követi: a cím fölött elhelyezkedő vonalas illusztrációt, a kiegészítő leírást és a körvonalas Tovább műveletgombot. A látható címek — Probléma meghatározása, Probléma strukturálása, Elemzési terv és Elégedett ügyfelek — jól azonosítható tartalmi egységekre tagolják a statikus szakaszt, miközben a negyedik felirat csupán a kártya elnevezéseként szolgál, nem pedig mért ügyféleredmények bizonyítékaként.

Statikus HTML-oldalba illesztve ez a blokk önálló szakaszként képes átadni a tanácsadási folyamat teljes mondanivalóját, míg a környező oldal biztosítja a navigációt, a bevezető tartalmakat, valamint a későbbi kapcsolatfelvételi vagy részletező sávokat. A halványkék háttér elválasztja a szakaszt a szomszédos tartalmaktól, a sötét pávakék címek és a visszafogott akvamarin kiemelések pedig erősítik a vizuális hierarchiát. A lekerekített sarkok, a finom árnyékok, a középre igazítás és a bőséges térközök révén a négy kártya egységes, könnyen áttekinthető sort alkot. Az elrendezés így szakaszszinten teljesen használatra kész: tartalmi szerkezete és vizuális csoportosítása adott, miközben az őt tartalmazó HTML-oldal vagy webhely újrafelhasználható eleme marad.