Webdesigner tanfolyam

WEBDESIGNER TANFOLYAM 2017

A weboldalkészítés az egyik leginterdiszciplinárisabb műfaj. Itt szerepet játszanak tartalomszerzői, vizuális (grafikus és interakciós design), valamint műszaki (programozói) kompetenciák. Ennek megfelelően az ágazatot marketingesek, designerek és coderek népesítik be. De nem lehet kijelenteni, hogy a nevezett aspektusok bármelyike garanciát jelentene egy weboldal sikerére, ahogyan azt sem, hogy bármelyik elhanyagolása nem jelentené egy projekt kudarcát ma, 2016-ban.

Ezen a tanfolyamon a weboldalkészítés grafikus megközelítése áll a középpontban.

Jó design akkor születik, amikor azt a tartalomnak megfelelően, a célcsoportot is figyelembe véve álmodja meg egy vizuális alapvetésű tervező. Az első látásra megkapó design jellemzően nem eszközök használata közben születik, hanem magától, legbelül: a zuhany alatt vagy a metrón bóbiskolva - így lehet független az alkotó technikai korlátaitól.

De mivel képernyőre alkotunk, a látványtervnek digitális formában kell elkészülnie. Az igazán lendületes munkát pedig a képszerkesztők rutinos használata biztosítja.

A weboldalkészítés trendjei hirtelen jönnek és gyorsan el is avulnak, de mindegyik trendből itt marad egy kicsi. Ezt a szerkesztőszoftverek is visszatükrözik. Tanfolyamunk anyaga egészen friss, kitérünk a legújabb eszközökre és technikákra, és hanyagoljuk, ami elavult.

Bevezetőül átismételjük a minden design alapköveinek számító tipográfiát, színtant, layout-elveket. Ezt követik a webspecifikus oldalszerkezetek, a webes koncepcionálás és a vázolás.

A tanfolyam gerincét alkotó gyakorlati órákon Photoshoppal, Illustratorral készítünk olyan oldalsablonokat, amelyekből használható weboldalak készülhetnek

Az ergonómiai tervezés főleg a lapon belüli elemeket érinti; azok elrendezését, a navigációs elemeket, az oldalsávok tartalmát, megjelenését, a tartalmi rész interaktív elemeit, az űrlapelemek megválasztását, megjelenésüket, a gombokat, a visszajelzéseket, és mindenféle modult (képváltó, stb).

Végül kibővítjük az oldalszerkezetekről szerzett ismereteinket. A ma elterjedt legkisebb és legnagyobb felbontású képernyők között a különbség majdnem 70-szeres (240×320-as telefon – 2880×1800-as asztali képernyő). A ma webdesignere csak akkor piacképes, ha látványtervei minden kijelzőt lefednek. A mobil-, tablet- és desktop-változatoknak nemcsak a tartalma és az elrendezése térhet el, hanem a viselkedése is. A Responsive webdesign területe ezen kívül érinti a képek és más médiumok méret-optimalizálását, valamint a táblázatok, űrlapok és egyéb modulok megjelenését is.

Ahhoz, hogy résztvevőink a későbbiekben böngészőben működő weboldalakat is készítsenek, áttekintjük az alapvető webtechnológiákat, és bepillantunk a Dreamweaver nevű vizuális szerkesztőbe.

Vizsgamunka: saját tervezésű weboldal 2 aloldallal, 3 szélességben, animált bannerrel

A tanfolyam megkezdésének feltételei:

01 Tipográfia

• Betűtípusok, betűcsaládok
• Betűalak, betűkép
• Mértékrendszer
• Elemek és fogalmak
• Mikrotipográfia
• Betűtulajdonságok
• Bekezdéstulajdonságok
• Szövegegységek
• Nyugodt vs. dinamikus layout

Gyakorlat: egyszerű betűeffektek Photoshopban
retrókontúr / 3D + tükröződés / fába gravírozott betűk / csillámbetűk / graffiti / lángoló betűk / aranybetűk / break-effekt

02 Színek

• Színterek: RGB, HSB, CMYK
• A digitális színkör
• Szomszédos színek, monokrómia
• Színkontrasztok (komplementer-, hideg-meleg, minőségi, sötét-világos és színes-színtelen kontraszt)
• Színpaletták (nyugodt, dinamikus, stb.)
• Hasznos eszközök
• Színek és szöveg
• Színpszichológia és kultúrafüggő konnotációk

Feladat: színpaletta és változatok létrehozása adott design-vezérelvhez

03 Layout

• Szerkesztési elvek (háttér-előtér, térköz és hasonlóság, zártság, a ’közös sors’, a ’jó folytatás’, hangsúly)
• Kontrasztok: kicsi/nagy, könnyű/nehéz
• Ritmus és ismétlés
• Struktúra és permutáció
• Térbeli elrendezés
• Aranymetszés
• Hagyományos weboldalszerkezetek

• Az oszlopszám, a betű- és a kijelzőméret összefüggései
• Fixed
• Liquid (fluid)
• Hybrid
• Elastic

Feladat: statikus layout Photoshopban megadott tartalomhoz

04 Koncepcionálás

• Ki vagy és mid van?
• Kinek kell?
• De mi kell neki igazán?
• Hogy lehet neki eladni?
• Tartalmi strukturálás és design-elvek

Feladat: brief kitöltése és prezentálása

Feladat: Vázolás papíron

05 Photoshop

• Kijelölések (geometrikus, színalapú, csatornával)
• Korrekciók (színek, tónus, geometriai)
• Retusálás
• Montírozás
• Grafika (ecsetszerű eszközök, vektoreszközök, szűrők)
• Weboldal-elemek
• Guideguide
• Workshop: Banner készítése (slicing)
• Workshop: Weboldal készítése (Layer comps-paletta)
• Automatizálás

Feladat: felvázolt oldal elkészítése PS-ban

06 Illustrator

• Pixel- vs. vektorgrafika
• Vektorok
• Kijelölés
• Műveletek formákkal
• Szerkesztés
• Effektek
• Körvonalak
• „Szabadkézi” eszközök
• Transzformációk
• Színek
• Áttetszőség és maszkok
• Szöveg
• Pixelgrafikák és textúrák
• Szimbólumok
• Workshop: Logó készítése és exportja
• Workshop: Weboldal készítése
  • színkezelés
  • weblap felépítése
  • mockup / wireframe
  • szeletelés
  • mentés webre
  • méretoptimalizálás
• CSS-export
• SVG-export
• HTML5-canvas export

Feladat: banner készítése

07 Webergonómia

• „Ne törd a fejem!”
• Az elképzelt és a valóságos weboldalhasználat
• A hirdetőtáblák kiskátéja
• Szövegek redukálása
• A navigáció
• A kezdőlap
• Használhatósági teszt
• Akadálymentesítés
• Oldaltervezés
• Tartalomtervezés
• Laptervezés

08 Responsive oldalszerkezetek

• Reflowing Layouts
• Equal Width
• Off Canvas
• Source-Order Shift
• Lists
• Grid Block

09 A responsive webdesign egyéb problémái

• Tipográfia
• Médiumok (képek, videó, térkép)
• Megoldások navigációra
• Megoldások táblázatokra
• Űrlapok
• Nagyfelbontású kijelzők
• Modulok (körhinta, tabek, harmonika, üzenet a weblapról, lightbox)
• Feltételes betöltés
• Bootstrap
• Modernizr E

10 Webtechnológiák

• Domain-név és tárhely
• Szolgáltatók és csomagjaik
• Statikus és dinamikus oldalak
• Fogalmak
• A webböngésző
• Áttekintés: kijelölőnyelvek (HTML, XML, CSS)

11 Dreamweaver

• Dokumentum-kezelés
• Site-kezelés
• Elemek beillesztése (képek, médiumok, táblázatok, űrlapok)
• CSS-szerkesztő
• JavaScript-keretrendszerek: Behaviors, Spries, Snippets
• Tesztelés és közzététel