WEB konferencija dr. Sigitas Drąsutis Multimedijos inžinerijos katedra [email_address] Web 2.0 dizainas
Kas čia kalba?
Ar Jūs vis dar Web 1.0?
Dizaino ypatumai
1. Paprastumas  <ul><li>Web 2.0 dizainas yra koncentruotas, švarus ir paprastas.  </li></ul>
2. Informacijos centravimas I  <ul><li>Svetainės, kuriose informacija yra centruota, atrodo paprastos, ryškios ir atviros;...
2. Informacijos centravimas II  <ul><li>Facebook.com – 981px </li></ul><ul><li>Twitter.com – 1000px </li></ul><ul><li>Yaho...
3. Mažiau stulpelių  <ul><li>Patartina naudoti 2 stulpelius, daugiausiai – 3; </li></ul><ul><li>Kuo mažiau stulpelių tuo p...
4. Atskirta puslapio antraštė  <ul><li>Ryški antraštė sako: &quot;Čia yra puslapio pradžia”.  </li></ul><ul><li>Ryški pusl...
5. Vientisi ir ryškūs ekrano elementai  <ul><li>Tokios sritys daromos ryškios ir atskirtos nuo kaimyninių; </li></ul><ul><...
6. Paprasta navigacija  <ul><li>Puslapio navigacija - meniu, kuris kiekvienoje svetainėje yra kaip statinė sritis ir aiški...
7. Paryškinti logotipai  <ul><li>Aiškus, ryškus logotipas - pritraukia dėmesį, nuteikia ir sudaro pirmą įspūdį.  </li></ul>
8. Didesnis tekstas  <ul><li>Daugelis &quot;2.0&quot; web svetainių turi didesnį tekstą nei senesnės svetainės.  </li></ul>
9. Paryškinto teksto įžangos <ul><li>Paryškintos antraštės arba temos aprašai pabrėžia informacijos svarbą, atkreipia dėme...
10. Ryškios spalvos  <ul><li>Jos patraukia akį. Naudojamos suskaidyti puslapį į atskiras dalis ir paryškinti svarbius elem...
11. Tikroviški paviršiai  <ul><li>Paviršių efektai (šešėliai, gradientai, atspindžiai) padeda sukurti tikroviškumo, realum...
12. Gradientai  <ul><li>Gradientai pagyvina paviršius, kurie priešingu atveju atrodytų plokšti ir nuobodūs.  </li></ul>
13. Atspindžiai  <ul><li>Naudojami pašviesėjimams išgauti, kai šviesa atsispindi nuo daikto;  </li></ul><ul><li>Atspindžia...
14. Patrauklios ikonos  <ul><li>Ikonos yra labai svarbios &quot;2.0&quot; dizaine. Jų naudojama mažiau, tačiau stengiamasi...
15. Ryškios žvaigždės  <ul><li>Jos veikia gerai, tačiau kaip ir visur reikalingas saikas;  </li></ul><ul><li>Viena žvaigžd...
Aktyvūs ir pasyvūs tarpai
Prekinio ženklo pozicionavimas <ul><li>Pigu </li></ul><ul><li>Prabangu </li></ul>
Prekinio ženklo palyginimas
Pabaiga
Upcoming SlideShare
Loading in …5
×

Sigitas Drąsutis

1,372 views

Published on

  • Be the first to comment

  • Be the first to like this

Sigitas Drąsutis

  1. 1. WEB konferencija dr. Sigitas Drąsutis Multimedijos inžinerijos katedra [email_address] Web 2.0 dizainas
  2. 2. Kas čia kalba?
  3. 3. Ar Jūs vis dar Web 1.0?
  4. 4. Dizaino ypatumai
  5. 5. 1. Paprastumas <ul><li>Web 2.0 dizainas yra koncentruotas, švarus ir paprastas. </li></ul>
  6. 6. 2. Informacijos centravimas I <ul><li>Svetainės, kuriose informacija yra centruota, atrodo paprastos, ryškios ir atviros; </li></ul><ul><li>Nereikia perdozuoti informacijos. </li></ul>
  7. 7. 2. Informacijos centravimas II <ul><li>Facebook.com – 981px </li></ul><ul><li>Twitter.com – 1000px </li></ul><ul><li>Yahoo.com – 972px </li></ul><ul><li>Youtube.com – 970px </li></ul><ul><li>Apple.com – 980px </li></ul><ul><li>Msn.com – 972px </li></ul><ul><li>eBay.com – 960px </li></ul><ul><li>Blogger.com – 750px </li></ul><ul><li>Delfi.lt – 999px </li></ul><ul><li>Lrytas.lt – 1002px </li></ul>
  8. 8. 3. Mažiau stulpelių <ul><li>Patartina naudoti 2 stulpelius, daugiausiai – 3; </li></ul><ul><li>Kuo mažiau stulpelių tuo paprastesnė atrodo išvaizda, tuo ji yra ryškesnė ir atviresnė. </li></ul>
  9. 9. 4. Atskirta puslapio antraštė <ul><li>Ryški antraštė sako: &quot;Čia yra puslapio pradžia”. </li></ul><ul><li>Ryški puslapio pradžia suteikia pirmą įspūdį, pabrėžia svarbą ir pritraukia dėmesį. </li></ul>
  10. 10. 5. Vientisi ir ryškūs ekrano elementai <ul><li>Tokios sritys daromos ryškios ir atskirtos nuo kaimyninių; </li></ul><ul><li>Paprasčiausias būdas tai padaryti yra su spalva. </li></ul>
  11. 11. 6. Paprasta navigacija <ul><li>Puslapio navigacija - meniu, kuris kiekvienoje svetainėje yra kaip statinė sritis ir aiškiai apibrėžia save kaip navigaciją. </li></ul><ul><li>Ji turi būti lengvai pastebima, aiški ir pasiekiama. </li></ul>
  12. 12. 7. Paryškinti logotipai <ul><li>Aiškus, ryškus logotipas - pritraukia dėmesį, nuteikia ir sudaro pirmą įspūdį. </li></ul>
  13. 13. 8. Didesnis tekstas <ul><li>Daugelis &quot;2.0&quot; web svetainių turi didesnį tekstą nei senesnės svetainės. </li></ul>
  14. 14. 9. Paryškinto teksto įžangos <ul><li>Paryškintos antraštės arba temos aprašai pabrėžia informacijos svarbą, atkreipia dėmesį ir nurodo esmę. </li></ul>
  15. 15. 10. Ryškios spalvos <ul><li>Jos patraukia akį. Naudojamos suskaidyti puslapį į atskiras dalis ir paryškinti svarbius elementus. </li></ul>
  16. 16. 11. Tikroviški paviršiai <ul><li>Paviršių efektai (šešėliai, gradientai, atspindžiai) padeda sukurti tikroviškumo, realumo, “išbaigtumo” įspūdį; </li></ul><ul><li>Jie mums primena supančio pasaulio dalykus, juos kurdami užprogramuojame norui paliesti. </li></ul>
  17. 17. 12. Gradientai <ul><li>Gradientai pagyvina paviršius, kurie priešingu atveju atrodytų plokšti ir nuobodūs. </li></ul>
  18. 18. 13. Atspindžiai <ul><li>Naudojami pašviesėjimams išgauti, kai šviesa atsispindi nuo daikto; </li></ul><ul><li>Atspindžiams kituose paviršiuose. </li></ul>
  19. 19. 14. Patrauklios ikonos <ul><li>Ikonos yra labai svarbios &quot;2.0&quot; dizaine. Jų naudojama mažiau, tačiau stengiamasi joms suteikti daugiau prasmės ir geresnę išvaizdą. </li></ul>
  20. 20. 15. Ryškios žvaigždės <ul><li>Jos veikia gerai, tačiau kaip ir visur reikalingas saikas; </li></ul><ul><li>Viena žvaigždė puslapyje turėtų būti maksimumas, nes kitaip ji praras savo pritraukiančią vertę. </li></ul>
  21. 21. Aktyvūs ir pasyvūs tarpai
  22. 22. Prekinio ženklo pozicionavimas <ul><li>Pigu </li></ul><ul><li>Prabangu </li></ul>
  23. 23. Prekinio ženklo palyginimas
  24. 24. Pabaiga

×