ugrás a tartalomhoz

Grid alapú oldaltervek készítése

Hojtsy Gábor · 2007. Már. 19. (H), 21.26
Khoi Vinh a grid alapú oldaltervek egyik komoly hívőjének tekinthető, Subtraction című blogjában szinte érezni lehet az oldalelrendezés kialakításához használt vezérvonalakat. Nos, szerencsénkre nemrég volt alkalma a webhely tervezési megközelítését bemutatni a Future of Web Apps konferencia résztvevőinek, majd pedig Mark Boulton-nal karöltve a South by Southwest Interactive média fesztiválon. Ez utóbbi prezentáció (mely állítólag 22 percig tartott, bár több mint 150 fóliából áll) slide-jait publikálta a blogjában. Az előadás tulajdonképpen egy a Yahoo honlapjához nagyon hasonló weboldal komplett elkészítésén mutatja be a grid alapú elrendezések csínját-bínját. Érdemes rászánni az időt!
 ■
1

Érdekes

Őry Máté · 2007. Már. 19. (H), 22.33
Az egy hete publikált Web Typography Sucks című előadás ugyanerről szólt, csak 90°-kal elfordítva. És mindkettő nagyon jó.
Amúgy ezeket a fóliákat jó közönségnek elő lehet adni pörgősen.

szerk: most látom, hogy egy konferencián adtak elő :)
2

ott a pont!

Hojtsy Gábor · 2007. Már. 19. (H), 22.58
Igen, eredetileg én is be akartam kötni azt a blogmarkot, de közben mégis kimaradt. Kösz, hogy te gondokostál róla, hogy itt legyen. Érdekes dolgok alakulhatnak ki a kettő ötvözetéből :)
3

igen

Őry Máté · 2007. Már. 19. (H), 23.07
az biztos, ugyanis a srác meg egy szót se szólt (ahogy emlékszem) arról, hogy emellé még lehetne rakni valamit :)
mindenesetre az oldalam közelgő redesignjánál tudatosabb leszek, az biztos.
4

:(

Dohány Tamás · 2007. Már. 20. (K), 00.58
Nyilvánvalóan fontos dolog a designban a megfelelő oldalelemek elkülönítése, de ez szerintem már túlkapás. A felhasználónak semmilyen haszna sincs abból, hogy minden be van rácsozva. Szerintem teljesen öncélú ez a rengeteg vonal, mintha az állatkertben lennék egy ketrecben és onnan néznék ki, olyan érzésem van.
11

végignézted?

Őry Máté · 2007. Már. 20. (K), 15.56
Nem tudom, feltűnt-e, hogy azok a vonalak a tervezés után eltűntek ;)
Szerintem kellőképpen megindokolta a lépéseket.
12

háló és csík

ptx · 2007. Már. 20. (K), 16.06
A rács használata nem azt jelenti, hogy vonalazni kell :o) Az a lényeg, hogy nem csak úgy vaktában ide-oda potyognak a grafikai elemek, hanem egy rácshoz/modulhálóhoz igazodva.

A weben is szépen újra felfedezzük a máshol rég bevált tervezési elveket...
5

Miért?

csla · 2007. Már. 20. (K), 10.34
Nem értem, hogy ebben mi a különlegesség. A Substraction-ön is látni, hogy ahol kellett, ott meg van törve a szerkezet (pl. alul a linkeknél). Egyébként extrém módon szélsőségesítve a nézőpontom, azt gondolom, hogy mindig grid alapú oldalakat készítünk, hiszen kötnek minket a pixelek. Ez pedig egyben a legnagyobb szabadságot adó grid... akkor meg?
7

iparos vs. művész

Hojtsy Gábor · 2007. Már. 20. (K), 10.59
Vannak művészek, akik megérzik az arányokat, vannak iparosok, akik a szabályok alapján tudnak alkotni valami jobban használhatót (annál, mintha szabályok nélkül dolgoznának, csak érzésre). Nem véletlen, hogy a szoftver tervezésben jó ideje megjelentek a tervezési minták, a programokban a menük (és ennek konkrét elrendezése), a weboldalakon a jellemzően jobb felső keresődoboz és bal felső logó. A legtöbb ilyen szabály nem azért született, hogy gépekké alakítsa az embert, hanem hogy a felhasználó jobban tudja használni az oldalt. A grid alapú tervezés abból a nyomtatott dokumentumoknál már jól ismert alapszabályból építkezik, hogy vonalak mentén könnyebben olvas az ember (ugye jobbra igazított szöveget te sem olvasol könnyen). Nem helyettesíti viszont a kreativitást, Khoi Vinh ötleteire és háttértudásra (pl. jobb oldali színes dolgok elhagyása) is szükség van a megfelelő eredményhez.

Különben Khoi is ad linkeket olyan ezt az elméletet leíró könyvekre, amiben jellemzően az az alapállás, hogy ha kell, akkor ki kell törni ebből a nagy szabályosságból, és ő is kitör a bemutatott példában, például figyelem felhívás céljából. A szoftver tervezésben a tervezési minták sem örökérvényűek, tudni kell azokból is kitörni, ha arra van szükség.
6

Nice

vbence · 2007. Már. 20. (K), 10.53
Végre valahol a dizájnról is beszélnek... Pedig egy oldal nem a menő php megoldáoktól lesz edladható.
8

amen

dOMiNiS · 2007. Már. 20. (K), 12.08
pontosan, ez igy igaz, de sajnos kb. 1 kezemen meg tudom szamolni azokat a designereket ma magyarorszagon akiket be lehet egy alsokozepes (500k) projectbe kalkulalni, es olyan munkat adnak ki a kezeik kozul hogy leesik a megrendelo alla es az enyem is (ez utobbi a nehezebb). :)
9

szakkönyv?

Edit · 2007. Már. 20. (K), 13.19
A fenti előadások által inspirálva eldöntöttem, hogy egy kicsit képezni fogom magam a témában, de nem tudom, hol kezdjem. Tud valaki magyar tipográfiai szakkönyvet ajánlani? Van olyan, ami a magyar tipográfusok bibliájának számít?

Eddig a következő segédkönyveket használtam:
  • Gyurgyák János: Szerzők és szerkesztők kézikönyve. Osiris Kiadó, 2005. Kizárólag könyvkiadással foglalkozik, tipográfia csak bevezetés szinten. Lényegében csak a hivatkozások/lábjegyzetek kritériumait tudom belőle hasznosítani.
  • Laczkó Krisztina - Mártonfi Attila: Helyesírás. Osiris Kiadó, 2005. Részletes leírás a magyar írásjelekről (nem ugyanaz, mint a fenti angol előadásokban, pl. a magyar nyitó idézőjel lent van és nem fent).
  • Van még ez a félkész Wikipédia szócikk.

Tehát amit szeretnék:
  • Leírás arról, hogy mikor melyik karaktert kell használni
  • Oldaltervezési alapelvek
  • Magyar tipográfiai szokások, hagyományok (gondolom, vannak)

Ami nem annyira fontos: betűtervezés.

Közben találtam ezt:
Virágvölgyi Péter A tipográfia mestersége - számítógéppel. Osiris, 2004.

Régebbi kiadásai előfordulnak könyvtárakban is.
10

szakkönyv! :o)

ptx · 2007. Már. 20. (K), 15.46
A Virágvölgyi könyv nálam a tanítványaimnak, munkatársaknak ajánlott kötelező olvasmányok listáján szerepel :o)
Alapmű, érdemes olvasgatnia bárkinek, aki nyomdaipari, tipográfiai képzettség nélkül kezd számítógéppel dokumentumokat szerkeszteni.

Érdekes lehet még egy klasszikus, Suzanne West Stílusgyakorlatok c. könyve, "a tipográfia és az oldaltervezés hagyományos és modern megközelítése".

A Scolar elkezdte kiadni magyarul az egyik kedvenc dizájnos kiadóm könyveit (Rockport, Rotovision), náluk is érdemes körülnézni: http://design.scolar.hu/
Van ott egy "Tervezz bátran! - Oldaltervezés és tipográfia egyszerűen és azon túl", és előkészületben "Mi az a tipográfia?"
13

Még egy könyv

Slac · 2007. Már. 20. (K), 21.32
Én kisebb kiadványokkal is foglalkoztam, nekem Énekes Ferenc A kiadványszerkesztés című könyvsorozata jött be. Négy kötet, ebből a harmadik foglalkozik az illusztrált kiadványok tördelésével - szerintem ez a weben is eléggé hasznos.

A grid pedig valóban használatos jó ideje a kiadányszerkesztésben és mivel a weblap is egyfajta kiadvány, érdemes az alapelveket itt is alkalmazni. (Persze csak módjával... Olyan ez, mint az Ajax-őrület volt kezdetben - a szerverterhelést a sokszorosára lehetett felhúzni egy jól irányzott Ajax-os pofonnal.)

Számomra teljesen furcsa volt az elején, ugyanakkor eléggé érzékletes, hogy apró módosítások (pédául ha két elem szélét egyvonalba hozom) milyen sokat javíthatnak egy kiadvány minőségén. Most már ez a természetesnek tűnik. Ha szoktatod a szemed a jóhoz :), akkor a sajátodban is észre fogod venni az apró javítanivalókat.
14

internetre is?

Edit · 2007. Már. 20. (K), 21.35
Alapmű, érdemes olvasgatnia bárkinek, aki nyomdaipari, tipográfiai képzettség nélkül kezd számítógéppel dokumentumokat szerkeszteni.

Foglalkozik internetes dolgokkal is? Mert egy hagyományos DTP-s könyv azért nem pont az, amire nekünk szükségünk lenne. Nem mindegy, hogy számítógéppel szerkesztek dokumentumokat, amiket aztán majd kinyomtatnak - vagy számítógéppel számítógépes kódot írok, amit aztán egy számítógép fog megjeleníteni.

Mondjuk az biztos, hogy arányok, layout, stb. sok szempontból hasonlóan működik...
15

elektronikus vs. papíralapú

ptx · 2007. Már. 21. (Sze), 00.17
Az említett könyvek teljesen hagyományos DTP-s könyvek, mivel magyar tipográfiai szakkönyv volt e kérdés, és mivel elektronikus tipográfia szakirodalom talán nem is létezik. "Interface design" könyvet csak angolul láttam, de az sem tipo.

Ahogy mondod, sok dolog hasonlóan működik, mint papíron -- mert a felhasználó, az ember ugyanaz. Nem véletlen, hogy a bal felső sarokba "kell" tenni a fontos dolgokat ;o) Layout, kiemelések, rendezettség, színek hatása, helyesírás, írásjelek stb.

És sok dolog másképpen működik -- mert már a technológia. Pl. a betűtípusok választásánál teljesen más elveket kell figyelembe venni.

Egy biztos: a weblap-tervezés nem annyiból áll, hogy ismerem egy html-szerkesztő szoftver kezelését; sok szakmából kell ellesni ezt-azt ;o) A grid/modulháló is egy teljesen hagyományos fogalom, és van még rengeteg olyan elv, amit a régi dizájnerek, mesteremberek, művészek, könyvtárosok tudtak és használtak, a mi rohanó számítógépes korunk pedig talán újra felfedez.

A "persze csak módjával" teljesen jogos. Mindennek megvan a maga helye! (és spec a könyv-utánzó-lapozgatós-csiribiri-Flashes dolgokat is utálom)
De a technikai háttér fejlődésével csökkennek a korlátok. Ki emlékszik már arra, hogy websafe színpaletta? Es ma mar teljesen termeszetes, hogy hasznaljuk az ekezetes betuket, es nem kell igy gepelgetnem...
16

ket dolog

toro · 2007. Már. 21. (Sze), 11.48
azt hiszem, aki designmal foglalkozik, az a grid alapra keszuljon fe, mert szerintem ez lesz a kovetkezo trend:
ma kaptam meg egy vilagceg uj arculati leirasat, ahol az eddigi szineket igen elenk kontrasztos szinekre csereltek es ezzel egyutt eloirtak a grid alapu szerkesztest - negyzetracsra alapozva!

a masik: ket konyvet ajanlanek a figyelmetekbe, mindketto angol, de igen hasznos ha valaki designolni akar:
Robin Williams: The Non-Designer's Design Book
Robin Williams: Design Workshop

A szerzonek van tipografia konyve is, arrol jokat olvastam, van webdesign is, azt viszont lehuztak. A fenti kettot olvastam, es igen igen erthetonek es hasznosnak talaltam! Csak ajanlani tudom mindenkinek! Az Anazonnal a ketto egyutt 42$ - a Kiskapunal csak az elso 7000 fole van arazva, bar nincs raktaron.
17

magyarul is

ptx · 2007. Már. 21. (Sze), 13.08
A Non-Designer's Design Book Tervezz bátran! címmel jelent meg magyarul pár hónapja.
18

Király

Max Logan · 2007. Már. 21. (Sze), 13.25
Már szemezgetek vele egy ideje, de akkor tényleg jó választás lesz. Alexandrán 25% kedvezménnyel adják ...
19

jo hir

toro · 2007. Már. 21. (Sze), 13.35
eljen, ennek orulok, talan nem lesz annyi ronda szorolap, hirlevel, prospektus ezek utan.
En minden eladott Photosop/Indesign melle kotelezoen adnek egyet.

szerk.: most latom csak a boritot, kar volt az eredetit lecserelni (a cimet is). Az eger megteveszto, nem webes alapelveket taglal az eredeti angol kiadas!
22

Megvettem!

ogelo · 2007. Már. 25. (V), 11.43
Megvettem az említett tervezz bátran! című könyvet. Szerintem egész jó. Tényleg alapokkal kezd és tele van példákkal. Sőt! Ami gondolom itt sokakat érint, honlap kialakításra is hoz példákat!
20

Milyen programmal terveztek?

ogelo · 2007. Már. 21. (Sze), 16.23
Szeretném használni ezt a szerintem nem is annyira új technikát weboldalkészítéshez.
Milyen programot javasoltok a tervezéshez. Amivel létre lehet hozni a unitokat és a columnokat...?
21

a criticalmass.hu új sminkje is így készűl.

ninja · 2007. Már. 22. (Cs), 09.41
screendumpok a postban:
http://criticalmass.hu/blogbejegyzes/20070322/criticalmass-hu-reboot
23

Hol érdemes használni?

Ajnasz · 2007. Már. 25. (V), 23.14
Még nem ástam bele túl mélyen a témába, viszont olvasgatás közben felmerült bennem egy kérdés, miszerint milyen tartalom típusoknál érdemes ezt a módszert használni valamint ahol nem, ott hogyan alakítsuk az oldalt?
Elsőre nekem úgy tűnik, hogy leginkább sok, gyakran változó, bővülő tartalommal rendelkező lapok, portálok esetében célszerű ezt alkalmazni. Szerintetek mennyire alkalmas nem túl bő és változó tartalommal szolgáló, pl bemutató, bemutatkozó oldalak megjelenítésének kialakítására? Milyen elrendezés lehet az optimális ezekre az oldalakra?
24

blogmark (Edit)

ptx · 2007. Ápr. 17. (K), 19.28
ezt csatolom ide, mert különben el fog veszni a blogmarkok tengerében...
Designing with Grid-Based Approach

rengeteg hivatkozás, példák, cikkek stb.
25

Guardian

Edit · 2007. Május. 10. (Cs), 06.41
Mától a Guardian nyitólapja is rács alapú.