Sok grafikus hajlamos azt gondolni, hogy a weboldal egy online változata a nyomtatott szórólapnak.

“Akkor 300Dpi-ben jó lesz a webdesign?”

Őöhhh … Mi van :D?

Korábban már írtam arról, hogy jelentős különbségek vannak a nyomdába és a képernyőre szánt grafikai tervezés között, most a sitebuild oldalról szedtem össze, hogy mik azok fontosabb szempontok, amire érdemes odafigyelned, ha weboldal tervet csinálsz és adsz le kódolásra.

Megkapom a grafikustól sitebuildre az anyagot – ami általában nem több, mint egy grid nélküli kiszínezett kép – szólok, hogy nem lesz a jó az elgondolás, javítsa. Oké akkor mondjam meg mit javítson… Nah, hát az amire nincs idő, tudnod kéne hogy add le a forrás anyagot. Vagy tervezek, vagy kódolok, de két melót nem csinálok, főleg nem egy áráért, oktatni meg hát szintén nem ingyen szoktam. Szóval ismerd a webdesign szabványait.

A webdesignak csak kb a 30%-a grafikai tervezés, a többi felhasználói felület tervezés, marketing, és egyebek, más kompetenciákat igényel, mint a nyomtatott grafikai tervezés. A másik nagy különbség, hogy képernyőre tervezel, pontosabban képernyő(K!)re, sokra, nem egyre, tehát ismerni kellene azok sajátosságait, működésüket, meg úgy egyáltalán a platformokat, amire tervezel. Ez szinte 99%-ban hiányzik, ha főleg print gyakorlattal jössz.

A nyomdai cuccokban nem nagyon találkozunk reszponzív dolgokkal, maximum bele kell nyomorgatni egy A5-ös szórólapra néhány száz sor szöveget, de ezért ez mégsem ugyanaz, mint mondjuk desktopról, tabletra, aztán mobilra optimalizálni a megjelenést.

A legnagyobb probléma általában az, hogy a megtervezett weboldal nem funkcionális, csak egy (UX szempontból rosszul) kiszínezett kép, amolyan prospektus szerű. Vagy a másik véglet, beterveznek funkcionálisan olyan dolgokat, ami egyrészt nem életszerű, másrészt nincs semmi infó arról, hogy hogyan lehet / érdemes azt megvalósítani, ha egyáltalán meglehet és annak milyen feltételei vannak. Mondok egy példát. Például ne tervezz foglalási rendszerhez felületet még egy sima gombot se addig, amíg erről nem egyeztetsz a fejlesztővel, nem tudod hogyan néz ki a foglalás menete, egyáltalán fogja-e kezelni valaki ezeket a foglalásokat, vagy csak valaki egyszer bemondta nagy-mellénnyel, hogy “Jah, legyen az is”.

Printesek különleges képességei

A hiányosságok mellett nem szabad megfeledkezni azokról a dolgokról, amiket ők tudnak a legjobban. Nyilvánvalóan mert rengeteg féle felületre terveznek ők is, valahogy sokkal változatosabb és grafikailag kidolgozottabb weboldalterveket tudnak összerakni, még akkor is, ha UX szempontból nincs minden rendben.  Gyakorlatilag a 3.0-ás webdesign trendet (szabadabb elrendezés, egymást fedő elemek, függőleges szövegek, absztrakt rácsszerkezet) is nekik köszönhetjük. A web is próbál egyre több mindent átvenni a printből, ami részben jó részben meg nem. Minden olyan design elem, ami a vizuális megjelenést emeli, az nagyot dob a weboldalon, de minden olyan elem, ami a funkcionalitást próbálja “megreformálni”, az sokat ronthat a használhatóságon.

Hogy kell kinéznie a kódoláshoz leadott anyagodnak

  1. A weboldal tervezésnek vannak bizonyos szempontjai, irányelvei, amik azért alakultak ki mert, MŰKÖDNEK. Ettől eltérni természetesen nem tilos, csak felesleges. A bevált elrendezések pontosan azért működnek, mert ugyanazt az elvet követik, mint a többi weboldal, ne tervezz a felhasználónak szokatlan a környezetet.
  2. Griden dolgozz. Ez önmagában nem lenne túl bonyolult mert, ha valaki csinált már grafikai tervet, ott is használt segédvonalakat (remélem). Egy mezei névjegykártyára sem hányjuk rá a szövegek, ha nem egységes margót hagyunk oldalanként.
  3. Reszponzív tervezés: NEM laptopra, és nem a saját telefonodra tervezel. Tudd, hogy mi az a Retina Ready, tudd hol érdemes töréspontot berakni a reszpozivitásban, tudd, hogy a felhasználók milyen eszközöket használnak böngészésre.
  4. Ismerd a webes mértékegységeket: em, rem, vw. A pixelt nagyjából elfelejtheted, inkább százalékban gondolkodj és arányokban.
  5. Forrást adj le, ne JPG-t, PDF-et, meg mockupokat. Nagy átlagban PSD-ben készülnek az anyagok, de akármilyen szerkeszthető formátum megteszi, csak legyen szerkeszthető.
  6. A PSD-ből csak azt kell kivágni, ami nem valósítható meg CSS segítségével. A mai modern designokban nem sok kivágandó kép van. A szegélyeket, árnyékokat, lekerekítéseket mind le lehet már kódolni CSS-el.
  7. Vektorosan add le az ikonokat. PNG már igencsak a múlté, mindent, amit lehet vektorizálj és lehetőség szerint SVG-ben, vagy valamilyen vektor fájlban add át.
  8. A képek legyenek méretarányosak, de nagyok. Printnél is nagyon oda kell figyelned a felbontásra, itt meg főleg, a lekicsinyített raszteres képekkel nem sokra megyünk, általában újra ki kell vágni az összeset, ha nem 2x, vagy 3x akkorában küldöd. Retinás kijelzőkről hallottál már? Nézz utána.
  9. Remélhetőleg max 2 féle betűtípust és max 4 féle betűméretet használj. A betűk webfontok legyenek, ha nem tudod mi az, nézz utána.  A méretek feleljenek a H1, H2, H3, H4 szintű címsoroknak is.
  10. Belső oldalt is tervezz, ne csak kezdőlapot, tudnunk kell milyen glogális stílusokat találtál ki a tartalom formázásra.
  11. Ne ragaszkodj az elképzelésedhez. A vizuális terv nem más mint egy mankó. A “pixelpontos” elnevezés gyakorlatilag a reszponzív megjelenésével érvényét vesztette, tehát azt el kell fogadnod, hogy a lekódolt design max 85-90%-ban fog hasonlítani a leadott tervedre.

Beszélj a Sitebuilderrel

Sitebuilderből / Front-endesből is van 100 féle, ilyen-olyan nyűgökkel, van, aki rugalmasabb, van aki mindent készen szeret kapni, ezért már tervezés közben jó, ha egyeztetsz vele, megbeszéled, hogy kéri az anyagot. Nekem általában JPG is elég a kész tervről (de én ufó vagyok), ha van grid és kapom pluszban a vektor ikonokat és az összes forrás képet. A legtöbb tervet viszonylag egyszerűen és hamar ki lehet javítani néhány igazítással, és az alapok rendbetételével, amit a builder is megtud csinálni, feltéve, ha akarja. Azt kell megérteni print oldalon, hogy a terved nem egy végleges termék, minimálisan biztos, hogy módosítva lesz, build oldalon pedig nélkülözhetetlen a rugalmasság és az együttműködő készség. Jó munkát!


DOLGOZZUNK EGYÜTT?
Jelenleg új együttműködést sajnos nem tudok vállalni, köszönöm megértésed!