Naučte sa používať jednoduché Wireframy na spustenie návrhov
Webový kábel je jednoduchý vizuálny sprievodca, ktorý vám ukáže, ako by stránka vypadala. Navrhuje štruktúru stránky bez použitia grafiky alebo textu. Webový portál webovej stránky by zobrazoval celú štruktúru lokality - vrátane toho, ktoré stránky odkazujú na miesto.
Web wireframes sú skvelý spôsob, ako začať s vašou dizajnovou prácou. A kým je možné vytvoriť komplexné drôtené rámčeky s obrovským množstvom detailov, vaše plánovanie môže začať utierkou a perom. Kľúčom k vytvoreniu dobrých drôtených rámov je vynechať všetky vizuálne prvky. Použite rámčeky a riadky na reprezentáciu obrázkov a textu.
Čo treba zahrnúť do drôteného rámu webovej stránky:
- rámčeky pre primárne grafické prvky
- umiestnenie titulkov a podtitulov
- jednoduchá štruktúra rozloženia
- výzvy na akciu
- bloky textu
Ako vytvoriť jednoduchý webový skelet
Vytvorte drôtený rám webovej stránky pomocou akéhokoľvek šrotu papiera, ktorý máte k dispozícii. Tu je postup, ako to robím:
- Nakreslite veľký obdĺžnik - môže to byť buď celá stránka, alebo viditeľná časť. Zvyčajne začínam s viditeľnou časťou a potom ju rozbalím tak, aby zahŕňal prvky, ktoré by boli pod záhybom.
- Nakresliť rozloženie - sú to 2 stĺpce, 3 stĺpce?
- Pridajte do poľa pre grafiku záhlavia - Nakreslite si nad svojimi stĺpmi, ak chcete, aby sa jednalo o jednu hlavičku nad stĺpcami, alebo ho jednoducho pridajte tam, kde chcete.
- Napíšte "Headline", kde chcete, aby bol váš titulok H1.
- Napíšte "Sub-Head", kde chcete byť H2 a nižšie titulky. Pomáha to, ak ich robíte proporcionálnymi - h2 menšími ako h1, h3 menšími ako h2 atď.
- Pridajte políčka pre ďalšie obrázky
- Pridať navigáciu. Ak plánujete karty, stačí nakresliť polia a napísať "navigáciu" cez vrchol. Alebo zadajte zoznamy s odrážkami do stĺpcov, kde chcete navigáciu. Nepíšte obsah. Stačí napísať "navigáciu" alebo použiť riadok na zobrazenie textu.
- Pridanie ďalších prvkov na stránku - identifikujte, čo sú s textom, ale nepoužívajte skutočný text obsahu. Ak napríklad chcete kliknúť na tlačidlo s výzvou na akciu v pravej dolnej časti, vložte do nej rámček a označte ho ako "výzvu na akciu". Nepíšte "Kúpiť teraz!" v tejto kolónke.
Akonáhle budete mať svoj jednoduchý wireframe napísaný, a to by nemalo trvať viac ako 15 minút na skica jeden nahor, ukázať to niekomu inému. Opýtajte sa ich, či niečo chýba, a pre inú spätnú väzbu. Na základe toho, čo hovoria, môžete napísať iný drôtový rám alebo ho nechať.
Prečo sú papierové drôty najlepšie pre prvé koncepty
Zatiaľ čo je možné vytvárať drôtové snímky pomocou programov, ako je Visio, pri vašom počiatočnom brainstormingu by ste sa mali držať papiera. Papier sa nezdá byť trvalý a mnohí ľudia predpokladajú, že ho hodíte dohromady za 5 minút, a preto neváhajte a dajte vám dobrú spätnú väzbu. Ale keď použijete program na vytvorenie ozdobných drôtených rámov s perfektnými štvorcami a farbami, vystavujete sa riziku, že sa dostanete do samotného programu a trávíte hodiny zdokonaľovaním niečoho, čo nikdy nebude fungovať.
Papierové drôtené rám je ľahké. A ak sa vám to nepáči, stačí len rozdrviť papier, hodiť ho do recyklácie a chytiť nový list.