Interface design

Design-alapelvek • Ergonómia • Képszerkesztők

Ezt a tanfolyamot elsősorban szoftverfejlesztőknek szánjuk, hogy szoftverinterface-eik bárki számára, bármilyen helyzetben jól használhatók legyenek.

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

Időtartam: kb. 10 × 60 perc

Elmélet: Layouting

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

Elmélet: Interaktív design

  • Az interaktív design alapelvei
    • Rendszerszerű működés
    • Kontextus
    • Need Theory & Expectancy Theory
    • Motiváció
    • A felhasználó bevonása
  • Felhasználóvezetés
    • Időbeli strukturálás
    • Felhasználó-vezetési technikák
    • Tipográfia
  • Design minták
    • Design mintakönyvtárak…
    • Harmonika (accordion), Körhinta (carousel), Előugró ablak (hop-up, lightbox)
    • Rossz minták
    • Hatékony navigáció
    • Sitemap
    • Taxonómia
    • Metaadatok
    • Oldalnavigáció
    • Tartalmi linkek
    • Idő
  • Keresés és szűrés
    • Kulcsszavas keresés
    • Rendezés és szűrés
    • Találatok prezentálása
    • Infinite scrolling
    • Shortcuts
    • Tartalmi rétegek
    • Scent of Information
    • Helyzetérzékelés
    • Kontextus és észlelés
  • Mozgás
    • Video
    • Vizuális hierarchia
  • Kogníció
    • Kognitív előítéletek
    • Cimkék és ikonok
    • Behúzás és csoportosítás
    • Szövegcimkék
    • Bosszantó alertek
    • Képek parancsgombokon, navigációban
    • Ikonok
    • Mentális modellek
    • Rendszermodellek
    • Kognitív terhelés
  • Viselkedés-tervezés
    • Elvárások
    • Tanulás
    • Bevitel
    • Automatikus adatgyűjtés
    • Timing
  • Feedback
    • Visszajelzés
    • Visszajelzés formája
    • Státusz és haladás
    • Hibaüzenetek
  • Mérföldkövek
  • Fogalmak: Ergonómia ('40-es évek), HCI (60'-as évek), Interface Design ('80-as évek), User Centered Design, User Experience Design (1995)
  • A tervezés 4 fázisa

Ikonok

  • E-mail ikon (boríték)
  • Jelszóváltoztatás / Belépés ikon (lakat)

Önkiszolgáló pénztárgép újratervezése

  • Mit lehetne javítani?
  • Színek
  • Betűtípus
  • Arányok
  • A guideguide Photoshop-bővítmény
  • Logó és periférikus elemek beillesztése
  • Gombok és státuszaik
  • Feliratok és effektjeik
  • Adattáblázat
  • Grafikák beszerzése
  • Saját grafika Illustratorban

Iskolai adminisztrációs szoftver újratervezése

  • A jelenlegi rendszer kritikája
  • Javaslatok új rendszer működésére és külsejére (írásos koncepcionálás)
  • A 6 aloldal: Áttekintés (Hiányzók), Órarend, Napló, Osztályzatok, Üzenetküldés, tananyagok, (+1: Jelszóváltoztatás)
  • Firka ceruzával papírra
  • Arányok eldöntése
  1. Rácsok felvétele az első designhoz: Áttekintő oldal
  2. Táblázatos elemek szerkesztése Wordben, PDF-export
  3. Megfelelő ikonok keresése
  4. Megfelelő betűtípus keresése a Google Webfontson
  5. Elemek összerakása Photoshopban
  6. Komponálás, kísérletezés színekkel és betűstílusokkal
  7. Színkorrekciók
  8. És még egyszer előlről
  9. Egy másik oldal: az Üzenetküldés designja

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