Představte si nebo přemýšlejte o klientovi, který za vámi přijde a pověří vás návrhem webových stránek. Může se stát, že budete muset navrhnout téma, které bude používat, a že to bude první dojem, který zanechá na tisících nebo milionech lidí, kteří jej navštíví. Jak byste mu to předložil? Udělali byste snímky webu, kde jste pracovali na návrhu, a ukázali jim to? Nebylo by lepší použít webovou maketu?
Čekání, To jste nevěděli, že existuje i maketa webu? No, pak vás toto téma zajímá. A hodně. Protože můžete svou prezentaci lépe zviditelnit a přimět klienta, aby odcházel mnohem šťastnější poté, co viděl obrázky, kde se zdá, že web je již funkční. A pravdou je, že vás to nebude stát tolik.
Co je maketa webu
Nejprve si trochu vysvětlíme, co a mock up. Jak víte, maketa je ve skutečnosti reprezentace „skutečného obrazu“, která ukazuje, jak by vypadal konečný výsledek vaší práce.
V případě webové stránky by byl obrázek výsledku této webové stránky.
Tento typ koláže používají se k tomu, aby dílo získalo více realističnosti, protože mnohokrát, když jej prezentujete, může být prázdný nebo nereprezentuje stoprocentně to, co jste udělali. Klient má navíc vizuálnější způsob, jak získat představu.
A řeknete si, proč mu neukázat web, na kterém jste pracovali? Dalo by se to udělat, ale ne jako prezentaci práce, ale museli byste nechat klienta procházet web aby se s ní důkladně seznámil a často na to nemají čas, takže se nemusíte ujistit, že viděl všechno.
Na druhou stranu s maketou webu byste toho dosáhli, protože byste na těch obrázcích zvýraznili vše, co chcete vidět.
Jak se vyrábějí
Jak se tyto webové makety vyrábějí? Existuje program na jejich vytvoření? Jsou to koláže převzaté z internetu?
Vlastně existuje několik bezplatných nástrojů že vám mohou pomoci, abyste je vytvořili, a že vám mohou dát možnosti, nejen s příklady, které vám poskytneme o něco později.
Díky tomu můžete dokonce vytvořit jejich sbírku pro daného klienta a umístit design do různých sekvencí, díky nimž konečný výsledek vypadá mnohem lépe.
Tyto nástroje jsou:
gliffy
Tento nástroj je online a je to zdarma. S ním můžete vytvořit webovou maketu, protože má mnoho schémat a API, se kterým můžete svou práci provést během několika minut.
Ve skutečnosti je to a z nejpoužívanějších a to vám dává mnoho možností.
Kakao
V tomto případě vás musíme upozornit, že i když se zaměříme na volná část, nástroj také se platí a to znamená bude omezenější v tom, co umíš.
Pro představu můžete exportovat pouze do PNG (takže to není tak přizpůsobitelné, pokud jej chcete používat s jinými klienty).
Dobrá věc je, že pokud pracujete s týmem, můžete pracovat společně ve stejnou dobu (tj. v reálném čase).
Wirififikujte
Wirififikujte je jedním z nástrojů může změnit web na a wireframe a s tím, pracovat s klientem ukáže vám web podle vašich představ. Zde by ale samozřejmě bylo nutné zvolit fotografii počítače, tabletu nebo mobilu pro montáž výsledku tohoto programu.
Jak už asi tušíte, všechny nástroje vám dají obrázek o webdesignu, ale bylo by nutné ho skutečně sestavit do reálného obrázku. K tomu musíte přistupovat k fotografiím, kde jsou zobrazeny počítače, mobily, tablety, abyste mohli vložit svůj design nahoru a získali fotografii, která spojuje obojí (a která vypadá dobře).
K tomu můžete použít hotové makety nebo je vytvořit sami pomocí programu pro úpravu obrázků.
Webová maketa, kterou si můžete stáhnout
Pokud se nechcete s prezentací práce příliš zahltit, tady vám nějaké necháme příklady mock up které si můžete stáhnout a používat. Ušetříte čas.
Realistické webové stránky mock-up
Začínáme scénou, kterou může mít každý. Je to stůl a obrazovka počítače nahoře (klávesnice a myš dole). V pozadí knihovna s knihami. Tato knihovna je však v černobílém provedení, stejně jako dekorativní prvky psacího stolu (více knih a lampa) a stěny, která je v šedém tónu.
Proč? Aby byl pohled zaměřen na stránku zobrazenou monitorem. ve vašem případě může být domovskou stránkou stránky, nebo reprezentativní části, které chcete klientovi ukázat.
Stáhnete si to zde.
Jednoduchá maketa webu
Jednodušší znázornění, kdy se šedým pozadím (i když to lze přizpůsobit) nezobrazuje obrazovku, na které budeme mít vloženou webovou stránku.
Vyniká tím, že pokud se podíváte na obrazovku, má světlejší a tmavší část, protože simuluje, že na ni dopadá světlo.
To může být zajímavé pro části, kde chcete klient se dívá výhradně na ně.
Stáhnete si to zde.
Maketa Samsung Galaxy S5
Toto je konkrétně maketa Samsungu Galaxy S5, ale může být perfektní, když na stejném obrázku ukážete tři části webového designu, který jste vytvořili, aby klient ocenil, jak by to vypadalo na mobilu.
Mějte na paměti, že Google nyní umožňuje firmám více než používat responzivní web, tedy že vypadá dobře, ať už používáte počítač, tablet nebo mobil. Nestačí tedy, že to vypadá dobře na počítači, musíte se ujistit na všech ostatních platformách.
Můžete si jej stáhnout zde.
Maketa pro tablet a mobil
V tomto případě nebudete moci zobrazit 100 % webu na tabletu, ale na mobilu ano. A je to tak, že pokud chcete svůj design ukázat na těchto dvou zařízeních, můžete to také udělat, aby klient získal představu, jak bude vypadat.
Samozřejmě na to pamatujte na tabletu se zobrazí na šířku zatímco mobilní bude to mít vertikální. Je to pro něj způsob, jak vidět změnu vašeho designu tak, aby vyhovovala oběma zařízením.
Máš to zde.
Máte nějaké příklady webových maket? Můžete se o ně podělit v komentářích.