A szerkezet
a fél munka.
Rács, távolságok, szekciók, komponensek, mobil nézet. Ez az a rész, amit érdemes eldönteni, mielőtt bármit is legeneráltatsz - mert innentől az AI csak kitölti a keretet, amit te adtál neki.
A layout nem díszítés. Ez a gondolatmenet sorrendje.
Egy weboldal nem egy kép, hanem egy út. A látogató fentről lefelé haladva jut el a kérdésétől a döntéséig. A layout az, ami ezt a sorrendet meghatározza: mit lát először, mit ért meg másodszor, és mikor kérünk tőle valamit.
Ezért a jó munka nem a színnel kezdődik, hanem egy listával: milyen szekciók legyenek, milyen sorrendben. Ha ezt te adod meg, az AI kitölti. Ha nem adod meg, ő fog kitalálni egy általános sorrendet - és a te érveid rossz helyre kerülnek.
Előbb a váz, aztán a látvány. Fordítva sosem működik - legfeljebb véletlenül.
Egy skála, nyolcas alapon.
A leggyakoribb amatőr jel az, hogy a távolságok véletlenszerűek: itt 13 pixel, ott 21, amott 7. A megoldás egy egyszerű szabály: minden távolság ennek a sornak a tagja legyen. Nem kell mérni, csak választani.
Tizenkét hasáb, két szélesség.
A weboldalak láthatatlan rácsra épülnek. A tizenkettő azért jó szám, mert kettőre, háromra, négyre és hatra is osztható - így ugyanabból a rácsból lesz két hasáb, három kártya vagy négy ikon. A tartalom szélessége pedig két értéket vesz fel: a szöveg keskeny marad, a látványos részek szélesek.
Egy szekció négy részből áll.
Ez a legjobban megtérülő minta, amit megtanulhatsz. Ha minden szekciód ezt a négy részt tartalmazza, az oldal ritmusa magától kialakul - és bármikor tudsz újat írni bele.
Árajánlat, visszaigazolás, emlékeztető, számla. Mindegyik ugyanaz, mindennap.
Ingyenes audit →Egy landing page sorrendje.
Ez a nyolc szekció egy jól működő alapváz. Nem kötelező mind, de a sorrend számít: a látogató kérdéseit ebben a sorrendben kell megválaszolni. Ezt a listát add oda az AI-nak - így nem ő találja ki, mi hova kerül.
Egy oldal, egy cél. Ha három különböző dolgot kérsz a látogatótól, egyiket sem fogja megtenni.
A látogatóid többsége telefonon jön.
Mobilon minden egymás alá kerül - ezért a legfontosabb döntés nem a látvány, hanem a sorrend. Amit felül teszel, azt olvassák; ami lejjebb van, azt kevesebben. És minden, amit meg kell nyomni, legyen elég nagy az ujjnak.
Egy weboldal hat építőkockából áll.
Ha ezt a hatot egyszer eldöntöd, kész a saját mini rendszered - és onnantól minden oldalad ugyanúgy fog kinézni, akkor is, ha külön napokon készül.
Egy fő és egy másodlagos forma. Több nem kell.
Egy forma, amiben minden felsorolt dolog megjelenik.
Egy hasáb, felül a címke, alatta a mező.
Öt-hét pont, mobilon menügomb.
Kis mono felirat, ami keretezi a szekciókat.
Kapcsolat, jogi linkek, egy mondat rólad.
Egy gombnak négy állapota van.
Alap, ráállás, lenyomás és fókusz - ez utóbbi az, amit a tabulátorral navigálók látnak. Ezt a négyet szinte soha nem kérik el, és ez az a részlet, amitől egy oldal késznek érződik, nem félkésznek.
Nem mondja meg, mi történik utána.
Ige és eredmény. A látogató tudja, mit kap.
A kártyák akkor jók, ha egyformák.
Ugyanaz a belső térköz, ugyanaz a sorrend, ugyanaz a magasság. Ha az egyik kártyán három sor van, a másikon egy, akkor is legyenek egyforma magasak - különben a sor alja szétesik. Ezt kérni kell, mert magától nem lesz úgy.
Egy óra, három javaslat, írásban.
IngyenesKét hét alatt egy folyamat, kézbe adva, dokumentálva.
Ajánlat alapjánMegtanulod magad használni.
4 alkalomMinden mező, amit elhagysz, több kitöltött űrlap.
Kérdezd meg magadtól minden mezőnél: tényleg kell most? A telefonszám ráér később. Öt szabály, és az űrlapod jobb lesz, mint a legtöbb.
Nem három weboldal. Egy, ami alkalmazkodik.
Nem kell külön tervet készíteni telefonra, tabletre és monitorra. Egy tervet készítesz, ami alkalmazkodik: a hasábok számát váltja, a betűméret együtt mozog a szélességgel, a képek kisebb változatot töltenek be. Két törésponttal a legtöbb oldal megvan.
Egy hasáb, menügomb, nagy kattintható felületek.
Két hasáb, a kártyák kettesével.
Teljes rács, három-négy kártya egy sorban, 1200 px tartalomszélesség.
Húzd össze a böngésző ablakát keskenyre, majd húzd szét újra. Ha közben semmi nem lóg ki és nem torlódik össze, akkor jó. Ez fél perc, és a legtöbb hibát megtalálja. Éles oldalnál a Google mobilbarát-tesztje is gyorsan megmondja, ha valami nem stimmel.
Hogyan kérj layoutot?
Ne az egész oldalt kérd egyszerre "szépen". Add meg a vázat és a szabályokat, aztán szekciónként dolgozz. Így tudod javítani is, mert mindig tudod, melyik részről beszélsz.
Hat kérdés a kapott oldalhoz.
Tedd egymás mellé, ami lett, és amit kértél. A különbség mindig tanulságos - és ez a különbség lesz a következő kérésed.
A layout-szabályod, egy blokkban.
Ez az a néhány sor, amit érdemes elmenteni. Ez a blokk adja meg a keretet, amit a Claude kitölt - enélkül ő találja ki a szerkezetet.
Mielőtt kiadod a kezedből
Ha megvan a váz és a négy szabálylap, a többi már kivitelezés.
Öt alapozó, öt szabálylap: paletta, betűk, képek, tervezési elvek, layout. Együtt ez a te tervezői kézikönyved - és pontosan ez az, amit az AI nem tud kitalálni helyetted.