ENVI-PAK: reuse, reduce a hlavně redesign

Prezentační weby Intranet/Portál Kreativa

Prohlédnout:

Vy třídíte, v ENVI-PAK se následně o veškerý odpad starají.

Tato slovenská společnost je nejdéle fungující organizací v obalovo-odpadovém hospodářství. A potřebovala osvěžit vzhled svého webu.

Dodané služby

Prezentační weby

Intranet/Portál

Kreativa

Výchozí stav

Nepřehledný design.
Špatné umístění informací a jejich nedostatečné formátování.
Špatná struktura webu, ve které se návštěvník snadno ztratil.
UI design neodpovídá brandu.
Nekonzistentní vzhled stránek a sekcí.
Neintuitivní design i chování interaktivních prvků.

Naše řešení

Upravili jsme strukturu, aby byla návodná a dobře se v ní návštěvníkům hledalo.
Před samotným redesignem jsme sestavili drátový model, aby si novou strukturu i příchozí prvky klient dobře představil.
Zpřehlednili jsme celý design webu.
Upravili jsme místa pro sdělení a ukázali klientovi, jak je správně formátovat.
UI design už konečně odpovídá brandu.
Vzhled stránek a sekcí vypadá konzistentně.
Interaktivních prvky i celkový design pomáhají návštěvníkům se snadněji orientovat a cítit se na webu příjemně.

Nová struktura – první krok k lepšímu webu

V prvé řadě jsme se zaměřili na úpravu struktury webu a hierarchii jednotlivých stránek.

„S novým dizajnom sme spokojní, je svieži, moderný a nadčasový. Veľmi oceňujeme, že nám v PUXdesign poradili, aby sme nepoužívali slider, ale navrhli riešenie s animáciou textu. Taktiež oceňujem návrh použiť v pätičke kontajnery a ich prelinkovanie. Páči sa nám aj sprehľadnenie členenia stránok a použitie menu.”

Mgr. Michal Maťašovský

Manažér pre komunikáciu

ENVI - PAK, a.s.

Drátový model – wireframe

S novou strukturou jsme se mohli přesunout k drátového modelu, neboli wireframu. Ať ho znáte v českém či anglickém znění, pokaždé se jedná o jednoduché grafické znázornění jednotlivých prvků na webu.

Právě wireframe nám pomáhá při práci zpřehlednit a uspořádat informace tak, aby každý na webu našel to, co hledá. Návštěvník je pro nás při tvorbě zkrátka alfou i omegou.

Menu: desktop & responzivní chování

Původní řešení webu ENVI-PAK pracovalo s navigací v podobě tzv. hamburger menu. Hlavní nabídka tak zůstávala skrytá pod třemi vertikálními čárami a rozbalila se až ve chvíli, kdy jste na tyto tři čárky (tedy hamburger) klikli. Z našeho pohledu není hamburger menu úplně ideální: jedná se totiž o další nutnou interakci, kterou návštěvník musí udělat. A věřte, že každý klik se počítá.

I tento prvek jsme se proto rozhodli změnit.

Schované menu z původního webu jsme v desktop řešení odkryli.

Ale co nás nečekalo...

Navigace obsahovala opravdu velké množství položek. To byl zádrhel číslo jedna.

Zádrhel číslo dvě bylo riziko, že právě kvůli počtu odkazů bude menu vysoké – tím pádem bude zbytečně posouvat obsah níže.

U responzivního chování jsme navíc museli myslet i na možnost vyhledávání nebo členskou sekci. To byly odkazy, které musí uživatelé vidět okamžitě – ať už jsou na jakémkoliv zařízení.

Patička

Patička je z pohledu drátového modelu o něco méně důležitá, ale přesto jsme ji zpřehlednili do 4 sloupců.

Aby nebyla jen obyčejným zápatím, vymysleli jsme pro ni kreativní řešení, které nepřehlédnete – ukázku najdete v navazující kapitole o UI designu.

UI DESIGN

UX design řeší, jak web funguje a UI má následně za úkol, jak vše bude vypadat. UI neboli design uživatelského rozhraní dbá na to, aby veškeré prvky vypadaly co nejpřívětivěji a byly pro návštěvníka na webu vzhledově příjemné.

Důležité cíle, kterých jsme se u projektu ENVI-PAK z hlediska UI drželi, byly:

přehlednost,
originalita,
odlišení se od konkurence,
sjednocení s brandem ENVI-PAKu
a celkovému zjednodušení webu pro uživatele.

3+1 cíle pro lepší dojem

Mimo jiné jsme si s klientem stanovili i čtyři další cíle: zpřehlednit a zjednodušit web, sloučit jeho vizuál s brandem ENVI-PAK a vetknout mu také špetku originality.

A teď si po jednom ukážeme, jak jsme se těchto úkolů zhostili.

1. cíl: zpřehlednit sdělované informace

Zásadní roli u přehlednosti informací hraje využití prostoru (whitespace) a výběr vhodné typografie. Není to však jen o tom, jaké písmo zvolíte.

Následně je potřeba pracovat s jeho nastavením:

výškou řádku,
prokladem mezi písmeny ve slovech,
tučností písma
a jeho velikostí.

Navrhli jsme proto vizuál karet tak, aby byl v souladu s texty.

Využili jsme u nich jak whitespace (= práce s prázdným prostorem) a vhodnou typografii, ale i aktuální trend zvaný glassmorphism. To je v podstatě efekt skla, takže vše za touto kartou vidíte rozostřeně. Karta je lehce průhledná, aby toto rozostření bylo vidět.

Nedovedete si to pořádně představit? Nemusíte, připravili jsme vám rovnou ukázku:

2. cíl: sloučit vizuální prvky se značkou ENVI-PAK

Interaktivní prvky – tlačítka, odkazy, widgety, tabulky i formuláře – jsme sjednotili společně s typografií a kombinací barev. Vytvořili jsme tak styleguide pro ENVI-PAK web.

3. cíl: nevšední patičkou k originalitě

Aby web dostal ještě špetku originality navíc, vytvořili jsme kreativní a nevšední patičku.

4. cíl: zjednodušit web pro návštěvníky

Ať už se na web díváte z mobilního telefonu, tabletu nebo klasického stolního počítače, responzivní design je něco, na co se v PUXdesign zaměřujeme u každého projektu. Dnes totiž prochází internet přes mobilní telefony zhruba dvě třetiny všech uživatelů nad 16 let. Proto je podle nás přizpůsobení designu webu podle typu zařízení absolutní nutnost.

Hotovo. Takto jsme předali svůj návrh vývoji. Nový webdesign proto už brzy najdete na webových stránkách ENVI-PAK. Chcete i vy zapracovat na vzhledu svého webu? Ozvěte se nám, rádi se toho chopíme.

Prohlédnout si web Další reference