Your SlideShare is downloading. ×
0
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Web Site Design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Web Site Design

1,418

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,418
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
28
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Технически университет - СофияПроектиране и създаване на Web 2.0 сайт доц. М. Иванова1
  • 2. Съдържание Какво е уеб сайт? Aрхитектура на уеб сайт Съвременни технологични решения Различни приложения на уеб сайтове2
  • 3. Уеб сайт - дефиниция Уеб сайтът е колекция от уеб страници, изображения, аудио/видео файлове и други обекти, които се хостват от един или повече уеб сървъри, достъпни през Интернет Уеб страницата е докумет, обикновено написан на HTML, който е достъпен през протокола HTTP, чрез който се предава информацията от уеб сървъра до уеб браузъра на потребителя3
  • 4. 4
  • 5. 5
  • 6. 6
  • 7. Видове уеб сайтове Малък  линеен  йерархичен начална страница Средно голям страници на основни секции  йерархичен  използа база от данни подстраници на секциите Голям  използва база от данни  използва система за управление на съдържание  използва система за управление на учебно съдържание7
  • 8. Типове уеб сайтове Лични уеб сайтове Информационни Корпоративни Блогове и онлайн дневници Форуми Онлайн магазини и сайтове за търгове Онлайн списания Сайтове за съхраняване и споделяне на файлове Социални мрежи Търсещи машини Портали, директории, жълти страници8
  • 9. личен9
  • 10. корпоративен10
  • 11. информационен11
  • 12. блог12
  • 13. форум13
  • 14. магазин14
  • 15. списание15
  • 16. споделяне на файлове16
  • 17. социални мрежи17
  • 18. търсеща машина18
  • 19. портал19
  • 20. Проектиране и създаване на Web 2.0 сайт Защо Web 2.0?  активизиране на икономията в уеб  ново ниво на интерактивност между уеб сайтовете и услугите от технологична гледна точка  социален феномен, произтичащ от новите типове онлайн общества и социални мрежи20
  • 21. На какви критерии трябва да отговаря един Web 2.0 сайт? Простота, естественост Централен план По-малко колони Отделяне на горната секция Изпъкващи места в сайта Проста навигация Изпъкващо и запомнящо се лого По-голям текст Почернен въвеждащ текст Ярки цветове 3D области Градиент Рефлексия Привлекателни икони Мигащи места 21 Джаджи
  • 22. 1. Простота, естественост дизайнерът трябва да мисли за основните цели на сайта, като насочва очите на потребителя към малко, добре избрани визуални елементи с малко думи, да може да се каже колкото се може повече, като внимателно се подбират художествените изрази, за да се създаде желаното чувство да се избягват идеи за сайт, от които дизайнерът не може да предвиди реакцията на потребителя22
  • 23. 1. Простота, естественост Web 2.0 сайтът трябва да бъде фокусиран върху основната идея, изчистен и естествен пример на сайт, който съдържа ненужни елементи:  За да се достигне до желаната страница, е необходимо да се направят няколко стъпки  Потребителят остава с впечатлението, че интерфейсът на сайта не е лесен за разбиране23
  • 24. 1. Простота, естественост Защо принципът за простота и естественост е добър? Уеб сайтовете имат цели и всички страници подцели Трябва да се грабне вниманието на потребителя, което не е никак лесно Основната задача на проектанта е да помогне на потребителя да намери необходимата му информация Обектите върху екрана привличат потребителите. Повече обекти – повече съобщения за потребителите, но става по-трудно откриването на важния за потребителя обект За да се комуникира правилно с потребителя, трябва да се намери подходящо решение с възможно по-малко обекти. Това е икономия и простота 24
  • 25. 1. Простота, естественост Как да се постигне това? Премахнете ненужните компоненти Пробвайте различни решения, които водят до един и същи резултат, но са по-прости и естествени Визуалните елементи привличат вниманието на потребителя, затова ги използвайте в основната част на страницата и бъдете внимателни при поставянето им върху нецентрални части Използвайте визуални елементи, за да предадете важна информация, а не ги използвайте просто за декориране – линии, думи, сенки, фигури, цветове25
  • 26. 1. Простота, естественост Следва пример на сайт, при който не е спазен този принцип Yaxays - интерфейсът използва огромно количество пиксели и по-голяма част от тях се използват за декорация, като част от фон Малко пиксели се използват от потребителя, за да намери, да разбере информацията или да взаимодейства със сайта26
  • 27. 27
  • 28. 1. Простота, естественост Простотата означава: Използвайте толкова пиксела, от колкото се нуждаете, за да улесните комуникацията с потребителя Може да използвате необработена информация или обработена от вас информация Необработена информация – новини, факти, цени, разписание, банкова информация Обработена информация включва – първото впечатление за компанията, усещането за това колко надежден партньор е, или дали избрания продукт е правилния за вас Независимо от вида на предлаганата от вас информация, използвайте внимателно всеки пиксел Следват няколко примера за добра използваемост на пикселното пространство: 28
  • 29. 29
  • 30. 30
  • 31. 31
  • 32. 32
  • 33. 33
  • 34. Коментар Сайтът на Alex Dukals е оригинален, интересен и привлекателен. Използвани са различни визуални техники за привличане на вниманието, за привличане съпричастността на потребителите към неговото изкуство Дизайнът е прост и изчистен Хипервръзките са използвани разумно за достъп до другите страници34
  • 35. 2. Централен план Сайтовете са центрирани в прозореца на браузъра . Много малко на брой сайтове днес заемат целия екран или са изместени в ляво. Защо централният план е добър? Спазен е принципът за икономичност на пиксели ( и съдържание), върху потребителя не е упражнен натиск за поемане на голямо количество информация Използвате по-малко пространство, за да кажете повече Кога и как да използвате централен план? Използвайте централен план, даже и когато няма основателна причина Използвайте творчески пространството, дори когато разполагате реклами 35
  • 36. централен план36
  • 37. 3. По-малко колони Преди няколко години нормално се създаваха 3- колонни сайтове. 4-колонните не бяха приети. Днес – 2-колонните са често създаваните сайтове, максимум до 3 колони Защо използването на по-малко колони е по- добре? По-малкото на брой колони внасят естественост, водят до изпъкване на сайта. Комуникирайте с по- малко количество, но ясна информация Потребителят не чувства наведнъж целия екран, неговото внимание се заковава в центъра и постепенно обхожда екрана, затова не са необходими много колони37
  • 38. 38
  • 39. 39
  • 40. 40
  • 41. Коментар Apple е друг пример за елегантно и просто решение Изчистено решение, ефективна комуникация41
  • 42. 3. По-малко колони Как да изберем броя на колоните? Препоръчва се не повече от 3 колони Следват примери за ефективно използване на пространството при сайтове с повече колони42
  • 43. 43
  • 44. Коментар Amazon (UK) има две странични колони и 3-та центрирана колона с продуктите Всяка колона има точно предназначение - лявата е навигационна, дясната е с допълнителни обекти, средната е с продукти, които са разделени с бели линии, което не натоварва потребителя44
  • 45. 45
  • 46. Коментар Popurls.com съдържа информация ре-микс чрез хипервръзки към други сайтове, като digg и del.icio.us, използва 3 колони Под колоните има ред с популярни снимки от Flickr. 3-те колони и редът под тях са добро решение, ненатоварващо с излишна информация и цветове46
  • 47. 47
  • 48. Коментар Сайтът All Things Web2.0 използва 4 колони: 2 странични и 2 централни В този сайт потребителят не може да се ориентира къде най-напред да съсредоточи вниманието си. Всичко е с нисък приоритет (поради мрачния фон)48
  • 49. 4. Отделяне на горната секция Това означава отделяне на горната част на екрана от останалата Следват примери за открояване на горната част49
  • 50. 50
  • 51. 51
  • 52. 52
  • 53. 53
  • 54. 54
  • 55. 55
  • 56. Коментар Защо отделянето на горната секция е добре? Добре е да се знае къде започва страницата Цветът е добре да се откроява от останалата част В тази горна част може да се намира навигационния панел Добре е логото да се намира над навигационния панел56
  • 57. 57
  • 58. 58
  • 59. 59
  • 60. 5. Изпъкващи места в сайта Някои сайтове съдържат открояващи се области – не само горната част Подобно открояване може да се използва за: › Навигация › Фонови полета › Основното поле със съдържание › Други обекти › Пространство с хипервръзки Възможно е сайтът така да се проектира, че изпъкващите области значително да се открояват от другите Най-добрият начин за постигане на това е избор на подходящ цвят 60
  • 61. 61
  • 62. Коментар Белите пространства също могат да бъдат ефективни Рискът с открояващите се цветове е, че те винаги изпъкват и веднага се забелязват , другите обекти от страницата ще останат незабелязани Поставянето на ясно съдържание върху бяло пространство допринася за ненатоварване и отпускане на потребителя62
  • 63. 63
  • 64. 64
  • 65. 6. Проста навигация Постоянна навигация – върху всички страници от сайта навигацията да бъде на едно и също място, с лесна достъпност 2.0 дизайнът изисква глобална навигация, ясна и очевидна Инлайн хипервръзки (хипервръзки в текста) трябва да са видими и откроими от останалия текст65
  • 66. 66
  • 67. 67
  • 68. 68
  • 69. 69
  • 70. 70
  • 71. 6. Проста навигация Защо простата навигация е по-добра? Потребителят трябва да идентифицира навигационния панел, който му дава следната важна информация: › Къде се намира той? › Къде другаде може да отиде? › Каква възможност има, за да се извърши това? Следвайки принципа за простота и намаляване на излишните обекти, най-добрата изчистена навигация е тази, която:  Има постоянна, непроменяща се позиция спрямо съдържанието  Навигацията използва различни от останалата част цветове, тонове и контури  Навигационните полета да се създадат по-големи и изпъкващи от основното съдържание  Текстът върху навигацията да бъде недвусмислен и ясен 71
  • 72. 6. Проста навигация72
  • 73. 7. Изпъкващо и запомнящо се лого Логото трябва да привлече вниманието при първо посещение В Web 2.0 логото може да бъде твърде обширно73
  • 74. 7. Изпъкващо и запомнящо се лого74
  • 75. 7. Изпъкващо и запомнящо се лого Защо? Чрез изпъкващо и запомнящо се лого се казва “Това сме ние, доверете ни се” Кога и как? Логото трябва: › да подсказва контекста, в който се използва и в какви други случаи може да се използва › да се разпознава и отличава лесно от другите › да изразява конкретната марка и да се използва като знак за качество75
  • 76. 8. По-голям текст По-голяма част от Web 2.0 сайтовете се характеризират с по-голям текст Ако запълните едно и също пространство с по-малко обекти, то ще имате повече място Когато имате повече място, то може да направите важните обекти по-големи и по-неважните по-малки По-големите обекти ще се забелязват по-добре и по- лесно Подобен ефект може да се използва при заглавията, при основни изречения Повечето хора предпочитат по-голям текст – например хора пред голям LCD екран, хора стоящи по-далече от екрана или хора, които просто преглеждат страниците По този начин ще привлечете повече потребители върху сайта си 76
  • 77. 77
  • 78. 78
  • 79. 8. По-голям текст Кога и как да използваме голям текст? Не може целия текст да се направи с по-голям размер – това ще изглежда зле За да използвате по-голям текст, ще трябва да премахнете някои обекти и да направите страницата по-проста Трябва да имате причина, за да направите определен текст по-голям от друг Този текст трябва да има определено значение и да бъде полезен Ако не е необходимо използването на по-голям текст, то да не се използва Ако е необходимо да поместите голямо количество информация върху една страница, то текстът естествено да бъде по-малък 79
  • 80. 9. Встъпителен почернен текст Заглавието може да бъде почернено Или някакво важно съобщение Този текст по-добре да бъде съчетан с графика, отколкото само обикновен текст, защото дизайнерите държат много на визуалното възприемане на страниците80
  • 81. 81
  • 82. 82
  • 83. 9. Встъпителен почернен текст Кога да се използва почернен текст? Само ако искате да наблегнете на нещо важно (ако нямате нещо важно, то помислете за целта на тази страница) Ако желаете някакво съобщение да бъде забелязано от пръв поглед, то го почернете, в този случай използвайте прост фон83
  • 84. 10. Ярки цветове Ярките цветове се набиват на очи. Използвайте ги, за да разделите страницата на ясни секции и за да подчертаете важните елементи Когато имате изчистен дизайн, то може да използвате по-ярки цветове, за да разграничите отделни области, които искате да бъдат забелязани от потребителя84
  • 85. 85
  • 86. Коментар Сайтът Colorschemer разделя страницата на секции чрез ярки цветове върху неутрален фон86
  • 87. 87
  • 88. Коментар Apples design – този сайт има баланс между тъмни тонове и ярки цветове, които привличат окото По-тъмните места и ярките цветове са използвани пестеливо, за да покажат важно съдържание88
  • 89. Цветните места са важни за комукацията с потребителя На следващите примери, цветовете не са ярки, но са силни Зеленото е използвано, за да покаже “качество” и “здраве”89
  • 90. 90
  • 91. 91
  • 92. Коментар Този сайт продава дрехи за туризъм за жени , меките цветове засилват това послание92
  • 93. 10. Ярки цветове Следва пример на дизайн на страница, която използва обширни области с интензивен цвят отстрани Резултатът е, че вниманието е насочено извън същественото съдържание93
  • 94. 94
  • 95. 10. Ярки цветове Използвайте ярките цветове умерено Ако използвате силни цветове, за да привлечете вниманието, това ще е добре само ако има достатъчно неоцветено място Ако искате всичко да привлича вниманието, тогава потребителят ще се обърка, сайтът няма да се възприеме добре95
  • 96. 11. 3D ефекти Много от Web 2.0 сайтовете използват 3D ефекти, за да подобрят дизайна Това действа добре и ние не знаем защо Реалистичните ефекти водят до по-реално възприемане на обектите Обектите се възприемат по-завършени Могат да ни напомнят за реални природни ефекти – водопад, изгрев96
  • 97. 3D ефекти97
  • 98. 11. 3D ефекти Кога и как да се използват 3D ефекти? Да се използват внимателно и да не се прекалява Те не могат да бъдат приложени към всички обекти Да се избягва използването на 3D ефекти, поради: Заемат повече място върху страницата Може да се пренасочи вниманието на потребителя към по-несъществена част от съдържанието 98
  • 99. 12. Градиенти В Web 2.0 се използват по-често градиенти Защо са полезни? Придават мекота на областите, които биха изглеждали плоски99
  • 100. 100
  • 101. 101
  • 102. 12. Градиенти Може да се създаде настроение чрез преливане на цветове – от по-светло към по-тъмно102
  • 103. 103
  • 104. 12. Градиенти Използвани като фон, може да се създаде илюзия за разстояние Преливане от бял в син цвят, може да предизвика ефект на достъп до хоризонт104
  • 105. 12. Градиенти Те са използвани в горната част на фона на страницата, където разграничават основната част от горната част105
  • 106. 106
  • 107. 107
  • 108. 108
  • 109. 13. Рефлексия (отражения на светлината) Илюзията за рефлексия се получава чрез използване на градиент Получават се реалистични изображения Следват примери:109
  • 110.  Пластичен ефект в навигацията110
  • 111.  Ефект за лъскавост чрез градиент111
  • 112.  Пластичен ефект – създава ефект за заобляне на върхове112
  • 113.  Правоъгълно изображение изглежда като значка Определен ъгъл – създава илюзия за динамика113
  • 114.  Бутон, използващ отражение на светлината114
  • 115.  Отражение като от стъкло115
  • 116.  Огледален ефект116
  • 117.  Огледален ефект върху цветен фон117
  • 118.  Огледален ефект118
  • 119.  Ефект на отражение в ъгъл119
  • 120. 14. Привлекателни икони Иконите са полезни, когато лесно се разбира значението им В останалите случаи, обикновеният текст е по-добрия вариант Сега вместо икони в навигацията, се използва текст Web 2.0 дизайнерите са резервирани към иконите Следват няколко примера:120
  • 121.  Изчистени и ясни икони Реални121
  • 122.  Детайлизирани икони122
  • 123. 15. Мигащи области Мигащите области се използват за означаване на нещо важно И за привличане на вниманието на потребителя Най-добре е използване на една мигаща област върху една страница123
  • 124. 15. Мигащи области124
  • 125. Сайтове на фирми125
  • 126. 126
  • 127. Социални мрежи127
  • 128. 128
  • 129. 129
  • 130. Блогове130
  • 131. 131
  • 132. 132
  • 133. 133
  • 134. 134
  • 135. 135
  • 136. 136
  • 137. 137

×