A vizuális nyelv egy tudatosan felépített színpalettával indul: a sötét antracitszürke területek hordozzák a leghangsúlyosabb termék- és karrierüzeneteket, a fehér táblák kényelmes olvasási teret nyújtanak, a sárgászöld hangsúly pedig éles fókuszt ad. Ez a kombináció felismerhető karaktert kölcsönöz a laptop bemutatásának anélkül, hogy pusztán a díszítésre támaszkodna. A nyitó termékfotó és a határozott főcím azonnal megteremti az arculatot, míg a sötét kiemelt rész ugyanezt a kontrasztot viszi tovább az ismétlődő kártyás elrendezésben.
A képi világ több célt is szolgál. A laptopfotózás a hardver történetét erősíti, a négy portrékép az emberi és toborzási dimenziót hozza be, a HP Elite x2 1013 G3 montázsa pedig több nézőpontból irányítja vissza a figyelmet a termékre. A fehér információs táblák megszakítják a sötétebb felületeket, így a termékszövegek vizuálisan jól elkülönülnek, különösen a kiemelt termék blokkjában. A záró HP EliteBook 800 Series terület egy sötét fotóhátteret kombinál kapcsolatfelvételi űrlappal, kiterjesztve a vizuális nyelvet egy interakcióra épülő blokkra. A lábléc egy újabb, eltérő grafikai megoldás helyett középre zárt tartalommal és négy közösségi hivatkozással folytatja ezt a rendszert. Webdizájn-irányvonalnak a sablon ott a legerősebb, ahol színpalettája, képi világa, tipográfiája és váltakozó felületei a termék-, karrier- és kapcsolati tartalmak során mindvégig felismerhetők maradnak.
A (z) Weboldal tervező használatakor módosíthatja a színeket, a betűtípusokat, a fejlécet és a homályosítást, az elrendezést, az oszlopokat és más design elemeket, valamint a tartalmat és a képeket.
Használd a Témabeállítások funkciót a weboldal vizuális alapjának meghatározásához az oldalakon és a szakaszokon. Állíts be globális színeket, betűtípusokat és tipográfiát, hogy a weboldal ugyanazt a dizájnirányt kövesse, ahelyett, hogy minden oldalt külön-külön stílusoznál.
Válassz egy olyan színsémát és betűtípus-kombinációt, amely illik a weboldal jellegéhez, majd finomhangold a H1-H6 címsorokat, a normál szöveget, a linkeket, a gombokat, az idézeteket, a listákat és az egyéb tipográfiai stílusokat. Ezen beállítások következetes használata segít egyértelmű vizuális hierarchiát létrehozni, és az ismétlődő dizájnelemek felismerhetőek maradnak a weboldalon.
Használd az Animációs effektusok funkciót a weboldal dizájnjának dinamikusabbá és interaktívabbá tételéhez. Az elemek és konténerek olyan effektusokat használhatnak, mint a Megjelenítéskor futtatás, az Elemzéskor animáció és az Animáció szinkronban görgetéssel, hogy bemutassák a tartalmat, ahogy a látogatók a webhelyen mozognak, vagy reagálnak a felhasználói interakcióra. Az animációs előbeállítások kész effektusokat kínálnak, amelyek a webhely vizuális stílusához igazíthatók.
Alkalmazza ugyanazt a tervezési irányt a megosztott webhelyelemekre, például a fejlécre, a menüre és a láblécre. A Témabeállítások Panel összehozza a webhely egészére kiterjedő közös stílusvezérlőket, így könnyebb fenntartani az összehangolt megjelenést, miközben a webhely több oldalra bővül.
Ez a munkafolyamat hasznos kiindulóponttá teszi a sablont egy olyan webhely létrehozásához, amely egységes vizuális identitással, összehangolt színekkel és tipográfiával, megosztott tervezési szabályokkal és interaktív effektusokkal rendelkezik az oldalakon.