Weboldal tervezése e gy képzőművészeti csoporthoz Szolnoki Ágnes, új média grafikus szak

1. Weboldal tervezése egy képzőművészeti csoporthoz Szolnoki Ágnes, új média grafikus szak

2. Brief A csoportról Egy több éve együtt dolgozó, nem hivatásos festőket összefogó alkotó közösség, akik pályázatokon és kiállításokon, ill. nyaranta alkotótábo-rokonvesznek részt. Heti rendszerességgel közösen alkotásoknak Szilágyi János grafikus- és festőművész vezetésével, és bárki csatlakozhat a csoporthoz, aki szeretne egy nyitott, jó hangulatú közösségben alkotni. Háttér A képzőművészeti csoportnak magamis tagja vagyok, így egy személyben lehettem a weboldal megrendelője és kivitelezője is.

3. Brief Feladat Megjelenési felület tervezése, ahol a közösség, ill. a tagok külön-külön is megmutathatják munkáikat. Első lépésként névadás, majd arculattervezés. Végül a csoport honlapjának megtervezése. Célkitűzés A csoport kreativitását, jó hangulatú közös alkotásokat és azok eredményeit közvetíteni a honlap arculatával az érdeklődők felé. Célcsoport A honlap mindazoknak szól, akik szeretik a képzőművészetet, szívesen nyomon követnék a csoportunk munkáit, eseményeit, vagy csatlakozni szeretne hozzánk.

4. Brief A logó megtervezése előtt Találó név keresése a csoport tagjaival közösen. 2011 májusától már van nevünk: spiriTUSz csoport Csoport létrehozása a Facebookonaz ideiglenes logóval Névadó ünnepség saját fotókkal

5. A logó Inspirációk A logó végleges változatának elkészítéséhez a következő logók inspiráltak:

6. A logó Logó kialakulásának fázisai

7. A logó Logotípia A két kiválasztott betűtípussalkontraszt kialakítására törekedtem. Színrendszer fekete – a tusra utalás erősítéseként, narancs – a fekete szín mellé egy melegebb, vidámabbszínt választottam,ami lendületet ad a logónak. Embléma A festészetre és a csoport nevéből kiemelt „TUS” szóra történő utalásként egy fekete színű tuspacát használtam fel, és az így kiemelendő szót kivágtam belőle, mintha a tuspaca ilyen különlegesen folyt volna szét az adott felületen.

8. A logó A logó használata A narancs és fekete színek miatt a logót csak fehér alapon szabad használni, minden oldalánál 10%-os margóval. Ügyelni kell arra is, hogy a spiritusz szó dőlése, illetve színe se változzon.

9. A logó A logó használata A csoporttagok már használatba is vették a logót, az egyéni kiállítá-saikhozkészített egyedi meghívóikon feltüntetve hangsúlyozzák a csoport-hoz való tartozást.

10. Arculati elemek Az elkészült logóval a csoport Eötvös 10 év végi kiállításra a következő arculati elemeket tervezetem meg: meghívó

11. Arculati elemek Az elkészült logóval a csoport Eötvös 10 év végi kiállításra a következő arculati elemeket tervezetem meg: plakát

12. Arculati elemek Az elkészült logóval a csoport Eötvös 10 év végi kiállításra a következő arculati elemeket tervezetem meg: molinó

13. Arculati elemek A spiriTUSz csoport arculati elemeinek megjelenései különböző helyeken: A csoport év végi kiállításának hirdetése az Eötvös 10 oldalán

14. Arculati elemek A spiriTUSz csoport arculati elemeinek megjelenései különböző helyeken: Megjelenés a Kép a falon című oldalon

15. Arculati elemek A spiriTUSz csoport arculati elemeinek megjelenései különböző helyeken: Megjelenés a Múzeumok éjszakájaprogramjában

16. Arculati elemek A spiriTUSz csoport arculati elemei és azok megjelenései különböző helyeken: A csoport hírének terjedése az év végi kiállításunk megnyitóját követően a Facebookon

17. A honlap arculata Tervezés Egy egyszerű, könnyen kezelhető, átlátható honlap. Bemutatkozási lehetőség a csoport tagjainak. A közösség eseményeinek megjelenítése. Rugalmasan bővíthető felület kialakítása új tagoknál. is könnyen nyomon követhetőek.  Főoldal használatával sugallni, hogy itt érdemes több időt is eltölteni.

18. A honlap arculata Arculat A logó elemeinek ismétlődésére törekedtem az oldalon az összhatás elérésnek érdekében, emellett a többi elemmel is az alkotásra, festészetre, rajzra kívántam utalni. Több változaton keresztül jutottam el a végeredményhez:

19. A honlap arculata Az első változat Fehér felületen pacákból és a logóból kialakított menüpontok. A tagok nevei már a főoldalon szerepelnek, ahonnan saját oldalaikra jutunk tovább. A nevek mozgatható elemekként jelentek meg DragAP Elementalkalmazásával.De ezt a megoldást később elvetettem, mert céltalannak tűnt az elemek mozgathatósága.

20. A honlap arculata Az első változat Ezek után elkésztettem egy olyan változatot is, ahol ha az egérrel rámentem a névre, az adott csoporttag egyik festménye lett látható, és ezután rákattintva jutottam tovább a tag oldalára.

21. A honlap arculata Az első változat A megjelenő képet később kicseréltem a kép egy jellemző részletére, a formáját pedig úgy alakítottam ki, mintha a nagy fehér papírfelületből egy kis darabot kiszakítottam volna. Végül ezt a változatot is elvetettem, mert így túl sok elem jelent meg a főoldalon, és több új tag felvétele esetén már megnehezítette volna az oldal átláthatóságát.

22. A honlap arculata A második változat Az oldal szerkezetét megváltoztatva egy öt oldalból álló honlap elkészítése mellett döntöttem. Az újabb változatnál egy merített papíron jelenítettem meg az információkat, háttérnek először egy rajztáblát helyeztem el, de a kép nem adta jól vissza a rajta lévő festékfoltokat, ezért inkább egy barna csomagolópapírra utaló háttérre cseréltem le, és így jobban kiemeltem vele a merített papírt.

23. A honlap arculata A második változat A főoldalon kívül a következő oldalak kerültek kialakításra: rólunk:bővebb információ a spiriTUSz csoportról, történetéről, tagok:az alkotóközösség tagjainak bemutatkozási lehetősége, ahol megtekinthetőek a munkáik is események:a korábbi és soron következő közös és egyéni kiállítások, ill. alkotótáborok felsorolása kapcsolat:információk a közösség elérhetőségeiről.

24. A honlap arculata A harmadik és egyben végső változat A hátteret lecseréltem egy, a csoport tevékenységét jobban kifejező, kézzel készített akvarellre utaló képre.

25. A honlap arculata A harmadik és egyben végső változat További tuspacát is elhelyeztem a felületeken.

26. A honlap arculata A harmadik és egyben végső változat Az almenü kialakításánál is egy egymástól jobban elkülönülő, és az aktív almenüpontoknál feltűnőbbkiemelést alakítottam ki, amelynek alapmintáját egy ecsettel húzottvonal adja.

27. A honlap arculata A harmadik és egyben végső változat A tagok oldalon a legördülő almenükképeire kattintva egy-egy, az adott tag alkotásait tartalmazó galériába juthatunk tovább, melyet a Clearboxmagyar fejlesztésű, ingyenesen letölthető programmal valósítottam meg. Ezzel a programmal egy galérián belül nem csak képek, hanem weboldalak és akár kisfilmek is elhelyezhetővé váltak.

28. A honlap arculata A harmadik és egyben végső változat Az események oldalon a kiállítások meghívóinak, és a kiállításokról készültfotóknak, esetleg kisfilmeknek megte-kinthetőségéta tagok oldalnál említettmódon oldottam meg.

29. A honlap arculata A harmadik és egyben végső változat Az események galériájához több, véletlenszerűen egymásra tettfotót helyeztem el, melyek mozgat-hatóak. A galériákat jelképező fotókon találhatótuspacákra kattintva léphetünk be az adott esemény galériájába

30. A honlap arculata A harmadik és egyben végső változat A kapcsolat oldalon az elérhetősé-geknélelhelyezett ikonok alap esetben tusfoltokra utaló változatban jelennekmeg, de amint az egérrel ráállunk az adott képre, az az eredeti formájában lesz látható.

31. A honlap arculata Almenü A minél jobb helykihasználás érdekében a tagok és az események oldalaknál az almenütSpryAccordion Panelbe helyeztem el, ahol a fülekre kattintva látható a tartalom.

32. A honlap arculata A honlapnál alkalmazott színrendszer

33. A honlap arculata Üres területek Kerültem az oldalak túlzsúfolását, ezért az oldalakon elhelyezett üres terekkel tettem szellősebbre őket.

34. A honlap arculata Hierarchia

35. A honlap arculata Betűtípus Verdanabetűtípust választottam, mivel ez a betű minden gépre tele-pítvevan, így gond nélkül megje-lenhetnekvele az oldal szövegei. A betűkeverést alkalmazva egy talpas betűvel terveztem még izgalmasabbá tenni az oldal megjelenését. A főcímek esetében a átlátszó hátterű képeket illesztettem be, amelyeken Poor Richard típussal jelenítettem meg a főcímek neveit. Erre azért volt szükség, mert nem ismeri fel minden gép, viszont a logóban szereplő betűtípust kívántam megismételni az összhatás elérése érdekében. A képaláírások esetében is ezt a betűtípust alkalmaztam.

36. Kulcsszavak A jól megválasztott kulcsszavakra a weboldal optimalizálás miatt van szükség, hogy az oldalunk az ezekre a szavakra kereső portálok találati oldalán minél jobb pozíciót érjen el. A kulcsszó kiválasztása során azt is figyelembe vettem, hogy sokan a pontosabb találat érdekében ma már nem csak egy szót írnak a keresőbe. Ezért annak érdekében, hogy minél több látogatót tudjak a weboldalra irányítani, a következő variációkra optimalizáltam az oldalt: spiriTUSz csoport Eötvös 10 spiriTUSz alkotócsoport kiállítás alkotótábor

37. Mozgókép A spiriTUSz csoport Eötvös 10 év végi kiállításáról készítettem AfterEffects programmal egy rövid mozgóképet.

38. Köszönöm a figyelmet!