1. gyakorlat

• Oktató: Vincze Máté
• Email: vinczemate@inf.elte.hu
• Kezdés: 8:15
• Canvas oldal
• Üzenetek Teams-ben lesznek

Ajánlott szoftver: Mockflow

Követelmények

• Féléves feladat: saját (statikus) weblap készítése
  • A követelményes, irányelves táblázatra figyeljünk! (A sárga hátterűért mínusz pont jár, ha nem tejlesül.)
• Határidők: Az előadásos oldalon és a tárgy oldalán
• Lesznek kvízek (min. 50% kell a pontokból)
  • Teams-en szól a gyakvez, ha megnyílt a következő
• Teljes pontozás: a max. pont 200
• A határidőkre figyeljünk!

Drótváztervezés - Wireframe

Wireframe (low fidelity)

• Kis pontosságú webdesign
• Milyen elemek és hol?
• A tartalom hol helyezkedik el?
• Egyes esetekben hivatkozási hálóval...
• Ajánlott szoftver: Mockflow
• Nincsenek színárnyalatok, betűtípusok, tényleges képek

Mockup (high fidelity)

• Stílussal, tartalommal
• A végleges színekkel és képekkel
• Továbbra sem funkcionális
• Vizuális vázlat

Prototípus

• A végleges weboldalt szimulálja
• A felhasználóval való kommunikációt segíti
• A drótváztervet követi
• Két típus:
  • Low fidelity: a drótvázterv alapján készül
  • High fidelity: a mockup alapján készül

Javasolt oldal: Mockflow

Tipikus oldalrészek

• Fejléc (header)
• Fő tartalom (main)
• Oldalsáv (sidebar)
• Lábléc (footer)

Tipikus elrendezések

• 1 oszlopos (általában telefonra)
• 2 oszlopos (főleg tabletekre)
• 3 oszlopos (nagyobb felbontásra)

Mockflow

• Van turial rész
• UI drawings -> web
• Tipp: Egy oldalra több drótváz tervet is rakhatunk