Online Webdesign Tanfolyam

Hallgatói webdesign gyakorlat – Magnifico étterem

Olasz meló, avagy a három lépcsős gyakorlatunk eredményei

Nincs hozzászólás
Címke: , , ,

Pontosan egy hónapja írtam ki a tanulói csoportban egy újabb nagyobb horderejű gyakorlatot, utoljára a Wellness Hotel webdesign gyakorlat volt hasonló, amire remek munkák érkeztek be. Ezúttal azonban azokat sem akartam kihagyni, akik még nem tartanak tudásban a design tervezésnél, így a kiírást három lépcsősre csináltam, így akár az első pár lecke után is érdemes volt belevágni. Rengeteget lehet tanulni az ilyen gyakorlatokból, hogy ugyanazt a témát hogyan dolgozzák fel mások, az ő ügyességük inspiráló, de az okos ugye mások hibáiból is tanul, neki már nem kell elkövetni.

Röviden: egy Magnifico nevű olasz-magyar étterem számára kellett első körben egy hangulattáblát készíteni. Az ilyen táblák a munka előtt egy vizuális irányvonal kiválasztásához jók, remek alapot nyújhatnak a következő lépéshez az arculathoz. Ezt mindenki el tudja készíteni az első leckék után.
A második lépcső az arculat lett, konkrét logóterveket kellett készíteni, itt már azok tudtak részt venni a gyakorlatban, akik már túl vannak a tanfolyam egy harmadán, azaz a vektorgrafikán is.
A harmadik lépcsőben pedig az elkészített arculat felhasználásával meg kellett tervezni a weboldalt, méghozzá responsive nézetekben – ehhez a tanulók egy drótváz alapot kaptak segítségül.

A munka során voltak fix kikötések, amit figyelembe kellett venni, kaptak képanyagot amit használhattak, de nem volt kötelező, tervezői fázisban azonban kötelező volt saját grafikákkal dolgozni, nem lehetett már csak úgy bármit letöltögetni. Ami még fontos volt, hogy jegyezzék fel melyik munkafázissal mennyi időt töltöttek, ez későbbiekben fontos, ha fel kell mérni, hogy egy projekt hány munkaóra a számukra.

A teljes gyakorlat kiírást elolvashatjátok itt – Magnifico gyakorlat brief

Első lépcső – a moodboardokat 33 tanulónk készítette el, ezeknek az értékelését már megkapták a csoportban, a javítandókat is elmondtam nekik, nagyon változatos munkák születtek a klasszikus olaszostól a minimalistáig, minden hangulattáblát a Pinteresten találsz meg!

A második lépcsőben született arculati tervekből néhány – ők szintén már értékelve lettek a csoportban, ami ilyenkor nem úgy történik, hogy: Ülj le fiam egyes! hanem minden esetben igyekszem építő kritikát megfogalmazni, amiből tanulhatnak, továbbfejlődhetnek. És természetesen ami jó, az jó :) Nézd meg mindet!

A harmadik lépcső a haladóké, ők már ismerik a webtervezés alapjait – vagy ha még nem, akkor elég bátrak ahhoz, hogy a meglévő tudásukkal megpróbálják teljesíteni :)

responsive webdesign

Ehhez ezt a 3 vázlati tervet – másnéven drótvázat kapták. Annyi segítséggel, hogy konkrét szövegekkel és előre kitalált ajánlatokkal kellett dolgozniuk és nem tiszta Lorem Ipsummal. Azzal ugyanis borzasztóan nehéz – mert nem a designer feladata (lenne) a tartalom kitalálása. Az igazán hatékony design úgy készül, hogy a nagyjából kész tartalmat önti formába és nem utólag a formába próbálunk tartalmat betuszkolni…

Arculatként pedig a saját maguk által tervezettel kellett dolgozni – hisz azt kvázi már elfogadta az ügyfél!

Ha jól számoltam 13 tanulónk vágott bele a harmadik lépcsőbe – közöttük már vannak végzett hallgatóink is, de olyanok is, akik még csak félidőnél járnak. Az ő munkáikból azt a hatot választottam ki ide a posztba, amelyikről úgy gondolom a leginkább megfelelt a kiírásban kérteknek – azaz kreatív és klisék nélküli arculatot hozott össze – valamint leginkább be tudta tartani a tervezéskor adott instrukciókat is, ez nagyon fontos, mert a weboldal készítés csapatmunka, ha valamit fixen kérnek, azt nem véletlenül teszik, kreatívkodni nem ezekben kell!

Az ügyfélnek, Albertonak is nehéz dolga lett volna, nekem sem volt könnyű:

1. Bán Annamária – már az arculatnál lehetett látni, hogy ez nem a klasszikus irányvonal lesz. Ezt sikerült a webdesignra is átültetni. Úgy őrizte meg a trikolort, hogy az egyáltalán nem sok, csak a fő elemek kapták meg a piros és zöld színeket, mindenhol máshol a white leginkább white-space, azaz szellős, jól olvasható és arányos weboldal készült el és ezeket a mobil/tablet verzió sem nélkülözte. Ez a legkiforrottabb munka, gratulálok!

Bán Annamária desktop nézet

Bán Annamária desktop nézet

2. Szecső Tamás – egy olyan dekorfont választott és alapozta meg ezzel az arculatot, amivel kiegyenlítette a nehéz ételeket és a túl nagy igényeket támasztó nevet. Nem esett túlzásokba, néhány jól megválasztott kép elég volt emellé, hogy meglegyen az összhang! A kiegészítő fontok pár helyen lehetnének nagyobbak, olvashatóbbak, de az összkép mobil nézetben működik! Szép munka!

szecsotamas600

Szecső Tamás desktop nézet

3. Pirosné V. Piros – a tipográfia az amiért Piros munkáját választottam harmadiknak, ugyanis nagyon jól használja a hierarchiát, szépen tagolja a fontokkal a tartalmakat, ettől az egész oldal jól áttekinthető, szépen olvasható. Az arculat bár a klasszikus paradicsomra épül, mégis a választott fonttal nagyon modern, újragondolt olasz konyhát feltételez. A színekben megmaradt a kért trikolor, egyéb csicsázást nélkülözni tudott, minden designelem funkcionális, a helyén van! Igazán szép munka!

Pirosné V. Piros desktop nézet

Pirosné V. Piros desktop nézet

4. Morell Eszter – újragondolta a színeket és inkább elment a trendek felé ezekkel a pasztelekkel. Az arculat fiatalos és szerethető, jól elkülönül minden más olaszos étteremtől. A kézírásra hajazó font és a kézirajz jól működik együtt, nekem már a MAG IC a feliratban már kicsit sok, de ezt már említettem Eszternek a logó kapcsán. Jól áttekinthető, minden a helyén van, a mobil verziókban is megőrizte ezt a játékosságot, remek munka!

 

Morell Eszter desktop nézet

Morell Eszter desktop nézet

5. Kozma Gergely – a tervet tipográfiailag gondolnám újra, hogy a logóval összhangban legyenek a címsorok jó a talpas, de ne használj dőlt betűt. Azt általában meghagyjuk az idézeteknek, másodlagos gondolatoknak, nem stabil tőle a design. Kiegészítésnek pedig jó a sans serif, de az se legyen dőlt. Amiért mégis beválogattam az a képi összhang és a színek, újragondolt feliratokkal mehetne élesbe – mobil nézeten a feliratok arányait is át kell gondolni az olvashatóságot szem előtt tartva!

Kozma Gergely desktop nézet

Kozma Gergely desktop nézet

6. Dömötör Petra – nagyon könnyed és barátságos ez az arculat, egyáltalán nem sablon. Itt is a folyószövegek betűméretén növelnék, hogy mobilon is jól olvashatóak legyenek, az elemek méretarányai a nézet verziókon még nem egységesek, de egy nagyon üde és friss megoldás, gratulálok!

domotorpetra_600

Úgy gondolom kezdőkhöz és tanulókhoz képest remek munkák születtek – nem hibátlanok persze, azért tanulók és kezdők, mert még sosem csináltak élesben hasonlót, de legalább már egyszer találkoztak egy ilyen komplex megbízással, így bátrabban vállalnak valódi, éles projekteket is majd!

Nézd meg az összes beérkezett tanulói munkát a Pinteresten!

Figyelem! Az itt található designok szerzői jogai a készítőket illetik, ha bármelyik munkája megtetszett írj nekünkés segítünk felvenni vele a kapcsolatot!

Ha viszont Te is örömmel alkotnál hasonló terveket – később komplett weboldalakat, akkor jelentkezz Prémium tanfolyamunkra és megtanítunk mindenre!

 

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.


Tudást és eszközt is adunk a sikeredhez!
Egyösszegű fizetés esetén Wacom Intuos Comic S digitális rajztáblát kapsz a tanfolyam mellé!
Érdekel!