Grafikus webdesign 2015

Design-alapelvek • Koncepcionálás • Photoshop • Webergonómia

A weboldalkészítés az egyik leginterdiszciplinárisabb műfaj. Itt szerepet játszanak tartalomszerzői, vizuális és műszaki kompetenciák. Ennek megfelelően az ágazatot marketingesek, designerek és programozók 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, 2015-ben.

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 megálmodója 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 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 legalább a VGA és a full-HD közötti felbontásokat lefedik. A mobil-, tablet- és desktop-változatoknak nemcsak az elrendezése térhet el, hanem a tartalma 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 hallgató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.

A magánórákat igényeinek megfelelően tartjuk.

Időtartam: kb. 36 × 60 perc

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

Színek

  • "Színek - Minek?!"
  • 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.)
  • Színpaletta generálása
    • fényképről
    • harmóniatörvények alapján
    • kész paletták böngészése
  • Színek és szöveg
  • Színpszichológia és kultúrafüggő konnotációk

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
    • Fixed
    • Liquid (fluid)
    • Hybrid
    • Elastic
  • Az oszlopszám, a betű- és a kijelzőméret összefüggései
  • Weblapok részei: tartalom és periférikus elemek (fejléc, navigáció, oldalsáv, lábléc)
  • Navigációk: vízszintes sáv, legördülők (drop down), függőleges navigáció, kartotékfülek (tabs), keresőmező, kulcsszófelhő (tag cloud), kenyérmorzsák (breadcrumbs)

Koncepcionálás

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

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: háttérelemek, keret-elemek, fejlécgrafikák, navigáció, lábléc
  • Háttérgrafikák, textúrák
  • Figyelemfelkeltő elemek: matricák, post-it cetli
  • Guideguide
  • Workshop: Banner készítése (slicing)
  • Workshop: Weboldal készítése (Layer comps-paletta)
  • Automatizálás

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

Webtechnológiák

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

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

Érdekes linkek

Kapcsolódó modulok: HTML / CSS, Dreamweaver, Online marketing