2017. március 26.
5 alap webdesign trükk

A következőkben olyan általános webdesignnal kapcsolatos trükkökről lesz szó, melyek eléggé egyszerűnek tűnhetnek, viszont nagyon sokat változtatnak egy oldal megjelenésén. Ha már hosszú ideje foglalkozol a webdesign készítéssel, akkor valószínűleg nem jelentenek majd újdonságot, viszont aki még csak nemrég csöppent bele ebbe a világba, esetleg annyira nem igyekezett kibontakozni benne, akkor az hasznosnak fogja gondolni ezeket.

Olyan alap trükkökről olvashatsz, melyek hiányával gyakran találkoztam már, így úgy gondolom, hogy mindenképpen érdemes beszélni róluk. Akkor, kezdjünk is neki.

1. Képminőség

Első pontnak mindenképpen a minőség szerettem volna felhozni. Fontos, hogy csak olyan képpel dolgozz egy design készítése során, mely HQ minőségű. Rendívül zavaró tud lenni, amikor a fejlécen vagy az oldal bármely részén megjelenő képek pixelesek, vagy látszik rajtuk, hogy fel lettek nagyítva. Nem csak zavaró, de igénytelen is egyben. Ha jó minőségű képekkel dolgozol, akkor az rengeteget dob az oldalad külsején, sokkal profibbá válik tőle.

Ilyenkor felmerülhet a kérdés, hogy honnan szerezzél be jó minőségű képeket? Nagyon egyszerű lesz a dolgod. Ha egy bizonyos képet csak kis felbontásban tudtál letölteni, akkor érdemes lesz használni a Google képkereső funkcióját, mellyel egy adott kép különböző felbontású változataira kereshetsz rá.

Töltsd fel az adott képet a drag&drop funkció segítségével, miután a kis fényképező ikonra kattintva előjött a feltöltő ablak. Ezután semmi más dolgod nincs, csak megvárni, amíg a Google elvégzi számodra a munkát.

Amint megtalálta az adott kép változatait, ki is választhatod az általad keresett méretet, és már csak le kell töltened azt. Viszont az is megeshet, hogy az általad keresett kép nem létezik nagyobb felbontásban. Ilyen esetben érdemes elvetni a képet, és inkább olyat felhasználni az oldaladhoz, ami viszont már jó minőségű, nem pixeles.

Csupán egy apró részletre kell figyelned, és máris fényévekkel jobban fog kinézni az oldalad.

2. Arányos képméretezés

A képekkel kapcsolatban még egy végzetes hibát lehet elkövetni design készítésekor. Ez pedig az aránytalan méretezés. Erről már írtam máskor is az oldalon, viszont túl fontos dolog ez ahhoz, hogy ebben a cikkben ne említsem meg. Mind azt gondolnánk, hogy ne már, erre azért már biztos figyelnek az emberek, mert nem nagy erőfeszítés megnyomni egy gombot méretezéskor, de mégis mindig találkozom olyan oldallal, ahol előfordul az aránytalan méretezés.

Kérlek Téged, ha eddig nem tetted, akkor ezek után figyelj erre is. Méretezéskor Photoshopban kapcsold be a kis kapocs ikont a méretszámok között, vagy amikor a kép sarkánál összenyomod a képet, nyomd le a Shift billentyűt.

Szintén apróság, de csodákra képes. Sokkal igényesebb munkákat adhatsz ki a kezedből, ha átméretezéskor ügyelsz a képarányok megtartására.

3. Középre helyezés

Ha valamilyen menüt hozol létre, vagy modul címet szeretnél középre helyezni, akkor nagyon sokat számítanak a részletek. Nagyon zavaró tud lenni, ha az az adott cím vízszintesen vagy függőlegesen nem a helyén szerepel. Még ha csak 1 vagy 2 pixelt is csúszik el, meglátszik.

Ebben az esetben kódolásnál érdemes függőlegesen egyenlő paddingot (padding-top: 10px; padding-bottom: 10px;) megadni magasság érték helyett, és akkor függőlegesen biztosan középre kerül az a szöveg. Vízszintes esetben használd a text-align: center; kódot CSS-ben, HTML-ben pedig az align=”center” kódot (mondjuk ha táblázatban igazítasz középre). Így biztosan nem lehet eltéveszteni, és középen fog megjelenni az a szöveg.

4. Bekezdés- és sortávolság

A szöveg megfelelő tagolása szintén csodákat képes művelni az oldaladon. Nem kell hozzá sok minden 1-2 kódon kívül, és eléggé megnyerő végeredmény várhat rád. A szöveg sokkal szellősebbé és olvashatóbbá válik ezáltal. Az olvasó nem fog eltévedni a sorok között.

Az első példa képen nincs semmifél szövegformázás, ellentétben a másodikkal. Mindenki eldöntheti maga, melyik néz ki jobban, de nekem egyértelműen a tagolt szöveg tetszik. Egy olyan oldalra térek vissza szívesebben, ahol hasonlóan van a szöveg megformázva.

Ehhez csupán a sorok és a bekezdések távolságát kell megadnunk. Az alábbi kód szerint fog érvényesülni a dolog.

p{
font-size: 13px;
line-height: 26px;
padding-bottom: 5px;
padding-top: 5px;
}

A szöveg méretének legyen duplája a sortávolság (esetleg 1-2 pixellel lehet kevesebb is, viszont ennél több ne legyen), míg a bekezdés távolság se legyen túl nagy, 5-5 pixel megfelelő lesz. Remélem, a változás ereje téged is meglep.

5. Margók

Végül, de nem utolsó sorban a szöveg esetén megadandó margókról és távolságokról lesz szó. Az oldalra kikerülő tartalmat modulokba szoktuk rendezni, ezeknek pedig általában adunk egy keretet, hogy jól elkülöníthetőek legyenek egymástól. Igen ám, de nem elég csak a keret. Eléggé zavaró olvasás közben, ha a szöveg a modul szélét verdesi, esetleg túllóg rajta. Ilyen esetekben kell használnunk a padding értékeket. Az alábbi szemléltető jellegű képeken láthatjuk is, miről beszélek.

Az első kép a helytelen megoldás, és a második a helyes. Az elsőn nincsenek paddingok, csak nagyon minimális mértékben, míg a másodikon minden szöveg jól elkülön egymástól, szépen elrendezett, és persze nem utolsó sorban levegős, könnyed érzést kelt a szemnek.

Szöveges modul esetén 15-30 pixel nagyságú paddingot adjuk meg tetszőlegesen (ne legyen se több, se kevesebb). Ez igazán már csak azon múlik, mit érzünk esztétikusnak. Próbálj ki több méretet, és úgy is meg fogod látni, melyik kényelmesebb.

.modul-content{
padding: 15px 20px;
text-align: justify;
width: 610px;
}

Ezen példa szerint a szöveges rész körül alul-fölül 15 pixeles padding, míg jobb és bal oldalon 20 pixeles padding keletkezik. Használd hasonlóan te is, ha még nem tetted. A tartalmad szellősen fog megjelenni az oldalon, és jó érzés lesz olvasni a szöveget. Ez igazán megéri a plusz befektetést.

Összegzésül

Tudom, tudom, némelyik lépés eléggé szőrszálhasogatónak tűnik, de higgyétek el, megéri ezekkel az apróságokkal pluszban foglalkozni. Hiszen egy webdesign akkor lesz jó, ha minél több részletre figyelünk. Ne legyen elnagyolt, ne tűnjön úgy, hogy csak 5 percet dolgoztál rajta. Az igényesség nagy úr, és te is biztosan szeretnéd egy olyan oldalon fogadni a látogatóidat, ahová szívesen térnek vissza, mert igényes és részletgadag külső fogadja őket bő tartalommal.


Kérdésed van? Írj bátran!









Hozzászólásod csak jóváhagyás után fog megjelenni.

Ellenőrző kód *