Co je to wireframe (tzv. drátěný model)?

29.12.2020

U složitějších internetových stránek, děláme pro naše klienty tzv. drátěné modely. O co jde a proč to děláme? Wireframe webu ( tzv. „drátěný model“ nebo stále častěji i „skica webu“) se v oblasti vývoje webových prezentací či aplikací používá pro náhled nového řešení internetových stránek. Jde tedy o návrh definující funkci a obsah stránek, pro lepší pochopení: wireframe = projektová dokumentace nového webu.

Wireframing je způsob, jak navrhnout webovou stránku na strukturální úrovni. Tzv. drátěný model se běžně používá k rozvržení obsahu a funkčnosti na stránce, která zohledňuje potřeby uživatelů a myšlení uživatelů. Drátěné modely se používají na úplném počátku procesu vývoje a slouží ke stanovení základní struktury stránky před přidáním vizuálního návrhu a obsahu. Tzn. skládáme prostředí webu pomocí bloků a čar.

Drátěný model je v designu uživatelského rozhraní u složitých projektů nezbytný

Drátěný model je rozvržení webové stránky a ukazuje, jaké prvky rozhraní budou existovat na klíčových stránkách webu.  Cílem drátěného modelu je poskytnout vizuální představu již na začátku projektu, aby byl pochopen a odsouhlasen u všech zúčastněných stran a projektového týmu před zahájením tvůrčí fáze (designu). Drátěné snímky lze také použít k vytvoření globální a sekundární navigace, aby se zajistilo, že terminologie a struktura použitá pro stránky splňují očekávání uživatelů a je všem srozumitelná.

Drátěný model se mnohem snáze přizpůsobí než již hotová koncepce

Je rychlejší a levnější zkontrolovat a upravit strukturu klíčových stránek ve formátu drátěného modelu. Provedení vývoje drátěných rámců na konečnou verzi poskytne klientovi a konstrukčnímu týmu jistotu, že stránka uspokojuje potřeby uživatelů při plnění klíčových obchodních a projektových cílů.

Wireframing probíhá vždy na začátku životního cyklu projektu (webu).

Často se používá k dokončení procesu návrhu zaměřeného na uživatele, drátěné snímky se používají také na začátku fáze návrhu. Test použitelnosti prototypu bude často testem stránek drátěného modelu, který poskytne zpětnou vazbu od uživatelů před tvůrčím procesem.

Drátěné snímky lze jednoduše nakreslit ručně, ale často se sestavují pomocí různých softwarů. Pokud se však drátové snímky použijí pro test použitelnosti prototypu, je nejlepší je vytvořit v HTML. Jednou z velkých výhod wireframingu je to, že poskytuje včasný vizuální obraz, který lze použít ke kontrole s klientem. Uživatelé si jej mohou také prohlédnout jako mechanismus včasné zpětné vazby pro testy použitelnosti prototypu. Nejen, že je drátěný model jednodušší změnit než koncepční návrhy webů, jakmile jej schválí klient a uživatelé, poskytují návrháři důvěru.

Z praktického hlediska zajistí drátěný model obsah a funkčnost stránky správně umístěnou na základě potřeb uživatele a firmy. A jak se projekt posouvá kupředu, mohou být použity jako komunikace mezi členy projektového týmu o vizi a rozsahu projektu.

Nevýhody Wireframingu

Vzhledem k tomu, že wireframy neobsahují žádný design, není pro klienta vždy snadné tento koncept pochopit. Návrhář musí také převést drátové snímky do návrhu, takže k vysvětlení, proč jsou prvky stránky umístěny tak, jak jsou, je často zapotřebí komunikace na podporu drátového modelu. Také, když je poté přidáván obsah, může to být zpočátku příliš velké, aby se vešly do rozvržení drátového modelu, takže návrhář a copywriter bude muset úzce spolupracovat, aby se vešel.

Závěr

Drátěné rámce by měly být používány vždy na začátku každého projektu, aby bylo možné získat souhlas uživatele a klienta ohledně rozložení klíčových stránek a celkové navigace. Tím se projektovému týmu, zejména návrhářům, dá důvěra jasně se posouvat v projektu vpřed. Drátěné modely také ušetří našim klientům značný čas a peníze při pozdějších změnách v projektu.

zdroj: https://www.experienceux.co.uk/faqs/what-is-wireframing/

 

Zaujali jsme vás?

Pokud vás některá z našich služeb zaujala, neváhejte nás kontaktovat
(420) 604 171 281
© 2020 ELFMARKAG | IČ 87585804, neplátce DPH
envelopephone linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram