Augusztusban, a legnagyobb forróságban a nyári szünetünk előtt írtam ki ezt a gyakorlatot, olyan témát választva a kandallóépítéssel, amibe nagyon nehéz ilyen körülmények között belehelyezkedni. Pont ettől életszerű egy ilyen gyakorlat, mert van, hogy a nyár közepén kell karácsonyi témán már jóelőre dolgozni, vagy tavaszi kampányra hangolódni, mikor a tél még javában tart. De nem csak az évszakok miatt, hanem a téma maga sem könnyű – az ipari témák csak kevés tervező kedvencei, nem olyan hálásak mint egy szépségápolási vagy gasztronómiai ügyfél, ahol a csodás képanyag és a populárisabb közeg a tervezőnek is jobban kézre esik.

Szóval egyáltalán nem könnyű fáklyásmenetet szántam azoknak, akik a forróságban a gép előtt töltik a napjaikat és foglalkoznak a gyakorlattal, de abból lehet a legtöbbet tanulni, amikor egyáltalán nem megy olyan simán a dolog.

Az ilyen gyakorlataink mindig kitalált projektek, de teljesen életszerűek, pont annyi információt adok, mint egy átlagos ügyfél (jó, egy picit többet, mert nem nekik kell kiénekelni a megbízóból, hogy mi is volt az elképzelés igazából), kapnak támpontokat, kapnak tiltásokat, mert szinte minden ilyen megbízásban vannak kikötések, kapnak fix méreteket, elvárt formátumokat és határidőt is, ami egy igen fontos eleme a gyakorlásnak. Ezen felül mindenkitől azt kérem, hogy mérje, hogy hány munkaórát tett az aktuális feladatba, ezzel is képet kapjon arról, hogy bizony egy pár órásnak elgondolt folyamat akár napokig is eltarthat. Azaz a jó munkához tényleg idő kell!

A négy lépcsőt úgy találtam ki, hogy az első lépcsőn gyakorlatilag az első pár lecke után részt lehet venni, a szintek egymásra épülnek, tehát megkell tervezni egy hangulattáblát, ami az arculat alapja lehet, egy logót arculati elemekkel, az arculatból egy webdesign tervet és természetesen, aki már ott tart tudásban, a tervből weboldalt kódolni. Olvasd el a teljes gyakorlat leírását!

Első lépcső: Moodboard tervezés

30 db tábla érkezett vagyis ennyit találtam a mappában, amit a lejárati idő előtt töltöttek fel a tanulók. Hozzá kell tennem, hogy van aki később vette észre, így elcsúszott a határidőkkel, de a kihívás kedvéért megcsinálta a szinteket vagy legalábbis néhányat, ugyanis pont ez a lényege, a kihívás.

Ezekből hoztam néhányat, amiket a legkiforrottabbnak találtam, illetve összesítve azt is leírom, hogy mik voltak a típushibák.

Kőrösi Kunigunda munkája

Tátrai Andrea munkája

Böhl-Kardos Zsófia munkája

Debreceni Krisztina munkája

Bánkúti Georgina munkája

Molnár Marianna munkája

Petrikné Gimesi Ágnes munkája

Amikor ezeket a munkákat megnézem, akkor mindenkinél tudom nagyjából, hogy mikor kezdte, hol tart a tanfolyammal. Óriási vizuális különbség van azok között, akik most kezdték, akik a felénél tartanak és azok között, akik már végeztek vagy épp a vizsgamunkájukon dolgoznak. Tehát azt is látom, hogy amelyik most még túl sok, azaz aki mindent rápakolt a moodboardra ami eszébe jutott, mire tudásban a negyedik lépcsőhöz ér, addigra tisztulnak le a fejében a tanultak. Azért is szeretem ezeket a gyakorlatokat, mert aki részt vesz rajta, nem csak gyakorol, sokkal több ez annál. Ha valaki részt vett a tavalyin vagy az azelőttin, annak egy mérce, hogy itt tartott a tudása akkor. Már-már megmosolyogtató lenne előszednem egy ma már sikeresnek mondható tanulónk első próbálkozásait, pedig ezek a gyakorlatok nagyban hozzájárulnak ahhoz, hogy egy portfóliót el lehessen kezdeni építeni, ne csak a tanfolyami feladatmegoldások díszelegjenek benne.

A moodboard tervezés a munkának a legkezdetibb fázisa. A legtöbbször ez a fázis a tervezőnek magának készül, hogy mi csapódik le a rendelkezésre álló információkból, milyen színekben, képi világban, stílusban kezdene el saját magától tervezni. Van olyan, aki 2-3 ilyen kevés energiát igénylő táblával leül beszélgetni az ügyféllel és rögtön el is lehet vetni irányokat, amik tévútra vittek volna, vagy rácsodálkozni, hogy igen vizuálisan pont ez az, amerre tartunk.

Itt még semmi sem fix, tehát simán el lehet hagyni róla elemeket vagy újragondolni. Túl sok munkát pont ezért nem is érdemes tenni bele! Itt a fotók voltak adottak, illetve a készülékek stílusa, a célcsoport egy csapásirányt megadott, ezen felül a színeket, a tipográfiát már szabadon lehetett válogatni.

Ami “hibaként” ebben a fázisban felróható, az a túl sok elem egy táblán. Nem kell 4-5 színnél több, ilyen témában akár 3 is elég lehet. Volt ahol a Wulcan felirat helytelenül volt leírva, volt ahol kicsit túl sok féle betűtípust kezdett alkalmazni a tanuló, más táblákon a különféle textúrák kaptak túl nagy hangsúlyt.

Fontos még megemlíteni, hogy ez nem brading board – ami nagyon hasonló, de ott a már kialakított arculati elemek kerülnek egy táblára, itt még nincs kialakítva a logó, nem is szabad még, hiszen a tervezési folyamat még ezután jön.

Második lépcső: Logótervezés, arculat

Zsigmond Tímea munkája

Zambó Viktória munkája

Lóczy-Koppány Ivett munkája

Kékedi Judit munkája

Darabos Lívia munkája

Böhl-Kardos Zsófia munkája

Kocsány-Varga Zsuzsanna munkája

24 logóterv érkezett a gyakorlat következő szintjére, ezekből válogattam néhányat, de el kell mondanom, hogy sokan eleve ott rontották el, hogy nem végeztek egy alapos kutatást, hogy milyen logókat találni jelenleg a piaci szereplők között. A lángokból formált kandallós logó a leggyakoribb, ezért ezek élesben okozhatnának kellemetlen perceket!

Amire még sok versenyző nem figyelt, az a piros teherautó, mint kitétel, illetve sok pályázaton találtam olyan logókat, amik bizony remekül mutatnak színesen, de egy színben szintén gondot okoznának a cégnek, ha mondjuk szeretne olyan sapkát hímeztetni a szerelőknek!

Nagyon szépen alkalmazták azonban a mockupokat, amivel egy megbízás esetén meggyőzően fel lehet lépni, hogy lám, így fog kinézni a céglogó névjegyre, polóra nyomva vagy az autóra matricázva.

Harmadik lépcső: Reszponzív webdesign tervezés

Oswald Júlia munkája

Tátrai Andrea munkája

Szeiler Zsuzsi munkája

Kékedi Judit munkája

Schermann Andrea munkája

Ivanics Réka munkája

Debreceni Krisztina munkája

Kóti Attila munkája

Csanády Eszter munkája

Sok remek webdesign terv is érkezett, amelyhez ugye azért segítségképpen egy pontos drótváz alapot kaptak, tehát a funkciókat itt nem kellett kitalálni, csak az arculatnak megfelelően “kiszínezni”. Itt sok helyen a legnagyobb gondot a nem átgondolt színhasználat okozta, azaz adott színt olyan helyen is alkalmazták ami kattintható, interaktív rész és olyanon is, ami dekorációs elem. Ez zavaró lehet a felhasználónak, ha nem egyértelmű, mi a kattintható.

Néhány helyen a mobil tervek – erre nem volt drótváz, eltértek a nagyképernyőstől, mobilon még az olvashatóság és a kattintható elemek méretére érdemes figyelni, sokan nagyon apró gombokat alkalmaznak.

Negyedik lépcső: Webdesign kódolás, honlapkészítés

A negyedik lépcsőt már jóval kevesebben tudták meglépni, ez pedig a weboldallá alakítása a tervnek! De szinte mindenki megpróbálta legalább és ez nagyon fontos. Ez a szint nem az egyik napról a másikra jön létre, hanem a tanfolyam alatt folyamatosan épül fel. Az oldal struktúrát, a dobozokat a legtöbben simán létrehozták, ahol elcsúszott a tudomány, az az elemek helyreigazítása, illetve a különféle reszponzív nézetek fogtak ki sokakkal.

Ami még észrevehető a terveken, hogy nem féltétlenül azoknak sikerült jól a webdesign terve, akik az arculatot szépen megoldották. Ugyanez igaz arra, hogy akiknek a webdesign terve jól sikerült, nem feltétlenül tudták azt (még) kódban is visszaadni.

A beérkezett élő honlapokból néhány:

Ivanics Réka munkája:
https://minta18.honlapkeszen.hu/

Jancsik Zsuzsanna munkája:
http://www.s2web.nhely.hu/

Oswald Júlia munkája:
http://oswald.designerek.eu/wulcan/

Mészárosné Koppány Anita munkája:
http://nitta.designerek.eu/wulcan/

Lóczy Koppány Ivett munkája:
http://loczikop.designerek.eu/wulcan/

Emesét megkértem, hogy sitebuild oktatóként értékelje a beadott kódokat:

“Ami a legjobban sikerült mindenkinél az a HTML struktúra kialakítása, az oldal eleminek felosztása HTML jelölő nyelvvel szemantikusan. Jók voltak az ID, illetve osztály nevek, megfelelően alkalmaztátok a layout kialakításért felelős responsive megoldásokat is, a felépítés logikus volt. Ez már fél siker.

Az rendben van, hogy korábban megírt sablonokból és layoutok-ból, esetleg lekódolt szorgalmikból dolgoztok, hiszen pont ezért csináljuk ezeket a feladatok. Azonban jobban figyeljetek arra, hogy ezeket a megoldásokat alakítsátok az adott weboldal struktúrájához, illetve tartalmához. Előfordult párszor, hogy a Gorillából, vagy a Sítáborból maradtak bent osztályok, vagy divek, talán még szövegrészek is.

Fokozatos építkezés, responsive layout kialakítás:
Az a metodika, hogy először mindent lekódoltok desktopra, majd utána valahogy mobilra az nem fog működni. Sajnos emiatt nagyon sok a szétesett layout. Egy-egy szekciót nem teszteltek ki kisebb kijelzőkön és anélkül mentek tovább. Emiatt nagyon szembetűnő, hogy utólag van “meghekkelve” a mobil nézet. Mindaddig amíg a főbb szerkezeti egységek konténerei (header, content, footer, menu, logo) nincsenek a helyükön mobilon is, addig a design többi részével nem érdemes foglalkozni.

Betűméret csökkentés, formázás:
Ha nem a vw mértékegységet használjátok a betűméretek megadására kicsi kijelezőkön nagyon nagyok lesznek a betűt. Ez nem baj, de korrigálni kellene, tehát ne legyen 6 soros például egy H1 címsor. Csak úgy, mint a layout kialakításánál a betűformázás előtt érdemes rendbe rakni a sormagasságot, címek, bekezdések margóit mobil nézeten is, majd után jöhet a szövegszín, betűtípus és minden egyéb.

Margókra jobban figyelni.
Van ahol sok van, van ahol kevés. Maga az üres hely is design elem. Nagyon sokat számít, hogy hol mennyi távolság van. Melyik elem mihez van közelebb, vagy távolabb.
Érdemes először a tartalmi dobozokat létrehozni mindenféle design nélkül egy sima piros borderral és figyelni, hogy a távolságok megfelelőek-e minden kijelzőn, szükség esetén csökkentsd a paddingot/margint a dobozoknál.

Nézzétek meg eszközökön is. Abban biztos vagyok, hogy telefonja mindenkinek van, jó párotoknak tabletja is van. Hiányolom, hogy ránézzetek az eszközökre is, mert bizony előfordult, hogy valakinél nem volt bent a viewport meta, amit chromeban nem veszel észre, viszont telefonon egyből szembetűnik, hogy valami nem jó.

Összességében meg vagyok elégedve, látom, hogy mindenki igyekszik alkalmazni a tanultakat. Kicsit pontosabban, precízebben kódoljatok, teszteljetek többet, és igyekezettek nem összecsapni.”

Összegzés:

Nagyon sok remek munka érkezett. Egyik sem volt kisebb-nagyobb hibáktól, javítandóktól mentes, de ezen a tudásszinten ez nem is elvárás. Sőt.. A gyakorlat (és nem verseny) lényege a tapasztalat szerzése egy olyan helyzetben, ami még nem volt. Ezt mindenki megkaphatta a gyakorlattól, valamint remek referencia munkákat, amiket már tényleg ők terveztek! Fontos, hogy minden résztvevő képet kapott a tudásáról, illetve arról, hogy mik azok a felületek, amelyeket érdemes fejlesztenie!
Gratulálunk minden résztvevőnek!
Hamarosan érkezik a következő gyakorlat!