Webdesign és információ építészet a gyakorlatban

Átírás

1 THE INTERNET,mapped on the opposite page, is a scalefree network in that Webdesign és információ építészet a gyakorlatban dis.'~tj port,from BYALBERTU\SZLOBARABASI ANDERICBONABEAU THE INTERNET,mapped on the opposite page, is a scalefree network in that BYALBERTU\SZLOBARABASI ANDERICBONABEAU 2 A tervezési folyamat Felhasználó központú tervezés szükséges Activity Centered Design Követelmények meghatározása a site célja a felhasználói közösség a site stílusa scenáriók Információ építészet > site map Look & feel

2 THE INTERNET,mapped on the opposite page, is a scalefree network in that BYALBERTU\SZLOBARABASI ANDERICBONABEAU 3 Tervezési elvek Figyelmi szempontoknak megfelel! tervezés Ne dekorálj, kommunikálj! Az egyszer"ség célravezet! Semmi ne legyen cél nélkül Ellenállni az eredetiség kihívásának THE INTERNET,mapped on the opposite page, is a scalefree network in that BYALBERTU\SZLOBARABASI ANDERICBONABEAU 4 Figyelmi szempontok Figyelem vezetése a vizuális elemek segítségével Oldal szint" terv Fontossági kategóriák Els!dlegesen fontos elemek max. 34 db Másodlagosan fontos elemek

3 THE INTERNET,mapped on the opposite page, is a scalefree network in that 5 Figyelmi szempontok 1. Oldalcím 2. Site cím, logó 3. Oldal tartalmi összefoglalás 4. Navigáció 5. Oldal tartalom 6. Egyéb tartalom 7. Lábléc navigáció BYALBERTU\SZLOBARABASI ANDERICBONABEAU THE INTERNET,mapped on the opposite page, is a scalefree network in that BYALBERTU\SZLOBARABASI ANDERICBONABEAU 6 Ne dekorálj, kommunikálj Sensemaking Természetes szemmozgás, fókuszálás Tipográfia ismeretek alkalmazása Releváns, koherens hatást nyújtó grafikai design elemek stílus tagolás érzelmi elemek

4 THE INTERNET,mapped on the opposite page, is a scalefree network in that BYALBERTU\SZLOBARABASI ANDERICBONABEAU 7 Egyszer!ség Egyszer" design > technológiailag egyszer" oldal gyorsabb letölt!dés, gyorsabb renderelés jobb áttekinthet!ség, egyszer"bb navigáció gyorsabb tervezés, gyorsabb megvalósítás, gyorsabb újratervezés kisebb tárhely igény, könnyebb karbantarthatóság THE INTERNET,mapped on the opposite page, is a scalefree network in that BYALBERTU\SZLOBARABASI ANDERICBONABEAU 8 Mindennek legyen célja Felhasználók támogatása céljaik elérésére Site céljainak támogatása a felhasználó frusztrálása nélkül A megfelel! folyamat cél meghatározása és rögzítése tervezést abbahagyni, ha a cél nem látszik világosan tervezési eredmények megindoklása a céllal összefüggésben a terv validálása

5 THE INTERNET,mapped on the opposite page, is a scalefree network in that BYALBERTU\SZLOBARABASI ANDERICBONABEAU 9 Az eredetiség kísértése Az eredetiség a kreativitásban is speciális adottság; ritka Alapvet! gond: az igazán eredeti megoldások csak ritkán jól használhatók Esztétikai stílus kialakítása evolúciós életciklus gyors, véletlenszer" genetikus mutációk epidemiológia Funkcionális tervezés lassabb életciklus konvenciók THE INTERNET,mapped on the opposite page, is a scalefree network in that 10 BYALBERTU\SZLOBARABASI ANDERICBONABEAU Grafikai tervezés Átláthatóság vizuális elemek elrendezése, viszonya egymáshoz relációk, tartalmazások, elhatárolások tervezési eszközök kontraszt szinek textúrák

6 THE INTERNET,mapped on the opposite page, is a scalefree network in that 11 BYALBERTU\SZLOBARABASI ANDERICBONABEAU Grafikai tervezés Szinek használata konzisztens színséma használata szinek száma világos (fehér) háttér a f! tartalomhoz, szövegekhez intenzív szinek kiemeléshez THE INTERNET,mapped on the opposite page, is a scalefree network in that 12 Grafikai tervezés Kontraszt visual popout olvasási kényelem kiemelés, elfedés BYALBERTU\SZLOBARABASI ANDERICBONABEAU

7 THE INTERNET,mapped on the opposite page, is a scalefree network in that 13 BYALBERTU\SZLOBARABASI ANDERICBONABEAU Grafikai tervezés Képek használata Site azonosítás/logó Tartalom Navigáció Ikonok használata körültekintést igényel THE INTERNET,mapped on the opposite page, is a scalefree network in that 14 Grafikai tervezés Oldal layout/tartalom elrendezés Csoportosítás Tartalmazás Illesztés BYALBERTU\SZLOBARABASI ANDERICBONABEAU

8 THE INTERNET,mapped on the opposite page, is a scalefree network in that 15 BYALBERTU\SZLOBARABASI ANDERICBONABEAU Site szerkezet Információ építészeti modellek Allinone Flat Index Hierarchia Többszörös hierarchia THE INTERNET,mapped on the opposite page, is a scalefree network in that 16 BYALBERTU\SZLOBARABASI ANDERICBONABEAU Site szerkezet Navigációs modellek Tartalomjegyzék Vízszintes navigációs sáv kenyérmorzsa csík Fülek Menü oszlopok Kinyitható/összecsukható fák

9 THE INTERNET,mapped on the opposite page, is a scalefree network in that 17 BYALBERTU\SZLOBARABASI ANDERICBONABEAU Akadálymentesítés Okok fogyatékkal él!k támogatása jobb általános használat törvényi el!írás Megoldások képek, animáció: alt, longdesc attribútum image map: kliens oldali, area alt multimédia: feliratozás értelmes link szövegek THE INTERNET,mapped on the opposite page, is a scalefree network in that 18 BYALBERTU\SZLOBARABASI ANDERICBONABEAU Nemzetközi használat Nemzetközi változat vs. lokalizált változatok Web sajátságok könnyebb lokalizálás id!formátumok és id!zónák URLek nyelvválasztó nyitóoldal zászlók ~ nyelvek ikonok kultúrafügg! értelmezése

10 THE INTERNET,mapped on the opposite page, is a scalefree network in that 19 Tartalom kivitelezés BYALBERTU\SZLOBARABASI ANDERICBONABEAU Validált HTML struktúrált tartalom Megjelenítés, layout: CSStel Szeparált HTML, CSS, JavaScript dokumentumok