Blog és magazin design

886 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
886
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Blog és magazin design

  1. 1. BLOG&MAGAZINBokros Györgygyorgy.bokros@gmail.com@hipra
  2. 2. Sikerének okai• 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
  3. 3. Mit nevezünk blognak?A blog egy olyan, periodikusan újabbbejegyzésekkel bővülő weboldal, amely ezeksorozatából áll, függetlenül attól, hogy mi azoldal témája, formája és hogy nyilvánosanelérhető-e. - Wikipedia
  4. 4. A blogolás hajnala Csak 4 slide
  5. 5. Jorn Barger Peter Merholz1997. december 17. 1999. május weblog blog
  6. 6. 1999. augusztus:megalakul a Blogger
  7. 7. 2001. szeptember 11:megmutatkozika civil blogszféra ereje
  8. 8. 2003.az Oxford English Dictionary beemeli a weblog kifejezést a szócikkei közé.
  9. 9. Innentől kezdve a blog is komolyan vett műfaj lett és nem csak múló hóbort.
  10. 10. Egy kis Csak úgy kezdjünk tervezni, hogy ismerjükanatómia a blog struktúráját és tartalmi egységeit.
  11. 11. <strong>Jó, ha értjük a HTML/CSS-t.</strong>
  12. 12. FejlécTartalmi hasábOldalhasábLábléc...ahogy a site-ok 90%-a
  13. 13. A oldalstruktúra mellett ugyanolyan fontos, hogy ismerjük az egyes oldaltípusokat is!
  14. 14. CímlapPosztoldal Listaoldal Statikus oldal
  15. 15. Címlap
  16. 16. 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
  17. 17. Posztoldal:A bejegyzés önálló oldala,ahol a tartalom teljesterjedelmében olvasható.• Állandó URL-e (permalinkje van)• Ajánló a további tartalmakra• Social funkciók (like, share)• Kommentek (olvasás, írás)
  18. 18. Listaoldal:A blogmotor generálja,lehet egy kereső találatioldala, de egy címke,kategória oldala is.
  19. 19. Az olvasó figyelmének megoszlása Forrás: http://www.useit.com/
  20. 20. 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
  21. 21. Forrás: http://www.useit.com/
  22. 22. A fentiekből következik:• 600px áll a rendelkezésünkre, hogy megragadjuk azolvasók figyelmét• Nem lehet túl vastag a fejléc, a hajtás felett tartalmatis kell mutatnunk• Itt helyezzük el a fő navigációs sávot is• Jól tagolt címlapra van szükség
  23. 23. 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/
  24. 24. Fix, Fluid, Responsive
  25. 25. 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, kisebbenmegjelenhet vízszintes scrollbar• A designer kezében van a kontroll
  26. 26. 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, nemjelenik meg vízszintes scrollbar• A designer elveszti a kontroll egy részét a site felett
  27. 27. Lorem ipsum dolor sit amet,consectetur adipisicing elit, sed doeiusmod tempor incididunt ut laboreet dolore magna aliqua. Ut enim adminim veniam, quis nostrudexercitation ullamco laboris nisi utaliquip ex ea commodo consequat.Lorem ipsum dolor sit amet,consectetur adipisicing elit, sed doeiusmod tempor incididunt ut laboreet dolore magna aliqua. Ut enim adminim veniam, quis nostrudexercitation ullamco laboris nisi utaliquip ex ea commodo consequat.Lorem ipsum dolor sit amet,consectetur adipisicing elit, sed doeiusmod tempor incididunt ut laboreet dolore magna aliqua. Ut enim adminim veniam, quis nostrudexercitation ullamco laboris nisi utaliquip ex ea commodo consequat.
  28. 28. Lorem ipsum dolor sit amet, consectetur adipisicing elit, seddo eiusmod tempor incididunt ut labore et dolore magnaaliqua. Ut enim ad minim veniam, quis nostrud exercitationullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipisicing elit, seddo eiusmod tempor incididunt ut labore et dolore magnaaliqua. Ut enim ad minim veniam, quis nostrud exercitationullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipisicing elit, seddo eiusmod tempor incididunt ut labore et dolore magnaaliqua. Ut enim ad minim veniam, quis nostrud exercitationullamco laboris nisi ut aliquip ex ea commodo consequat.
  29. 29. 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
  30. 30. A gyakorlat
  31. 31. Mire tervezünk?1; Választunk egy szimpatikusblogszolgáltatót(Blog.hu, Blogger, Freeblog...)2; CMS-t használunk(WordPress, Joomla, Drupal)3; Isten tudja, majd leszvalahogy! (NE!)
  32. 32. Teendőink mielőttA rajzprogramhoz nyúlunk.
  33. 33. 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?
  34. 34. Hasábméretek
  35. 35. 1024x768-ba még mindig be kell férjünk* 2007 2012Tartalmi hasáb 450px 560-640px Oldalhasáb 200-250px 200-310px *Kivéve ha a responsive design irányelvei szerint tervezünk
  36. 36. 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
  37. 37. Tervezzük meg először abejegyzés oldalát• Minden tartalmi egység megtalálható rajta• Könnyű belőle más oldaltípust deriválni
  38. 38. 640px 310px
  39. 39. A fejléc és az oldal kereteNincsenek kőbe vésett szabályok, de: • Jól megválasztott font és tagline már félsiker • A fejléc ne legyen magasabb 300px-nél • Gondolkodj sitebuilder aggyal
  40. 40. Kísérletezz szabadon! (az első változat legtöbbször úgysem működik)
  41. 41. A design célja, hogy vizuálisan kommunikáljaa mondanivalót, a témát, a kívánt érzelmi reakciókat váltsa ki, ráhangoljuk az olvasót a tartalomra.
  42. 42. A bejegyzésA bejegyzés címeDátum, szerző, címkékTartalom Social-funkciókKapcsolódó anyagokHozzászólások
  43. 43. 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...)
  44. 44. Tervezzünk tesztbejegyzéstés legalább ezek legyenek benne: • h1, h2, h3 •p • ul, ol • blockquote • img • table •a
  45. 45. Hozzászólások• 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 ésbelépett állapota• Facebook kommentelés esetén nagyon nincsdolgunk...• Lapozó
  46. 46. OldalhasábJellemzően a jobb oldalon találjuk, a blogegészével kapcsolatos infók szerepelnek rajta.Minden oldalon látható.
  47. 47. Általában használt widgetek• Kereső• Blog rövid leírása• Legfrissebb kommentek• Legolvasottabb bejegyzések• Ajánlott oldalak• Archívum• Social-dobozok• Címkefelhő• Feed• Hirdetés
  48. 48. Hogy épüljenek fel?• Kereső• Blog rövid leírása, kontakt• Social dobozok• Kategóriák, _fontos_ tagek• Legolvasottabb bejegyzések• Legutóbbi hozzászólások
  49. 49. A rossz címkézés iskolapéldája
  50. 50. LáblécLépjünk túl a nézeten, hogy a lábléc csakazért kell, hogy valami legyen az oldal alján.• 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énekfenntartásához (portfolió, legolvasottabb posztok,legfrissebb kommentek, twitter, illusztráció... )
  51. 51. 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ő)
  52. 52. 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ó
  53. 53. Blogszolgáltatók:• Nem kell törődnöd szerverbeá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ésilehetőség
  54. 54. Magazin
  55. 55. DefinícióOlyan szerkesztett kiadvány, ahol nem a gyorshírfeldolgozás, up-to-date információkszolgáltatása az elsődleges.Hosszabb, mélyebben körüljárt, a napiaktualitásokhoz nem feltétlenül kapcsolódótartalmakat olvashatunk rajta.Blog Magazin Hírportál
  56. 56. Minimál fejléckategóriákkal, kiemelve,hogy hol vagyunk éppen
  57. 57. Vezető + 4 kiemelt cikk
  58. 58. Blogszerűen listázotttartalom
  59. 59. Legolvasottabb,ajánlott,kommentekTovábbiposztok
  60. 60. Kategória dobozTag szerintiszűrés
  61. 61. “Lifestyle”cikktípuskategóriadobozzal
  62. 62. KapcsolódóanyagokMegosztásKommentLapozó
  63. 63. Következő előadás:a hírportál A tartalomszolgáltatás nehézsúlyú versenyzője

×