Sziasztok!:)

A mai nap egy �szies hangulat� kin�zetet hoztam nektek, rem�lem nektek is �pp annyira hozza meg az �szi hangulatot, mint nekem! 

Autumn Vibes layout let�lt�se

Mit sz�lsz hozz�?

Sziasztok!:)

A napokban az �ltalam k�sz�tett kin�zetekn�l tal�lhat� kieg�sz�t� elemeket fogom felt�lteni a Tutorials r�szlegbe. A k�n�latban szerepelni fog projectdoboz, elite csere effekt �s m�s oldalmodul elemek is.:)

- Projectdoboz 1 megtekint�se

- Projectdoboz 2 megtekint�se

Mit sz�lsz hozz�?

Sziasztok!:)

B�r m�r kor�bban v�geztem Nathalie kin�zet�vel, viszont m�g csak most volt alkalmam le�lni �s bejegyz�st �rni ezzel kapcsolatban. Ez az els� rendel�sre k�sz�tett rajong�i oldalas kin�zet, viszont �gy �rzem el�g j�l siker�lt. A fejl�c eredeti megalkot�ja Linda, ez�ton is szeretn�m megk�sz�nni neki!:) 

Mit sz�lsz hozz�?

Tal�n az egyik legmeghat�roz�bb r�sze egy honlapnak a rajta haszn�lt bet�t�pus(ok), valamint ezek �sszhangja a kin�zettel, a tartalommal, a sz�nekkel �s az eg�sz lap megjelen�s�vel. Manaps�g rengeteg olyan fel�let tal�lhat� az interneten, ami lehet�s�get ad arra, hogy egy�ni bet�t�pust alkalmazzunk a k�dol�s sor�n, erre a legismertebb p�lda tal�n a Google Fonts.

M�gis, sokan belesnek abba a hib�ba, hogy �ssze nem ill� bet�t�pusokat alkalmaznak, vagy szinte minden egyes modul m�s-m�s form�ban �r�dik. Ez l�nyegesen ront az oldal min�s�g�n, teljesen mindegy mennyi id�t t�lt�tt�l a k�dol�ssal. Nem v�letlen, hogy az ismertebb oldalakon, h�rport�lokon mind�ssze 2-3 bet�t�pust alkalmaznak.

A mai nap 10 tippet hozok arra, hogyan haszn�ljunk a bet�t�pusokat az oldalunkon!

1. Kev�s bet�t�pust haszn�lj

Mint ahogy eml�tettem, az egyik leggyakoribb probl�ma az, hogy minden egyes szekci� (pl: oldalmodul c�m, k�z�pmodul c�m, linkek, f�lk�v�r, al�h�zott, d�lt, stb) m�s-m�s bet�t�pust kap. A t�l sok t�pus �s m�ret elronthatja az �sszhangot. C�lszer� 2-3 t�pus haszn�lata egy honlap elk�sz�t�se sor�n, ugyanis ekkora mennyis�gn�l kicsi az es�lye, hogy �tl�thatatlann� v�lik a sz�veg.

Ha m�gis t�bb t�pust szeretn�l haszn�lni gy�z�dj meg arr�l, hogy kieg�sz�tik egym�st, m�gis figyelemfelkelt�k (ha c�msornak haszn�lod).

 2. Haszn�lj szabv�ny bet�t�pusokat

A Google fonts seg�ts�g�vel k�nnyed�n tudjuk sz�k�teni a k�rt a bet�t�pusok k�z�tt, v�lasszuk ki a Sans Serif csal�dot. Ebben a csoportban olyan t�pusokat tal�lsz, amelyek nem tartalmaznak semmilyen d�sz�t� elemet, hosszabb sz�vegben is lehet�v� teszik a gyors �s k�nnyed olvas�st.

Term�szetesen �n is t�mogatom, hogy a c�msorokat kiemelj�k valamilyen szinten, �m ez nem mehet az �sszhang rov�s�ra. A modulc�mek r�sz�re is �rdemes olyan t�pust v�lasztani, amely valamilyen szinten kapcsol�dik az oldal tematik�j�hoz (egy rajong�i oldalra ne v�lassz k�zzel �rt sz�vegre hajaz� bet�t�pust, hiszen ott a hangs�ly a min�s�gen van, te sem olvasn�l sz�vesen egy olyan ismeretterjeszt� magazint, ahol a szabv�ny bet� mellett egy handwritten st�lus� sor is beker�l. Nem odaval�.).

3. Korl�toss�g

Szint�n egyik alapk�ve az ig�nyes oldalnak az, hogy a sorok nem l�gnak ki a modulb�l, �s nem is �rnek a modul sz�l�gi. Ez olyan, mintha egy k�nyv sz�vege eg�szen a lap sz�l�ig �rne, zavar� �s kicsi ig�nytelens�g �rz�s�t kelti az olvas�ban. A CSS form�z�s seg�ts�g�vel k�nnyed�n be tudod �ll�tani, hogy mekkora legyen a t�vols�g a modulok sz�le �s a sz�veg k�z�tt (padding: �rt�k px;).

4. Olyan karakterek v�lassz, amely j�l alkalmazkodik a form�z�shoz

A l�togat�id k�l�nb�z� felbont�s� monitorokr�l, esetleg tabletr�l vagy telefonr�l fogj�k l�togatni az oldalad, �gy neked musz�j tekintettel lenni r�juk. Telefonr�l teljesen m�s felbont�sban jelenik meg a sz�veg (gyakran az �ltalad kiv�lasztott t�pus nem is kompatibilis telefonnal, �gy lecser�li egy szabv�nyra), ez�rt olyan t�pust v�lassz, amely ha kicsiny�tik sem v�lik olvashatatlann�.

Ide tartozik m�g, ha bet�form�z�st v�gzel ezeken a sz�vegeken, szint�n legyen olvashat� �s ne zavar� a megjelen�s. A Google fonts erre remek lehet�s�get ad, ha r�kattintasz a bet�t�pus nev�re egy olyan lapra navig�l, ahol megn�zheted k�l�nb�z� form�z�sok mellett hogy n�z ki a bet�.

5. Haszn�lt k�nnyen �rtelmezhet� bet�t�pust

Sok olyan bet�t�pus van, amely megk�nny�ti a sz�veg olvashat�s�g�t. Erre a legjobb p�lda a nagy I bet� �s a kis l bet� k�z�tti hasonl�s�g. B�r nem hiszem, hogy ez egy j�l fel�p�tett k�dol�s� kin�zetn�l probl�ma lehet, ugyanis kicsi r� az es�ly, hogy az ember egy bet� helyett m�sikat olvas (�gy nem is �rtelmes a sz�) (�s tudom, hogy vannak olyanok, akik olvas�si neh�zs�gekkel k�zdenek, most nem r�juk gondolok). De, az el�bb eml�tett p�ld�k mellett hasonl�s�g jelenhet meg a r �s a v, valamint az n, �s az m bet�n�l is, ami t�nyleg zavar� lehet.

Ide tartozik m�g, hogy b�r a Google Fonts-ot haszn�ljuk nagy szeretettel, nem minden bet�t�pus k�pes arra, hogy a magyar ABC-ben tal�lhat� �sszes bet�t megjelen�tse. A leggyakoribb neh�zs�gek az �,�,�,�,�,� bet�kkel ad�dik, de erre is van egy szuper tipp. Ha a bet�t�pus kiv�laszt�s sor�n r�m�sz a „Customize” r�szre, ott (ha szerencs�d van) ki tudod v�lasztani a „Latin Extended” kis n�gyzetet, ez a b�v�t�s pedig tartalmazza a magyar ABC �sszes bet�j�t.

6. A nagybet�s sz�vegek

Szerintem a nagybet�s sz�vegeket c�lszer� c�mek, alc�mek, men�pontok �s n�h�ny fontosabb kiemel�sn�l haszn�lni, de �sszef�gg� sz�veget nem �rdemes ilyen st�lusban meg�rni. Egy kutat�s m�r bebizony�totta, hogy a nagybet�s sz�veg olvas�sa sokkal t�bb energi�t vesz ig�nybe, mint a kisbet�s sz�veg olvas�sa, ez pedig okot adhat arra, hogy a l�togat� ne j�jj�n vissza az oldalunkra.

7. A sorok k�zti t�vols�g

A k�dol�sban a k�t sor k�z�tti eltol�d�st line-height-nek nevezz�k. Ez az �rt�k azt mutatja meg, hogy h�ny pixeles r�s legyen k�t sor k�z�tt. Ha ez az �rt�k kicsi, a sz�veg �sszeolvad, k�nnyen olyann� v�lhat, mint egy soha v�get nem �r� mondat, �s els� r�n�z�sre m�g visszatasz�t� is lehet egy ilyen megjelen�s� sz�veg. Viszont, az sem j�, ha a sorok k�zti eltol�s magas, �gy els� r�n�z�sre egy p�r mondatos bekezd�s egy f�l oldalas sz�vegnek is t�nhet, amit lehet nem mindenki fog elolvasni. Azt mondj�k, hogy a j� sort�vols�g 1-2 px-el nagyobb, mint maga a bet�m�ret. Teh�t, ha a font-site: 10px;, akkor a line-height: 12 px;.

8. Sz�nek, kontraszt, olvashat�s�g

Szint�n egy alappill�r, hogy hi�ba v�lasztasz megfelel� bet�t�pust, hi�ba �ll�tasz be minden �rt�ket, ha egy olyan h�tt�rsz�nt vagy sz�nt adsz a sz�vegnek, ami olvashatatlann� teszi azt. �n ezt els�k�nt egy k�z�piskol�s prezent�ci�s feladat sor�n hallottam, �s �szint�n, nem gondoltam, hogy ezt el kell mondani. De m�gis, voltak olyanok, akik a feh�r h�tt�re vil�gos sz�n� bet�ket haszn�ltak, �s a fekete h�tt�rre s�t�tk�kkel �rtak. Nem sz�p, nem n�z ki j�l, olvashatatlan. Lehet j�tszani a modulok h�tter�vel, de egy vil�gos h�tt�rhez �rtelemszer�en s�t�t legyen a bet�sz�n, �s ford�tva is. Itt teljesen �rv�nyes az az �ll�t�s, hogy: ha neked zavar�, a l�togat�nak is az lesz.

9. Ker�ld az oda nem ill� sz�neket

Ha m�r kiv�lasztottad a design alapsz�neit (ez �ltal�ban 3 max 4), m�g v�letlen�l se akarj m�s sz�neket belecsemp�szni a bet�form�z�s sor�n. Lehet j�tszani s�t�tebb-vil�gosabb �rnyalatokkal, de egy m�r k�sz kin�zetet nem kell m�g jobban „feldobni” egy sokadik sz�nnel, ami egyed�l csak pl: a f�lk�v�r bet�n�l jelenik meg. A neten szerencs�re rengeteg sz�nkombin�l� oldal tal�lhat�, ahol kedvedre lehet vari�lni a sz�neket, de m�gis �sszhangban maradnak.

10. V�ltozatos bet�m�ret, figyelemfelkelt�s

Nem egy olyan oldalt l�ttam m�r, ahol azzal pr�b�lj�k felkelteni a l�togat� figyelm�t, hogy egy-egy sort nagyobb bet�m�rettel �rnak, esetleg valami idi�ta keretet is tesznek egy sornak. B�r ezt legink�bb a (szerintem) nem j�l diz�jnolt, valamint nagyon eladni akar� oldalak alkalmazz�k, de szem�lyes blogokon �s rajong�i oldalakon is l�ttam m�r hasonl�t. Ha szeretn�d, hogy iratkozzanak fel a h�rleveledre, esetleg t�lts�k le valamelyik �ltalad tervezett kis kit�lthet� valamit, vagy hogy regisztr�ljanak az oldaladra, akkor a tartalommal akard megfogni �ket, ne pedig a k�p�kbe tolni.

Rem�lem valamennyire hasznosnak tal�lt�tok ezt a kis �sszefoglal�t, �s van benne olyan tipp, amin m�g nem gondolkoztatok el.:) Annakidej�n t�bb webdesign t�m�j� k�lf�ldi oldalt olvastam, �gy a java r�sz�t �n is csak onn�t ismertem meg. Mindenesetre, n�h�ny apr�s�ggal m�g szebb� �s eszt�tikusabb� lehet tenni egy weblapot. �rdemes pr�b�lkozni.:)

Mit sz�lsz hozz�?

Sziasztok!:)

Ma egy �jabb ingyenesen elvihet� kin�zetet hoztam, melynek f�szerepl�je a gy�ny�r� �s tehets�ges Madelaine Petsch (aki nem mellesleg ma �nnepli sz�let�snapj�t ). 

Madelaine Petsch layout let�lt�se

Mit sz�lsz hozz�?