blog és magazin design

BLOG&MAGAZIN

Bokros Györgygyorgy.bokros@gmail.com@hipra

• Laza műfaj, sok mindent elbír, posztolni bármiről lehet

• Nincsenek technikai korlátai, hogy valaki elkezdje

• Aggregáló oldalak (RSS), beszivárgott az internetes újságírásba

Sikerének okai

Mit nevezünk blognak?A blog egy olyan, periodikusan újabb bejegyzésekkel bővülő weboldal, amely ezek sorozatából áll, függetlenül attól, hogy mi az oldal témája, formája és hogy nyilvánosan elérhető-e. - Wikipedia

A blogolás hajnala

Csak 4 slide

Jorn Barger1997. december 17.

weblog

Peter Merholz1999. május

blog

1999. augusztus: megalakul a Blogger

2001. szeptember 11: megmutatkozik a civil blogszféra ereje

2003.az Oxford English Dictionary beemeli a weblog kifejezést a szócikkei közé.

Innentől kezdve a blog is komolyan vett műfaj lett és nem csak múló hóbort.

Csak úgy kezdjünk tervezni, hogy ismerjük a blog struktúráját és tartalmi egységeit.

Egy kis anatómia

<strong>Jó, ha értjük a HTML/CSS-t.</strong>

FejlécTartalmi hasábOldalhasábLábléc

...ahogy a site-ok 90%-a

A oldalstruktúra mellett ugyanolyan fontos, hogy ismerjük az egyes oldaltípusokat is!

Címlap

Posztoldal Listaoldal Statikus oldal

Címlap

Címlap:

• A bejegyzés címe• Időpontja• Szerzője• Bevezető (lead)• Hozzászólások száma• Címkék• RSS feed• Oldalsáv

Posztoldal:A bejegyzés önálló oldala, ahol a tartalom teljes terjedelmében olvasható.

• Állandó URL-e (permalinkje van)

• Ajánló a további tartalmakra• Social funkciók (like, share)

• Kommentek (olvasás, írás)

Listaoldal:A blogmotor generálja, lehet egy kereső találati oldala, de egy címke, kategória oldala is.

Az olvasó figyelmének megoszlása

Forrás: http://www.useit.com/

Web users spend 80% of their time looking at information above the page fold.

Although users do scroll, they allocate only 20% of their attention below the fold. -

Jakob Nielsen

Forrás: h

ttp://w

ww

.useit.co

m/

A fentiekből következik:• 600px áll a rendelkezésünkre, hogy megragadjuk az olvasók figyelmét

• Nem lehet túl vastag a fejléc, a hajtás felett tartalmat is kell mutatnunk

• Itt helyezzük el a fő navigációs sávot is

• Jól tagolt címlapra van szükség

A Smashing Magazine kutatása szerint:

• A layout jellemzően középre igazított (94%)

• Fix szélességű blogok (92%)

• A szélesség 951 és 1000px között van (56%)

• CSS-layout a table ellenében (90%)

• Világos háttéren sötét szöveg (98%)

• 80 és 100 karakter közötti sorhossz

• Legtöbbet használt betűtípusok folyószövegre: Verdana,

Lucida Grande, Georgia (90%)

• Folyószöveg betűmérete 12 és 14px közötti (78%)

• Címek betűtípusa jellemzően Arial vagy Georgia (52%)

• Címek betűmérete jellemzően 17 és 25px közötti

Forrás: http://http://www.smashingmagazine.com/2008/07/24/a-small-study-of-big-blogs/

Fix, Fluid, Responsive

Fixbody { font-size: 14px; }div#wrapper { width: 960px; }

• Fix, pixelben megadott méretekkel dolgozunk• Független a felbontástól

• Nagyobb felbontásokon túl nagy whitespace, kisebben megjelenhet vízszintes scrollbar• A designer kezében van a kontroll

Fluiddiv#content_wrapper { width: 80%; }div#content_sidebar { width: 20% }

• Jellemzően %-ban megadott értékekkel dolgozunk• Igazodik a felhasználó böngészőjéhez

• Ha jól tervezik, kisebb felbontásokon is jól mutat, nem jelenik meg vízszintes scrollbar• A designer elveszti a kontroll egy részét a site felett

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Responsive.feature img { max-width: 100%; }.nav-primary { padding: 1.2 em; }

• A pixeleket hírből sem ismeri• Igazodik a felbontáshoz, az állított és fektetett nézethez

• Igazodik (PC, tablet, okostelefon) az eszközhöz a megjelenítés• Megmarad a kontroll a designer kezében

A gyakorlat

Mire tervezünk?

1; Választunk egy szimpatikus blogszolgáltatót (Blog.hu, Blogger, Freeblog...)

2; CMS-t használunk (WordPress, Joomla, Drupal)

3; Isten tudja, majd lesz valahogy! (NE!)

Teendőink mielőtt A rajzprogramhoz nyúlunk.

Kutatómunka• Mik a téma legfontosabb blogjai?• Olvassunk néhány bejegyzést (ha vannak)

• Műfaji sajátosságok, kerülendő klisék• Képes és szöveges tartalmak súlya, aránya• Alapanyagok (logó, font, fotó, vektorgrafika, tagline...)• Menüpontok?• Hirdetések?

Hasábméretek

2007 2012

Tartalmi hasáb 450px 560-640px

Oldalhasáb 200-250px 200-310px

1024x768-ba még mindig be kell férjünk*

*Kivéve ha a responsive design irányelvei szerint tervezünk

3. hasáb a blog designban• Tartalmi értelemben szinte teljesen kikopott

• A bejegyzésektől veszi el a helyet

• Gyengíti a másik hasábot, zavart okoz az olvasóban

• Keskenyebb oldalhasábokat tesz lehetővé

• Erősíti, hogy haszontalan widgetekkel töltsük fel

• Megmaradt hirdetési felületnek

Tervezzük meg először a bejegyzés oldalát

• Minden tartalmi egység megtalálható rajta• Könnyű belőle más oldaltípust deriválni

640px 310px

• Jól megválasztott font és tagline már félsiker• A fejléc ne legyen magasabb 300px-nél

• Gondolkodj sitebuilder aggyal

A fejléc és az oldal kereteNincsenek kőbe vésett szabályok, de:

Kísérletezz szabadon!(az első változat legtöbbször úgysem működik)

A design célja, hogy vizuálisan kommunikálja a mondanivalót, a témát, a kívánt érzelmi reakciókat

váltsa ki, ráhangoljuk az olvasót a tartalomra.

A bejegyzésA bejegyzés címe

Dátum, szerző, címkék

Tartalom

Kapcsolódó anyagok

Social-funkciók

Hozzászólások

Tartsuk észben• Fontválasztás, websafe fontok. Alternatívák?• Talpas betű címben, talp nélküli kenyérszövegben?

• Kb. 8-10 szavas sorokat kényelmes olvasni• Kenyérszöveg betűmérete 13px legyen legalább• Jól elkülöníthető blokkok kialakítására törekedjünk• Kontraszt (szöveg, linkszín...)

• h1, h2, h3• p

• ul, ol• blockquote• img• table• a

Tervezzünk tesztbejegyzéstés legalább ezek legyenek benne:

• Látogató hsz-a (avatar, név, dátum, a szöveg)• Szerző kommentje

• Reply (ikon, felirat)• Komment form• Ha regisztrálni kell a hsz-hoz, annak ki és belépett állapota• Facebook kommentelés esetén nagyon nincs

dolgunk...• Lapozó

Hozzászólások

OldalhasábJellemzően a jobb oldalon találjuk, a blog egészével kapcsolatos infók szerepelnek rajta. Minden oldalon látható.

• Kereső• Blog rövid leírása

• Legfrissebb kommentek• Legolvasottabb bejegyzések• Ajánlott oldalak• Archívum• Social-dobozok

• Címkefelhő• Feed• Hirdetés

Általában használt widgetek

• Kereső• Blog rövid leírása, kontakt

• Social dobozok• Kategóriák, _fontos_ tagek• Legolvasottabb bejegyzések• Legutóbbi hozzászólások

Hogy épüljenek fel?

A rossz címkézés iskolapéldája

Lábléc

• Az olvasó figyelme csökken, ahogy az oldal aljára ér• A háttérinformációkat (kontakt, rólunk...) itt keresi

• Nem az elsődleges navigációs felület• A lábléc hozzásegíthet minket az olvasó figyelmének fenntartásához (portfolió, legolvasottabb posztok, legfrissebb kommentek, twitter, illusztráció... )

Lépjünk túl a nézeten, hogy a lábléc csak azért kell, hogy valami legyen az oldal alján.

Hogy lesz blog a psd-ből?1. Regisztrálunk egy blogszolgáltatóhoz, vagy telepítünk CMS-t (egyik sem több 5 percnél).

2. Keresünk egy szimpatikus sablont, ami illeszkedik a tervezett designhoz.

3. Írunk teszt posztot, egy barátunkat megkérjük, hogy kommenteljen párat.

4.Beállítunk néhány widgetet, teszünk bele tartalmat.

5. A sablonszerkesztővel és egy inspectorral (pl. Firebug) felszerelkezve elkezdjük testreszabni a sablont.

(a sorrend többnyire felcserélhető)

Előnyei:• Gyorsan telepíthető

• Minden a te kezedben van

• Végletekig testreszabható

• Remek adminfelület

• Ingyenes sablonok tömege

• Rengeteg widget

• Közösség, dokumentáció

Blogszolgáltatók:

• Nem kell törődnöd szerver beállításokkal, tárhellyel

• Beépített statisztikai modul

• Beépített social funkciók

• Blog.hu esetében legendásan jó support és Index címlapra kerülési lehetőség

Magazin

Olyan szerkesztett kiadvány, ahol nem a gyors hírfeldolgozás, up-to-date információk szolgáltatása az elsődleges. Hosszabb, mélyebben körüljárt, a napi aktualitásokhoz nem feltétlenül kapcsolódó tartalmakat olvashatunk rajta.

Definíció

Blog Magazin Hírportál

Minimál fejléc kategóriákkal, kiemelve, hogy hol vagyunk éppen

Vezető + 4 kiemelt cikk

Blogszerűen listázotttartalom

További posztok

Legolvasottabb, ajánlott, kommentek

Kategória doboz

Tag szerinti szűrés

“Lifestyle” cikktípus kategória dobozzal

Kapcsolódó anyagok

Megosztás

Komment

Lapozó

Következő előadás: a hírportál

A tartalomszolgáltatás nehézsúlyú versenyzője