Design webové aplikace (inspirace)

|

Takže všechny wireframy jsou „hotové“, tzn. prošly interním testem u nás v kanceláři a mnoha uživatelskými testováními tam venku (pokusným králíkům ještě jednou děkuji za trpělivost :) Na řadu teď přichází samotný vzhled aplikace.

Inspiraci pro design aplikace jsem hledal různě na internetu, šlo mi hlavně o konkrétní vizuální řešení některých standardních součástí webových i desktopových aplikací. Těch opravdu kvalitních zdrojů není zase tolik. Zkusím se s Vámi podělit o několik z nich, které by jste neměli minout, pokud budete stát před podobným úkolem.

  1. Teorie

    Top-10 Application-Design Mistakes – Jacob Nielsen

    Top-10 Application-Design Mistakes - Jacob Nielsen

    Článek je sice starší, ale určitě stojí za přečtení – obsahuje výčet těch nejčastějších chyb, které můžete při navrhování webové aplikace udělat.

    User Interface Design in Modern Web Applications

    User Interface Design in Modern Web Applications

    V tomhle článku je nahuštěné asi všechno zásadní a určitě by jste ho neměli minout. Jediné s čím bych nesouhlasil je využití „hover akce“ na relativně zásadní funkční součásti aplikace, protože můžou být problematické pro uživatele tabletů, smartphonů, atp., kde v podstatě nic jako přejetí myší nefunguje. Často ani nemusíte vytvářet přímo mobilní verzi, stačí se vyhnout využití „hover akcí“ pro důležité ovládací prvky.

  2. Design

    patterntap.com

    patterntap.com

    Pěkná knihovna UI prvků s relativně aktuálním obsahem a přehledným tříděním podle kategorií. Najdete tam spoustu nápadů a různých řešení pro téměř vše co lze na webu a nebo uvnitř webové aplikaci najít.

    dribbble.com

    Dribbble.com

    Dribbble.com je rozhodně nejlepší zdroj inspirace co se týče současného designu aplikací, ať už webových nebo mobilních. Pokud se Vám nechce procházet vše, mrknětě na můj vlastní výběr 30 kousků, které mě přišli jako nejzajímavější.

  3. Praxe

    43 Essential Controls for Web Applications

    43 Essential Controls for Web Applications

    Super seznam všemožných frameworků a konkrétních řešení, doplněný o ukázky a hlavně zdroje (!).

Snažil jsem se ze začátku hodně přemýšlet o tom, kdo vlastně jsou naši uživatelé, jak budou aplikaci používat a na co jsou zvyklí teď. Většina z nich nemá k dispozici žádný inteligentní nástroj, který by jim s pořádáním školení pomáhal. Často používají vlastní, polovičaté řešení, které jim ve výsledku nepomáhá ani zdaleka tak, jak by ve skutečnosti mohlo a samotné uživatelské rozhraní většinou nestojí za řeč.

Z těchto úvah mi vyplynoulo, že hlavní spojovatel všeho (včetně designu) musí být jednoduchost. Protože když je něco jednoduché a funguje to dobře, snadno se to používá, uživatel se může rychle rozhodovat a šetřit tak čas i nervy. V ideálním případě přestane po čase rozhraní aplikace vnímat úplně a soustředí se jen na obsah – to je i můj cíl.

Jakmile budeme mít připravený první malý náhled designu NAUC.cz, začnu přidávat malé ukázky v podobně dalších článků + krátké info na firemním Twitteru (@nauc_cz). Pokud máte nějaké další zdroje, které stojí za přečtení nebo prohlédnutí, pište do komentářů, rád je do seznamu doplním.

Komentáře nejsou povoleny.