Úvod případové studie Mléko z farmy

Případová studie

www.mlekozfarmy.cz

Měli jsme tu čest vytvořit redesign a rozšíření naší práce na webu projektu Mléko z farmy z roku 2011. Požadavky klienta jsme po analýze a společné diskuzi shrnuli na:

  • Celkové zpřehlednění stránek
  • Modernizace (přizpůsobení pro mobilní telefony a tablety)
  • Zlepšení hlavní mapy zastávek (vyhledávání a GPS lokace)
  • Přidání informací k produktům
  • Vyhledávání na stránkách
  • Kompletní aktualizace CMS a pluginů

Webové stránky běží na redakčním systému WordPress.

Interaktivní prototyp

Chtěli jsme, aby si klient mohl vyzkoušet a otestovat námi navržené změny a rozložení prvků na jednotlivých stránkách. Pro tento účel jsme vytvořili interaktivní prototyp, pomocí kterého si mohl klient projít jednotlivé wireframy každé stránky ve svém prohlížeči.

Vyzkoušet prototyp
Interaktivní prototyp

Produktové fotografie a postprodukční úpravy

Klient neměl všechny produkty vyfocené v požadované kvalitě. Pořídili jsme produktové fotografie, provedli postprodukční úpravy a připravili pro další marketingové užití.

Produktové fotografie a postprodukční úpravy

Tvorba pokročilých fotomontáží

Na hlavní stránku projektu jsme chtěli mít individuální a originální fotografii, proto jsme se rozhodli o tvorbu fotomontáže hlavního produktu. Nezapomněli jsme ani na originální interpretaci stránky pro neexistující obsah (chyba 404).

Design hlavních stránek

Po odsouhlasení interaktivního prototypu a přípravě všech potřebných podkladů nebránilo nic ve vytvoření hlavních stránek webdesignu.

Hlavní stránka
Detail produktu
Rozvozové trasy
Hlavní stránka
Design produktu
Design trasy

Celkem bylo vytvořeno 18 stránek

Úvodní stránka, výpis novinek, detail novinky, výpis produktů, detail produktu, rozvozové trasy, textový výpis tras, detail trasy, detail obce, detail zastávky, výpis receptů, detail receptu, mléčné listy, profil, registrace, kontakt, 1000+ a stránka 404

Celkem bylo vytvořeno 18 stránek

Responsivní webdesign

V rámci cíle modernizace jsme šli cestou responsivního webdesignu, konkrétně jsme využili mobile first přístup.

Responsivní webdesign

Přizpůsobení pro retina zařízení

Veškeré prvky na stránkách jsou připravené i pro zařízení, které mají vysokou hustotu pixelů a zobrazují se tak pro ně ostřeji (např. pro novější Apple iPhone a iPad či Samsung Galaxy).

Přizpůsobení pro retina zařízení

Funkčnost tras a mapy

Jedním z hlavních cílů redesignu bylo zpřehlednění hlavní mapy na stránce Rozvozové trasy. V předchozích stránkách byly zobrazené pouze obce, ve kterých se rozváží.

Pro nové řešení již bylo potřeba zobrazit všechny zastávky na mapě. Toho jsme docílili pomocí tzv. "clusteringu", kdy dochází k seskupování zastávek na mapě do jednoho bodu v určitém rozsahu. Mapa výsledně zůstává přehledná i když je na ní více jak 1600 zastávek.

Přidávání zastávek v administraci

Základním předpokladem pro zobrazení zastávek na mapě je správné přiřazení souřadnic ke každé z nich. Vzhledem k vysokému počtu zastávek jsme se snažili co nejvíce zjednodušit jejich zadávání do systému oproti předchozímu ručnímu zadávání.

Funkčnost tras a mapy

Administrace WP

WordPress nabízí v základu mnoho funkcí a nástrojů, které ale nejsou vždy potřeba pro dané webové stránky a mohou tak mást klienta při správě jeho webu. Naší snahou je vždy co nejvíce upravit a zjednodušit administraci pro klienta. Připravili jsme také několik uživatelských rolí, které umožňují rozdělení přístupu k důležitým funkcím a částem administrace.

Administrace WP

Závěrem

Některé z našich úprav a doporučení jsou stále ještě ve fázi příprav a bude docházet k jejich postupné implementaci. Stejně tak je vždy důležitá průběžná údržba (jako např. aktualizace sytému a jeho součástí).

www.mlekozfarmy.cz

Spuštění redesignu stránek proběhlo 16. 3. 2014.

Adobe Photoshop Adobe Illustrator Coda 2 by Panic Zurb Foundation 5 Grunt Bower Compass WordPress

Chcete podobný web?

Kontaktujte nás třeba pomocí níže uvedeného formuláře a my se Vám co nejdříve ozveme.

Please leave this field empty.