UI/UX dizajn · Zo Zvolena pre celý svet

Dizajn, ktorý si prekliknete skôr, než vznikne

Najprv navrhneme, ako sa bude váš web alebo aplikácia používať, potom ako bude vyzerať. Dostanete klikací prototyp, ktorý si prejdete ako hotový produkt. Programovať začneme až keď ho schválite, takže na konci vás nič neprekvapí.

Hodí sa, ak hľadáte: návrh webu vo Figme klikací prototyp redizajn aplikácie UX audit webu design systém

Cena

od 160 €

Dodanie

do 48 hodín

Mám záujem

Väčšina klientov za nami nepríde so slovom „UX". Príde s tým, že ľudia volajú s otázkou, na ktorú web odpovedá, alebo že objednávku nedokončia. Dizajn rieši práve toto: aby človek našiel, čo hľadá, a bez premýšľania urobil ďalší krok.

Pekný vzhľad je až druhá polovica práce. Preto najprv kreslíme čiernobiele náčrty a až potom farby, písmo a fotky.

Náčrt (wireframe) · kde čo bude

Návrh (UI) · ako to bude vyzerať

Slovník

Šesť pojmov, ktoré od nás budete počuť

Vysvetlené tak, ako ich vysvetľujeme na prvom stretnutí. Pri každom je aj to, čo z neho máte vy.

UX · user experience

Ako sa to používa

Cesta človeka od príchodu po cieľ. Či nájde ponuku, pochopí cenu a dokončí objednávku. Dobré UX nie je vidieť, zlé spoznáte podľa ľudí, ktorí odídu v polovici.

Príklad: menu reštaurácie ako PDF je zlé UX. Na mobile sa zle číta a Google ho nevidí.

UI · user interface

Ako to vyzerá

Tlačidlá, farby, písmo a rozostupy. Všetko, čoho sa človek dotkne alebo na čo sa pozrie. Pri UI rozhodujú detaily: veľkosť tlačidla pre palec, kontrast textu, poradie dôležitosti.

Príklad: tlačidlo „Objednať" vysoké 48 bodov trafíte palcom aj za chôdze.

wireframe · náčrt

Kostra bez farieb

Čiernobiely náčrt, čo bude na stránke a v akom poradí. Zámerne bez farieb a fotiek, aby sme sa bavili o obsahu a nie o odtieni modrej.

Vy z neho máte: rozloženie celého webu vidíte za pár dní a zmena stojí minútu, nie týždeň programovania.

prototyp · Figma

Návrh, ktorý sa dá klikať

Obrazovky prepojené tak, že si ich v mobile alebo počítači prejdete ako hotový web. Nič nie je naprogramované, ale každé tlačidlo vedie tam, kam má.

Vy z neho máte: odkaz, ktorý pošlete kolegom alebo dáte vyskúšať zákazníkovi ešte pred spustením.

design systém

Stavebnica pre celý produkt

Zoznam farieb, písma, tlačidiel a formulárov s pravidlami, kedy sa ktoré použije. Každá nová obrazovka sa poskladá z rovnakých dielov.

Vy z neho máte: aplikácia vyzerá jednotne aj po rokoch a nová funkcia je rýchlejšia, lebo sa nekreslí od nuly.

UX audit

Kontrola existujúceho webu

Prejdeme váš web očami zákazníka a pozrieme dáta z Google Analytics. Výsledok je zoznam miest, kde ľudia váhajú alebo odchádzajú, zoradený podľa dopadu.

Vy z neho máte: konkrétny zoznam úprav s prioritou. Opraviť ich môžete s nami alebo s kýmkoľvek iným.

UI verzus UX

Dve otázky, jeden návrh

UX a UI sa často píšu spolu, lebo jedno bez druhého nefunguje. Krásne tlačidlo na zlom mieste nepomôže a dobre premyslený postup v škaredom obale pôsobí nedôveryhodne.

UX, používanie

Na čo odpovedá
Nájde človek, čo hľadá, a dokončí to?
S čím pracuje
Poradie krokov, obsah, navigácia, formuláre
Výstup
Mapa stránok, náčrty, prototyp
Keď je zlé
Ľudia volajú s otázkou, ktorú web zodpovedá
Príklad od nás
E-žiadosti: výzvy aj žiadosti od podania po záverečnú správu na jednom mieste

UI, vzhľad

Na čo odpovedá
Je to prehľadné, čitateľné a pôsobí to dôveryhodne?
S čím pracuje
Farby, písmo, ikony, rozostupy, tlačidlá
Výstup
Hotový návrh obrazoviek, design systém
Keď je zlé
Web pôsobí lacno alebo zastaralo, aj keď funguje
Príklad od nás
Cukrárik Zuzanka: fotografia výrobku robí prvý dojem ešte pred textom

Rýchly test

Potrebujete UX audit? Ak odpoviete áno aspoň dvakrát, pravdepodobne áno.

  1. 01 Zákazníci volajú alebo píšu s otázkou, na ktorú web odpovedá.
  2. 02 Na web chodia ľudia, ale formulár alebo objednávku nedokončia.
  3. 03 Na mobile sa web ovláda horšie než na počítači.
  4. 04 Každá časť webu alebo aplikácie vyzerá trochu inak.

Dizajn aj kód v jednom tíme

Navrhujeme to, čo vieme postaviť. A postavíme to, čo sme navrhli.

Keď dizajn robí jedna firma a programovanie druhá, niečo sa po ceste stratí. U nás pri návrhu sedí aj programátor, takže prototyp nesľubuje nič, čo by sa potom nedalo urobiť. Hotový web vyzerá ako schválený návrh, nie ako jeho približná kópia.

Chcete rovno web? Pozrite si tvorbu webstránok →

Ako to prebieha

Od rozhovoru po schválený prototyp

Polovicu času trávime pred tým, než niečo nakreslíme. Pri každom kroku píšeme, čo budeme potrebovať od vás.

  1. 01

    Rozhovor

    Kto sú vaši zákazníci, čo na webe hľadajú a čo má web priniesť vám. Zadarmo.

    Od vás: čo robíte a pre koho

  2. 02

    Mapa a náčrty

    Zoznam stránok a čiernobiele náčrty hlavných obrazoviek. Bavíme sa o obsahu, nie o farbách.

    Od vás: pripomienky k poradiu a obsahu

  3. 03

    Vizuálny návrh

    Farby, písmo a fotky podľa vašej značky. Najprv jedna obrazovka, potom zvyšok.

    Od vás: logo a farby značky, ak ich máte

  4. 04

    Prototyp

    Prepojíme obrazovky do klikacieho prototypu. Prejdete si ho v mobile aj počítači a môžete ho ukázať aj zákazníkom.

    Od vás: pripomienky priamo v návrhu

  5. 05

    Schválenie

    Dostanete Figma súbor a prototyp. Programovať začíname až potom, u nás alebo u kohokoľvek.

    Od vás: finálne áno

Ako si dizajn objednať

Ako súčasť webu alebo samostatne

Pri každom webe od nás je dizajn na mieru v cene. Samostatne ho robíme, keď už web alebo aplikáciu máte, alebo keď chcete prototyp skôr, než sa rozhodnete o vývoji.

V cene webu

Cena
v balíku od 890 €
Dodanie
spolu s webom
Pre koho
Nový web alebo e-shop
Dostanete
Návrh obrazoviek, schválený pred programovaním
Programovanie
Áno, robíme my

UX audit

Cena
od 160 €
Dodanie
do 48 hodín
Pre koho
Máte web, ale neprináša dopyty
Dostanete
Zoznam problémov s prioritou a návrhom riešenia
Programovanie
Nie, voliteľne

Návrh a prototyp

Cena
od 350 €
Dodanie
do týždňa
Pre koho
Aplikácia, portál, redizajn, nápad pred vývojom
Dostanete
Figma súbor, klikací prototyp, design systém
Programovanie
Nie, voliteľne u nás alebo inde

Čo dostanete

Všetko zostáva vám

Figma súbor

Všetky obrazovky pre mobil aj počítač. Patrí vám a otvoríte ho zadarmo v prehliadači.

Klikací prototyp

Odkaz, ktorý pošlete komukoľvek. Funguje v mobile, nič sa neinštaluje.

Design systém

Farby, písmo a komponenty s pravidlami. Nová obrazovka sa poskladá z hotových dielov.

Mobil aj počítač

Každú obrazovku navrhneme pre telefón aj počítač, nie len ako zmenšenú verziu.

Podklady pre vývoj

Rozmery, farby a stavy každého prvku pripravené tak, aby ich programátor nemusel odhadovať.

Pripomienky v návrhu

Komentár pridáte priamo k obrazovke v prehliadači. Nič sa nestratí v e-mailoch.

Ukážky z praxe

Čo sa zmenilo, keď sme začali dizajnom

Pri každom projekte sme najprv navrhli, ako sa bude používať, a až potom ho postavili.

Grantový portál Nadácia Pontis

E-žiadosti

Predtým: starý grantový systém mal zastarané ovládanie a už sa nedal ďalej rozvíjať.

Teraz: nový portál, kde žiadateľ vidí vyhlásené výzvy aj svoje žiadosti od podania po záverečnú správu na jednom mieste.

Detail projektu →
Cukráreň Zvolen

Cukrárik Zuzanka

Predtým: zákazníci nemali kde nájsť prehľad ponuky ani ceny, všetko išlo cez sociálne siete a telefón.

Teraz: fotografia výrobku robí prvý dojem ešte pred textom, ceny sú pri každej kategórii a objednávka ide cez prehľadný formulár.

Prípadová štúdia →
Reštaurácia Zvolen

Burger Pub Zvolen

Predtým: menu aj nápojový lístok boli len PDF súbory na stiahnutie.

Teraz: denné menu otvoríte na mobile jedným ťuknutím a Google ho vidí ako text.

Prípadová štúdia →

Časté otázky

Aký je rozdiel medzi UI a UX dizajnom?

UX rieši, ako sa web používa: poradie krokov, čo kde nájdete, či dokončíte objednávku. UI rieši, ako vyzerá: farby, písmo, tlačidlá. Navrhujeme ich spolu, lebo jedno bez druhého nefunguje.

Potrebujem samostatný dizajn, keď chcem len web?

Nie. Pri každom webe od nás je dizajn na mieru v cene a návrh schválite pred programovaním. Samostatne sa oplatí, keď už web alebo aplikáciu máte, alebo chcete prototyp pred rozhodnutím o vývoji.

Koľko stojí UX audit?

Od 160 € bez DPH pre bežný firemný web. Pri e-shope alebo aplikácii s viacerými postupmi povieme cenu po krátkom rozhovore.

Koľko stojí návrh a prototyp?

Od 350 € bez DPH. Výsledná cena závisí hlavne od počtu obrazoviek. Presnú sumu povieme po prvom stretnutí, keď vieme, čo má produkt robiť.

Ako dlho trvá návrh a prototyp?

Návrh a prototyp máte do týždňa od prvého stretnutia, UX audit do 48 hodín. Pri väčšej aplikácii s viacerými rolami povieme termín dopredu, ešte pred začiatkom práce.

Môžem dizajn od vás dať naprogramovať inej firme?

Áno. Figma súbor aj prototyp sú vaše a podklady pripravíme tak, aby s nimi vedel pracovať ktorýkoľvek programátor.

Čo je Figma a musím ju mať?

Figma je nástroj, v ktorom dizajn kreslíme. Nemusíte nič inštalovať ani platiť. Návrh aj prototyp otvoríte cez odkaz v prehliadači a komentár pridáte priamo k obrazovke.

Ako prebiehajú pripomienky?

Pripomienky zbierame pri náčrtoch aj pri vizuálnom návrhu, keď sa zmena robí najľahšie. Ak by ste chceli zmeniť smer celého návrhu, povieme dopredu, čo to znamená pre čas a cenu.

S Monolabs sme spolupracovali na tvorbe nášho webu fitastyl.sk a s výsledkom sme veľmi spokojní. Oceňujeme najmä ich prístup, profesionalitu, spoľahlivosť a ochotu vždy hľadať to najlepšie riešenie. Komunikácia bola príjemná, všetko sme vedeli spolu otvorene prebrať a vždy sme našli spoločnú cestu. Ďakujeme za skvelú spoluprácu a určite odporúčame!
daniela klamova
daniela klamova
Ak chcete získať funkčnú a kvalitnú webovú stránku, eshop alebo ine IT služby určite ste na správnom mieste. Profesionálny prístup, výborná komunikácia, mladý kolektív šikovných programátorov, ktorí pracujú veľmi dynamicky. Vrelo odporúčam všetkými 10.
Zuzka Valachova
Zuzka Valachova Cukrárik Zuzanka

Pošlite nám adresu webu alebo aplikácie, ktorú chcete zlepšiť.

Pozrieme sa na ňu zadarmo a povieme vám, kde ľudia najčastejšie váhajú. Ak ešte nič nemáte, napíšte, čo chcete postaviť.

Audit webu zdarma

Nezáväzná analýza vášho súčasného webu a konkrétny návrh, ako by mohol vyzerať a fungovať lepšie.