blog és magazin design
DESCRIPTION
TRANSCRIPT
• 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