PUXDesign
encs
PUXDESIGNReferenceENVI-PAK: reuse, reduce a hlavně redesign
ENVI-PAK: reuse, reduce a hlavně redesign

ENVI-PAK: reuse, reduce a hlavně redesign

Třídění odpadu a recyklace je čím dál důležitějším tématem. Společnost ENVI-PAK si to uvědomuje, proto chce více prosadit udržitelnost i díky novému atraktivnímu vizuálu svého webu.

ENVI-PAK: reuse, reduce a hlavně redesign
Kontaktujte nás

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.

Stav před a po

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ě.
services
envipak.sk

Dodané služby

ENVI-PAK: reuse, reduce a hlavně redesign

Redukovat, recyklovat a v našem případě především redesignovat

Informovat lidi, obce i firmy o tom, jak třídit či recyklovat odpad? To vyžaduje předávání jasných a přehledných instrukcí. Webové stránky ENVI-PAK však tyto předpoklady neodrážely. Spíše naopak: nacházelo se na nich mnoho nestrukturovaného textu i vizuální prvky, které budily dojem neuspořádanosti. Návštěvník se tak v obsahu velmi snadno ztratil. A klient to chtěl konečně změnit!


Pustili jsme se proto do – nejen – grafických úprav. Pojďme si je představit.


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 ENVIPAK

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.

Chcete s námi spolupracovat?

Popište nám vaše potřeby do zprávy a my se vám do 1 dne ozveme.
Pokud radši voláte, kontaktujte rovnou Jirku, který vám o naší práci řekne nejvíc.
Jiří JuhaňákJiří Juhaňák / KONZULTANT
+420 605 175 519
jiri.juhanak@puxdesign.cz