<< Späť

02 -- O (web)dizajne

Pod dizajnom zvyčajne rozumieme plán, resp. špecifikáciu konštrukcie/implementácie nejakého objektu alebo procesu, ktorý spĺňa estetické, funkčné, ekonomické a sociálno-politické požiadavky. Podľa Slovníka súčasného slovenského jazyka je dizajn zadefinovaný ako:
  1. výtvarné riešenie; návrh vzoru na textile, na keramike, na priemyselných výrobkoch a pod. vychádzajúci z účelovej funkcie a z estetického dojmu;
  2. celkový vzhľad; povrchová úprava výrobku;
  3. špecifická výtvarná činnosť zameraná na priemyselnú výrobu; umelecký študijný predmet.
Podľa knihy Donald A. Norman: The Design of Everyday Things má dizajn zohľadňovať nasledovné požiadavky:
ÚLOHA NA ZAMYSLENIE
Prezrite si nasledovné obrázky a skúste zodpovedať, akým spôsobom je pri každom zohľadnená uvedená požiadavka dizajnu:
akropola
1. estetická
sporak
2. funkčná
napoj
3. ekonomická
vchod
4. sociálno-politická
Jedno z možných vysvetlení
  1. estetická -- už v časoch, kedy bola postavená aténska Akropola sa dbalo na estetickú stránku vzhľadu budov. Na obrázku to možno vidieť tak, že vodorovné línie budovy zapadajú do "línií" zlatého rezu (výška strechy | výška prekladu | výška stĺpov). Vo všeobecnosti možno povedať, že ľudia majú pozitívnejší vzťah k objektom/systémom, ktoré aj svojím zovňajškom pôsobia esteticky.

  2. funkčná -- táto požiadavka je obzvlášť dôležitá pri veciach, ktoré som predmetom každodenného používania. Dobrá funkčnosť dizajnu sa vyznačuje tým, že na prvý pohľad je jasné, ako daný predmet využívať. Konkrétne, na sporáku vieme okamžite určiť, kam položiť hrniec a ktorú platničku zapnúť, aby sa obsah hrnca začal ohrievať.

  3. ekonomická -- častým obmedzením pri tvorbe dizajnu je množstvo dostupných prostriedkov (finančných, materiálových a pod.). Uvedený nápoj je balený v dvoch prevedeniach -- v sklenenej fľaši a plechovke. Bohužiaľ, napriek tomu, že sklo je ekologickejšia alternatíva (vratné fľaše možno vyčistiť a znovu použiť), výroba hliníkovej plechovky je lacnejšia v porovnaní so sklom (najmä jeho čistením pred opätovným použitím). Prirodzene, producent nápojov chce minimalizovať náklady na výrobu (jednak kvôli väčšiemu zisku, ale aj kvôli nižšej predajnej cene), a preto často v obchode nájdeme väčší podiel nápojov, balených v plechovkách, než vo vratných fľašiach.

  4. sociálno-politická -- je potrebné, aby dizajn zohľadňoval aj potreby, ktoré sú dané sociálnym, politickým či kultúrnym pozadím používateľa. Na uvedenom obrázku je potrebné zdôrazniť dôležitosť bezbariérového prístupu do budovy pre ľudí s pohybovým postihnutím. Skúste si okolo seba všímať, že budovy, ktoré boli postavené v priebehu posledných dvoch, troch dekádach už od začiatku (architektonického návrhu) zohľadňovali túto potrebu. Budovy, ktoré pochádzajú spred štyroch a viac dekád (napr. naša fakulta, vchod M) túto potrebu v tom čase nezohľadnili a rampy museli dorábať dodatočne.
Pochopiteľne, nie je možné uspokojiť všetky štyri požiadavky pre tvorbu dizajnu v plnej miere. Preto prichádza na rad rozhodovanie, do akej miery je potrebné a možné jednotlivé požiadavky naplniť. Toto rázcestie pri tvorbe dizajnu možno zobraziť nasledovným diagramom, kde A ----/---> B možno prečítať "ak zohľadním A, obetujem B:
razcestie 1
Voľne možno tento diagram opísať tak, že keby bolo všetko okolo nás riadené estetikou, život okolo nás by bol síce potešením pre oko, ale menej pohodlnejší. Avšak, keby sme sa pre zmenu riadili len použiteľnosťou, veci okolo nás by boli pohodlnejšie, avšak škaredšie. Keby sme sa riadili len nízkymi nákladmi na výrobu, tak väčšina vecí by nebola ani pekná, ani funkčná. Nakoľko na svete neexistuje „priemerný“ človek, nemožno navrhnúť dizajn, ktorý by vyhovoval všetkým špeciálnym požiadavkam. Zvyčajne, čím väčšej skupine používateľov chceme vyhovieť, tým stúpa nákladovosť daného dizajnu.

Ďalším rázcestím, s ktorým sa stretávame pri tvorbe dizajnu je vzťah medzi účastníkmi, t. j. medzi dizajnérom, klientom a konečným používateľom. Dizajnéri musia uspokojiť potreby svojich klientov. Tí však často nebývajú konečnými užívateľmi. Vtedy býva pre klienta prioritná hlavne nízka cena (náklady) a klient navyše nemusí odhadnúť potreby používateľa, preto sa stáva, že dizajnér vytvorí dizajn, ktorý používateľa neuspokojí. Tento vzťah možno zobraziť aj pomocou nasledovného diagramu:
razcestie 2

Použiteľnosť dizajnu možno opísať, resp. krokovať pomocou siedmich fáz akcie, kde je potrebné zodpovedať, ako jednoducho môžeme:
  1. zistiť funkciu zariadenia,
  2. zistiť, aké akcie zariadenie ponúka,
  3. určiť mapovanie od úmyslu po reálny pohyb,
  4. vykonať akciu,
  5. rozoznať či je systém v požadovanom stave,
  6. určiť mapovanie od stavu systému po interpretáciu,
  7. rozoznať, v akom stave je systém.
ÚLOHA

Opíšte sedem fáz akcie pre sporák na obrázku:
sporak
Jedno z možných vysvetlení
  1. Načo slúži sporák? Na zohrievanie. Zohrievanie čoho? Potravín.
  2. Vieme určiť, čo sa dá so sporákom robiť? Áno. Dokážeme zapnúť horák a nastaviť intenzitu zohriatia horáka.
  3. Keď si chceme zohriať jedlo, čo musíme vykonať? Vybrať si, ktorý horák chceme použiť, s akou intenzitou ho chceme zohriať. Následne môžeme určiť reálny pohyb – nastaviť prislúchajúci ovládač na prislúchajúcu teplotu, položiť jedlo na prislúchajúci horák.
  4. Fyzicky vykonáme „reálny pohyb“ (otočenie horáka a položenie na platničku).
  5. Vieme rozoznať, napríklad, či je horák dostatočne zohriaty? Áno. Sála z neho teplo.
  6. Keďže horák je zohriaty, jedlo položené na ňom sa hreje tiež.
  7. Keď je ovládač ľavého horného horáka otočený v polohe, ktorá určuje maximálnu intenzitu hriatia, môžeme vyhlásiť, že ľavý horný horák pracuje na plný výkon.
Sledovanie pomocou siedmich fáz akcie možno sumárne zhrnúť do štyroch princípov dobrého dizajnu: Občas pri tvorbe dizajnu má dizajnér, ale aj klient tendenciu (často v dobrej viere) nabaľovať svoj produkt množstvom funkcií. To často pôsobí pre používateľa odstrašujúco, nakoľko stráca schopnosť jednoducho využívať ponúknutý dizajn, t. j. dochádza k porušeniu niektorého/niektorých/všetkých princípov dobrého dizajnu. Preto je potrebné vyjasniť si dve zhubné pokušenia tvorby dizajnu, a to:

ÚLOHA NA ZAMYSLENIE

Ako možno vnímať náš Akademický informačný systém z hľadiska funkcionalizmu?

Jedno z možných vysvetlení AiS2 ponúka širokú škálu funkcií a je dimenzovaný pre používanie na ktorejkoľvek univerzite na Slovensku. Nakoľko každá univerzita má svoje interné postupy pre svoju agendu, môžeme usúdiť, že používateľ (univerzita) má veľa požiadaviek na funkcionalitu. Avšak, koľko funkcií AiSu reálne využívame? Z desiatok položiek v ponuke nám vystačí pár (najmä zapisovanie známok a prihlasovanie na skúšky), čiže z pohľadu našej fakulty ide o uctievanie falošných modiel. Jedným z dôvodov, prečo využívame len tak malú časť systému je nie veľmi prívetivé užívateľské prostredie (systém neplní svoju funkčnú a estetickú požiadavku dizajnu). Vhodným kompromisom by bola možnosť nakonfigurovať AiS tak, že bude obsahovať len položky, ktoré sú nami reálne využívané (v súčasnosti za takúto konfiguráciu možno považovať fakultnú iniciatívu Votr).

Grafický dizajn

Doteraz sme pojednávali o dizajne všeobecne a uviedli príklady objektov / systémov každodenného života. S grafickým dizajnom sa taktiež stretávame každý deň, často bez toho aby sme si to vôbec uvedomovali. Grafický dizajn vidíme na etiketách potravín, drogérie, bilbordoch, v hromadnej doprave a pod. Čím sa teda grafický dizajn špecifikuje?
Podľa Timothy Samara: Design Elements, a Graphic Style Manual do grafického dizajnu vstupuje: Cieľom je informovať verjenosť o tovare, službách, udalostiach či myšlienkach, čo implikuje, že grafický dizajn je často previazaný s marketingom. Taktiež, špecifikom grafického dizajnu je, že cieľ je definovaný klientom a realizovaný dizajnérom.
Grafický dizajn sa stal aj predmetom skúmania, ktorého výsledkom je často zoznam pravidiel, resp. odporúčaní, ako vytvárať "dobrý" grafický dizajn. Výsledky sa často opierajú o poznatky zo psychológie, najmä, ako človek vníma jednotlivé grafické prvky. Jednotlivé relevantné časti grafického dizajnu pre naše potreby budeme preberať počas tohto kurzu.

Webdizajn

Pod týmto pojmom rozumieme všetky úkony, ktoré sú potrebné pre zobrazenie obsahu v prehliadači alebo inom grafickom rozhraní. Tvorba webdizajnu zahŕňa množstvo disciplín, napríklad:

Inkscape -- úvod

Množstvo grafických prvkov na webstránke nemožno (resp. veľmi obťažne) vytvoriť pomocou nástrojov určených priamo na tvorbu webu (HTML, CSS). Najčastejšie sa jedná o logá, rôzne dekoratívne prvky a pod. Preto je potrebné si ich vytvoriť vopred v grafickom editore a následne len vložiť do kódu. Pre tieto účely budeme používať softvér Inkscape 1.0, ktorý je voľne dostupný a svojou funkcionalitou je porovnateľný s komerčnými grafickými editormi. Budeme pracovať pod Windowsom a s prostredím v anglickom jazyku:
file_download Stiahnuť Inkscape
Inkscape slúži na tvorbu vektorovej grafiky, t. j. takej, ktorá je invariantná vzhľadom na škálovanie (priblíženie). Spôsob, akým sa kóduje vektorová grafika, je, že každý útvar je zaznamenaný pomocou svojich parametrov (napr. obdĺžnik je daný dvomi parametrami: súradnice ľavého horného rohu a súradnice pravého dolného rohu), zatiaľ čo v rastrovej grafike je obraz zakódovaný hodnotou (farbou) každého obrazového bodu (pixela). Ako možno vidieť na nasledovnej animácii, rastrová grafika nie je invariantná na škálovanie a pri priblížení dochádza k efektu tzv. pixelácie (pozor, nezamieňať s pixelizáciou):
porovnanie
Vektorový obrázok (vľavo), rastrový obrázok (vľavo) (vpravo) s antialiasovou pixeláciou.
Všimnite si, že vo vektorovom obrázku aj po veľkom priblížení ostáva oblúk ostrý, zatiaľ čo v rastrovom obrázku sú strany štvorca a oblúk rozmazané.

Používateľské prostredie

Po inštalácii a spustení Inkscapu sa nám zobrazí prostredie programu, ktoré je rozdelené na niekoľko častí: prostredie
  1. Hlavná ponuka -- takmer všetky nastavenia a nástroje sú prístupné z hlavnej ponuky. V zbytku prostredia je väčšina ikon skratkami pre položky obsiahnuté v hlavnej ponuke.
  2. Ponuka často používaných funkcií -- nachádzajú sa tu odkazy na najpoužívanejšie funkcie ako ukladanie súboru, krok späť a pod.
  3. Nastavenia v rámci režimu -- v tomto riadku nastavujeme vlastnosti pre daný režim, ktorý vyberáme v oblasti 4.
  4. Zoznam režimov -- jedna z najdôležitejších častí prostredia, prostredníctvom tejto ponuky vkladáme a editujeme rôzne útvary.
  5. Plátno -- je vlastne naša kresliaca plocha. Všimnite si, že obdĺžnik v strede plochy reprezentuje našu (viditeľnú) stranu (plátno je väčšie ako strana). Na okraji plátna sa nachádza zvislé a vodorovné pravítko.
  6. Dokovacie menu -- tu nastavujeme všetky vlastnosti, ktoré vyžadujú dialógové okno (t. j. výplne, rozmiestnenie, vlastnosti dokumentu, exportovanie bitmáp a pod.)
  7. Prichytávanie -- veľmi užitočné pri tvorbe "pixel-perfect" grafiky, podrobne si prejdeme neskôr.
  8. Paleta farieb -- základná paleta farieb, do budúcna odporúčam miešať farby ručne.
  9. Stavový riadok -- obsahuje základné nastavené vlastnosti objektu (výplň, ťah, priehľadnosť, viditeľnosť) a stav na plátne (pozícia kurzora, priblíženie).

Základné útvary

V prvej časti sa zoznámime so základnými útvarmi, ktoré nájdeme v zozname režimov (4.).

Obdĺžnik

Obdĺžnik zadávame pomocou ľavého horného a pravého dolného rohu nasledovným spôsobom: LMB (left mouse button) (ľavý horný roh) + ťahanie LMB + pustenie LMB (pravý dolný roh):
02

Všimnime si, že v nastaveniach, môžeme meniť šírku "W:" a výšku "H:" obdĺžnika prepísaním hodnoty v príslušnom textboxe. Novú hodnotu potvrdíme stlačením tlačidla "ENTER". Ďalšími parametrami, ktoré je možné meniť sú hodnoty "Rx" a "Ry". Tieto hodnoty určujú zaoblenie obdĺžnika. Pokiaľ zmeníme len jednu z hodnôt, každý roh obdĺžnika sa zmení na štvrťkružnicu s daným polomerom. Pokiaľ nastavíme rôzne hodnoty "Rx" a "Ry", roh sa nahradí axiálnou štvrťelipsou, pričom "Rx" a "Ry" určujú dĺžky hlavných polosí (v tomto poradí):
03

Elipsa

Elipsu zadávame rovnakým spôsobom ako obdĺžnik, presnejšie zadávame súradnice vrcholov opísaného obdĺžnika elipsy. Pri elipse môžeme nastaviť aj veľkosť výseku, kde zadávame začiatok a koniec výseku v stupňoch:
04
Poznámka: všimnite si, akým spôsobom sme vymazali predošlý objekt.

Mnohoulníky, hviezdice

Podobne ako v prípade elipsy, aj tu zadávame parametre opísaného obdĺžnika. V nastaveniach objektu môžeme meniť počet vrcholov a prepínať sa medzi režimom mnohouholníka a hviezdice:
05

ÚLOHA

Vyskúšajte zmeniť hodnoty parametrov "Rounded" v prípade mnohouholníka a "Spoke ratio" v prípade hviezdice a zamyslite sa, ako zmena týchto parametrov vplýva na tvar objektu.

Zamkýnanie pomeru strán a centrovanie

Určite vám napadla otázka, akým spôsobom zadať presný štvorec, či kruh. Stačí pred stlačením LMB držať stlačenú klávesu "CTRL":
06

Pre kontrolu si overte, či sa zhodujú hodnoty šírky a výšky štvorca. Analogickým spôsobom vieme vytvoriť kruh.
Avšak v mnohých prípadoch je intuitívnejšie zadávať kružnicu pomocou stredu a polomeru. Voľne povedané, objekt "vytiahneme" zo stredu. V tom prípade držíme stlačený "SHIFT" (pozn. môžeme držať SHIFT a CTRL stlačené súčasne, všimnite si rozdiel):
06

Transformácie

Počas vytvorenia objektu sa nám zvyčajne nepodarí na prvýkrát trafiť presne rozmery a umiestnenie. Samozrejme, môžeme to napraviť dodatočne. Pomocou nástroja výberu, vieme vyberať aktívny objekt (kliknutím na jeho plochu, vždy sa vyberie ten najvrchnejší -- viditeľný) a ľubovoľne ho posúvať, škálovať a otáčať: 08
Poznámky: všimnite si funkciu "zámky" pri škálovaní, ktorá nám zabezpečí, aby sme nezmenili štvorec na obdĺžnik či kruh na elipsu. Taktiež, je potrebné dávať pozor, v akom poradí transformácie vykonávame, nakoľko skladanie transformácií nie je komutatívne.

ÚLOHA 1

Sledujte v stavovom riadku, aké sú aktívne parametre transformácie, keď počas vykonávania transformácie držíte stlačený "SHIFT", resp. "CTRL"

ÚLOHA 2

Overte si nekomutatívnosť skladania transformácií tak, že vložíte na plátno dva obdĺžniky s rovnakými rozmermi. Prvý obdĺžnik najprv natiahnite o polovicu (t. j. šírka 100 --> 150) a následne zrotujte o 45 stupňov. S druhým obdĺžnikou vykonajte rovnaké transformácie, ale v opačnom poradí (t. j. najprv otočenie, potom škálovanie).

Nastavenia dokumentu

Pri tvorbe grafiky je dobré mať pevne stanovenú veľkosť strany (východiskové nastavenie je A4) a jednotky, v ktorých pracujete (východisko sú mm). Tieto parametre si môžete zmeniť v hlavnej ponuke v záložke "File -> Document Properties". Je dôležité nastaviť rovnaké jednotky pre pracovné prostredie (Display units) a veľkosť strany (Units), aby pri práci a exportovaní nevznikol chaos:
10
file_upload Úlohy na prácu v rámci lekcie.