Základy webdesignu a.k.a príbeh začínajúcej designerky

April 5, 2018

V poslednej dobe ma čoraz viac fascinuje web design a UX. Je to super oblasť lebo spĺňa väčšinu mojich požiadaviek na prácu:

  • Môžem byť kreatívna a tvoriť pekné vecičky– teda, že sa na svoju prácu môžem pozrieť a povedať si, že "dobre Baška" 

  • Dáva mi voľnosť (čo sa lokality aj času týka)

  • Bude ma nútiť vzdelávať sa celý život keďže s táto oblasť neustále vyvíja

  • Je to tak trošku aj psychológia keďže je treba sa vžiť do hlavy používateľa

 

Takže už nejaký čas pozerám kurzy na lynda.com o tom ako navrhnúť stránku, rozložiť elementy, ako to všetko nejako nakódiť a ešte to spraviť aj vizuálne pekné a mať svoj vlastný štýl. Preto ti v tomto a aj v ďalších článkoch pozdielam kopec inšpirácií a všetko čo sa naučím. Tak poďme na to!

 

 

 

 

 

Toto je môj sumár toho najzaujímavejšieho. 

 

 

 

 

Čo má byť hlavná message tvojej stránky? Kde a ako je táto informácia zobrazená? Aké ďalšie informácie chceš návštevníkovi povedať a ako ich zobrazíš? Je dôležité priradiť každej informácií (elementu) na stránke určitú hodnotu. Na základe tej ich potom adekvátne rozmiestniť a dať im určitú vizuálnu podobu (napr. väčší text pre nadpis ako pre body text, výraznejšiu farbu). 

 

O tomto je vizuálna hierarchia - vedieť ako návštevníkovo oko pôjde po stránke, čo ho pritiahne, čo naopak až tak nie a pracovať s tým. Tu je pár pravidiel o tom ako naše oči fungujú:

 

Z a F cesty: 

Ľudia trávia na stránkach priemerne 7 sekúnd. Rýchlo prescrollujú stránku, zamerajú sa na nadpisy, zvýraznené kľúčové slová a screenujú body text aby našli hľadanú informáciu. 

 

Najčastejšie prechádzame stránku po ceste v tvare Fka. To platí najmä pre blogy a stránky s hustejším textom. Umiestni teda tie najdôležitejšie informácie v prvých dvoch paragrafoch a každú sekciu jasne označ nadpisom. 

 

Ďalej naše očko behá po stránke po Zku a to hlavne pri viac vizuálne zameraných stránkach (portfólia napr.).

 

White space

Jasné, keď okolo nejakého elementu nič nie je, automaticky pritiahne našu pozornosť. Dáme mu možnosť dýchať a hneď sa stane viac viditeľným. 

 

Veľkosť a váha textu

S písmom to nie je úplne tak easy. Dôraz treba dať na to ako spáruješ body a headline typ písma. V body textoch sa neodporúčajú používať Serif písma, keďže môžu byť ťažko čitateľné na niektorých zariadeniach. Na pekné skombinovanie písiem dobre poslúži stránka typeconnection.

 

Samozrejme platí hlavne, že:

  • Väčšie písmo priťahuje pozornosť viac ako menšie

  • Hrubšie písmo priťahuje viac ako tenké

Nedávno som čítala jeden super zaujímavý článok o tom ako sa dá hierarchia v písme docieliť aj ináč.  A to:

  • Váhou písma

  • Farbou písma

 

 

Farby

Svetlé farby priťahujú viac pozornosti ako šedé, nie až tak výrazné farby. Takže ďalšia vec, ktorá nám umožní nastaviť hierarchiu elementov na stránke.

 

Tento rok letí dark purple (vraj aj v móde, ženy moje). No a odporúčam si prečítať článok o základoch kombinovania farieb. Pre pokročilejších nadšencov mám článok o pravidlách kombinovania farieb.

 

 

 

 

 

 

Rovnováha alebo balance sa týka celkového layoutu stránky. Nastáva keď elementy ako celok dávajú pocit vyrovnanosti, teda že jedna strana stránky nepritiahne oko viac ako druhá. Tiež zabezpečuje aby elementy na stránke neboli voľne porozhadzované ale mali príťažlivý look.

Ako na to?

 

Symetria

Symetria vznikne keď zarovnáme elementy do stredu stránky, okolo centrálnej osi. Vznikne tak usporiadaný a harmonický vzhľad webu. Na druhej strane si ale treba dať pozor aby sme neboli nudní a predvídateľní.

 

Asymetria

Asymetria je opak symetrie (ale nevrav?). Neznamená nedostatok vyváženia elementov na stránke, naopak umiestňuje na stránku elementy rozličnej váhy a tým vytvára pocit celkového balansu. Elementy sa navzájom vyvážia čím vznikne zaujímavý, nepredvídateľný design.

 

 

  

Pravidlo jednej tretiny

Pokiaľ stránku rozdelíme na tretiny, najdôležitejšie elementy by sa mali nachádzať na čiarach, ktoré stránku rozdeľujú. Toto snáď poznáte z fotografovania.

 

 

Zlatý rez

Úžasná vecička. Zlatý rez nájdeme v prírode, na najznámejších maľbách a grafikách keďže tak úžasne lahodí nášmu oku. Je to ideálny pomer medzi dvoma úsečkami. No veď pozri ako tento ideálny pomer vzniká dole na príkladoch.

 

 

 

 

 

 

Grids (mriežky?) slúžia na zarovnanie elementov na stránke a na určenie pomeru medzi nimi. Sú základom pri designovaní stránky. Stačí si o nich jeden krát prečítať a odrazu pochopíte rozloženiu elementov všetkých stránok. 

 

Väčšinou majú grids 12 stĺpcov do ktorých sa napasujú jednotlivé elementy. Tak budú pôsobiť zarovnane a usporiadane. 

Design Grid Overlay je skvelý plugin pre Chrome, ktorý vám zobrazí grids na akejkoľvek stránke a tým pádom lepšie pochopíte celý layout.

 

 

Kontrast

Vďaka kontrastu je možné zvýrazniť jeden element viac ako druhý. Tiež napríklad zvýrazniť CTA button čiernej farby na bielom pozadí. 

Kontrast nevzniká len spojením opačných farieb. Pracovať sa da tiež s kontrastnou veľkosťou, shape, váhou písma atď. 

 

Opakovanie (Repetition)

Opakovanie elementov dokáže vytvoriť upravený design, ktorý dáva zmysel. 

Pre elementy s rovnakou témou použite rovnaký štýl prezentovania a umiestnite ich v blízkosti k sebe. Toto platí napríklad pre elementy v menu alebo v designe dole pre elementy "Planning Tools", "Family fun"... Majú rovnakú funkciu a preto sú pri sebe a zobrazené v rovnakom štýle.

 

Takže, ak budeš nabudúce navrhovať stránku nezabudni na hierarchiu (dôležitosť) informácii, na to, že elementy majú prispievať k rovnováhe layoutu stránky a to aj za pomoci správneho zarovnania (grids). 

 

Máš iný názor? Chcem ho vidieť dole v komentoch.   

 

 

 

 

Share on Facebook
Share on Twitter
Please reload

Kam ďalej?

Základy webdesignu a.k.a príbeh začínajúcej designerky

AB test: ako zistiť víťaza testu a veľkosť vzorky

1/7
Please reload

Barbora Grmanová design | Slovakia