Pavel Fiala - moje dokumenty k uceni, semestralni prace, fotky z akci etc.

z denicku jak na webdesign

Jaké začít s projektem a jeho návhrem do wireframů

Jě několik potřebných věcí, které k tomu potřebujete: nějaký nástroj na wireframy já pracuji například s Pencilem (Pencil project),
pak to jsou určitě znalosti vašeho CMS či aplikace, kterou budete navrhovat, tuto znalost využijtete k představě toho jaké všechny widgety (komponenty), bude mít k dispozici. Důvodem k této znalosti jsou, především efektivita zpracování pro vývojáře (kodéra). Může se Vám totiž stát, že danou widgetu, kterou navhrnete nebude tak snadné implementovat či nebude možné ji tak levně vyrobit, vždy je lepší pracovat z věcma, které máte v editovatelné v aplikaci.

Pak potřebujete znát trošku HTML, CSS, JS a možností vašeho grafika. Opět je důvodem efektivitia, Váš výstup by měl být totiž optimalizovaný pro všechny následující úkony.

Například u grafiky vs wireframes si musíte uvědomit několik bodů:

  • Grafik dostane wifreframes všechny prvky (komponenty), které patří k sobě by měli být viditelně svazány, a měli by obsahovat všechny své možnosti. Tzn. u wireframes je vždy nutné se podílet / komunikovat s vývojem / analytikem.
  • Grafik nemusí nutně znát aplikaci pro kterou narhuje, tzn. nenuťte ho zbytečně navrhovat komponenty, které jste schopni si vytvořit z již dodáváně grafiky
  • Grafik, je člověk co chce mít všechno hezké, různě odsazené, používá různorodé fonty apod.
    Dbejte tedy:
    1. Na minimální velikost fontu (tj 14-16px)
    2. To co je odkazem a není zřetelné, že je to funkčním prvkem, bay standartně bylo podtržené
    3. Začal návhrem výpisových částí (výpis produktů, kategorii apod., výpis detailů a stránek, které jsou smyslem webu (objednávka), v poslední řadě jde o domací stránku)
    4. Tlačitka, vstupní pole, funkční prvky ikony apod. byly relativně zvětšitelné (na zákl. 3velikosti malé, normalní, velké)
    5. Návrh by měl vždy také obsahovat 4 typizaci barvy (pro funkční prvky): tj. success, warning, danger, default (info)
    6. Nezapoměňte chtít taktéž znát rozdíl mezi aktivním, ukázaným, vypnutým prvkem
    7. Grafik nutné nemusí vše skicovat existuje množství potřebných knihoven / fontů, které vám poskytnout dostatečné množství ikonek
    8. Po grafikovi vždy chtějte stránku s funkčnimi prvky (tzn. v uvozovkách manuál pro použití funkčních prvků, tlačítko, vstupní pole, info hlášky, velikosti fontů například pro nadpisy)
    9. nechtějte po grafikovy, aby nutně navrhoval své vlastní komponenety (výběr v seznamu, radio button, chceckbox apod), je vždy vhodnější aby tento design těchto prvků vždy výcházel z prohlížeče