• O projekte

    Niekoľko poznámok o tom, ako iGuide vznikol.
  • Poslanie grafického designu

    Naplnenie hodnôt remesla napomáha naplneniu kvalít diela.
    Dizajn je obal funkcie.
    Obal nesmie funkciu potláčať, ale ju podporovať.
    Grafický dizajn obaľuje informáciu.
    Informáciu nesmie potláčať, ale ju podporovať.
  • Charakter zariadení

    Dotykové mobilné zariadenia majú svoje špecifiká používania:
    • Tablet je niečo medzi smartfónom a laptopom
    • Po screene sa prvky častejšie posúvajú, menej sa kliká na odkazy
    • Primárne sú to zariadenia na prezeranie obsahu
    • Keď vytvárať obsah, tak multimédiá - foto / video / krátke texty. Toto je zároveň užívateľsky preferovaný content
    • Sú prepojené s webovým obsahom
    • Fungujú ako súčasť cloudu
  • Wireframe

    Nakreslite si svoju aplikáciu najprv do schémy
    Tiež používaný pojem “skica”.
    Ide o návrh definujúci funkciu a obsah aplikácie pre lepšie pochopenie a efektívnejší návrh.
    Typy wireframov:
    • Textový (textový popis)
    • Stručný či blokový
    • Podrobný (img + real text)
    Následná grafika zachováva prvky v aplikácii, ale od WF sa môže líšiť veľkosťou a poňatím jednotlivých prvkov.
  • GUI

    Guide user interface - prvky skladačky.
    Ak je konštrukcia webov Lego, tak návrhy mobilných aplikácií sú Duplo.
    Layout aplikácie je definovaný niekoľkými systémovo-funkčnými prvkami, ktoré sa na seba skladajú.
    Tieto prvky môžu byť systémové alebo brandované.
    Aktuálne GUI pre jednotlivé OS sú free stiahnuteľné z webu.
    http://www.mobilexweb.com/blog/ui-guidelines-mobile-tablet-design
  • Brandovaná skladačka

    Obrandované GUI - základný princíp.
    Tento princíp využíva prvky GUI, ktoré sú obsiahnuté aj vo vývojových prostrediach.
    Tu sa dajú tieto prvky jednoduchým spôsobom štýlovať.
    Nakoľko je rozmer screenu malý, vzniklo niekoľko základných usporiadaní, ktoré sú odladené a užívateľsky akceptované (napríklad systém článkov a detail článku).
  • OS Human interface

    Predpísané alebo doporučené rozmery.
    Výrobcovia doporučujú pre jednotlivé prvky user interface rozmery, ktoré sú pre ich zariadenia “optimálne“.
    URL linky:
  • Simplify. Simplify. Simplify.

    Menej je niekedy viac.
    Aktuálny a správny trend online grafického dizajnu!
    Pre tento prístup je charakteristické:
    • Jednoduchá skladba layoutov
    • Silná kompozícia, grid
    • Vynechávanie “grafických barličiek“
    • “White space“ okolo prvkov
    • Dôraz na content
  • Pixel perfect

    Zameranie na perfektné spracovanie detailu.
    Toto platí pre technickú ako aj kreatívnu časť práce designéra.
    • Snažte sa mať všetky prvky kreslené ako vektorové
    • Všetky hrany prvkov sú zarovnávané na pixle (využívanie funkcie shape layer)
    • Prevod normal/retina display bude korektný vtedy, keď budú mať všetky prvky zarovnanie na párny pixel
  • Brand

    Značka je to, čo vám zostane, keď vám zhorí továreň. // David Ogilvy
    Brand je niečo viac ako len kvalitné logo.
    Najlepšie značky útočia na všetky zmysly.
    Čím väčšia emočná väzba, tým väčšia zapamätateľnosť.
    Nebojte sa využitia krátkeho videa pri spúšťaní aplikácie, charakteristickej farebnej schémy, typografie, ...
    Nikdy to však nerobte na úkor použiteľnosti app.
  • Štylizácia

    Využívanie podkladových plôch pre formulovanie vizuálneho prejavu.
    V zásade platí, že tmavé layouty sú vhodné na štýlovejšie prezentácie, svetlý podklad na informačné riešenia.
    Svetlé layouty majú vyššiu čitateľnosť aj čítanosť.
    Je však možné tento princíp v jednej aplikácii vhodne striedať.
  • Farby

    Jeden zo základných nástrojov grafického dizajnu
    Všeobecné pravidlá: • Zabezpečiť kontrast farieb • Primerané množstvo a tonalita farieb pre dosiahnutie optimálneho Look & Feel • Typ farieb - preferované sú pastelové, príjemné farby • Využívanie funkčných vlastností farieb - napr. buttony
  • Typografia

    Dajte svojej aplikácii charakteristický vzhľad.
    Kvalitnou typografiou je možné dosiahnuť unikátny vzhľad aplikácie a pritom nepotlačiť jej funkčné vlastnosti, naopak ich podporiť.
    Je možné používať prakticky ľubovoľný font (tento je vložený do samotnej aplikácie).
    Všetka typografia by mala byť v správnej veľkosti, riadkovaní a farbe.
  • Zobrazenie informácie

    Kontextuálne menu, modálne pohľady (ale s rozumom)
    Redukujte a rozdeľujte obsah na rôzne pohľady tak, aby bol pre užívateľa podaný ideálne.
    V prípade dynamického contentu dajte pozor na dostatok priestoru pre reálny content, ktorý bude naťahovaný!
  • Orientácia

    Dvojitá orientácia iPadu je naozaj pecka - pokiaľ ju viete využiť! Dodržte konzistentnosť zobrazenia obsahu na oboch rotáciách. Trik je v udržaní užívateľskej prívetivosti v každom pohľade. Prepínanie orientácie je možné v aplikácii zakázať a vytvárať tak jednostranne orientovaný layout aplikácie. Tip: Je možné použiť princíp, kedy je text orientovaný na výšku a multimédia k textu na šírku.
  • User interface metafory

    Kožené tlačítka, stehy, zvyšky papiera, prepínače.
    Dajte pozor na to, aby ste sa neprepracovali ku gýču.
    Je to síce trendy, ale pokiaľ chcete hodnotný a trvácny design, nepoužívajte tieto prvky samoúčelne.
    Pre “sranda“ aplikácie a jednoúčelové aplikácie je to aplikovateľný princíp.
    Dajte pozor na použiteľnosť.
  • Microsite

    Komunikácia aplikácie aj mimo storu.
    Dajte si k aplikácii vypracovať aj jednoduchú stránku promujúcu Vašu aplikáciu.
    Pomôže Vám to pri komunikácii aplikácie.
  • Výstup grafika

    Odovzdanie výstupu pre kódera
    Výstup by mal obsahovať:
    • Návrh všetkých typov layoutov použitých v aplikácii
    • Ikonu aplikácie pre systém ale aj App Store / Android Market
    • Vrstvy psd a ich názvy sú logicky zoradené a pomenované
    • Jednotlivé layouty sú kompletné - pokiaľ sú nadefinované všetky stavy tlačítok, linky v textoch, flagy, ...
  • Inšpirácia

    Picasso vravel, že dobrí umelci kopírujú, tí najlepší kradnú.
    Nekradnú však od ostatných z oboru, ale mezioborovo a zo zdanlivo nesúvisiacich zdrojov. Design verzus príroda, film, hudba a pod. Jednotiacich prvkov pre vizuálne štýly je nespočetne.
    Inšpiratívne galérie: • thefwa.com/mobilebehance.netdribbble.comdesignspiration.net