Dizájn alapok

Mit tanulsz ebben a modulban?

Nem leszel grafikus a hét végére, és nem is kell. Annyit fogsz tudni, hogy a saját landolódat (a 2. modulból) ki tudd javítani, ha „valami nem stimmel rajta". Megnézzük a 4 alap-elvet, a 60-30-10 színszabályt, a tipográfia két alap-szabályát, és egy Claude Code-os bírálat-loopot.

01. A 4 alapelv és a vizuális hierarchia

A legtöbb amatőr-kinézetű weboldalon ugyanaz a 4 hiba van, és ezek szervezési problémák, nem grafikaiak:

• Kontraszt — fontos elem (CTA gomb, főcím) erősen különbözzön a környezetétől színben/méretben
• Közelség — összetartozó elemek (cím + leírás + gomb) egymás mellett, idegenek között levegő
• Igazítás — minden elem egy láthatatlan rácson üljön (bal-igazítás szövegnek, középre csak hero-ban)
• Ismétlés — ugyanaz a stílus (pl. minden gomb ugyanolyan formájú) — ez ad „rendszer-érzést"

Ha ezt a négy elvet a saját oldaladon végigellenőrzöd, már 80%-ban jó.

02. Színek és tipográfia

Kezdő weboldalon két font max, három szín max.

• Tipográfia: egy fő font (Inter, Geist, Manrope — Google Fonts ingyen), esetleg egy serif a címekhez
• 60-30-10 szabály: 60% háttér (fehér / nagyon halvány szürke), 30% kiegészítő (sötét szöveg), 10% akcens (brand szín, CTA)
• Paletta: coolors.co 5 perc alatt ad harmonikus skálát

Ne használj 5 különböző színt — a zűrzavar elveszi a figyelmet a szövegtől.

03. Taste-bírálat loop Claude Code-dal

Add be az index.html-t Claude Code-nak, és kérd meg:

„Bírálj meg úgy, mintha senior dizájner néznéd: kontraszt, közelség, igazítás, ismétlés, tipográfia, szín-arány. Adj 1-10 pontszámot szekciónként és írj 3 konkrét javaslatot."

Claude pontosan megmondja, hol gyenge az oldal — például „a CTA gomb színe túl halvány", „a hero-ban két különböző font". A loop-ot 2-3-szor futtatva az oldalad fokozatosan átlép a „kezdőnek látszó" kategóriából a „rendben kinézőbe". Ez a self-check loop a kurzus egyik leghasznosabb eszköze.

Heti feladat

Futtasd a taste-bírálat loop-ot a saját landolódon legalább 2-szer, és javítsd a top 5 javaslatot Claude Code-dal.

Eredmény

Az oldalad nemcsak működik, hanem rendben is néz ki — kontraszt, hierarchia, tipográfia és színek a helyükön, és van egy módszered, amivel bármilyen jövőbeli oldalt is fel tudsz javítani.