Online Webdesign Tanfolyam

Hallgatói webdesign gyakorlat – Galagonya Helyi Piac

Az újabb három lépcsős gyakorlatunk eredményei

Az idei év legnagyobb gyakorlata lett ez, mind a beküldött feladatmegoldások számában, mind a minőségében. Ilyenkor nem csak a tanulók kapnak képet arról, hogy milyen szinten tudnak megbírkózni egy ilyen kiírással, hanem én is látom, hogy ki hol tart és mennyit fejlődött mondjuk az előző gyakorlat óta.

A három lépcső lényege pedig, hogy azok is ki tudják próbálni magukat, akik csak nemrég kezdték a tanulást és azok is, akik mondjuk a tanfolyamot már befejezték, de szívesen bővítenék a portfóliót egy ilyen munkával. Az ő megoldásaik motiválóak a többieknek, akik még hátrébb tartanak az úton.

Röviden mi is ez a Galagonya, amit meg kellett tervezni:

“Helyi termelők egy csoportja szeretne egy közös márkanév (Galagonya Helyi Piac) alatt megjelenni és elsősorban a lokális piacot kiszolgálni, friss információkkal ellátni az interneten keresztül. Ez a trend az utóbbi években sok kistérségben, így Galagonya község termelői is szeretnék helyben eladni a portékájukat. Ez idénygyümölcs, zöldség, húskészítmények, lekvárok, sajtok tehát elsősorban élelmiszerek.”

Ehhez szükséges számukra egy arculat és egy minden eszközön megtekinthető, modern honlap.
A teljes kiírást, amiből dolgoztak, elolvashatod itt: Galagonya brief

Első lépcső: HANGULAT TÁBLÁK

81 (!) megoldás született erre a feladatra. Az is részt vett benne aki azon a héten kezdte a tanulást, mert ezzel alapozzuk meg a tanfolyamot. A moodboardok hasznosak, hogy vizuálisan összegyűjtsük és megjelenítsük azt, amit egy projekt kapcsán gondolunk, kifejezzük azt az irányvonalat amin elindulnánk. Ez elsősorban a tervezőnek magának fontos fázis, de segít az ügyfélnek is megmutatni, hogy milyen stílusban, hangulatban kezdenénk neki a munkának, esetleg megspórolva egy-két felesleges arculati kört is.

A moodboardok egy-egy szabadon választott ebookot értek az OWT ebookjai közül, ezek nyertese pedig:

Molnár Tamás és Dömötör Petra, gratulálok! Mindkét munkán jól kivehető a stílusirányzat, ami felé törekedtek, már ebben a fáziban lefektették az arculat biztos alapjait!

Molnár Tamás munkája

Molnár Tamás munkája

Dömötör Petra munkája

Dömötör Petra munkája

Remek munkák születtek, a Hallgatói webdesign gyakorlat – Galagonya Helyi Piac Pinterest mappában megtalálod mindet.

Második kör: LOGÓTERVEZÉS

A logótervezésben (és ikonok készítésében) már nem tudott mindenki részt venni, de akik túl vannak a tanfolyam első harmadán, azok már gyakorlottan kezelik az Illustratort és végre lehetőséget kapnak egy saját logó megtervezésére a kötelező feladatmegoldások után. A logók és ikonok az elkészített moodboardokra alapoznak és un. mockupok vagyis látványtervek segítségével azt is bemutatják, hogyan nézne ki a megtervezett logó élesben egy csomagoláson vagy egyéb marketing eszközön.

Ennek a szintnek is két nyertese van – 1 pár Karlalina/OWT pontrácsos füzettel lesz gzadagabb és tervezheti bele a szebbnél szebb logókat:

Ménesi Krisztina és Kollár István, gratulálok!

Mindkét munka ötletes, finomult és remekül tálalt, ami nem utolsó szempont!

Ménesi Krisztina munkája

Ménesi Krisztina munkája

Kollár István munkája

Kollár István munkája

Remek munkák születtek, a Hallgatói webdesign gyakorlat – Galagonya Helyi Piac Pinterest mappában megtalálod mindet.

Harmadik lépcső:  RESZPONZÍV WEBDESIGN TERVEK

Ez a haladók szintje és a bátraké :) Ráadásul az előző gyakorlathoz képest nehezített pályát kaptak, csak a mobil drótváz terv állt rendelkezésükre. Ennek az én “időhiányom” mellett természetesen oktatási célja volt, a mobile-first szemlélet gyakorlatban elsajátítása. Vagyis az, hogy ne először a színes-szagos monitoron látható megjelenést érdemes megtervezni és onnan lebutítani, hanem fordítva, előbb a mobilon látható, elsősorban funkcionális tervet, ahogy növekszik a képernyő tudja díszíteni. Így biztosan nem maradnak ki fontos funkciók a designnak feláldozva mobilon vagy tableten.

Viszont segítségképp konkrét szöveget kaptak a terven – a designer nem szövegíró, sokkal pontosabb, testreszabott munkát tud végezni, ha már fix szöveghez kell designt készítenie. A Lorem ipsum a lehető legrosszabb megoldás, mert az utólag beleerőszakolt szöveg sokszor nincs összhangban a képi megjelenítéssel, így nem tud működni igazán egyik sem.

A feladat során 3 designtervet kellett elkészíteni az előző körben már megtervezett arculat alapján, a mobil, a tablet és a desktop, vagyis a monitor megjelenéseket.

Fontos tudni, hogy ezek tanulói illetve kezdő feladatmegoldások, ez egy éles megbízást imitáló, de mégiscsak gyakorlat. Felesleges tőlük hibátlanságot vagy profizmust elvárni, ennek ellenére több “profi” megirigyelné ezt a minőséget amit hoztak. A tanulók az utolsó körben nem láttak rá egymás munkáira, mindenki magára volt utalva, hogy oldja meg a nyitott kérdéseket és elkerülhető volt a sokszor nem tudatos egymásra hatás (lánykori nevén másolás) mindig felbukkanó szelleme.

Tizenhat designterv érkezett be a finishre, már végzett tanulóink és a hamarosan végzők épp úgy vannak köztük. Mivel a gyakorlatnak amúgy most tétje is volt amellett, hogy rengeteget tanulhattak belőle a munkáról és magukról is, a legjobb két terv 1-1 Dribbble meghívót kap, amellyel már nem csak nézegethetik a népszerű designer oldalt, hanem hozzá is tehetik a magukét a világ legjobb tervezőinek munkáihoz.

Morell Eszter webdesigner munkája1. helyezett: Morell Eszter

Eszter az elmúlt gyakorlatok során nyomonkövethetően vált kezdő grafikuskából tervezővé. Itt követhető nála először nyomon a tudatos, precíz, minden elemre kiterjedt tervezés. Örömmel látom, hogy mert szakítani a full flat trenddel és képeket használni, ilyen szempontból ez hálás téma is, jó érzékkel nyúlt hozzá.

A képek számát még sikerült azon a határon tartani, amivel nem lesz borzalmasan lassú a betöltődés. Őszintén szólva a logótervből nem vártam ilyen szintű munkát, az nem lett az erőssége a projektnek, de összességében mégis működik együtt. Külön örülök, hogy tipográfiailag sem szállt el, és úgy alkalmazta a dekorfont, hogy egészséges arányban, olvasható és értelmezhető lett minden felirat.

Úgy vélem megérett arra, hogy a munkáit a Dribbble galériájában is megmutassa és esetleg nemzetközi szinten is megméretesse magát. Gratulálok!

Teljes munka: desktop, tablet, mobil

Bán Annamari webdesigner munkája

2. helyezett: Bán Annamari

Annamari még végzi a tanfolyamunk, de nem a nulláról indult, sok éve ismerem a webről egy teljesen más területről. Főleg úgy gondolom a grafikai vonal az, amiben sok újat tudtunk neki mutatni, de kezdetektől egy folyamatosan emelkedő színvonalat hoz, nagyon ügyes a logók terén és most kiderült az, hogy nem csak ott. A megoldás nem tökéletes, a hangsúlyokon kell még korrigálni.

A piros remek választás vezetni a figyelmet, azonban ha minden piros, olyan mintha semmit sem emelnénk ki, de nagyon kiabál az egész. Mivel az arculat is az, az aktív elemeket – menüpontok, gombok egy ettől eltérő színnel pl. zölddel különböztetném meg és a főkép esetén is szerencsésebb lenne egy más tónusú. Nagyon jól válaszotta meg a fontokat, stílusában hasonló mint a tervezett ikonok, amelyek kifejezőek, érthetőek. Az eddigi munkáit is figyelembe véve azt gondolom egy új felületen megmutatkozás további motivációt lehet a fejlődésében! Gratulálok!

Teljes munka: desktop, tablet, mobil

radics_peter

3. helyezett: Radics Péter

Gyakorlatilag Péterhez átkopizhatnám azt, amit Eszterről írtam. Látszik, hogy rengeteg munka van benne, aprólékosan, jól kitalált és felépített terv.
Két gyenge pontja van – a túl sok kép túl nagy betöltési időt eredményezne, valamint a látványos betervezett parallax, lebegő megoldások leginkább a legmodernebb böngészőkön és eszközökön működnek. De ilyen projekt esetén figyelembe kell venni a célcsoportot, amelynél ezek használata nem magától érhetődő. Ilyenkor sajnos le kell kicsit faragni a látványból, hogy mindenki élvezni tudja és mindenki számára elérhető legyen a rajta lévő információ.
A Pinterest egyik látványos parallax designja a repülő salátákkal az Insal’arte honlapja, ahol látszik sajnos mobilon mennyire nem működik ez a technika (még). Ezzel nem mondom, hogy nincs helye, csak azt, hogy ez a projekt most nem az.

Péter teljesítménye még nagyon hullámzó, láttam már sok igazán ütős munkát tőle és néhányat, amit mintha nem is ő készített volna. De gyakorol folyamatosan, fejlődik, azt gondolom egy következő gyakorlatnál megérik egy Dribbble meghívóra!

Azonban Péter egy különleges ajándékot kap: elsőként jut egy 2016 OWT limitált példányszámú határidő naplóhoz, amely segít megtervezni a sikeres jövő évét!

hataridonaplo-OWT

Teljes munka: desktop, tablet, mobil

Innentől már nem sorszámoznám, hogy ki hányadik, mert 3 napig tartana mire különböző szempontok alapján ez eldőlne, mindenki jól megsértődne, így csak azt tudom mondani, hogy arra kell büszkének lenned, hogy megcsináltad! Meg tudod csinálni! Már most másképp csinálnád! Már most tanultál belőle és ez az egész gyakorlat lényege! Mire élesben kell csinálni addigra elmúlik a para, hogy ez neked nem megy!

szecso_tamas

Tamás kb. ezer éve tanulónk, őt is az idő érlelte be, a legjobb munka amit valaha tőle láttam. Ha bármilyen hasonló megbízásra egy ilyen oldalt rak össze, igényes és alapos megoldást fog szállítani. Desktopon kicsit sűrűnek találtam a menüt, illetve a beolvadó zöldön zöld színű elemek esetén egy másik színt választottam volna az akciógombokhoz, naptár aktív felületéhez stb, hogy a konverzióval is foglalkozzunk kicsit. Gratulálok, remek, piacképes munka!

Teljes munka: desktop, tablet, mobil

benke_eva

Éva munkáján látszik, hogy nála ez már nem gyakorlat :) Nap, mint nap tervez hasonlóakat végzett tanulónként, művészek és kézművesek designereként. Az arculat egy színben nagyon erős lett, ezeket a körvonalas verziókat ikonként nem érzem annak (bogyós izé, bármi lehet). A tablet verzión nekem kipróbálva a 3 képes ajánló nagyon zsúfoltnak tűnt, érdemesebb lenne már ott egymás alá helyezni szellősebben, hogy érdeklődésra adjon okot. Remek munka!

Teljes munka: desktop, tablet, mobil

domotor_petra

Petra munkájában az tetszett nagyon, hogy láthatóan konkrét stílussal állt neki már a moodboard tervezésnek, a logó után nagyon vártam, hogy mi lesz ebből a weben. Kicsit abba a hibába esett mint Péter, sokat akart egyszerre mutatni, így a sok képet jó lett volna pár helyen megtörni – egy-egy görgetés erejéig picit szellősebbé tenni.

Ez a sok kép és ez a fajta elrendezés – bár nem megvalósíthatatlan – erősen megnöveli mind a fájlméretet, a fejlesztési időt és igencsak gondolkodásra bírná a fejlesztőt és sitebuildert hogyan legyen ez minden eszközön működőképes.
Az egyedi grafikáknak köszönhetően ráadásul mindig grafikus munkára lenne szükség a frissítéshez, ami mondjuk ez ilyen projekt esetén nem biztos, hogy megoldható – főleg anyagi okokból.
Szóval egy dolog a látvány, de azt is fel kell tudnunk mérni, hogy a megrendelő és a befogadó közösség elbír-e vele – anyagilag, eszközökkel, idő és energia ráfordítással. Ebben az esetben egy “nem könnyen kezelhető” honlapot kapnának, vagy erős plusz munkával járna a könnyen kezelhetővé tétele pl. egyedi admin felületek készítése a hírek vagy a receptek megfelelő frissítéséhez. Mégegyszer hangsúlyozom, nem a tervvel van a gond, hanem hogy ez egy kicsit ágyúval verébre, és sokszor a muszáj farag le a nagyszabású tervekből.

Teljes munka: desktop, tablet, mobil

pirosne_v_piros

Remek munkát végzett Piros is. Egyedül a tablet verziót érzem (nem csak nála) kétségesnek. Ugyanis a tablet nézet nem pusztán a desktop összehúzott mása. Főleg a szöveges elemeknél kell arra figyelni, hogy közben elegendő méretű maradjon a betű is az olvasáshoz és a kattintható elemeknek is elég helye legyen. Itt a lekváros üveg – Joli néni esetén inkább már tagoltam volna egy oszlopba, hogy a tartalom tudjon érvényesülni és nem a lekvár. Ez is egy súlyosabb darab – kilobyteban és elkészítési időben, a fentebb írtak itt is érvényesek. De nagyon örülök, hogy merészek voltatok, ha lenne negyedik forduló, hogy akkor most tessenek lekódolni, azért sok apróság lenne kevésbé fontos :) A desktopra átörökítés sikerült a legjobban, ott több helye is van, mobilon lefaragnék a zöldségállományból.

Teljes munka: desktop, tablet, mobil

bur_peter

Péter viszonylag újoncnak számít nálunk, de hozott anyagból is dolgozik. Nála is fenn áll a “mihez kezdjünk a tablettel” kérdés, főleg az aprólékos részeket pl. naptár gondolnám újra, hogy virsli ujjakkal is elég böködhető méretűek-e. De azt kell mondanom, ez egy piacképes design, sok tervező megirigyelhetné, a reszponzivitás tudományának mélyebb elsajátítása után tökéletes munka lesz.

Teljes munka: desktop, tablet, mobil

dornyei_barbara

Egy másfajta stílus, ami annyiból szerencsésebb, mint a többiek, hogy jobban érvényesülnek a valódi képek és a tartalom. Itt is a desktop a legerősebb és a tablet a leggyengébb, a köztes méret elrendezése, ami egy kétszer akkora kijelzőn működik, az feleakkorán gyakran nehezen olvasható – a menüpontoknál ez biztosan előjön, főleg talpas betűvel, illetve a naptár esetén fontolnám meg a mobilon már látható verzió előbb beépítését. Remek munka, a termékeken található interaktivitást jelző színeket a többi részen is használnám.

Teljes munka: desktop, tablet, mobil

horvath_szilvia

Szilvia esetén a logóval nagyon jól indult a dolog, a webdesign részt viszont kicsit kapkodósnak találom, főleg tipográfiailag nincs egyben – bár a címsorok és a logó is kézi jellegű, mégis a vaskos címsor fontok helyett könnyedebbet választanék. Vannak nagyon szépen kidolgozott részei, pl. képes ajánlók, Joli nénit és a naptárat nem látom elég kidolgozottnak, oda kellett volna még idő. Összeségében remek munka!

Teljes munka: desktop, tablet, mobil

kezi_krisztina

Kicsit szétszórt még ez a terv. A logó ez egyik gyenge pontja, a másik, hogy nincs igazán stílusa. Néhány különböző stílus, ami nem állt össze egésszé pl. rajzos libák jók a logóval, de a a kör alakban található rézkarc szerű növényekkel nem, a néhol erőltetett sokszög meg megint egy más irányba viszi el. A színek esetében is ugyanez, nincs igazán uralkodó színpalettája, mindenféle mindenhol. Itt is lehet még pár óra kellett volna neki, mert a szerkezetben megvan minden ami kell, a grafikai rész kidolgozatlan még kicsit. Az irány jó, többet kell nézegetni a galériákat, mit mivel érdemes párosítani.

Teljes munka: desktop, tablet, mobil

such_betti

Elég bátor dolog egy ennyire képes témát szinte nulla képpel, minimálban összehozni. A logó és az ikonok, a betűtípusok legalább egy nyitót és egy-egy ajánló fotót megérdemelnének, mert ez az a műfaj, ahol nyálcsorgatás után mennek az emberek a hasuk után a piacra. Más jellegű feladatok esetén ez kevésbé okoz gondot. A sárgán fehér szöveget is átgondolnám :) Viszont a nézetek közötti váltások arányai nagyon jók!

Teljes munka: desktop, tablet, mobil

papp_eszter

Eszternél az arányokon kell még dolgozni azaz mekkora egy hamburger menü, a mobil eszközökre átfordított design – most kicsit nagyonnagy minden :) Jó a címsoroknak választott font, de nem működik együtt a logóéval és összességben a folyószövegek fontjával sem, ezt is át kellene még gondolni. Ami viszont jó az aktív felületek jelzése, a képi anyag – a világosbarnán a fehéret azért nálad is átgondolnám. Ügyes!

Teljes munka: desktop, tablet, mobil

menesi_krisztina webdesign terv

Kriszta munkáit ismerem, a logó itt valami nagyon ígéretes dolgot sejtetett. Tartok tőle mégsem érzett rá vagy kevés volt az idő, de az összkép nem illeszkedik az arculathoz! Nagyon sok ez a szín, és nem mutat jól rajta ilyen arányban a fotóanyag. Picit nyomasztó ez a sok sötét barnás-piros, de nincs fókusz, összeolvad minden, sokkal több fehéret javasolnék, nagyobb, szellősebb tereket, az ikonok is ilyenek. A szerkezet szuper, összességében szép munka, némi javítanivalóval!

Teljes munka: desktop, tablet, mobil

burovincz_katalin

Vannak nagyon erős és nagyon gyenge részei a munkának. Utóbbinak elsősorban a logót látom és az arra épülő egyéb grafikákat. Ugyanis mind logónak, mind ikonoknak túlságosan aprólékosak, ami kis méretben nem mutat jól. Vagy a napernyő vagy a “pizzaszeletek”, valamelyiket kellene elhagyni, a másikat viszont grafikailag kidolgozottabbá tenni, hogy a pizzaszelet tényleg sajtnak tűnjön vagy a paradicsom galagonyának :)

Ellenben a szerkezet logikusan felépített, jól áttekinthető és tabletre és desktopra is megfelelően adaptált munka lett, a grafikai megoldásokon kell még finomítani a kevesebb több elve alapján. Katalin pluszmunkát is tett bele, amit nagyon nagyra értékelek vagyis le is kódolta a tervet, ami még nem volt feladat. Gratulálok!

Teljes munka: desktop, tablet, mobil

kormos_attila

Attila első ilyen jellegű munkája, így csak két apróságra hívnám fel a figyelmét – az egyik a fókusz, a legtöbb elem egyszínű, ezért nagyon összeolvadnak, az akciógomboknak érdemes lenne egy második színt behozni. Desktopon a hamburger menü helyett általában kibontjuk a menüpontokat, hiszen itt van rá helyünk. Szép munka!

Teljes munka: desktop, tablet, mobil

A többi munkát a csoportban fogom értékelni (mert ezt a posztot is írtam vagy 2 napig) mindenestül, de csak annyit szeretnék még hozzátenni, hogy nagyon jó érzés, amikor az átadott tudást így egyben látom hasznosulni.

Ha Te is szeretnéd ezeket megtanulni, várunk szeretettel a tanfolyamon! Jelentkezz itt!

A szerző:
10. éve foglalkozom webdesign tervezéssel - Több ügynökségnél dolgoztam belsősként-külsősként (Mcorp Média, Alchimedia Studio, stb.), de ügyféloldalon is pl. Extreme Digital. Mára első helyre az oktatás lépett, a fennmaradó időben pedig online és offline tanácsadással, eseti szakértéssel illetve értékesítési rendszerek felülettervezésével foglalkozom. Büszke vagyok arra, hogy a saját cégem vezetem, és mindig keresem az új és kreatív jövőmegoldásokat. Munkáimból: http://awebdesigner.hu

Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöljük.