Predstavte si alebo myslite na klienta, ktorý za vami príde a poverí vás návrhom webovej stránky. Môže sa stať, že budete musieť navrhnúť tému, ktorú bude používať, a že to bude prvý dojem, ktorý zanechá v tisíckach alebo miliónoch ľudí, ktorí ju navštívia. Ako by ste mu to predstavili? Urobili by ste screenshoty webovej stránky, na ktorej ste pracovali na dizajne, a ukázali by ste im to? Nebolo by lepšie použiť webovú maketu?
Čakanie, Nevedeli ste, že existuje aj maketa webu? Tak potom vás táto téma zaujíma. A veľa. Pretože môžete dať svojej prezentácii lepšiu prezentáciu a klient bude odchádzať oveľa šťastnejší po tom, čo videl obrázky, kde sa zdá, že web už funguje. A pravdou je, že vás to nebude stáť tak veľa.
Čo je maketa webovej stránky
Najprv si trochu vysvetlime, čo a mock up. Ako viete, maketa je vlastne reprezentácia „skutočného obrazu“, ktorá ukazuje, ako by vyzeral konečný výsledok vašej práce.
V prípade webovej stránky by bol obrazom výsledku tejto webovej stránky.
Tento typ koláže používajú sa na to, aby dielu dodali viac realizmu, pretože mnohokrát, keď ho prezentujete, môže byť prázdny alebo nereprezentuje na sto percent to, čo ste urobili. Okrem toho má klient vizuálnejší spôsob získania nápadu.
A poviete si, prečo mu neukázať webovú stránku, na ktorej ste pracovali? Dalo by sa to urobiť, ale nie ako prezentácia práce, ale museli by ste klientovi nechať navigáciu na webe aby ju dôkladne spoznal a veľakrát na to nemajú čas, takže sa nestaráš, že videl všetko.
Na druhej strane, s webovou maketou by ste to dosiahli, pretože by ste na tých obrázkoch zvýraznili všetko, čo chcete vidieť.
Ako sa vyrábajú
Ako sa teraz vyrábajú tieto webové makety? Existuje program na ich vytvorenie? Sú to koláže, ktoré sú prevzaté z internetu?
vlastne existuje niekoľko bezplatných nástrojov že vám môžu pomôcť pri ich vytváraní a že vám môžu dať možnosti, nielen s príkladmi, ktoré vám poskytneme o niečo neskôr.
S týmto môžete dokonca vytvoriť zbierku pre daného klienta, pričom dizajn umiestnite do rôznych sekvencií, vďaka ktorým bude konečný výsledok vyzerať oveľa lepšie.
Ide o tieto nástroje:
gliffy
Tento nástroj je online a je to zadarmo. S ním môžete vytvoriť webovú maketu, pretože má veľa schém a API, s ktorým môžete svoju prácu vykonať v priebehu niekoľkých minút.
V skutočnosti je to a z najpoužívanejších a to vám dáva veľa možností.
Kakao
V tomto prípade vás musíme upozorniť, že aj keď sa zameriame na voľná časť, nástroj aj to sa platí a to znamená bude obmedzenejšia v tom, čo dokážeš.
Pre predstavu môžete exportovať iba do PNG (takže nie je tak prispôsobiteľný, ak ho chcete použiť s inými klientmi).
Dobrá vec je, že ak pracujete s tímom, môžete spolupracovať v rovnakom čase (tj v reálnom čase).
Wirif
Wirif je jedným z nástrojov môže zmeniť webovú stránku na a wireframe a spolu s tým pracovať s klientom ukáže vám web podľa vašich predstáv. Ale samozrejme, tu by bolo potrebné vybrať fotografiu počítača, tabletu alebo mobilu na pripojenie výsledku tohto programu.
Ako už asi tušíte, všetky nástroje vám dajú obraz o webdizajne, no bolo by potrebné ho skutočne zostaviť do reálneho obrazu. Na to musíte pristupovať k fotografiám, na ktorých sú zobrazené počítače, mobily, tablety, aby ste vložili svoj dizajn navrch a získali fotografiu, ktorá spája oboje (a ktorá vyzerá dobre).
Na tento účel môžete použiť hotové makety alebo ich vytvoriť sami pomocou programu na úpravu obrázkov.
Webová maketa, ktorú si môžete stiahnuť
Ak sa nechcete príliš zaťažovať prezentáciou diela, tu vám niekoľko necháme príklady mock up ktoré si môžete stiahnuť a použiť. Ušetríte čas.
Realistická webová stránka
Začíname scénou, ktorú môže mať ktokoľvek. Je to stôl a obrazovka počítača navrchu (klávesnica a myš dole). V pozadí knižnica s knihami. Táto knižnica je však v čierno-bielom prevedení, rovnako ako dekoračné prvky písacieho stola (viac kníh a lampa) a steny, ktorá je v sivom tóne.
prečo? Aby bol pohľad zameraný na stránku zobrazenú na monitore. vo vašom prípade môže byť domovská stránka stránky, alebo reprezentatívne časti, ktoré chcete klientovi ukázať.
Stiahnete si to tu.
Jednoduchá maketa webovej stránky
Jednoduchšie znázornenie, kde so sivým pozadím (aj keď sa dá prispôsobiť) nezobrazuje obrazovku, v ktorej budeme mať vloženú webovú stránku.
Vyznačuje sa tým, že ak sa pozriete na obrazovku, má svetlejšiu a tmavšiu časť, pretože simuluje, že na ňu dopadá svetlo.
To môže byť zaujímavé pre časti, kde chcete klient sa pozerá výlučne na ne.
Stiahnete si to tu.
Maketa Samsung Galaxy S5
Toto je konkrétne maketa Samsungu Galaxy S5, ale môže byť perfektné, ak na tom istom obrázku ukážete tri časti webového dizajnu, ktorý ste vytvorili, aby klient ocenil, ako by to vyzeralo na mobile.
Majte na pamäti, že Google teraz umožňuje podnikom viac ako používať responzívnu webovú stránku, teda že vyzerá dobre či už používate počítač, tablet alebo mobil. Nestačí teda, že to vyzerá dobre na počítači, musíte sa uistiť na všetkých ostatných platformách.
Môžete si ho stiahnuť tu.
Maketa pre tablet a mobil
V tomto prípade nebudete môcť zobraziť 100 % webu na tablete, ale na mobile áno. A je to tak, že ak chcete ukázať svoj dizajn na týchto dvoch zariadeniach, môžete to urobiť aj tak, aby klient získal predstavu, ako bude vyzerať.
Samozrejme, nezabudnite na to na tablete sa zobrazí na šírku zatiaľ čo mobilné bude to mať vertikálny. Je to spôsob, ako môže vidieť zmenu vášho dizajnu, aby vyhovoval obom zariadeniam.
Máš to tu.
Máte nejaké príklady webových mock-upov? Môžete sa o ne podeliť v komentároch.