Ukázka webového prostředí
O původech webů | 1. Na počátku byla textura a stín

[tm_pb_section admin_label=“section“][tm_pb_row admin_label=“row“][tm_pb_column type=“4_4″][tm_pb_text admin_label=“Text“ text_orientation=“left“ use_border_color=“off“ border_color=“#ffffff“ border_style=“solid“]

V posledních letech jsme zaznamenali razantní posun v grafickém designu softwarových a online aplikací. Od 3D realistického prostředí k plochému a minimalistickému. Rok 2015 byl v tomto ohledu ještě originálnější a přinesl celou řadu nových přístupů a grafických forem. Jaký celkový dopad měla tato grafická cesta na naše celkové vnímání rozhraní aplikací jako celku? A jaké nové mezníky byly zaznamenány pro budoucí grafické designéry a developery?

01

Metro Windows 8 versus iOS versus Android

Jakým způsobem se tedy mohl posunout obecný trend od oblíbených texturových pozadí, stínovaných objektů a zkosených lesklých hran k plochým barvám, minimalistickému designu a základní typografii? Jistě existuje mnoho faktorů, které bychom našli. Zde předkládám některé z nich, které pokládám za klíčové.

Přesycení informačního trhu

Zásadním zlomem byla určitá obecná frustrace z přesyceného informačního trhu, ve kterém bylo velice složité orientovat se a v určitou chvíli chyběl zásadní směr, kterým by se měl grafický design aplikací efektivně vyvíjet. V letech 2010-2013 se proto začalo přistupovat k navrhování grafického prostředí jako k celku, který je úzce svázán s informační architekturou a dalšími obory zabývající se lidským chováním a vnímáním ve virtuálním světě. Jednou ze základních premis pro další tvorbu bylo zjištění, že je informační trh přetížený informacemi a že by bylo vhodné tyto informace předávat uspořádaně a jednoduše.

.

.

002

Rohlik.cz – oceněná e-commerce aplikace pro rok 2015

Vyspělost publika

Dalším bodem na cestě k efektivnímu a přívětivému designu bylo zjištění, že dnešní online člověk filtruje tok informací na relevantní a odpadové, a to z větší části na základě grafického prostředí informace. Tento neustálý proces hodnocení je však nesmírně vyčerpávající a proto bylo jasné, že budou mít velikou výhodu aplikace, které dokážou tento namáhavý proces potlačit na minimum nebo být dokonce schopné být pružně nastavovány samotnými uživateli.

Různá zařízení

Dalším bodem byl narůstající trend čtení informací z menších zařízení a změna polohy čtení „od stolu k ruce – od počítače k chytrým telefonům.“ Prudký nárůst prodeje chytrých mobilních zařízení, tabletů a příbuzných zařízení se již nesměl ignorovat a pokud mělo být libovolné grafické prostředí úspěšné a chtěné, stalo se nutností připravovat tato prostředí i pro jiné než desktopové zařízení.

.

.

003

oak.is – moderní příklad uživatelsky přívětivé aplikace

V jednoduchosti je síla

S tímto heslem se tedy začala vytvářet nejen uživatelská rozhraní, ale i samotné funkce aplikací. Postupně se tedy začaly prosazovat aplikace, které nabídly omezené a úzce specializované funkce a tím se mohlo samotné rozhraní podstatně zredukovat. Tento trend, který se snaží být co nejvíce konkrétní, uspořádaný a jednoduchý, se stal určujícím směrem, který trvá dodnes.

Zaměřeno na obsah

Jak se obecně stává u nově používané aplikace, jsme fascinováni novými funkcemi a zkoušíme hraniční možnosti rozhraní. Toto nadšení však často odpadá a my se nakonec vracíme k podstatě aplikace, k samotnému obsahu. Ve zmíněných letech se začal tento fakt akceptovat a proto se u kvalitních aplikací často setkáváme s jednoduchým, až primitivním ovládáním, které je zaměřeno na ergonomické přepínání a čtení obsahu.

Online gramotnost

S bleskovým nástupem tabletů a smartphonů se naprosto změnilo vnímání uživatelského prostředí, které je striktně zaměřeno na jednoduché a postupné dávkování možností ovládání. Zatímco jsme se v minulosti obávali, že by uživatelům mohlo chybět konkrétní tlačítko, v současné době a době nedávno minulé se šlo dokonce tak daleko, že uživatelská rozhraní Android a Windows 8 nabízejí ovládací prvky, která se nacházejí zcela mimo plochu a aktivují se někdy dokonce pomocí hlasu či pohybem ruky a očí.

Touto vysokou gramotností se celkově zjednodušil postup vytváření ovládání aplikací a dodržováním obecně zaběhlých principů se dociluje vysoké efektivity a oblíbenosti prostředí. Např.: tlačítko zpět by mělo být v levém horním rohu, kde je standardně vyhledáváno.

.

.

004

Spotify.com – online hudební a streamovací aplikace

Úskalí zařízení

Dalším nárokem se stalo správné zobrazování na všech typech zařízení, z nichž mnohá při stejném rozlišení obrazovky používají rozdílné operační systémy a rozhraní. Proto bylo nezbytné začít přidružovat k určitým ovládacím prvkům popisné piktogramy a další pomocná značení, která byla a jsou všeobecně známa a která výrazně pomáhají větší přehlednosti prostředí. Důležitým faktorem ovlivňujícím čitelnost designu bylo správné použití fontů a jednotlivých řezů. Správné použití fontu má nejen estetickou funkci, ale je také spjato s ergonomií čtení ovládacích prvků a zobrazovaného obsahu. Výrazným posunem byla jednoznačně podpora @font-face. Díky této funkcionalitě se mohla aplikační rozhraní stát lákavější a estetičtější.

Výhody minimalistického designu

S přibývající pestrostí zařízení, z nichž mohou uživatelé přistupovat k aplikacím, bylo zapotřebí tvořit rozhraní tak, aby byly na všech těchto platformách čitelné. Proto se u úspěšných aplikací nejčastěji setkáváme s minimalistickým designem, který lze snadno přizpůsobovat z pohledu designerů a programátorů kterémukoli rozlišení a systému zařízení. Jednoduchá grafika bez zbytečných obrázků a přechodů také výrazně snižuje dobu načítání prostředí, což je jistě veliké plus a přispívá k větší oblíbenosti takových aplikací.

.

.

005

OnCrawl.com – online optimalizace a správa webových aplikací

V příštím dílu článků „O původech webů“ si názorně ukážeme, jak se vytváří úspěšná webová aplikace podle zásad a jednotlivých směrů rozebraných v tomto příspěvku a s odkazem na dnes již historické znalosti z oblasti grafického designu švýcarské školy, jejíž odkaz výrazně ovlivňuje současné grafické trendy.

.

.


martin-vaclav-lorenc-mensi
Martin Václav Lorenc
grafik ateliéru 

[/tm_pb_text][/tm_pb_column][/tm_pb_row][/tm_pb_section][tm_pb_section admin_label=“Section“ fullwidth=“off“ specialty=“off“ transparent_background=“on“ allow_player_pause=“off“ inner_shadow=“off“ parallax=“off“ parallax_method=“off“ custom_padding=“50px||50px|“ padding_mobile=“off“ make_fullwidth=“off“ use_custom_width=“off“ width_unit=“on“ make_equal=“off“ use_custom_gutter=“off“][tm_pb_row admin_label=“Row“][tm_pb_column type=“4_4″][tm_pb_text admin_label=“Text“ text_orientation=“center“ use_border_color=“off“ border_color=“#ffffff“ border_style=“solid“ custom_margin=“50px||15px|“]

Jsme hrdými členy

[/tm_pb_text][tm_pb_text admin_label=“Text“ text_orientation=“left“ use_border_color=“off“ border_color=“#ffffff“ border_style=“solid“]

01 02 03 04 05 06

[/tm_pb_text][/tm_pb_column][/tm_pb_row][/tm_pb_section][tm_pb_section admin_label=“Section“ fullwidth=“off“ specialty=“off“ transparent_background=“on“ background_color=“#ffffff“ allow_player_pause=“off“ inner_shadow=“off“ parallax=“on“ parallax_method=“off“ padding_mobile=“off“ make_fullwidth=“off“ use_custom_width=“off“ width_unit=“on“ make_equal=“off“ use_custom_gutter=“off“][tm_pb_row admin_label=“Row“ make_fullwidth=“off“ use_custom_width=“off“ use_grid_padding=“on“ width_unit=“on“ padding_mobile=“off“ allow_player_pause=“off“ parallax=“off“ parallax_method=“off“ make_equal=“off“ parallax_1=“off“ parallax_method_1=“off“ column_padding_mobile=“on“ custom_padding=“50px||50px|“][tm_pb_column type=“4_4″][tm_pb_text admin_label=“Text“ text_orientation=“center“ use_border_color=“off“ border_color=“#ffffff“ border_style=“solid“ custom_margin=“50px|||“]

Máte na nás dotaz? Napište nám.

[/tm_pb_text][tm_pb_contact_form admin_label=“Contact Form“ captcha=“on“ email=“grafika@4prostor.cz“ use_redirect=“off“ input_border_radius=“0″ use_border_color=“off“ border_color=“#ffffff“ border_style=“solid“ custom_button=“on“ button_letter_spacing=“0″ button_use_icon=“default“ button_icon_placement=“right“ button_on_hover=“on“ button_letter_spacing_hover=“0″ success_message=“Děkujeme za vaší zprávu. Co nejdříve se Vám ozveme.“ submit_text=“Odeslat“ title_text_color=“#727272″ form_field_text_color=“#686868″ button_text_color=“#000000″ button_bg_color=“#f4f4f4″] [tm_pb_contact_field field_title=“Vaše jméno“ field_type=“input“ field_id=“jmeno“ required_mark=“on“ fullwidth_field=“off“ field_placeholder=“Vaše jméno“ select_multiple=“on“ select_first_blank=“on“ show_label=“off“ field_width=“col-md-6″ form_field_font_select=“default“ form_field_font=“||||“ use_border_color=“off“ border_style=“solid“] [/tm_pb_contact_field][tm_pb_contact_field field_title=“Email“ field_type=“email“ field_id=“Email“ required_mark=“on“ fullwidth_field=“off“ field_placeholder=“Email“ select_multiple=“on“ select_first_blank=“on“ show_label=“off“ field_width=“col-md-6″ form_field_font_select=“default“ form_field_font=“||||“ use_border_color=“off“ border_style=“solid“] [/tm_pb_contact_field][tm_pb_contact_field field_id=“sluzby“ field_title=“Výběr služeb“ field_type=“select“ select_options=“Nové Firemní Logo; Firemní Identita; Webová Stránka; Propagace; Tisk; Interiérová Reklama; Venkovní Reklama; Mentoring, Koučink “ select_multiple=“on“ select_first_blank=“on“ required_mark=“off“ show_label=“off“ field_width=“col-md-12″ form_field_font_select=“default“ form_field_font=“||||“ use_border_color=“off“ border_style=“solid“ field_placeholder=“Výběr služeb“] [/tm_pb_contact_field][tm_pb_contact_field field_title=“Váš dotaz “ field_type=“text“ field_id=“zprava“ required_mark=“off“ select_multiple=“on“ select_first_blank=“on“ show_label=“off“ field_width=“col-md-12″ form_field_font_select=“default“ form_field_font=“||||“ use_border_color=“off“ border_style=“solid“ field_placeholder=“Váš dotaz “ form_field_text_color=“#000000″] [/tm_pb_contact_field] [/tm_pb_contact_form][/tm_pb_column][/tm_pb_row][/tm_pb_section]

Napsat komentář