Blog és magazin design
-
Upload
gyoergy-bokros -
Category
Documents
-
view
564 -
download
0
description
Transcript of Blog és magazin design
![Page 2: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/2.jpg)
• 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
![Page 3: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/3.jpg)
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
![Page 4: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/4.jpg)
A blogolás hajnala
Csak 4 slide
![Page 5: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/5.jpg)
Jorn Barger1997. december 17.
weblog
Peter Merholz1999. május
blog
![Page 6: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/6.jpg)
1999. augusztus: megalakul a Blogger
![Page 7: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/7.jpg)
2001. szeptember 11: megmutatkozik a civil blogszféra ereje
![Page 8: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/8.jpg)
2003.az Oxford English Dictionary beemeli a weblog kifejezést a szócikkei közé.
![Page 9: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/9.jpg)
Innentől kezdve a blog is komolyan vett műfaj lett és nem csak múló hóbort.
![Page 10: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/10.jpg)
Csak úgy kezdjünk tervezni, hogy ismerjük a blog struktúráját és tartalmi egységeit.
Egy kis anatómia
![Page 11: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/11.jpg)
<strong>Jó, ha értjük a HTML/CSS-t.</strong>
![Page 12: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/12.jpg)
FejlécTartalmi hasábOldalhasábLábléc
...ahogy a site-ok 90%-a
![Page 13: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/13.jpg)
A oldalstruktúra mellett ugyanolyan fontos, hogy ismerjük az egyes oldaltípusokat is!
![Page 14: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/14.jpg)
Címlap
Posztoldal Listaoldal Statikus oldal
![Page 15: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/15.jpg)
Címlap
![Page 16: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/16.jpg)
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
![Page 17: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/17.jpg)
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)
![Page 18: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/18.jpg)
Listaoldal:A blogmotor generálja, lehet egy kereső találati oldala, de egy címke, kategória oldala is.
![Page 19: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/19.jpg)
Az olvasó figyelmének megoszlása
Forrás: http://www.useit.com/
![Page 20: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/20.jpg)
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
![Page 21: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/21.jpg)
Forrás: h
ttp://w
ww
.useit.co
m/
![Page 22: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/22.jpg)
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
![Page 23: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/23.jpg)
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/
![Page 24: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/24.jpg)
Fix, Fluid, Responsive
![Page 25: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/25.jpg)
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
![Page 26: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/26.jpg)
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
![Page 27: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/27.jpg)
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.
![Page 28: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/28.jpg)
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.
![Page 29: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/29.jpg)
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
![Page 30: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/30.jpg)
![Page 31: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/31.jpg)
![Page 32: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/32.jpg)
![Page 33: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/33.jpg)
![Page 34: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/34.jpg)
![Page 35: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/35.jpg)
![Page 36: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/36.jpg)
A gyakorlat
![Page 37: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/37.jpg)
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!)
![Page 38: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/38.jpg)
Teendőink mielőtt A rajzprogramhoz nyúlunk.
![Page 39: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/39.jpg)
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?
![Page 40: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/40.jpg)
Hasábméretek
![Page 41: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/41.jpg)
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
![Page 42: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/42.jpg)
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
![Page 43: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/43.jpg)
![Page 44: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/44.jpg)
![Page 45: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/45.jpg)
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
![Page 46: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/46.jpg)
![Page 47: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/47.jpg)
640px 310px
![Page 48: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/48.jpg)
• 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:
![Page 49: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/49.jpg)
Kísérletezz szabadon!(az első változat legtöbbször úgysem működik)
![Page 50: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/50.jpg)
![Page 51: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/51.jpg)
![Page 52: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/52.jpg)
![Page 53: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/53.jpg)
![Page 54: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/54.jpg)
![Page 55: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/55.jpg)
![Page 56: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/56.jpg)
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.
![Page 57: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/57.jpg)
A bejegyzésA bejegyzés címe
Dátum, szerző, címkék
Tartalom
Kapcsolódó anyagok
Social-funkciók
Hozzászólások
![Page 58: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/58.jpg)
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...)
![Page 59: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/59.jpg)
• h1, h2, h3• p
• ul, ol• blockquote• img• table• a
Tervezzünk tesztbejegyzéstés legalább ezek legyenek benne:
![Page 60: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/60.jpg)
• 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
![Page 61: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/61.jpg)
![Page 62: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/62.jpg)
OldalhasábJellemzően a jobb oldalon találjuk, a blog egészével kapcsolatos infók szerepelnek rajta. Minden oldalon látható.
![Page 63: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/63.jpg)
• 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
![Page 64: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/64.jpg)
• 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?
![Page 65: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/65.jpg)
![Page 66: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/66.jpg)
![Page 67: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/67.jpg)
A rossz címkézés iskolapéldája
![Page 68: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/68.jpg)
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.
![Page 69: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/69.jpg)
![Page 70: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/70.jpg)
![Page 71: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/71.jpg)
![Page 72: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/72.jpg)
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ő)
![Page 73: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/73.jpg)
![Page 74: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/74.jpg)
![Page 75: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/75.jpg)
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ó
![Page 76: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/76.jpg)
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
![Page 77: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/77.jpg)
![Page 78: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/78.jpg)
Magazin
![Page 79: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/79.jpg)
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
![Page 80: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/80.jpg)
![Page 81: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/81.jpg)
Minimál fejléc kategóriákkal, kiemelve, hogy hol vagyunk éppen
![Page 82: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/82.jpg)
Vezető + 4 kiemelt cikk
![Page 83: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/83.jpg)
Blogszerűen listázotttartalom
![Page 84: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/84.jpg)
További posztok
Legolvasottabb, ajánlott, kommentek
![Page 85: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/85.jpg)
Kategória doboz
Tag szerinti szűrés
![Page 86: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/86.jpg)
“Lifestyle” cikktípus kategória dobozzal
![Page 87: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/87.jpg)
Kapcsolódó anyagok
Megosztás
Komment
Lapozó
![Page 88: Blog és magazin design](https://reader037.fdocuments.net/reader037/viewer/2022110302/54b4803a4a7959ce1e8b4576/html5/thumbnails/88.jpg)
Következő előadás: a hírportál
A tartalomszolgáltatás nehézsúlyú versenyzője