Kreatívne hry nielen pre profíkov v tvorbe webu

Obsah článku je tvorený štyrmi hrami a jednou bonusovou, na ktoré stačí klasický webový prehliadač, podľa vašich preferencii. Všetky hry sú v anglickom jazyku, no na ich pochopenie stačí základná znalosť angličtiny. Aby som nezabudol, hry sú zamerané na Typografiu, UI/UX dizajn a CSS. Poďme teda spoločne na to!

Better Web Type

V predchádzajúcom článku sme si spoločne vysvetlili, prečo je dobré zamerať sa pri tvorbe webovej stránky na správnu digitálnu typografiu. Práve prvá hra je venovaná oblasti správnej typografie, v ktorej je potrebné správne dosiahnuť „rovnostranný trojuholník.“ Možno sa pýtate, prečo práve trojuholník. Množstvo dizajnérov a webových developerov nastavuje line-height, font-size a line-width ako samostatne fungujúce vlastnosti a pritom všetky spolu navzájom komunikujú a vytvárajú vyvážený obsah na webe. Rovnostranný trojuholník tak presne vystihuje, ako spomínané vlastnosti textu navzájom fungujú.

Viac o hre, jej fungovaní a samotnom hraní sa dozviete na oficiálnej stránke.

Can’t Unsee

Veľmi zaujímavá hra, ktorá zaujme predovšetkým produktových dizajnérov od juniorskej až po seniorskú pozíciu. Podstatou hry je otestovať vašu pozornosť na detaily používateľského rozhrania výberom dizajnu, ktorý si myslíte, že je ten správny. Hra sa na tri kolá, počas ktorých sú jednotlivé úlohy ťažšie a ťažšie. Pozor si budete musieť dať na správnu veľkosť tlačidiel, použitého písma či ikoniek. Aby som však všetko hneď neprezradil, pripájam odkaz na stránku, kde si vaše pozorné oči môžete otestovať.

Veľa šťastia a pozornosti!

CSS Diner

Na túto hru som narazil iba náhodou pri prechádzaní internetu a hľadaní inšpirácie pre lepšie CSS štýly použité na webe. Zmyslom hry je zameranie sa na CSS selektory, ktoré bežne ako weboví developeri používame dennodenne. Hra má 32 úrovní, v ktorých si prejdete postupne všetkými selektormi, s ktorými sa môžete stretnúť a práve preto odporúčam túto zábavku predovšetkým začínajúcim kóderom, aby lepšie pochopili fungovanie CSS kódu. Pokročilejší kóderi si môžu precvičiť svoje znalosti a zabaviť sa pri písaní jednotlivých selektorov.

Večera sa môže podávať!

Flexbox Froggy

Štvrtou hrou je Flexbox Froggy, ktorá patrí taktiež do kategórie CSS hier ako predchádzajúca. Určite sa každý z nás stretol s problémom pri písaní CSS, ktoré súviseli s vlastnosťou Flexbox. Úlohou modulu Flexbox je poskytnutie efektívnejšieho rozloženia prvkov na stránke, od samotného zarovnania až po medzery medzi prvkami a zoradením. Aby sme sa však vrátili k samotnej hre, cieľom hry je pochopenie a naučenie sa jednotlivých vlastností, s ktorými sa stretávame pri Flexboxe. Ako už z názvu vyplýva, dôležitú úlohu v hre bude mať žaba resp. žeby, ktoré bude treba umiestniť na lekno podľa pozície, poradia a v určitých rozstupoch na 24 úrovniach. Premenné, ktoré budú použité sú pekne vysvetlené a uľahčujú tak pochopenie Flexboxu aj úplným začiatočníkom.

Bonus: Pixact.ly

Poslednou hrou, ktorú som zaradil ako bonus je Pixact.ly, v ktorej ide o správne odhadnutie rozmerov jednotlivých pixelov. Hra sa skladá z piatich kôl, počas ktorých budete musieť nakresliť rámček podľa požadovaných rozmerov, ktoré sú definované šírkou a výškou. Ak si všímate detaily a vadí vám keď je objekt hoc aj o jeden pixel posunutý, bude vás táto hra určite baviť.

Záver

Na záver by som sa chcel poďakovať všetkým, ktorí ste si prečítali článok až do konca a pevne verím, že niektorú zo spomínaných hier vyskúšate a naučíte sa niečo nové alebo si zopakujete to, čo už ovládate. Ako výzvu určite odporúčam, aby ste si niektorú z hier zahrali v tíme s viacerými kolegami, na čo najvyššie skóre.

Pre kreatívne duše, ktoré sa venujú skôr grafickému dizajnu pripravujem nový článok s hrami, ktoré by mohli byť zaujímavé a určite spestria deň.

Ak sa Vám tento typ príspevku páčil a myslíte si, že by sa mohli z neho naučiť niečo nové aj vaši známi a priatelia, budem rád za akékoľvek zdieľanie.