Skip to content
Myšlienkové mapy · UX a UI dizajn

Ako zadať UX a UI dizajn webu alebo appky: 5 krokov od cieľa po odovzdanie

Dobré zadanie dizajnu má päť častí: cieľ a zákazník (čo má web dosiahnuť a pre koho), rozsah a obrazovky (čo všetko sa navrhuje), odovzdané výstupy (wireframe, prototyp, vizuálny návrh a podklady pre vývoj), pravidlá schvaľovania a kolá pripomienok a odovzdanie s nadväzujúcim vývojom. Nemusíte rozumieť dizajnu, stačí vedieť, čo chcete dosiahnuť, a dohodnúť si, čo dostanete a kedy. Prejdite vetvy v poradí a zapíšte si odpovede: vznikne vám brief.

  • 5 vetiev
  • každý list vedie na návod, pojem alebo službu
  • čítanie 5 minút
Chcem nový web alebo appku, ale neviem, čo mám dizajnérovi zadať a čo od neho čakať.
1Čo má web dosiahnuť a pre koho?4 kroky2Čo všetko sa navrhuje?4 kroky3Čo dizajnér odovzdá?4 kroky4Ako prebieha schvaľovanie?4 kroky5Čo sa deje po odovzdaní?4 kroky
Vetvy podrobne: čo skontrolovať a kam ďalej
Čo má web dosiahnuť a pre koho?Bez cieľa dizajnér kreslí podľa vkusu. S cieľom kreslí podľa účelu.
Čo všetko sa navrhuje?Rozsah. Zoznam obrazoviek určuje, koľko práce vznikne a čo sa dá odovzdať.
  • Zoznam stránok alebo obrazoviekweb: úvod, služby, cenník, kontakt; appka: prihlásenie, prehľad, detail, nastaveniaPojem: informačná architektúra
  • Hlavná cesta človekaod príchodu po cieľ: kto kde klikne, čo uvidí, kedy sa rozhodnePojem: user flow
  • Prvá verzia a to, čo počkádo prvej verzie len to, čo treba na cieľ; zvyšok ako zoznam na neskôr
  • Zariadenia a variantymobil, počítač, tmavý režim, viac jazykov: každé zvyšuje rozsahPojem: responzívny web
Čo dizajnér odovzdá?Štyri výstupy v poradí. Zmena náčrtu je rýchla, zmena hotového návrhu drahšia.
Ako prebieha schvaľovanie?Kolá pripomienok. Dohodnite pravidlá vopred, aby sa projekt nerozpadol na večné úpravy.
  • Počet kôl a termín na odpoveďkoľko kôl pripomienok je v dohode a dokedy ich pošlete
  • Jeden človek za firmupripomienky od všetkých v jednom dokumente, nie postupne e-mailom
  • Pripomienky k cieľu, nie k vkusu„Zákazník nenájde cenník“ pomôže, „Nepáči sa mi zelená“ len zdržujePojem: použiteľnosť
  • Overenie na ľuďoch pred schválenímprototyp ukážte trom až piatim ľuďom z cieľovej skupinyPojem: test použiteľnosti
Čo sa deje po odovzdaní?Návrh nie je hotový web. Dohodnite, kto ho postaví a ako sa skontroluje.
  • Kto to naprogramujeten istý tím, iný vývojár alebo vy; od toho závisí, čo musí byť v podkladoch
  • Kontrola hotovej verzie proti návrhuobrazovka po obrazovke, na mobile aj počítači, vrátane stavov a chýb
  • Dizajnový systém na budúce zmenynová stránka alebo tlačidlo za rovnakých pravidiel, bez nového návrhuČlánok: dizajnový systém pre malú firmu
  • Celý postup krok za krokomčo pripraviť, čo požadovať a na čo si dať pozor v dohodeČlánok: ako zadať UX a UI dizajn

Ťuknutím na vetvu v mape skočíte na jej detail. Vetvy sa dajú zbaliť ťuknutím na nadpis, odkazy vedú na články, pojmy zo slovníka a služby.

Mapa v texte

Čo má web dosiahnuť a pre koho?

Začnite jednou vetou cieľa: napríklad viac objednávok na konzultáciu cez formulár. Doplňte, pre koho web je (jeden až traja typy zákazníkov, nie „pre všetkých“), čo má človek urobiť a čo máte dnes. Tri weby, ktoré sa vám páčia, spolu s dôvodom povedia dizajnérovi viac než pol strany prívlastkov.

Čo všetko sa navrhuje?

Napíšte zoznam stránok alebo obrazoviek a hlavnú cestu človeka od príchodu po cieľ. Rozhodnite, čo patrí do prvej verzie a čo počká. Mobil, počítač, tmavý režim a viac jazykov rozsah zvyšujú, preto ich uveďte hneď, nie až v polovici práce.

Čo dizajnér odovzdá?

Štyri výstupy v poradí: wireframe (čierno-biely náčrt rozloženia), klikateľný prototyp, vizuálny návrh s farbami, písmami a fotkami a podklady pre vývoj (súbor vo Figme, čo je návrhový program, farby, písma, ikony a stavy prvkov). Postupujte v tomto poradí, lebo zmena náčrtu je rýchla a zmena hotového vizuálu zdĺhavá.

Ako prebieha schvaľovanie?

Dohodnite počet kôl pripomienok a termín, dokedy odpoviete. Pripomienky zbierajte v jednom dokumente od jedného človeka. Hodnoťte podľa cieľa (nájde zákazník cenník?), nie podľa vkusu. Pred schválením prototyp ukážte trom až piatim ľuďom z cieľovej skupiny.

Čo sa deje po odovzdaní?

Dohodnite, kto návrh naprogramuje, kto ho skontroluje proti hotovej verzii a komu patria zdrojové súbory a ako sa môžu používať ďalej. Dizajnový systém (pravidlá farieb, písem a prvkov) vám umožní pridávať stránky bez nového návrhu.

Pojmy z mapy v slovníku

Brief (zadanie)Persona (cieľový zákazník)Wireframe a prototypUI dizajn (používateľské rozhranie)Používateľská cesta (user flow)Dizajnový systém (design system)

Čítajte ďalej

Common questions

Stačí mi na zadanie jedna strana?
Pri malom webe áno: cieľ, zákazník, zoznam stránok a príklady, ktoré sa vám páčia. Pri appke alebo e-shope bude zadanie dlhšie, lebo pribudne prihlasovanie, platby a rôzne stavy. Dôležitejšie než dĺžka je, aby bol cieľ jasný a dal sa overiť.
Aký je rozdiel medzi wireframe, prototypom a vizuálnym návrhom?
Wireframe je náčrt rozloženia bez farieb. Prototyp je jeho klikateľná verzia, na ktorej si vyskúšate cestu. Vizuálny návrh je finálny vzhľad s farbami, písmom a fotkami. Idú v tomto poradí, lebo pri náčrte sa zmena robí rýchlo.
Kedy stačí upravená šablóna a kedy treba dizajnéra?
Pre jednoduchý web (vizitka remeselníka, kaderníctvo) často stačí dobre upravená šablóna. Dizajnér sa oplatí pri appke, e-shope, rezervačnom systéme alebo vlastnom postupe, ktorý šablóna nepokryje.
Koľko stojí návrh dizajnu?
Cena závisí od rozsahu, ponuku pošleme do 48 hodín. Pozrite si cenník alebo nám napíšte, čo chcete postaviť, a pošleme ponuku podľa zoznamu obrazoviek.

Chcete to prejsť s nami?

Napíšte nám, kde ste sa v mape zasekli. Ozveme sa do pár hodín v pracovný deň, prvých 20 minút konzultácie je zadarmo a ponuku pošleme do 48 hodín.

Chcem poradiť so zadanímMessage us