Weboldal tervezéseegy képzőművészeti csoporthoz

Szolnoki Ágnes, új média grafikus szak

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-rokon vesznek 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 magam is tagja vagyok, így egy személyben lehettem a weboldal megrendelője és kivitelezője is.

BriefFeladat

•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.

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 Facebookon az ideiglenes logóval•Névadó ünnepség saját fotókkal

Brief

Inspirációk

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

A logó

Logó kialakulásának fázisai

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ámabb szí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.

A logó

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.

A logóA logó használata

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

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ó

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

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ó

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

Arculati elemek

A spiriTUSz csoport arculati elemeinek megjelenései különböző helyeken:

•Megjelenés a Kép a falon című oldalon

Arculati elemek

A spiriTUSz csoport arculati elemeinek megjelenései különböző helyeken:

•Megjelenés a Múzeumok éjszakájaprogramjában

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

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.

A honlap arculata

A honlap arculataArculat

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:

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 Drag AP Element alkalmazásával.De ezt a megoldást később elvetettem, mert céltalannak tűnt az elemek mozgathatósága.

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.

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.

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.

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.

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.

A honlap arculata

A harmadik és egyben végső változat

•További tuspacát is elhelyeztem a felületeken.

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.

A honlap arculata

A harmadik és egyben végső változat

•A tagok oldalon a legördülő almenük képeire kattintva egy-egy, az adott tag alkotásait tartalmazó galériába juthatunk tovább, melyet a Clearbox magyar 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.

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ét a tagok oldalnál említettmódon oldottam meg.

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

A honlap arculata

A harmadik és egyben végső változat

•A kapcsolat oldalon az elérhetősé-geknél elhelyezett 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ó.

A honlap arculata

Almenü

•A minél jobb helykihasználás érdekében a tagok és az események oldalaknál az almenüt Spry Accordion Panelbe helyeztem el, ahol a fülekre kattintva látható a tartalom.

A honlap arculata

A honlapnál alkalmazott színrendszer

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.

A honlap arculata

Hierarchia

A honlap arculata

Betűtípus

•Verdana betűtípust választottam, mivel ez a betű minden gépre tele-pítve van, így gond nélkül megje-lenhetnek vele 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.

A honlap arculata

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

Kulcsszavak

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

Mozgókép

Köszönöm a figyelmet!